CSS Margin and Html

Community feedback

• 

  Lê Hoàng Long•290

  @JamesWallison1

  Posted about 1 year ago

  Congratulation on completing one of the FEM challenges! You are doing great but there are multiple mistakes that need to be fixed, I also really want you to take it account too!

  • For the first one: we will discuss about landmarks, this is important, the code you are using here is declaring a class with a div, but the div can't tell what is the role of that part so landmarks help this, using <main></main> <section></section> <footer></footer> is like a command, it helps better accessibility and also better styling of code. For example, with the paragraph part, instead of writing:

          <h3>
            These language are the backborn of every <br />website,defining
            structure,content and <br />presentation
          </h3>
  

  You can change to:

          <h3>
            These language are the backborn of every <br />website,defining
            structure,content and <br />presentation
          </article>
  

  So remember adding that into your next solution!

  • For the second thing, you are totally different from almost everyone in FEM because of using clip-path, well knowing that you are trying to create the border-radius for the elements in that container but this can cause to time-consuming and difficulties when reading code. So instead of using clip-path, you can use border-radius instead!
  • Thirdly is about centering your card, your card here is not properly centering and there is a pro tips that can center it easily without any difficulties, using margin: 0 auto; in CSS at your container will automatically center in the middle of the screen. About the height, you can add min-height: 100vh; display: flex and align-tems: center this will also automatically center the card in the height.
  • And there are also some minor mistakes like padding and margin: well this is depends on your way of thinking, if you want it to be more beautiful add the font and adjust the padding and margin. And you are good to go! You are doing great! So keep pushing yourself to become a successful front-end develop! Thanks a lot for spending time readin this small comment!

  00