Skip to content
Submitted over 1 year ago

Responsive Social Links (html & css only)

Cyntia Muniz•10
@cmooniz
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Brian Michael Poblete•490
    @Brian-Pob

    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

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