3 column preview project using Flexbox & Grid

Community feedback

• 

  P

  Øystein Håberg•10,670

  @Islandstone89Posted 9 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .container to a <main>.

  CSS:

  • Remember to include a good CSS Reset at the beginning.

  • As the card container is centered using Flexbox on the body, you don't need margin: 0 auto on .container.

  • max-width should be on the card container, .card.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove font-weight: 400 on body, as that is the default value.

  • Ideally, you want to do mobile styling first, and use media queries(they should not be in px, but in rem) for larger screens.

  Marked as helpful

  0

  ---

  

  Ayush Yadav•140

  @aayushyadavzPosted 8 months ago

  @Islandstone89 Review my latest challenge which I've done called Stats preview card.

  0
• 

  Souhail•510

  @SouhailM07Posted 9 months ago

  Hello Developer , I can improve your project if you want.

  1

  ---

  

  Ayush Yadav•140

  @aayushyadavzPosted 9 months ago

  @SouhailM07 ya sure.

  1

  

  Souhail•510

  @SouhailM07Posted 8 months ago

  @AayushYadavz Done , if you like your new project , you can follow me on github for more , by the way your live demo in front end mentor is not working .

  0

  

  Ayush Yadav•140

  @aayushyadavzPosted 8 months ago

  @SouhailM07 you can access it from my GitHub

  0

  

  Souhail•510

  @SouhailM07Posted 8 months ago

  @AayushYadavz i know , but you need to change it here in order for others to view it .

  0

  

  Ayush Yadav•140

  @aayushyadavzPosted 8 months ago

  @SouhailM07 bro it's working I have clicked on view code then I got redirected to my repo

  0