QR Code Component using pure HTML & CSS with Flexbox

Solution retrospective
I’m proud of completing this component with clean HTML and CSS. I kept the layout responsive and consistent across screen sizes. Next time, I might experiment with using CSS Grid or try adding transitions to enhance interactivity.
What challenges did you encounter, and how did you overcome them?The most challenging part was aligning the component precisely on the screen while ensuring it remained responsive across various screen sizes. I used Flexbox on the <body> to center everything and added padding to improve responsiveness on smaller devices.
Another challenge was matching the exact color values and font styles from the design specifications. I double-checked the style guide and used tools like Google Fonts to make sure it matched closely.
What specific areas of your project would you like help with?I’d appreciate feedback on:
How I can improve my responsive design strategy
Whether my HTML structure is semantic and accessible
Anyways to improve the clarity or efficiency of my CSS
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Katherine-Kapinus
Hello! Your code looks great ✨
To make it look even closer to the layout, you could wrap the title and description in an additional container with a limited width and add some bottom margin for spacing.
Also, in future projects, it might be more convenient to separate styles into a dedicated CSS file and apply styles via class names — this makes your code more reusable and easier to maintain in larger projects.
Great work overall, keep it up! 🚀
- @DarGR02
Excelente solución
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