Skip to content
Submitted 4 months ago

Responsive Product Card With Semantic Tags, Flexbox and Media Queries

accessibility, bem, lighthouse, sass/scss
Paulo Wells•530
@wellspr
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 tried to write semantic and well-structured code, focusing on organization, legibility, and accessibility. I'm using these challenges to research better ways to do things, one point at a time.

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

Perhaps the main focus here is to ensure the correct image appears at the appropriate size. I addressed this by using media queries, alternating between display: none and display: block.

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

I would appreciate feedback on code structure, the use of semantic tags, accessibility, the application of BEM methodology, or any obvious areas where I might have complicated things.

Code

Please log in to post a comment

Log in

Community feedback

  • Stevan-Dev•660
    @Stv-devl

    Hi, good work,

    . For accesibility you can write different alt for every image. For exemple alt="chanel parfum mobile" and alt="chanel parfum desktop" alt="shopping cart"

    . For semantic maybe its will be better to write something like this :

    <body>
  <header>
  </header>
  <main>
    <section>
    </section>
  </main>
  <footer>
  </footer>
</body>
    Marked as helpful
  • P
    BarrieDirk•700
    @barriedirk

    It looks great!, and I didn't know that in CSS you can add

    html { font-size: 62.5%; }

    to set the rem, nice idea!

    I think the manipulation of the images for response design is missing. When I searched for this, I found that you can use picture element:

    <picture> <source srcset="image-large.jpg" media="(min-width: 1024px)"> <source srcset="image-medium.jpg" media="(min-width: 768px)"> <img src="image-small.jpg" alt="Responsive Image"> </picture>

    or srcset and size attributes:

    <img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

    The idea is to avoid downloading all the images, only those that fit the screen width.

    I hope this comment will be helpful to you

    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