Responsive mobile-first solution using CSS grid and Flexbox
Design comparison
Solution retrospective
- 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-PobPosted 10 months ago
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 whata
tags are meant for. If you used abutton
, 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 helpful1@alonsovzqzPosted 10 months ago@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 - @edperPosted 10 months ago
Nicely done! Button or anchor would not matter much here. Nice use of list there instead of <div> with class.
1@alonsovzqzPosted 10 months ago@edper thank you so much! Really appreciated it 🙏🏼
0
Please log in to post a comment
Log in with GitHubJoin 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