attempting to use css grid :D

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Khadija, It looks good!...

  My suggestions:

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

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

  • Page should contain a level-one heading, Change h2 to h1

  <h1>Join our community</h1>
  

  You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

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

  main {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }  
  
  .container {
      width: 350px;
      /* margin: 0 auto; */   <--- Remove
      //...
  }
  

  I hope this is helpful to you... and I want a cookie 🍪

  1

  ---

  

  Khadija Hashmi•200

  @khadijahashmi2Posted over 2 years ago

  @Bayoumi-dev Hii! thankyou so much, i just posted my edited solution, it was really helpful! here's a cookie 🍪 and some milk to go with it 🥛 :D

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Lets firstly work on your accessibility issues.

  • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.
  • Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p>Join our Community </p> should be <h1>Join our community</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

  This should fix most of your accessibility issues.

  • You can use flex or grid to center your container horizontally and vertically.

  . Regardless you did amazing... hope you find this helpful... Happy coding!!!

  0

  ---

  

  Khadija Hashmi•200

  @khadijahashmi2Posted over 2 years ago

  @Samadeen hiiii!! thankyou soo much, it was reallyy helpful, i really appreciate your encouragement :D i just posted my edited solution. here's two cookies 🍪🍪

  0