Skip to content
Submitted 10 months ago

Responsive Social Links (html & css only)

Cyntia Muniz•10
@cmooniz
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 did it very quickly, it flowed a lot. I intend to do it with tailwind css

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

I found a better way to make it responsive, without having to use @query

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

I would like to find the best way to solve this code, if it hasn't already been done.

Community feedback

  • Brian Michael Poblete•490
    @Brian-PobPosted 10 months ago

    Hi Cyntia! Good job on matching the supplied design with your solution!

    I do have some suggestions for the HTML

    • I can see you have your a tags inside buttons. This is not ideal as a tags and buttons have different semantic meanings and screen readers may exhibit unexpected behavior. So even though the element looks like a button, it does not have to be an actual button element.
    • When you use an a tag, you need to have text inside of it.
    • Since you have a list of links, you could use an unordered list ul and list items li to add semantic meaning to your html tags.
    • In the end, you would have a single ul that contains a bunch of li, each containing a single a. Kind of like this:
    <ul>
  <li>
    <a href="example.com"> Example </a>
  </li>
   <li>
    <a href="example.com"> Example </a>
  </li>
  <li>
    <a href="example.com"> Example </a>
  </li>
</ul>

    Hope this helps!

    Marked as helpful
    0
    Cyntia Muniz•10
    @cmoonizPosted 10 months ago

    @Brian-Pob Thank you for commenting, I was in doubt about that at the moment.

    1

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