Este proyecto es mi solución al reto QR Code Component de Frontend Mentor. El objetivo fue construir un componente de tarjeta con un código QR, siguiendo el diseño propuesto y aplicando técnicas modernas de desarrollo frontend.
Características principales
La implementación se realizó con Astro, empleando HTML semántico (por ejemplo: etiquetas main, section, h1 y p) para garantizar accesibilidad y estructura clara. El layout se diseñó con Flexbox y unidades relativas (rem, %) para asegurar una experiencia responsiva en dispositivos móviles y pantallas grandes.
Se integró la fuente “Outfit” desde Google Fonts y se aplicaron los colores y estilos recomendados por Frontend Mentor. El componente incluye atributos alt descriptivos y aria-labelledby para mejorar la navegación con lectores de pantalla.
Proceso y aprendizajes
Entre los retos resueltos destacan la adaptación del layout a diferentes tamaños de pantalla, la correcta ubicación del footer y la consistencia en la altura de la tarjeta QR. El resultado es una solución accesible, responsiva y visualmente atractiva.
Puedes ver el código fuente y la demo en:
Tecnologías utilizadas
- Astro
- HTML5
- Flexbox
- Google Fonts.
Retrospectiva
Me siento orgulloso de haber creado un diseño accesible y responsivo. Si repitiera el proyecto, exploraría agregar animaciones sutiles y refactorizar los estilos con SASS para mayor escalabilidad.