QR code component

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 📄:

  • Siempre evita saltar niveles de encabezado; Siempre comienza con <h1>, seguido de <h2>, y así sucesivamente hasta <h6> ( <h1>,<h2>,...,<h6>).

  • 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 <h3> 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>

  • Dado que este componente implica escanear el código QR, la imagen no es una decoración. No debe usar la propiedad background-image para agregar la imagen del código QR. En su lugar, use la etiqueta <img> para agregar la imagen. Use la propiedad background-image solo para imágenes decorativas que no añadan ninguna información a la página.

  CSS 🎨:

  • Para centrar un elemento verticalmente, debes usar una altura para su contenedor y utilize la propiedad align-items: center;. En este caso se recomienda usar "min-height: 100vh" para que ocupe el 100% del alto del viewport.

  .container {
      min-height: 100vh;
      display: flex;
      /* flex-wrap: wrap; */
      /* column-gap: 30px; */ /* No existen otros elementos, esto es innecesario */
      /* row-gap: 40px; */ /* No existen otros elementos, esto es innecesario */
      justify-content: space-around; /* también se puede usar el valor "center" */
      /* height: auto; */ /*Utilize min-height en lugar de height*/
      /* margin: 40px 0; */
      /* padding: 50px; */
      align-items: center;   /* Agregue esto para centrarlo verticalmente */
      padding: 1rem;
  }
  

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

  Saludos!

  Marked as helpful

  0