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 mobile-first solution using CSS grid and Flexbox

P

@alonsovzqz

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 specific areas of your project would you like help with?

  • What would be the best way to handle the items in the list? I used anchor HTML tag but would it worth to use buttons?
  • What approach did you recommend for desktop? I only increased the padding but it's almost not noticeable.

Community feedback

@Brian-Pob

Posted

Great job on your solution, Alonso!

It's important to make a distinction between <button> and <a> tags because tools like screen readers behave differently depending on what kind of tag they encounter.

In this case, it's better to use the a tag since you are creating links and that is what a tags are meant for. If you used a button, then you would need to put in extra effort to rework the html and css to behave like a button.

In general, it's easier to develop and better for accessibility to use the appropriate tag.

Hope this helps!

Marked as helpful

1

P

@alonsovzqz

Posted

@Brian-Pob thank you so much! That’s actually what I was intended to do, make it accessible and add more a11y markup since I think it’s a must on every project and not sure what else might be good to add for make it more accessible

1
Edper 40

@edper

Posted

Nicely done! Button or anchor would not matter much here. Nice use of list there instead of <div> with class.

1

P

@alonsovzqz

Posted

@edper thank you so much! Really appreciated it 🙏🏼

0

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