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

Responsive Social Links (html & css only)

@cmooniz

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 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-Pob

Posted

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

@cmooniz

Posted

@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
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