Submitted almost 2 years ago

QR CODE SOLUTION BY A TOTAL NEWBIE

rockdoginafog• 710

@rockdoginafog

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first time doing something with css and html. I really enjoyed doing something other than just learning css with no idea what to do with it. I learned so much more than just watching tutorials on yt.

Community feedback

Hatem Henchir• 530

@hatemhenchir

Posted almost 2 years ago

Hey rockdoginafog, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

replace <div id="border"> with <main id="border"> for semantic HTML. You can read more about semantic HTML here: HTML Semantic Elements
the tag HTML must have a Lang attribute like this <html lang="en">
if you want to use grid to center a div, you can use display:grid;place-items: center; or you can use flexbox like this display:flex;justify-content: center;align-items: center.

The rest is great!

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🍂🦃

Marked as helpful

Michael Johnson• 970

@mikej321

Posted almost 2 years ago

Hello there and congrats on finishing your first project, the feeling is really special when you finally do one on your own :).

Something that could help your code.

place this in the body

body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

This should center your content perfectly in the middle of the page. Next, remove the hard-coded width and height on your #border as that causes it to not be responsive anymore. Replace the width with max-width: 400px, this will cause it to be responsive. Max or min width is almost always a better use case than using width, but there are situations where you'd like to use it still. Always avoid using heights unless absolutely necessary, as they can cause overflow issues if you aren't careful. Finally, remove the position property and values from your #border element. They aren't needed here as the flexbox will center the project without it. Overall, great job on your first project!!!

If you ever need anymore help, I'm always over on Slack

Michael Johnson

Marked as helpful

Please log in to post a comment

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