Submitted 2 months ago

Social Media Card

larsenwald•30

@larsenwald

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Not really proud of anything. I didn't leverage layout tools like flexbox or grid as much as I would've liked. Everything was laid out using paddings and margins.

What challenges did you encounter, and how did you overcome them?

I didn't come across a challenge.

What specific areas of your project would you like help with?

Writing CSS with responsiveness best practice. I want to be so good at naturally making my layouts responsive with the built-in tools CSS offers without deferring to media queries, and only using media queries when absolutely necessary.

Community feedback

Aakash Verma•9,520

@skyv26Posted 2 months ago

Hi @larsenwald, 👋

Thanks for sharing your project! You've made a good start, but there are a few areas where improvements will help you build a more polished and semantically correct structure. Here's my feedback and suggestions, with practical explanations and code snippets to make things clearer:

1️⃣ Move CSS to an External File

Currently, your CSS code is inline in the HTML file. Instead, it’s best practice to use a dedicated style.css file.

Why?
Think of your CSS as the outfit for your HTML content. Just like you store clothes in a closet for better organization, separating CSS improves readability, maintainability, and scalability of your project. It also enables reusability across multiple pages if your project grows.

Refactored Code Example: Move the CSS code from your HTML file and create a style.css file:

HTML File (index.html):

<head>
  <link rel="stylesheet" href="style.css" />
</head>

style.css:

/* Move all CSS rules here */

2️⃣ Use Semantic Tags for Accessibility

In your HTML, you’re using a <div> with buttons for your social media links. While this works visually, it’s not semantically correct. Use a <ul> and <li> to organize these links properly and wrap each link with an <a> tag.

Why?
Imagine a screen reader is like a human guide explaining a webpage to a visually impaired user. It relies on proper semantics to provide accurate information. By using <ul> for a list and <a> for links, you're telling the guide, “Hey, this is a list of links!” This makes navigation easier for users relying on assistive technologies.

Refactored Code Example:

<ul class="social-links">
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Instagram</a></li>
</ul>

CSS:

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.social-links li a {
  display: inline-block;
  padding: 10px 15px;
  background: var(--grey-700);
  color: var(--white);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
}

.social-links li a:hover {
  background: var(--grey-500);
}

3️⃣ Avoid Setting Fixed Heights for Links

In your button styles, you’ve set a height: 40px. Instead, use padding to let the content dictate the height.

Why?
Think of a container holding water. If the container’s height is fixed, you risk overflow or unused space. By using padding, the container adjusts to the content, making it more flexible and easier to maintain.

Refactored Code Example:

.social-links li a {
  padding: 10px 20px; /* Adjust height using padding */
  border-radius: 5px;
  border: none;
  background: var(--grey-700);
  color: var(--white);
  font-weight: 600;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, transform 50ms;
}

4️⃣ Let Content Decide the Card Height

In your <main> styles, you’ve used a fixed height of 560px. Instead, let the content determine the height by using padding and flexible layout techniques.

Why?
A fixed height can lead to unnecessary blank space or cut-off content, especially if the text or layout changes. It’s like wearing a pair of shoes that don’t fit—uncomfortable and limiting!

Refactored Code Example:

main {
  background: var(--grey-800);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 35px; /* Adjust spacing */
  align-items: center;
}

Additional Tip: Use Prettier for Code Formatting

To improve readability and structure, use the Prettier extension for your code editor. It automatically formats your HTML, CSS, and JS, saving you time and effort. Think of it as a cleaning robot for your code—it keeps everything tidy without manual work.

Great job so far! With these changes, your project will be more semantic, maintainable, and accessible. Let me know if you have questions or need further assistance! 🚀

Best,
Aakash

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord