Product Card using CSS Flexbox and @media for Mobile

Hi @ywsoliman 👋, good job for completing this challenge!

Here are some suggestions to improve your code:

• You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from using a media query to modify the image More information here

Example:

<picture">
   <source media="(max-width: 460px)" srcset="./assets/images/image-product-mobile.jpg">
   <img src="./assets/images/image-product-desktop.jpg" alt="your_alt_text">
</picture>

• The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.

You could use more the <p> tag, the <p> element is paragraph level content, usually text, and the <del> tag

<p class="new-price">$149.99</p>
<del class="old-price">
   <span class="sr-only">(Old price) </span>$169.99
</del>

Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers:

.sr-only {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

More information here

• The cart icon is for decoration purposes only, so it can be hidden from screen-readers by adding aria-hidden="true"

<img src="images/icon-cart.svg" alt aria-hidden="true">

I hope those tips will help you.

Good Job and happy coding !