Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive testimonial grid built with Sass/SCSS Grid and flex

P

@Jomagene

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm most proud of how closely the final implementation matches the original design. The use of Sass/SCSS helped in organizing the CSS, making it more maintainable and scalable. Next time, I would consider experimenting more with CSS Grid to manage complex layouts without relying on Flexbox as much.

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

One challenge was aligning the elements correctly within the grid and ensuring responsiveness across different screen sizes. I overcame this by using a combination of CSS Grid and Flexbox, and tweaking the layout within media queries for larger screens.

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

I would appreciate feedback on improving the performance of the grid layout, especially regarding load times and how I could have optimized the use of SCSS mixins and variables further.

Community feedback

@Mohamed-ben-Ali

Posted

Absolutely! Your solution showcases a solid use of semantic HTML, which enhances both the accessibility and the overall structure of the content. The accessibility is well-implemented, ensuring that the site can be navigated and understood by all users, including those relying on screen readers.

The layout is responsive and looks great across a wide range of screen sizes, maintaining its integrity and usability whether viewed on a mobile device or a larger desktop screen. The code is well-structured, readable, and demonstrates good practices for reusability, which is essential for maintaining and scaling projects.

Your solution stays true to the original design, with only minor differences that enhance the user experience without deviating from the core design. Overall, you've done an excellent job, and your attention to detail is evident throughout the project!

0

P

@Jomagene

Posted

@Mohamed-ben-Ali Thank you so much, for your thoughtful feedback. It means a lot to me that you noticed the effort I put into the semantic HTML and accessibility. Your kind words about the responsiveness and code structure really touched me and inspire me to keep pushing myself to do better. I’m truly grateful 🙏 for your encouragement. Thank you again!😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord