Submitted about 2 months ago

Responsive QR component using Flex and Media Queries (HTML & CSS)

Justina-R•20

@Justina-R

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm most proud of how quickly I completed the exercise using my basic knowledge of HTML and CSS. Next time, I would focus more on refining the design and experimenting with new techniques to enhance the overall quality.

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

The exercise was quite straightforward, but my biggest challenge was working with media queries. I overcame it by reviewing documentation and experimenting with different breakpoints to ensure the layout was responsive across devices.

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

My main concern is whether I'm following best practices, even though the exercise was quite simple. I want to avoid replicating any mistakes when I work on larger projects, so any feedback on code structure or optimization would be really appreciated.

Community feedback

juan-mentor•290

@juan-mentorPosted about 2 months ago

Hola ,que tal Justina.

Tu solución de código QR es muy buena, pero si me lo aceptas, tengo alguna sugerencia para que sea superlativo.
- Cuando delimites el ancho de una imagen en un contenedor, es mejor utilizar max-width.

      .image img {
            max-width: 100%;
            /* Con width la imagen se escala infinitamente aunque pierda calidad,
                 pero con max-width la imagen no se escala más allá del ancho máximo 
                 intrínseco de la imagen */
                 
       }

    - Cuando yo empecé, también trabajaba con px (unidad absoluta). Pero luego me di cuenta que utilizando rem, em, % (unidades relativas), la escalabilidad y el diseño responsivo era más flexible.

    - Lo dicho  **trabajo fenomenal** y sigue así que vas muy bien.

Un saludo.

Marked as helpful

Justina-R•20

@Justina-RPosted about 2 months ago

Muchas gracias, Juan!! Toda ayuda es más que bienvenida. Que tengas un lindo día.

Please log in to post a comment

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