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

@joaoeduardogomes

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 are you most proud of, and what would you do differently next time?

Making it actually work felt really good. Maybe next time I should try using grid instead of flexbox.

What challenges did you encounter, and how did you overcome them?

It was difficult to make the images change and fit the space it should like in the design images. The solution that worked was preventing the container from wrapping and changing the flex-direction to column instead.

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

Any suggestions and critics are welcome. I would like to know specially if there is a easier way to complete this challenge. Maybe I was trying to solve it the hard way without even noticing.

Community feedback

Fachrezi 140

@Fbeye04

Posted

Good job bro but I would give some suggestions like:

  • try wrapping the title both the h1 tag and paragraph tag in the hgroup tag, it will make it easier for you in styling.
  • besides that, you can also use the s tag for the initial price section, it will also be easier for you
  • for the “add to cart” text on the button, try wrapping it in the span tag.

As for the css, everything looks good as well as the appearance. Nice work!

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