CSS Grid, Flexbox and Vanilla Javascript

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! It looks good!... Here are some suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="container">
        //...
     </div>
  </main>
  

  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  • I suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:

  body {
        font-family: Arial, Helvetica, sans-serif;
        /* width: 80%;         /* <---- Remove */
        /* margin: 40px auto;         /* <---- Remove */
        background-color: hsl(216, 12%, 8%);
      }
  main {    /* <---- Add */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }
  .container {
        //...
        /* margin: 0 auto;         /* <---- Remove */
      }
  

  I hope this is helpful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Shank0071•190

  @Shank0071Posted over 2 years ago

  @Bayoumi-dev Thank you for your suggestions.... I will be working on it

  0