Frontend Mentor | QR Code Component Challenge – Max Essien

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

I'm most proud of completing this project using only HTML and CSS, and learning how to structure a simple layout with Flexbox and custom properties.

If I were to do it again, I would organize my file paths more clearly and work on improving the accessibility of the markup, like adding more descriptive alt text.

What challenges did you encounter, and how did you overcome them? Challenges I Encountered

One of the main challenges I faced was managing the responsiveness of the layout across different screen sizes and heights. At first, the QR code component didn’t center properly on smaller screens or devices with limited height.

Another challenge was getting the font to load correctly from a local folder. I had to double-check the file path and escape the spaces in the folder name.

How I Overcame Them

To fix the responsiveness issues, I used multiple media queries to adjust padding and layout behavior for smaller devices. I also used max-width, max-height, and flexbox to ensure the component scaled properly.

For the font loading issue, I corrected the file path and made sure to escape the space in "Google font" using \ so the browser could find and load the font correctly.

What specific areas of your project would you like help with? Areas I'd Like Help With

I'd like feedback on how I can improve the accessibility of my HTML, especially with alt text and semantic structure.

Also, any suggestions for better CSS structure or best practices for organizing media queries would be helpful. I'm open to tips on making my code cleaner and more scalable for future projects.