QR code HTML and CSS

Solution retrospective
This was a decently straight forward. I decided to change up the colors a bit and just the general size of the card. I thought it was a little big at first
What challenges did you encounter, and how did you overcome them?my biggest challenge was getting github and git desktop set up. i think i finally did it though!
What specific areas of your project would you like help with?i didnt add the mobile version yet but was planning on adding a media query page. Just wanted to get some feed back on my initial code. is it too complicated?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0KAshish
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you:
- 🔧 If you're trying to center your QR component, you've used unnecessary CSS. You can achieve the same result more cleanly using either CSS Grid or Flexbox.
Here’s an example using Grid:
body { width: 100%; height: 100vh; display: grid; place-content: center; }
And here’s how you can do it with Flexbox:
body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
These methods are more concise and recommended for centering content both horizontally and vertically.
- 🎨 Try to maintain the design system by keeping consistent values for:
- Background color
- Height & width
- Font color
- Spacing
Sticking to the provided design system improves visual consistency and makes your code more professional.
- 🧹 There seems to be a lot of unused CSS in your stylesheet. Cleaning that up will make your code easier to read and maintain.
I hope you find it useful! 😊 Overall, the solution you submitted is solid but could use a few quick fixes. Keep it up!
Happy coding!
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