Submitted 11 months ago

Responsive product review card using flex and scss

LDX_DEV• 190

@ledoux25

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

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

Community feedback

Mennatallah Hesham• 1,490

@Mennatallah-Hisham

Posted 11 months ago

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

Posted 11 months ago

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

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