better layout with flex and grid

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  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.

  Marked as helpful

  0

  ---

  

  Hanana•170

  @meantoesPosted over 1 year ago

  @adonmez04 Hi!! you're still there thank you so much!⭐

  use section, more semantic, the hierarchy (I didn't know there was a rule for this🥲) use li, and BEM! all noted and I will try to improve my code with your suggestions :)

  I actually saw your code and you used BEM in it, I wanted to try but I didn't expect that you would actually suggest me😂

  and yeaa, I'm still learning and figuring out when to use grid or flex for better and efficient layout..

  once again thank you very much! sorry for this late reply, I didn't open my frontend mentor cause I'm pretty busy with college lately

  have a nice day and happy coding🍀⭐

  1