Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hola 👋. ¡Buen trabajo al completar el desafío! Tengo algunos comentarios para usted si quiere mejorar tu código.
- Usa 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.
- Debe usar un encabezado de nivel uno (h1) aunque este no es un desafío de página completa. 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í están los estilos para copiar. por ejemplo:
<h1 class="sr-only">QR code component</h1>
- 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] (https://webaim.org/techniques/alttext/).- Establecer el ancho del elemento con porcentajes o VW hará que su componente se comporte de manera extraña en dispositivos móviles y computadoras de escritorio de alta resolución. Puede establecer el ancho máximo (max-width) en
320px
o20rem
y eliminewidth: 85%;
¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!
¡Saludos! 🎄**
Marked as helpful0 - Usa la etiqueta
- @HassiaiPosted almost 2 years ago
Replace <div class="container__qr__code"> with the main tag, <h2> with <h1> to fix the accessibility issue.
Give .container__qr__code a fixed max width value instead of percentage width. i will advise you use max-width for this challenge for a responsive content.
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful HAPPY CODING
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord