Product preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @PrashanthBalakrishnan 👋, 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 <section class="card"> to improve the accessibility of the website.

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

  • In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

  • Use min-height: 100vh to the body selector instead of height. This property lets you set a height and let the element grow even more if necessary.

  • The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:

  <p class="card__description">A floral, solar and voluptuous interpretation composed by Olivie Polge, Perfumer-Creator for the House of CHANEL.</p>
  

  • 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 <div class="card__title"> tag with <h1 class="card__title">.

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1

  ---

  

  Prashanth•290

  @PrashanthBalakrishnanPosted almost 2 years ago

  @MelvinAguilar thank you

  0