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 Preview Card Component using React and Styled Components

@xolott

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


Do you see any improvement I can make to my code?

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @xolott 👋🏻

I have some suggestion to help you fix the accessibility, HTML and some other issues

  • Instead of <section>, I suggest using regular <div> for a couple of reasons. First, when you use a <section> you have to have a heading, like h1-h6. Next, <section> is for bigger parts of layout, such as, contact us about us, image gallery, etc. This will help you fix the HTML issue, but don't forget to generate a new report once you push the changes to GitHub.
  • What comes to accessibility, the car icons, should have aria-hidden="true”, because they are for decoration. For example, <img src="/static/media/icon-sedans.e7945028.svg" aria-hidden="true”>. You can read more about aria-hidden here.

I hope this was helpful 👨🏻‍💻 For the second project, you did a pixel perfect job, well done. Cheers 👾

Marked as helpful

0

@xolott

Posted

Thanks, @kens-visuals

Really appreciate your feedback. I applied your suggestions. There is only 1 error left about the h1 element, but I think this is an acceptable error for this challenge. Do you know any possible fix?

0
P
Ken 4,915

@kens-visuals

Posted

No problem @xolott ✌🏻

I believe it's because your headings are in h2 try to put them in h1

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