Product Preview Card

Community feedback

• 

  celeste-melissa•20

  @celeste-melissaPosted about 2 years ago

  I think you did a great job. The only two suggestions I would make are to fix the image links of the perfume because that is the main component and the cart icon as well. I viewed your code and noticed that you already have both the perfume photo (line 21) and the cart icon (line 35) linked in your HTML. The issue was the forward slash on both lines 21 and 35 at the beginning of the link. Below is the current implementation and the following line is the solution.

  Line 21:

  Currently: <img src="/images/image-product-desktop.jpg" alt="Product Image">

  Solution: <img src="images/image-product-desktop.jpg" alt="Product Image">

  Line 35:

  Currently: <img src="/images/icon-cart.svg" alt="">Add to Cart</button>

  Solution: <img src="images/icon-cart.svg" alt="">Add to Cart</button>

  These are just minor suggestions! Just to reiterate great job and I wish you blessings on your coding journey. Code on and have fun!

  2
• 

  Luciano Oliveira•300

  @LucianoOliveira1Posted about 2 years ago

  Hello NikoFilou, the image is not loading because this missing a dot in the src of the img tag (<img src="/images/image-product-desktop.jpg" alt="Product Image">).

  Try adding a dot before the first bar (like this = <img src="./images) and see if it works!

  Congratulations on your work!

  2
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @NikoFilou 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container">.

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

  • You can display the image correctly by updating the path: <img src="./images/image-product-desktop.jpg" alt="your alt text">, but, you can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query in your CSS file to modify the image.

  Example:

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

  • You could use the <del> tag to display the old price:

  <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.

  More information here.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  2