Skip to content
Submitted over 1 year ago

Responsive product review card using flex and scss

accessibility, sass/scss
LDX_DEV•190
@ledoux25
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please check up my code and live site and feedback to help improve

Code

Please log in to post a comment

Log in

Community feedback

  • Mennatallah Hesham•1,470
    @Mennatallah-Hisham

    Hi Ledoux,

    You did great 👍

    Here are some suggestions to improve your code:

    IMAGE

    • setting the image as a background will make it not accessible for screen reader users.

    • you can use <picture> element to change the image. the browser will choose the best match and display it.

    <picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="" alt="">
</picture>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="Gabrielle Chanel perfume"

    Accessability

    • add aria-hidden="true" to the cart icon, it is used to hide decorative content/images/icons from screen readers which improves their experience

    • check how I made the price section more accessible here

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • To properly center the card
    • USING FLEXBOX
    body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}
    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>

    • Use semantic element for strike-through <s>$169.99</s>

    • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding😄

    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