Skip to content
Submitted 20 days ago

QR Component Challenge Solution

pure-css
Sneha Sikder•110
@Snehasikder
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am proud of the fact that I was able to pull it off in a few hours writing without any help or tutorial.

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

I guess the sizing was a bit problematic but after constantly trying I was able to achieve what I wanted and the result is better than I thought.

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

This looks best when browser is at 100% zoom but how to maintain the same look, is it possible? Any suggestions and a review would be appreciated.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•5,020
    @thisisharsh7

    Great work on completing the challenge! 👏 It's impressive that you built this without external help or tutorials — that's a strong way to sharpen your skills.

    ✅ What you did well:

    • Clean use of flexbox for centering elements.
    • Proper use of semantic tags (main, footer).

    🔧 Some suggestion:

    1. Responsiveness: The .b card has a fixed width of 20% which may look too narrow on larger screens and may not adapt well on smaller devices. Consider using max-width (e.g., max-width: 320px) with width: 100% for better responsiveness.
    2. Spacing: Remove hardcoded margin-top: 200px and margin-bottom: 220px inside .b — use padding or gap inside flex container or media queries instead.
    3. Zoom Handling: To maintain consistent scaling across zoom levels, rely more on em, rem, vw/vh, and flexbox/grid units instead of hardcoded pixel values.
    4. Text: Use heading tags (h1, h2) meaningfully for accessibility and SEO. Avoid align="center" — prefer text-align: center; in CSS.

    Keep it up - happy coding!

    Marked as helpful
  • Marcos Sobral•10
    @Marcos-Sobral

    It was fun to make this page because I did it without AI or searching the internet, and it's been a while since I've programmed.

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