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 component

Bitu rauthā€¢ 40

@rauthbitu

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

romilaā€¢ 3,570

@romila2003

Posted

Hi Bitu,

Congratulations šŸŽ‰ for completing another challenge, your Card component looks great, and it is great that you used flex to center the card. I have some suggestions/issues I want to address:

  1. It is important to use the correct semantics which I have mentioned in your previous challenge.
  2. To make your button look more like a button, you can use the cursor property e.g. cursor: pointer;
  3. According to the design, the price '$149.99' is quite large to make the price stick out and that it is on a discount.
  4. I noticed that you took a desktop-first approach however I would strongly suggest taking a mobile-first approach as it will be easier for responsiveness and changing/rearranging any elements within your container, as you increase the screen size.

Overall, great work and wish you the best for your future projects so keep coding šŸ‘.

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