Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive qr code component solution

P

@mayurDayal2000

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@therealalexolthoff

Posted

Hey Mayur!

Well done. I really liked checking out your CSS, using grid made it much easier to understand how you achieved the centering of the card, I think I'll make some edits to my project in the future to use that, less confusing than flexbox.

I liked also that you managed to exclusively use semantic HTML and kept most of your stuff inside your main tag.

That said, your attribution tag could perhaps be put in a footer anchored to the bottom of the page, which would be more in line with the design.

Beyond that, I think the only other thing I would do differently (others may disagree) is use more classes instead of descendent selectors. Just because that way it's easier to reuse them in case you end up expanding the project. Again, others might disagree, and I could also be wrong about this being best practice, but using classes just seems like an easier way to organize CSS.

All in all, great job!

Marked as helpful

1
Darshan 20

@darshan744

Posted

I thoght the final was to be smaller will change next time

1

Please log in to post a comment

Log in with GitHub
Discord logo

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