Skip to content
Submitted over 1 year ago

QR component first solution. Just base HTML CSS

japoco00•10
@japoco00
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

Any advice is appreciated, i'm trying to improve my ability and skills in html/css.

  • What is the best way to center the div?
  • What is the best html structure for this challenge?

Community feedback

  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey JAPOCO00

    There are a few ways to center a div, the best and easiest way(in my opinion) is to have a container that has a width and height and then set the container's display to flex and then add a justify-content:center; and an align-items:center like you did. But display:grid and then place-items:center can also work but not as well as the flex one.

    I see however that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width/height of your containers easily.

    Also dont use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    so your code should be something like this:

    <body>

  <main>
         <img>
          <div>
              <h1>title</h1>
              <p>Text</p>
          <div>
  </main>

  <footer>
       <p>footer</p>
  </footer>
</body>

    Hope this helped

    Marked as helpful
    2
    japoco00•10
    @japoco00Posted over 1 year ago

    @BernardusPH wow thank you very much! Your comment is super useful and appreciated! I'll surely put your advice into practice!

    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