Submitted almost 3 years ago

Mobile-first and responsive four-card-feature section

HYDROCODER• 555

@HYDROCODER

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

HYDROCODER• 555

@HYDROCODER

Posted almost 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..

Patrick• 14,325

@palgramming

Posted almost 3 years ago

⭐⭐⭐⭐⭐ Nice Job! Looks Good!

HYDROCODER• 555

@HYDROCODER

Posted almost 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?

Patrick• 14,325

@palgramming

Posted almost 3 years ago

@HYDROCODER They seem more decorative then adding any informational value

Please log in to post a comment

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