Responsive product preview card using CSS Grid

Hello there!

Congrats on completing the challenge! ✅

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

I hope this helps!

Other than that, excellent work!

Hi, congrats on completing this challenge ! For the cart icon I see you tried to use fontawesome. In case fontawesome is optional for you, you have an svg cart icon in the asset folder that you can use on your button. There are different ways to do it. I like using a pseudo element as the cart icon is just decorative.

Something like this can work

button::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 1rem;
  background: url("../assets/images/icon-cart.svg") no-repeat;
}

Other part of the code that could be improved.

• striked through price should be placed in a del tag del element
• Depending on the ending behaviour your button can be of type "submit" maybe?
• you can use css variables in your stylesheet for value you are using at different places.
• the media query target very small screen below 375px wide. Maybe increase this value a bit?

I hope this helps you for your next challenge or to improve and update this one.

Happy coding !