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

Product Preview Card using HTML and CSS

Rajeev 70

@trajev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

  • explored responsiveness
  • hover effects

Community feedback

P

@Kein-Internet

Posted

It is responsove and the hover effect is good, nice. Here are some takeaways from this:

  • You must use rem instead of px when setting the margin/gap, padding, and font-size so that they accomodate the users defult broswser font-size. Doing this is necessary for making an accessible site.

  • On accessibilty, please use appropriate HTML semantics and less <div> and <p> tags, for examlpe use you could wrap your content in a <section> tag rather than a <div class="left"> tag. One exception is the use of <h2> tag, you can use <p> instead as it's just a price, not a title/subsection.

  • Use CSS variables to increase readibility and reusibility.

  • You're missing the mobile app image, please add this to your code as to ensure your code accurately matches the design.

Marked as helpful

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