@MelvinAguilar
Posted
¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.
HTML 📄:
- Use la etiqueta
<main>
para envolver todo el contenido principal de la página en lugar de la etiqueta<div>
. Con este elemento semántico puedes mejorar la accesibilidad de tu página.
- Debes usar un encabezado de nivel uno (h1) aunque este no sea un desafío completo de página. Tiene dos opciones:
- Cambiar su elemento <h2> por un <h1>
- Puede crear un elemento '<h1>' dentro de tu elemento 'main' que estará oculto visualmente pero visible y legible para lectores de pantalla. La clase "sr-only" oculta el contenido visualmente y aquí están los estilos para copiar. ej.:
<h1 class="sr-only">QR Card Component</h1>
Alt text 📷:
-
El atributo
alt
debe explicar el propósito de la imagen. Al escanear el código QR, el usuario será redirigido al sitio web frontendmentor.io, por lo tanto, un mejor atributoalt
seríaCódigo QR a frontendmentor.io
.Si quieres aprender más sobre el atributo
alt
, puedes leer este artículo 📘.
CSS 🎨:
- Para centrar un elemento verticalmente, debes usar una altura para su contenedor y utilizar la propiedad
align-items: center;
. En este caso se recomienda usar "min-height: 100vh" para que ocupe el 100% del alto del viewport. ej.:
body {
font-family: 'Outfit', sans-serif;
background-color: var(--Light-gray);
display: flex;
justify-content: center;
/* align-content: center; */
min-height: 100vh;
align-items: center;
}
¡Espero que te sea útil! 😄 Por encima de todo, ¡la solución que has presentado es genial!
Saludos!
Marked as helpful