QR card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hola 👋. ¡Buen trabajo al completar el desafío!

  Tengo algunos comentarios para usted que podría considerar

  HTML📄:

  • Debes usar un encabezado de nivel uno (h1) aunque este no es un desafío de una página completa. Existen dos sugerencias

    1. Intercambiar su elemento h3 por un h1.

    2. Puede crear un elemento '<h1>' dentro de su elemento 'principal' que estará oculto visualmente pero visible y legible por [lectores de pantalla](https://developer.mozilla.org/en -US/docs/Glossary/Screen_reader). La clase "sr-only" oculta el contenido visualmente y aquí son los estilos para copiar. por ejemplo: <h1 class="sr-only">Componente de tarjeta QR</h1>

  • Evite siempre saltar niveles de títulos; Comience siempre desde <h1>, seguido de <h2>, y así sucesivamente hasta <h6> (<h1>,<h2>,...,<h6>).

  Texto alternativo 📷:

  • El atributo alt no debe contener las palabras "image", "photo", o "picture", porque la etiqueta de imagen ya transmite esa información.

  • 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 que un mejor atributo 'alt' sería 'QR code to frontendmentor.io'

    Si desea obtener más información sobre el atributo alt, puede leer este artículo. 📘.

  CSS🎨:

  • Debe usar un restablecimiento de CSS para eliminar los estilos de navegador predeterminados y hacer que su página se vea igual en todos los navegadores. Actualmente el navegador agrega unos 8px de margen al elemento body, lo que crea los scrollbar

    Restablecimientos populares de CSS:

    • Normalize.css
    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  ¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es increible!

  Saludos cordiales

  Marked as helpful

  1