Skip to content
Submitted 5 months ago

Social Links Card using basic HTML & CSS

Andy•140
@AStombaugh
Preview site (opens in new tab)View code (opens in new tab)
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?

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-IPosted 5 months ago

    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
    Andy•140
    @AStombaughPosted 5 months ago

    @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-IPosted 5 months ago

    @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
  • Ejiofor John•450
    @echocode1Posted 5 months ago

    its ok

    0

Please log in to post a comment

Log in with GitHub

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