Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hola @cuchi300 👋, ¡Buen trabajo al completar este desafío! 🎉
Aquí hay algunas sugerencias que podría considerar:
- En este desafío, no debe usar la propiedad de fondo para configurar la imagen porque esta imagen tiene un significado semántico. Utilice la propiedad de background de CSS si la imagen no forma parte del contenido.
- 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" para modificar la imagen.
<picture> <source media="(max-width: 768px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="your_alt_text"> </picture>- El ícono del carrito solo tiene fines decorativos, por lo que se puede ocultar de los lectores de pantalla agregando
aria-hidden=" true"y dejando vacío su atributo alt:
<img src="images/icon-cart.svg" alt aria-hidden="verdadero">- Intente usar etiquetas semánticas en su código. Haga clic aquí para obtener más información., esto mejorará la accesibilidad del sitio:
<body> <main class="perfume contenedor"> . . . </main> <footer class="attribution"> . . . </footer> <body>Espero que esos consejos le ayuden.
¡Buen trabajo!
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord