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

3 Column Card Component using CSS Grid

@vitoraragone

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


Feel free to give me some feedback! I'm new in this Dev World and some guidance will be surely welcome!

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Vitor Aragone! 👋

Great work on this challenge! 👍

A couple of things I'd like to suggest are,

  • Leaving the alt text for the icons in the card component empty. That will cause screen readers to ignore those images since they are not important to the content of the page and do not need to be read by the screen readers.
  • Making sure to add some space between the top and bottom of the card component in the mobile view of the site.
  • Using only one h1 tag per page. This is a good practice since there should be only one most important heading on a page. You can use less-important headings tags (such as h2 and h3) for the headings in this card component.
  • Switching to a the mobile view slightly sooner in order to avoid having a horizontal scroll bar appear along the bottom of the page. 🙂

Hope this helps. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

@vitoraragone

Posted

@ApplePieGiraffe really thanks for the suggestions! They will be very helpful 😊

1

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