Code QR Using Css

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.

  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:

  1. Cambiar su elemento <h2> por un <h1>
  2. 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 atributo alt sería Có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

  1