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

Vanilla CSS and HTML Solution to the QR Code Component Challenge

Nahri Jae 30

@JaeZzZ

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, everyone! I'm unsure of positioning and margin best practices, so if you have any advice for me I would be super appreciative! Also, let me know if my code could be optimized. Looking forward to growing and getting better. Thank you :)

Community feedback

egai 30

@egaiosowor

Posted

Went through your source code, your HTML is clean and well structured. In your style sheet, I noticed some issues. I don’t feel it’s a good practice making use of so much positioning. On your body, you can just use display: grid and then place-items: center. It will place your main in the center of the page. Give your figure a width of about 80%, then give your figure image a 100% width, all these help eliminate the excessive use of positioning.

Marked as helpful

0

Nahri Jae 30

@JaeZzZ

Posted

@egaiosowor Wow, thank you, Egai! I'll remember your advice and try again.

1
egai 30

@egaiosowor

Posted

You’re welcome 👍🏾

0

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