@MelvinAguilar
Posted
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.
-
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. -
The
<br>
tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties likemargin
andpadding
to add vertical space between elements.
- You could use the
<del>
tag to indicate the price that was before the discount. Additionally, you can use asr-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>
CSS:
- Instead of using pixels in font-size, use relative units like
em
orrem
. 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.
- The
width: 100%
property in thebody
tag is not necessary. Thebody
tag is a block element and it will take the full width of the page by default.
- Use
min-height: 100vh
instead ofheight: 100vh
. Theheight
property will not work if the content of the page grows beyond the height of the viewport.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@sawsan-code
Posted
@MelvinAguilar this was my first challenge thank you so much for the feedback it was realy useful i'll try again