testimonial grid challenge

Community feedback

• 

  P

  Rahexx•920

  @RahexxPosted 4 months ago

  You’ve done a great job with this challenge! Below are some detailed comments to help you refine your project further:

  1. Responsiveness

  • For screens wider than 1320px, your website does not occupy the full height of the screen height, resulting in a noticeable white line. While resizing elements dynamically is a good practice, be careful to ensure proper scaling for all screen sizes.
  • On screens narrower than 1300px, a vertical scrollbar appears, which is not necessarily a problem, but at widths near 1000px, the layout deviates slightly from the design.
  • A potential solution: Use two columns for wider screens and move the third column below, spanning the full width. This would also reduce spacing issues between the grid and the page edges.
  • Great decision to resize boxes for screens smaller than 1000px – it kept the layout close to the design.

  2. HTML and BEM

  • Your use of BEM methodology is spot-on and makes your code clean and maintainable.
  • Consider using h2 tags for grid section titles to improve the semantic structure of your HTML. Always use heading tags (h1 to h6) for elements intended as titles.

  3. Custom Properties

  • You’ve done an excellent job organizing custom properties. Including font-weight is a nice touch.
  • One suggestion: Rename variables like fw-sm: 500 to something more descriptive, e.g., font-weight-sm. It makes your code easier to read and understand at a glance.

  4. Mobile-First Approach

  • It’s great to see that you used a mobile-first approach. This is a recommended practice, and you’ve implemented it well.

  5. CSS and Grid

  • Your CSS code and grid usage are impressive. You’ve demonstrated a solid understanding of CSS Grid, including using repeat for rows and columns.
  • To improve readability, add whitespace between CSS rules, not just before @media queries. It will make your styles easier to navigate and maintain.

  ---

  Final Thoughts

  You’ve made excellent progress with this project. Your attention to detail and willingness to tackle challenges like responsiveness and grid layout are commendable. Keep up the great work – you should be proud of your progress!

  Marked as helpful

  0

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 4 months ago

  @Rahexx I will make the corrections, thank you.

  1
• 

  Stefan Zorbas•210

  @stezorPosted 4 months ago

  Like the solution. I don't really have anything to suggest

  Marked as helpful

  0
• 

  Suleiman Oz•120

  @Suleiman-OzPosted 4 months ago

  keep going

  0