Product Preview Card Component

Community feedback

• 

  P

  Daniele•300

  @dedo-devPosted 3 months ago

  Hi Dhia, great work to solve this challenge, I looked to your code because I need to solve a problem that I encountered and I found something where I can give you some tips.

  1. To render proper images based on display size you need to use a <picture> tag instead of two <img> tags with display: none set on it; Here is a useful article for getting started with picture element

  2. Use relative units instead of px, for example for padding and media queries you can use em while for margin, border-radius or font-size you can use rem; Here an article to getting started with relative units

  3. Try to make your alt text more descriptive and avoid the word image because the screen readers start with ' image of ', in your case this will sound like ' image of product image '. Try with something like this ' A bottle of Chanel Gabrielle Parfum ' this is still poor alt text but it describes better the image to people with disabilities.

  Hoping you find this useful ✌️

  Keep Learning 📖 Keep Coding 💻
  

  Marked as helpful

  0

  ---

  

  Dhia•710

  @Dhia-18Posted 3 months ago

  @dedo-dev Thanks for your feedback Daniele, I really appreciate it!

  1