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

HTML & CSS for the win!

Dan 220

@DanRHatfield

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


The part that was most difficult was figuring out the optimal sizes for the text. The only initial hint we were given was that the paragraph should be 14px, everything else was based off that.

Enjoyed the project. Please let me know how I did.

Thanks!

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey there, Dan! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this challenge! 👍

One or two tiny things I'd like to suggest are,

  • Switching to the mobile view of the card component slightly sooner to prevent a horizontal scroll bar from appearing along the bottom of the page shortly before the layout switches from the desktop view to mobile.
  • Using the font family from the original design for the text in the "Add to cart" button (but that's a small detail, really).

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

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