Skip to content
Submitted about 2 months ago

Product Preview Card with Semantic HTML

Jawad Mahmud•150
@JawadM2002
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud to be able to use a media query for the product card, and I had fun making the HTML elements based on the main design.

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

The main challenge that I have encountered was with the alignment of the preview card, and whenever I try to change a value, it would stay in the place I didn't want it to. I initially had the same issue with the image, but managed to fix it by adjusting the width to be able to fit without overlapping the box.

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

Only some parts with the alignment of certain elements, but I think that's about it. Feel free to write down some suggestions. :)

Community feedback

  • emmadumbi•210
    @emmadumbiPosted about 2 months ago

    you gave it your best, buddy! the little recommendation is avoid setting height on stuffs and if required, I think min-height would be better. you should also check out my solution and give me your thoughts as well.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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