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

Desktop first workflow

@Abu-Sman

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Your corrections are always welcome

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello there! 👋

I'm afraid that it's not fully responsive yet. On 400px width, the cards do not have enough space to become a three-columns layout. So, I recommend adjusting the breakpoint of the media queries.

All the images are decorative images so you can leave the alt empty. For your information, the alternative text doesn't need to contain any words that are related to image because it's already an image element (the same as a link).

It's worth mentioning that wrapping all the cards with figure is not needed and I don't think it causes any accessibility issue(s), (don't just take my words, I recommend doing some testing with a screen reader). However, my recommendation is to use div instead.

Hope this helps.

0

Vanza Setia 27,795

@vanzasetia

Posted

@Abu-Sman No problem! 👍

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