Testimonials grid section - SCSS

Community feedback

• 

  Mazen Hassan•600

  @Mazz100Posted 11 months ago

  @ParaPaca Hello. Well done on completing the project!

  While the final solution is looking great, I have some tips that might help you.

  CSS SCSS:

  • Consider using rems for sizing UI like font-size and width, other properties can be preference. Note: 1rem = 16px.

  • Nesting elements in SCSS can very quickly get confusing and unreadable, you can separate unrelated classes like .card and .name-wrapper outside of main.

  • I am not an expert but I feel that using the nth child thing a lot is complicating and other selectors that I don't know or even using.

  • the last 2 points I mentioned I want to highlight the readability of CSS too, I also fell for nesting too much with SCSS forgetting that CSS exists.

  HTML

  • The main element should be inside the container or wrapper because it indicates the the main content of a website, its like accessibility tip, I also get confused by it sometimes.

  I hope any of this could help in any way for future projects :).

  Resources that could help:

  SASS Nesting

  CSS Units

  Marked as helpful

  1

  ---

  

  Svetlana Savelenok•150

  @ParaPacaPosted 11 months ago

  @Mazz100, hello! Thank you for your feedback! Your comment was very useful to me 😊

  1. You're totally right! I redefined all my px into rem. I didn't think about this possibility before as much as should, I think 😅
  2. Oh geez, I didn't think about it at all before! 😱 I can imagine how difficult all my previous projects were to read (thanks to everyone who figured them out). I edited my CSS where it was necessary.
  3. I rethought about nth-child and agreed with you, so I deleted all nth-child and added additional classes, such as card1, card2 and etc.
  4. I didn't know it! I will use this knowledge in my subsequent projects.

  1