Submitted about 2 years ago

Product preview card with CSS flexbox

Winnie• 40

@Wineshuga

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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,190

@VCarames

Posted about 2 years ago

Hey @Whiney96, great job on this project!

Some suggestions to improve you code:

For accessibility purposes, its better to use rem/em instead of px for your CSS property values.
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

Winnie• 40

@Wineshuga

Posted about 2 years ago

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

Please log in to post a comment

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