Skip to content
Submitted about 1 year ago

Product preview card

andiaz•150
@andiaz
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using SASS for the first time felt good! This made it easier to read CSS variables. Was quite easy to setup together with Node.js.

It also felt good to go through the design section by section and feeling in control when implementing the design.

I did try a new CSS reset that I found which honestly made things more complicated and gave me more things to reset, ironically enough. So in the end I decided to stick with a basic CSS reset that just removed the default margins and paddings on elements, and set the same box-sizing on everything :)

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

The trickiest part by far was making the images responsive, and also swapping the images on desktop vs mobile. I am not sure I have done it in the best way though, but it seem that the images are shown as intended! I also spent some time to test the design in the browser on mobile resolutions and with different screen orientations and found some small bugs thanks to that, which I fixed.

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

Generally any best practices I should follow, in particular for handling the images. Also general feedback is always appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • rafi b•260
    @raficode2303

    Does the layout look good on a range of screen sizes? the site is almost 100% like the design 👍. good work.

    • for some reason the site not work wekll as expected at Mozila Firefox browser
    • need to add focus state for the add-to-cart button interactive element

    improvements could be made:

    • try to use css ::before pseudo-element for adding the cart-icon instead using <img /> tag

    • try to use <picture> atg with srcset attribute insted using 2 <img> tags for the product image

    • is better to use css min-height instead height at .container class

    • try to use CSS custom properties bonus: try to build it with css GRID instesd Flex

    keep to build 👷

    Marked as helpful

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