Product Preview Card Component using HTML/CSS only. SVG.

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @MuyiwaSaka 👋, 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="box"> to improve the accessibility of the website.

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image.

  • You are occupying too many <span>, meaning that everything has the same semantic meaning: everything is just text:

  • It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:

  <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
  

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

  <del class="oldprice">
     <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.

  • Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page. Swap the <span class="productname" tag with <h1>.

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

  Good job, and happy coding! 😁

  Marked as helpful

  1