Create Modern Social Links using HTML and CSS

Introduction

In today’s interconnected digital landscape, integrating social links into your website is essential for fostering engagement and expanding your online presence. Social links provide visitors with easy access to your social media profiles, allowing them to connect with you across various platforms. In this comprehensive guide, we’ll walk you through the process of creating sleek and functional social links using HTML and CSS.

Join Our Telegram Channel to Download the Project Source Code: Click Here

Step 1: Setting Up the Project Structure

Begin by organizing your project files. Create a new folder and name it appropriately. Within this folder, create two files: index.html and style.css. These files will serve as the foundation for our social links project.

Step 2: Explaining HTML

Now let’s dive into the HTML file (index.html). This file defines the structure and content of our social links. Here’s a breakdown of the key components:

HTML Structure: Utilize <div> elements to create containers for different sections of the social links, such as the main container and individual link containers.
Link Elements: Use anchor <a> tags to represent each social media platform. Assign appropriate href attributes to these tags to link to your respective social media profiles.
Icons or Text: You can choose to display social media icons or text labels for each link, depending on your preference and design aesthetic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing File</title>
</head>

<body>
<main>
  <img src="https://images.unsplash.com/photo-1534607287018-541c7d97748f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2MDY2ODF8&ixlib=rb-4.0.3&q=85" alt="">
  <h1>Jessica Randall</h1>
  <h2>London, United Kingdom</h2>
  <p>"Front-end developer and avid reader."</p>
  <menu>
    <li>GitHub</li>
    <li>Frontend Mentor</li>
    <li>LinkedIn</li>
    <li>Twitter</li>
    <li>Instagram</li>
  </menu>
</main>
</body>
</html>

Step 3: Explaining CSS Styling

Moving on to the CSS file (style.css), let’s explore how we can style our social links to achieve a visually appealing and cohesive design:

Define Variables: Utilize CSS variables to define primary colors, font styles, and spacing for consistent styling throughout the project.
Selectors and Styling: Target specific HTML elements using class selectors and apply styles to enhance their appearance. This includes defining colors, fonts, hover effects, and alignment.
Flexbox or Grid Layout: Use CSS flexbox or grid layout techniques to arrange the social links horizontally or vertically, depending on your layout preference.
Responsive Design: Implement media queries to ensure that your social links adapt seamlessly to different screen sizes, maintaining usability and visual consistency across devices.

@font-face {
  font-family: "inter";
  src: url("./assets/fonts/Inter-VariableFont_slnt\,wght.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: hsl(75, 94%, 57%);
  --secondary-light: hsl(0, 0%, 20%);
  --secondary: hsl(0, 0%, 12%);
  --secondary-dark: hsl(0, 0%, 8%);
  --white: hsl(0, 0%, 100%);

  font-family: "inter", sans-serif;
  font-size: 14px;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--secondary-dark);
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  width: 100%;
  max-width: 375px;
  margin: auto;
  padding: 3rem;
  background-color: var(--secondary);
  border-radius: 0.85rem;
}

img {
  width: 100%;
  max-width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  margin: auto;
  display: block;
  object-fit: cover;
}

h1,
h2,
p,
li {
  text-align: center;
}

h1,
p,
li {
  color: var(--white);
}

h1 {
  margin-top: 2rem;
  font-size: 1.9rem;
  font-weight: 700;
}

h2 {
  color: var(--primary-color);
}

h2 {
  font-size: 1.1rem;
  font-weight: 600;
}

p {
  margin: 1rem 0 1.5rem;
}

menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0.8rem 0;
  background-color: var(--secondary-light);
  border-radius: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

li:not(:last-child) {
  margin-bottom: 1rem;
}

li:hover {
  background-color: var(--primary-color);
  color: var(--secondary);
}

Conclusion

In conclusion, by following the steps outlined in this guide, you can create sleek and functional social links using HTML and CSS. These social links will not only enhance the user experience but also encourage visitors to connect with you on various social media platforms. Remember to customize the design and styling to align with your brand identity and overall website theme. Incorporating social links is a powerful way to expand your online presence and engage with your audience effectively.

Live Preview

See the Pen Social links profile by Davidson Aguiar (@davidsonaguiar) on CodePen.

Join Our Telegram Channel to Download the Project Source Code: Click Here

For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.

Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.

download code