Frontend Mentor | QR code component

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

I’m proud that I built a clean, responsive QR code component using semantic HTML and modern CSS features like aspect-ratio and Flexbox. I kept the design very close to the original, and my code is organized and easy to maintain.

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

Challenges I encountered: One challenge I faced was making sure the QR code image stayed perfectly square and responsive on different screen sizes. At first, I tried using min-height and fixed dimensions, but they didn’t adapt well on small screens.

How I solved it: I researched modern CSS techniques and learned about the aspect-ratio property, which made it easy to keep the image perfectly proportional without extra wrappers or complex hacks. I also tested the layout on various screen widths to make sure the card stays centered and looks good on both mobile and desktop.

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

Specific areas I would like feedback on:

The responsiveness of the QR code card on very small screens (below 320px width). Are there better ways to keep the layout clean and readable?

Accessibility improvements — how can I make the QR code and links more keyboard- and screen-reader-friendly?

CSS organization — is my use of Flexbox and aspect-ratio efficient and modern? Any suggestions for improvement?

Semantic HTML — are my heading levels and alt texts appropriate and helpful?

Suggestions for adding subtle animations or interactivity without harming performance.

I appreciate any detailed feedback or examples!