@MelvinAguilar
Posted
¡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, usemin-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 atributoaltdebe 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:
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
@JuanitoNieves
Posted
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😊
