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

Solução criada com Grid-css e MediaScreen- css

@Yago14

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Yashi-Singh-1

Posted

Semantic HTML: It would be great to use elements like <main> and <section> to give your HTML a bit more meaning. It helps with readability and SEO.

Accessibility: Make sure your images have clear alt text. Also, add focus styles for buttons and check that text contrasts well with the background for those with visual impairments.

Responsive Design: Your layout adapts well to different screen sizes, which is great. The media queries ensure everything looks good on both desktops and mobiles.

Code Quality: The code is clean and well-organized. Adding comments in your CSS could make it even easier to follow.

Design Consistency: The overall design is spot-on and aligns well with typical product card styles. It looks polished and functional!

Marked as 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