@MelvinAguilar
Posted
Hi @CharlieCastleWeb 👋, good job on completing this challenge! 🎉
I like this solution for the challenge. Here are some suggestions you might consider to improve your code:
- Setting element width and height with percentages or VW/VH will cause your component to behave weirdly on mobile devices and high-resolution desktops.
- Instead of using pixels in font size on the body element, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - You could use the <del> tag to display the old price:
<del class="old-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.
Overall, Good job
Marked as helpful