Product preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

  • Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

  • NEVER ❌ do this as it creates accessibility issues for users and it is outdated, instead download a px to rem/ em converter in your code editor.

  html {
    font-size: 62.5%;
  }
  

  • For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  2
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  ¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.

  HTML 📄:

  • La imagen del producto no es una decoración, es de lo que se habla en todo el componente. No debes usar la propiedad de background para agregar la imagen del producto. En su lugar, use la etiqueta <img> para agregar la imagen, y en este desafió es mejor usar la etiqueta <picture>. Use la propiedad de imagen de fondo solo para imágenes decorativas que no añadan ninguna información a la página.

  CSS 🎨:

  • Existe un debate sobre que tan beneficioso es utilizar 62.5%, algunos mencionan que establecer el tamaño de fuente en 62,5% puede atraer problemas de compatibilidad con bibliotecas o complementos de terceros. Puedes leer más sobre esto con estos dos articulos:

  1. The Surprising Truth About Pixels and Accessibility - The 62.5% trick
  2. A comment on the 62.5% trick

  Créditos a grace snow y vanzasetia por señalar esto.

  • La propiedad width: 100vw en la etiqueta body no es necesaria. La etiqueta body es un elemento de bloque y tomará el ancho completo de la página por defecto.

  • Usa min-height: 100vh en lugar de height: 100vh. La propiedad height no funcionará si el contenido de la página crece más allá de la altura del viewport.

  Espero que te sea útil! 😄 Por encima de todo, ¡la solución que has presentado es genial!

  Saludos desde El Salvador!

  Marked as helpful

  1