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 Preview Card

Philipp 130

@Obom23

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 challenges did you encounter, and how did you overcome them?

I had problems with the responsive design, especially with the desktop version. It is displayed differently (better) on localhost than on the GitHub page. On the github page, the footer is outside of the main-container, which is not the case locally.

What specific areas of your project would you like help with?

Any feedback, what I could improve

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello Phillip - @Obom23 😙😙😙😙

Here is my feedback on what can be improved:

  • You used height: 100vh on body, this will make the height unresponsive (when screen size is small you can't scroll). Because this is an much bigger element that contains all other elements (could be called a container), you should use min-height: 100vh instead.
  • Use more semantic HTML markups, for example .description should be wrapped by a p - paragraph and footer is incorrectly used to wrap .price, .add-to-cart-btn (these 2 elements is important part of the card a.k.a call to action so it's does not make sense be a footer) - instead you can just wrap it inside div or better don't wrap it because the structure does not need to change (they stay vertically on the same side!).
  • You card is sooo huge compare to the design, maybe add a little padding to your container element to give it space!

Still many more small details that need to be improved, keep practicing and you will reach there.

Also, if you wanted, you can check out my solution for this challenge for more references.

Hope this help you on your path, cheerss 🔥

Marked as helpful

1

Philipp 130

@Obom23

Posted

@haquanq Thank you for the detailed feedback!

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