Skip to content
Submitted 3 months ago

Social link profile using flex

tobytietphoto•50
@tobytietphoto
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?

This challenge took me a approximately an hour or two to complete in between working my day job.. The previous one took several days due to life and work. I was proud just being able to finish it rather quickly. I was definitely more organized in my approach to the project.

I definitely want to do this faster than last time if possible.

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

I had a problem with the social media links box/button sizes. They were all in different sizes. I googled and youtube the problem and saw that if I set the width of the parent and then set the width of the child using percentage. They would all consistently be the same size.

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

Please let me know if I did width for the social media links correctly. If there is a better way, I would love to know and anything in general that I can approve on. I'm happy to hear it!

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hi!

    The main thing that you can improve in the semantic. Those elements are links, so there is special tag for them - a with href attribute.

    Than there is special tags for every kind of lists - ul and ol ("unordered list" and "ordered list") which should contain li tags ("list item").

    So, semantically correct layout should be looks like this:

    <ul>
    <li><a href="#">It's a link here!</a></li>
    ...and more links here
</ul>

    Also to make your element responsive you shouldn't hardcode width and height. Instead of width you can use max-width - it allow element adjust to small screens. As for height - it's better not to specify it at all. Just let the content define the height of the container =)

    Hope that helps! Good luck and keep doing =)

    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