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

Responsive product card using plain CSS and HTML

@liammalby

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


I have combined flex and grid to create this card, however perhaps there is a simpler way? I also feel there is probably a more efficient way to write the CSS, as I have duplicated basically the entire page for the two media queries for the screen sizes.

Community feedback

Tux3er 760

@Tux3er-Isma

Posted

Hi Liam

Congrats for completing this challenge and have a nice code 😉🎉

I will give you some tips for your next challenge 💡:

  • I recomend you to use a css reset like the normalize.css 📖

  • In hover states use cursor: pointer; to get a better user experience. You have to add this in the btn

You have done it very well for combining grid and flexbox, great job 😉👍🏻

I hope this tips will help you a little in the future 🖐🏻⌨️

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