@Miguelaeb
Posted
Hi @GuiGC03, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.
Example:
<picture> <source media="(max-width: 768px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="your_alt_text"> </picture>Improve alternative texts by adding descriptive text to the alt attribute of the product image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load. 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.
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
I hope this helps you and happy coding!
