Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 18 days ago

Responsive Testimonials Grid Section using CSS Grid

MohamedELRefaei•80
@MohamedELRefaei
A solution to the Testimonials grid section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

The complete workflow mastery: I'm most proud of successfully navigating the entire development-to-deployment pipeline in one session. Starting from understanding Git workflows, implementing git init, creating professional documentation, and preparing for live deployment with GitHub Pages - this represents a huge leap in my frontend development journey.

Professional presentation: Creating a comprehensive README file and crafting a thoughtful Frontend Mentor submission shows I'm thinking beyond just coding. As someone transitioning from UI/UX design, I understand the importance of presenting work professionally, and I successfully applied that mindset to development projects.

CSS Grid implementation: Successfully using CSS Grid to replicate a complex design layout demonstrates my growing technical skills. The fact that I could create a responsive testimonials grid that works across different screen sizes without relying heavily on media queries shows solid understanding of modern CSS techniques.

Earlier planning for accessibility: While I focused on responsive design and clean code, I would prioritize accessibility considerations from the start. Adding proper ARIA labels, ensuring keyboard navigation, and testing with screen readers should be part of my initial development process.

More systematic CSS organization: Next time, I'd implement a more structured CSS methodology like BEM (Block Element Modifier) from the beginning, rather than organizing styles organically. This would make the codebase more scalable and maintainable.

Testing across more devices: I would test the layout on more physical devices and browsers earlier in the development process, not just rely on browser dev tools for responsive testing.

Document the development process: I'd keep better notes about challenges faced and solutions found during development. This would help me build a personal knowledge base and potentially help other developers facing similar issues.

Version control best practices: While I successfully used Git, I could have made more frequent, descriptive commits throughout the development process rather than larger commits. This would create a better project history.

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

Git Workflow Setup Challenge: Confusion about whether to start with GitHub repo or local git init. Solution: Learned the local-first approach (git init → code → publish) is more flexible. VS Code's "Publish to GitHub" made it seamless.

CSS Grid Implementation Challenge: Translating the visual design into functional CSS Grid code. Solution: Used auto-fit and minmax() functions to let CSS Grid handle responsiveness naturally instead of complex media queries.

Professional Documentation Challenge: Underestimated the importance of README files and project documentation. Solution: Researched industry standards and created comprehensive documentation that explains the project and learning outcomes.

Design vs Development Balance Challenge: My UI/UX background made me focus too much on pixel-perfect details instead of core functionality. Solution: Set clear priorities - functionality first, then refinement. Learned when "good enough" is perfect for the learning stage.

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

I'd love feedback on my CSS Grid implementation. Are there more efficient ways to structure the grid layout, or alternative approaches that would provide better browser compatibility?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on MohamedELRefaei's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License