Skip to content
Submitted about 2 years ago

Product preview card with CSS flexbox

Winnieβ€’40
@Wineshuga
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

I'm happy I'm able to upload another solution. I've been looking forward to it since I got really helpful feedback on my first upload.

I'd really love to know if my code aids web accessibility (understanding how this works is really important to me).

I know it's not a complex code but I'd like to keep web accessibility in mind for any kind of project I'm on, as I continue on this path.

Thank you. πŸ€—

Community feedback

  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted about 2 years ago

    Hey @Whiney96, great job on this project!

    Some suggestions to improve you code:

    1. For accessibility purposes, its better to use rem/em instead of px for your CSS property values.

    2. When using different images for responsiveness, it’s far more efficient to use the <picture> element.

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    Heres a link with more details on it: https://www.w3schools.com/html/html_images_picture.asp

    Happy Coding!

    Marked as helpful
    0
    Winnieβ€’40
    @WineshugaPosted about 2 years ago

    @vcarames Thank you very much. This is really helpful.

    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