better layout with flex and grid

Hi, @meantoes. It's a really good solution. Wow, I saw border-box property, it's a great progressive:) Keep coding. I have some suggestions for you.

The HTML Structure

• You can use section tag instead of div at class="contents". Section tags separate the main to different parts. It's the basic layout in the page.

• You can use <strong class="para_one"> instead of <p class="para_one">.  Semantic tags  like strong, section etc. will make your content more useful and readable for screen readers, search engines and your colleagues.  

• You should use h2 tags instead of h3 tags. h1-6 tag follow each other. You cannot use h3 tags without h2. They relate to your page hierarchy.

• You don't need to use 'pre' tag on the page. These are just some items on the list. Keep it simple. Use ul > li for them. That's it.

• You can use BEM notation for your class names. When you try to use BEM, you will have a little difficulty in the beginning but at some point everything will be easy for you.

  • You can check the BEM notation in these links:
  • Official Website the BEM
  • Why I use the BEM naming convention for my CSS

The CSS Properties

• You can use CSS Grid for your page layout. There are three card areas in the project. You can wrap all of them with CSS Grid and you can change the layout for mobile and desktop. Check some good solutions and implement them into your code.

I hope these will help you to improve your perspective and your solutions will improve step by step. Keep coding. All the best.