Product preview card component using Tailwind

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hola 👋. ¡Buen trabajo al completar el desafío! Tengo algunos comentarios para usted si considera mejorar su código.

  Supongo que usted habla español :)

  HTML:

  • Use la etiqueta <main> para envolver todo el contenido principal de la página en lugar de usar la etiqueta <div>. Con este elemento semántico puedes mejorar la accesibilidad de tu página incluso si no es una página completa.

  • Puede usar la etiqueta <del> para indicar el precio anterior. Además, puede usar un texto con clase sr-only para describir el descuento. Esto ayudará a los usuarios de lectores de pantalla a entender que el precio fue descontado y ademas que, por defecto, <del> tiene la linea en medio.

  Ejemplo:

  <del class="text-xs"><span class="sr-only">Old price: </span>$169.99</del>
  

  • No todas las imágenes deben tener texto alternativo. El ícono del carrito es una imagen decorativa, no agrega ninguna información a la página. Debe usar un atributo alt vacío en lugar de uno descriptivo. Puede leer más sobre esto aquí.

  Si desea obtener más información sobre el atributo alt, puede leer este artículo.

  CSS:

  • Utilice min-h-screen en lugar de h-screen. La propiedad height no funcionará si el contenido de la página crece más allá de la altura de la ventana gráfica.

  • Personalmente, a mi me funciono con un ancho de 600px en lugar de 520px, pero igualmente considero que ha hecho un buen trabajo !

  ¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!

  ¡Feliz navidad! 🎄

  1

  ---

  

  Sonya Castro•80

  @Sonya-cPosted almost 2 years ago

  @MelvinAguilar Hola, muchas gracias por tu comentarios, los tomare en cuenta ¡Feliz navidad!

  1