Used HTML and CSS Flexbox to center and style a responsive QR card.

I’m most proud of successfully centering the card using Flexbox and replicating the design with accurate spacing, colors, and typography. It was my first time fully implementing a UI from a design, and seeing it match the original made me feel confident.

Next time, I’d focus more on making the layout responsive across various screen sizes and explore using CSS variables for better consistency. I'd also try organizing the CSS into reusable utility classes for cleaner code.

One of the main challenges was centering the card both vertically and horizontally on the page. I initially struggled with traditional methods like margin and positioning, but after learning about Flexbox, I was able to center the content using display: flex, justify-content: center, and align-items: center. I also had difficulty with spacing and alignment inside the card, which I fixed by carefully adjusting padding and using text-align: center.

I’d like help improving the responsiveness of my layout so it looks good on all screen sizes. I'm also interested in learning best practices for organizing CSS, especially how to write cleaner, more reusable styles. Additionally, feedback on how to improve accessibility (like proper use of alt text or ARIA roles) would be really valuable.