Testimonials grid, BEM, Mobile first approach

What are you most proud of, and what would you do differently next time?

Hello, I'm Steven and this is my solution for this challenge using SCSS and BEM!😊

🛠️ Built with:

• HTML 🧾
• Native CSS 🎨
• BEM Notation 🅱️

Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

I gained a lot of valuable insights into CSS Grid during this challenge and experimented with various techniques, including grid-template-areas and other grid features. While I’m pleased with the outcome, I see opportunities for further refinement, such as incorporating more CSS variables to streamline the grid layout. Overall, this experience has deepened my understanding of Grid and broadened my approach to layout design.

What challenges did you encounter, and how did you overcome them?

One of the key challenges I overcame was improving my debugging skills. I’ve become much more confident in troubleshooting, and rather than feeling lost when something doesn’t work, I now dive deeper into understanding the root cause. A particular instance involved identifying default styling that wasn’t covered by the modern reset I was using. This experience has sharpened my ability to diagnose issues effectively and strengthened my overall problem-solving approach.

What specific areas of your project would you like help with?

I would appreciate feedback on how I used CSS Grid for the tablet and desktop layouts, particularly in combination with the :nth-child selector. My goal was to minimize the amount of code, as most of the blog cards shared similar styling with only a few differences, which I addressed using :nth-child. While this approach felt efficient, I’d like to ensure it’s the most optimal and maintainable solution.