Product preview card component using HTML and CSS

Hey there! 👋 Here are some suggestions to help improve your code:

• Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible ⚠️. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

Here is how it looks like implemented: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚

https://www.w3schools.com/html/html_images_picture.asp

• Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

• The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

• Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Hi Manish,

The small gap at the bottom of the image is due to the default value of display property of the image. By default display: inline is applied for any image, and all inline-elements have line-height, so that small space appears below the image.

The fix for this would be to declare display:block on the image or any selector that targets it. Let me know if this cleared your doubts on that issue.

Hi Manish Kumar👋 Great job on completing this challenge! 🥳

You can also try to set the image as a background-image of the container and set the background-size to cover

#container {
    background-image: url('path/to/image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

It will make the image to fill the entire container. Please note that the solution may vary depending on the specific HTML and CSS of your project.

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️