Product preview card component with HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Having two or more h1 tags in a webpage is not recommended because it can be confusing for search engines. Search engines use the h1 tag to determine the main topic of a page, <h1>$149.99</h1> should not be h1 element.

  • Breaking down a word into separate letters can make it harder for screen readers users to understand the text. Most screen readers will read out each letter individually, the text is supposed to be read as a single word, "perfume".

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <img> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Audrey Lovelace•100

  @AudreyLovelacePosted almost 2 years ago

  @MelvinAguilar Thank you Melvin~ Your suggestions are really helpful~ And yes I need to keep learning to make screen-reader friendly webpages~

  0