Card QR

Community feedback

• 

  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.

  • En lugar de usar height: 61.7rem; en el elemento body, use min-height: 100vh;, esto hará que su componente este centrado verticalmente sin importar el dispositivo del usuario.

  • A que te refieres con utilizar JS para ajustar el componente ? JavaScript no es solo para el comportamiento del sitio ?

  HTML 📄:

  • Usa la etiqueta <main> para envolver todo el contenido principal de la página en lugar de la etiqueta <div class="card">. Con este elemento semántico puedes mejorar la accesibilidad de tu página.

  • Dado que este componente involucra escanear el código QR, la imagen no es una decoración, por lo que debe tener un atributo alt. El atributo alt debe explicar su propósito. Por ejemplo: Código QR para frontendmentor.io

  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.

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

  Saludos

  Marked as helpful

  3

  ---

  

  Juan•110

  @JuanitoNievesPosted almost 2 years ago

  Hola @MelvinAguilar _ Gracias por el comentario y las sugerencias! ❤️👍 al usar el min-hight:100vh; a esto me referia con la pregunta que hize, ya que habia visto soluciones en internet pero todas eran con JS. Con respecto a poner la etiqueta <main> la saque por temas de frustacion que no podia centrar el elemento jsjs. Gracias tambien por los links del uso del 62,5% para modificar los rem, los leere bien.

  En general gracias por el comentario y los consejos! Espero seguir recibiendolos de tu parte para mejorar como desarrollador😊

  1