QR Code Component - HTML & CSS Only

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

I'm proud of finishing my first Frontend Mentor challenge and making the component responsive using media queries. The layout looks close to the design, especially the card centering with Flexbox.

Next time, I would focus more on mobile-first CSS from the very beginning instead of fixing mobile issues later. I also want to use CSS custom properties (variables) to keep my colors organized.

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

The biggest challenge was centering the card perfectly both horizontally and vertically. I initially struggled with margin: auto not working as expected. I solved this by using Flexbox on the body with justify-content: center and align-items: center, and giving the body a min-height: 100vh.

I also had trouble with making the image fit the card properly. Using max-width: 100% and border-radius for rounded corners fixed this.

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

I would appreciate feedback on:

1. My use of media queries - are my breakpoints logical?
2. CSS organization - should I have structured my styles differently?
3. Accessibility (ARIA labels, alt text) - did I miss anything important?