Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
¡Hola! 👋. ¡Buen trabajo al completar el desafío!
Tengo algunos comentarios que podría considerar
HTML 📄:
- Debe usar un encabezado de nivel uno (h1) aunque este no sea un desafío de página completa. El texto "Improve Your Front-End Skills by Building Projects" se considera un elemento de encabezado (h1), o si no lo condisera asi, puede crear un <h1> oculto visualmente pero accesible para los lectores de pantalla usando una clase
sr-only
.
- Dado que todo el componente implica escanear el código QR, la imagen no es una decoración, por lo que debe tener un atributo
alt
. El atributoalt
debe explicar su propósito. Por ejemplo,QR code to frontendmentor.io
.
CSS 🎨:
-
Usa
min-height: 100vh
en lugar deheight: 100vh
. La propiedadheight
no funcionará si el contenido de la página crece más allá de la altura del viewport.Si se usa
height
, su componente se cortará en pantallas pequeñas como dispositivos móviles en vista horizontal. Una foto de como se ve su solución: screencapture
- En lugar de usar píxeles en el tamaño de fuente, usa unidades relativas como
em
orem
. El tamaño de fuente en unidades absolutas como píxeles no se escala con la configuración del navegador del usuario. Esto puede causar problemas de accesibilidad para los usuarios que han configurado su navegador para usar un tamaño de fuente más grande. Puedes leer más sobre esto aquí 📘.
Espero que te sea útil 😄!
Por encima de todo, ¡la solución que has presentado es genial!
Marked as helpful0@ismanolgarciaPosted almost 2 years ago@MelvinAguilar Gracias por tus comentarios! Los mismos me ayudaran a mejorara como programador
0 - Debe usar un encabezado de nivel uno (h1) aunque este no sea un desafío de página completa. El texto "Improve Your Front-End Skills by Building Projects" se considera un elemento de encabezado (h1), o si no lo condisera asi, puede crear un <h1> oculto visualmente pero accesible para los lectores de pantalla usando una clase
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