Qr code component using html and css

Solution retrospective
I'm really proud that i was able to replicate the design.
What challenges did you encounter, and how did you overcome them?I didn't know much about git or git-hub, since i am a beginner, but this project taught me. After hours of videos, i finally got it.
What specific areas of your project would you like help with?The entire code. Any feedback would be helpful
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@19Rohan97
Awesome work! You've replicated the design exceptionally well — great attention to detail and execution. It’s clear you’re developing a solid understanding of layout and responsiveness. Keep it up!
📱 Suggestion: Embrace Mobile-First Approach
I noticed that in your CSS, you’ve used
max-width
media queries, which means you're working from a desktop-first mindset and scaling down for smaller devices.Instead, I recommend switching to a mobile-first approach, which is the current best practice in responsive design.
✅ Why Mobile-First Is Better:
- Performance: Mobile devices often have slower connections. Serving them a lightweight layout first improves load speed.
- Progressive Enhancement: You start with the most basic version (mobile) and then enhance it for larger screens.
- Maintainability: Writing base styles for mobile and layering
min-width
media queries for tablets and desktops is easier to scale and debug.
💡 Example:
Instead of this (desktop-first):
.element { font-size: 24px; } @media (max-width: 768px) { .element { font-size: 16px; } }
Go for this (mobile-first):
.element { font-size: 16px; } @media (min-width: 768px) { .element { font-size: 24px; } }
This way, you're building from the smallest viewport up — and letting styles grow with the screen size.
Let me know if you want help refactoring your current CSS to follow this approach — I'd be happy to assist!
Marked as helpful
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