@MelvinAguilar
Posted
Hola @GatiMhersi 👋, ¡Buen trabajo al completar este desafío! 🎉
Tengo algunas sugerencias que podría considerar para mejorar su código:
- Use la etiqueta
<main>
para incluir todo el contenido principal en su solución. en lugar de usar<div class="container">
.
- Use
<footer>
en lugar de<div class="attribution">
. El elemento<footer>
contiene información de autoría.
- Puede usar una etiqueta <picture> cuando necesite cambiar una imagen en diferentes dimensiones. El uso de esta etiqueta evitará que el navegador cargue ambas imágenes, lo que ahorrará ancho de banda y evitará que utilice un "media query" en su archivo CSS para modificar la imagen.
<picture>
<source media="(max-width: 700px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="your_alt_text">
</picture>
- Puede usar la etiqueta <del> para mostrar el precio anterior:
<del class="old-price">
<span class="sr-only">Old price: </span>$169.99
</del>
Tenga en cuenta que agregué un <span> con la clase sr-only
al elemento del
, esto proporcionará más información sobre el precio anterior a los lectores de pantalla.
La clase sr-only
es una clase que puede agregar para ocultar contenido visualmente, pero solo es visible para lectores de pantalla.
¡Espero que esos consejos le ayuden! 👍
¡Buen trabajo! 😁
Marked as helpful