Skip to content
Submitted almost 2 years ago

QR CODE SOLUTION BY A TOTAL NEWBIE

rockdoginafog•710
@rockdoginafog
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    @hatemhenchirPosted 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
    2
  • Michael Johnson•970
    @mikej321Posted 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
    1

Please log in to post a comment

Log in with GitHub

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