Beginner-QR-Code-challenge-using-basic-HTML-and-CSS

Community feedback

• 

  Gr3g0ry99•120

  @Gr3g0ry99

  Posted over 2 years ago

  Hey buddy! So to center the box, if you remove all the margins you have set to the square class which will remove the scrollbar and add the following to the body class: min-height: 100vh; display: flex; justify-content: center; align-items: center;

  This should center the box! Let me know if this helps :)

  12

  Marked as helpful
• 

  Angela Moore•170

  @Cyber-Chic

  Posted over 2 years ago

  Wonderful job completing your first challenge! 😊

  In addition to the other feedback you've received for this challenge, I have a few more recommendations:

  • There are games you can play to learn how to center content. I suggest trying Flexbox Zombies, Froggy Flexbox and Grid Garden. All 3 of the games are free.

  • Change your background color. You used a slightly different color. To do this I would change your code from:

  background-color: #c4e4e9;
  

  to

  background-color: hsl(218, 44%, 22%);
  

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

  • Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

  Example:

  <main>
    <div class='container'>
      <h1>Main heading text</h1>
      <p>paragraph text</p>
    </div>
  </main>
  

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  00

  Marked as helpful
• 

  Durban86•320

  @Durban86

  Posted over 2 years ago

  Reading up on Flexbox will help you tons. Read this article and centering things will be a breeze. CSS Tricks: A Complete Guide to Flexbox

  Not everyone is going to have the same screen size, so hard margins won't center it for everyone.

  Also read up on padding and margin shorthand. It'll save you time instead of having to type out "margin-left, margin-right, margin-top" each time.

  Here is my css for reference

  Well done, keep at it!

  01

  Marked as helpful