Mobile-first and responsive four-card-feature section
Design comparison
Solution retrospective
Used css grid to solve this one and realized it made things easier instead of making it complex once we get the hang of it; Used ul+li semantics instead of using just divs everywhere; I used a box-shadow different from the one given as making one always seems hard and weird in pondering with the spread, blur, using multiple shadows... I tried centering the whole thing vertically too...do give your feedback if you find something wrong with the code or the site itself.
Community feedback
- @HYDROCODERPosted over 3 years ago
I saw those 5 HTML issues and 4 of them are regarding missing the alt attributes of 4 images. I assumed them to be decorative so I just skipped the alt attribute and also used the aria-hidden to prevent screen readers from reading them in apple voiceover; turns out I must not skip the alt but include it with empty tags. Regarding the section with no heading: I used font weights instead of headings for those four words; this needs to change as it can prevent screen readers from understanding what the context is when I have clearly wrapped it with section tag.... so change the tag or use headings, either way.... learn more about such accessibility errors and never skip the alt attribute in images unless for very rare cases..
0 - @palgrammingPosted over 3 years ago
⭐⭐⭐⭐⭐ Nice Job! Looks Good!
0@HYDROCODERPosted over 3 years ago@palgramming Thank you for your compliment!…….I have a query on whether those icons are purely for decorative purposes so screen readers don't have to read their alt attributes, or should they?
0@palgrammingPosted over 3 years ago@HYDROCODER They seem more decorative then adding any informational value
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