Skip to content
Submitted about 1 month ago

Product preview card component

Rido Septiawan•100
@riddsep
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?

Something to be proud of is being able to apply a style according to the design even though there are still things that need to be corrected

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

The challenge I face is how to implement responsive image height

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

all in all, maybe I need the best way to implement BEM and Sass

Community feedback

  • sofiasmnk•110
    @sofiasmnkPosted about 1 month ago

    I also struggled with responsive image height!! The way I eventually made it work required applying position: absolute to the img attribute and position: relative to the picture attribute. And then set the width and height on both of them to 100%.

    Accessibility-wise, you should try to keep your heading tags following the h1 > h2 > h3 hierarchy (see the article on MDN).

    And in the "Add to cart" button, the button's label already properly describes what it does to blind and low-vision users, and the alt text "icon cart" on the icon image ends up being redundant. It might be better to leave the alt field empty (as in alt="") as that will tell screen readers to ignore that element.

    Marked as helpful
    1
    Rido Septiawan•100
    @riddsepPosted 30 days ago

    thanks for ur attenttion mate! @sofiasmnk

    0

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