htm and css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML:

  • 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.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here. You can read more about centering in CSS here.

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

  Happy coding!

  0