Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Componente Responsivo de Código QR utilizando Flexbox y Media Queries

@OsmelMdz

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Estoy orgulloso de haber logrado un diseño completamente responsivo utilizando Flexbox y Media Queries, lo cual permite que el componente se vea y funcione bien en cualquier tamaño de pantalla. También me enorgullece el uso eficaz de Google Fonts para mantener una tipografía coherente y profesional en el diseño.

La próxima vez, me gustaría experimentar con animaciones sutiles al interactuar con el QR code y los enlaces, para hacer la experiencia del usuario aún más dinámica y atractiva. Además, podría considerar utilizar un framework CSS como Tailwind o Bootstrap para acelerar el desarrollo y garantizar una mayor consistencia en el diseño.

What challenges did you encounter, and how did you overcome them?

Uno de los desafíos fue asegurar que el diseño fuera completamente responsivo sin perder la coherencia visual en diferentes dispositivos, desde móviles hasta pantallas más grandes. Logré superarlo utilizando media queries específicas para ajustar el tamaño y la disposición de los elementos, lo cual permitió mantener una buena proporción y legibilidad en todos los casos.

Otro desafío fue asegurar que el footer se mantuviera fijo en la parte inferior de la pantalla, incluso con poco contenido. Esto lo resolví utilizando flexbox en el diseño principal del body, distribuyendo el contenido para que siempre se adaptara correctamente.

What specific areas of your project would you like help with?

Me gustaría recibir ayuda para mejorar la accesibilidad del componente, haciéndolo más inclusivo para personas con discapacidades, como usuarios de lectores de pantalla y personas con dificultades visuales o motrices. Además, sería útil recibir sugerencias sobre la optimización del CSS para reducir la redundancia y mejorar la eficiencia en proyectos más grandes. También estoy interesado en aprender cómo mejorar el rendimiento del sitio y optimizarlo para motores de búsqueda (SEO), incluso en componentes simples como este.Me gustaría recibir ayuda para mejorar la accesibilidad del componente, haciéndolo más inclusivo para personas con discapacidades, como usuarios de lectores de pantalla y personas con dificultades visuales o motrices. Además, sería útil recibir sugerencias sobre la optimización del CSS para reducir la redundancia y mejorar la eficiencia en proyectos más grandes. También estoy interesado en aprender cómo mejorar el rendimiento del sitio y optimizarlo para motores de búsqueda (SEO), incluso en componentes simples como este.

Community feedback

P

@efabrizio75

Posted

Hola Osmel, en primer lugar, enhorabuena por completar el proyecto: por pequeño que parezca, demuestra que eres tenaz y tienes empuje. En cuanto a tu pregunta sobre cómo mejorar la accesibilidad para usuarios discapacitados, no hay mucho que puedas hacer ya que este componente es realmente pequeño.

Sin embargo, la clase visually-hidden carece de definición, y puedes empezar por ahí.

También puedes utilizar el atributo aria-roledescription en los elementos <main> y <footer> para definir claramente qué función desempeñan. Por ejemplo:

<main aria-roledescription="Este elemento contiene la solución al reto"> <footer aria-roledescription="Esta sección contiene referencias al creador de la solución">.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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