Skip to content
Submitted 6 months ago

Product preview card using HTML CSS Flex Box Model Media Query

P
librart•150
@librart
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?

I learned how to use the root: {} selector and media query, but I still need to learn more about media query for responsive web.

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

I still need to learn more about media query for responsive web.

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

I think I would love to get feedback for all of my code from HTML structure to CSS styles, especially the responsive design.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    A few notes:

    1. The word perfume on your page appears to be used as a tag, so it would be better to use a p tag instead of an h2 tag.
    1. Try tackling this challenge using the grid system as well. It’s much easier and the results will likely be better. Plus, it's a great practice exercise.
    1. The Add to cart element should be a button in a larger context, as you don't want to change the webpage but rather perform an action.
    1. Regarding your button's styling, if you narrow your page, the text starts to wrap due to the horizontal padding. This can be fixed by using only vertical padding, like 15px 0, and adding justify-content: center;.
    Marked as helpful
  • yuriinyk•150
    @yuriinyk
    1. Semantic HTML: Good use of semantic tags like <main>, <article>, and <picture>. Consider adding aria-label for better accessibility. 2. Accessibility: Improve the :focus state visibility and add descriptive alt text for images. 3. Responsive Layout: Looks good on mobile and desktop. Test on tablets and refine typography scaling with clamp(). 4. Code Structure: Well-organized CSS with variables. Add comments for better readability and separate reusable styles from layout-specific ones. 5. Design Match: Faithful to typical product card designs. Double-check spacing and padding for pixel-perfect accuracy.

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