Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Card using basic HTML & CSS

P
Andy 140

@AStombaugh

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I tried to keep the HTML nice and simple so it was easier to navigate and troubleshoot and focus more on using the baseline styling in my CSS

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

None that I can think of, tried to keep myself from overcomplicating the code and I think I managed to do that.

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

Ensuring that I used correct semantic HTML, especially with regards to accessibility since that was a huge problem on my last project.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

This is a list of the links, so it's better to use ul tag with li here =) Something like this:

<ul>
    <li><a href="#">I'm a link!</a></li>
    <li><a href="#">I'm a link!</a></li>
    <li><a href="#">I'm a link!</a></li>
    <li><a href="#">I'm a link!</a></li>
    <li><a href="#">I'm a link!</a></li>
</ul>

And I recommend you to use min-height for the body tag in case if the content will be lager than user's screen.

By the way, that's cool that you pay a lot of attention to details =)

Marked as helpful

1

P
Andy 140

@AStombaugh

Posted

@Alex-Archer-I

Thank you! You're right, I didn't even think about using a list for the links. That would have made much more sense.

Should I use min-width for the body as well instead of the fixed width: 100vw;?

1
Alex 3,130

@Alex-Archer-I

Posted

@AStombaugh

That isn't really necessary unless you assume that page will have content which could be wider that the screen. But that is very rare case and it's considered bad practice if the user have to scroll horizontally (that's why we are using media queries, responsive values and stuff).

Even more, you can not to set width for body at all as it equal screen's width by default. That could be said about height: auto and flex-direction: row - these are default values and you can freely omit them.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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