Product preview card - using html and CSS.

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @MauritzLM 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  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="card-container">.

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

  • The image's proportions don't look good on my computer. To create two columns with flexbox, you can add the property flex: 50%; to picture and .product-info. More information.

  .product-info, picture {
       flex: 50%;
  }
  

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

  <del class="normal-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! 😁

  Marked as helpful

  2

  ---

  

  Mauritz•290

  @MauritzLMPosted about 2 years ago

  Hi @MelvinAguilar, thank you very much for your feedback. I'll be looking into making these improvements.

  1