ProductPreviewCard with HTML/CSS desktop/mobile

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @arpollla 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • You should not name your class with the camelCase convention. Use naming naming conventions to name it.
  • Add an h1 tag to your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

  Solution:

  <h1>Gabrielle Essence Eau De Parfum</h1>
  

  • You can use the <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. More information here

  Example:

  <picture>
     <source media="(max-width: 376px)" 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="price-old">
     <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.

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  2

  ---

  

  zzx•140

  @arpolllaPosted about 2 years ago

  Thank you for your tips !

  0
• 

  Adriano•38,060

  @AdrianoEscarabotePosted about 2 years ago

  Hi zzx, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag.
  • images must have alt text unless it is a decorative image, for any decorative image each img tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as a screen reader.

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  zzx•140

  @arpolllaPosted about 2 years ago

  @AdrianoEscarabote It does help, thank you!

  1