Testimonials Grid Section

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

I'm most proud of how I built a mobile-responsive layout using CSS Grid. This was my first time applying grid concepts in a real project, and it helped me understand how powerful and flexible grid can be for layout control. I also kept the design clean and structured, closely matching the original design from Frontend Mentor.

If I were to do this project again, I would:

Use grid-template-areas for better readability in the layout.

Focus more on accessibility by adding semantic HTML elements and aria attributes where needed.

Possibly explore using Sass or custom CSS variables to make styling even more organized and reusable.

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

The biggest challenge I faced was arranging the grid layout to match the design template exactly. It was difficult figuring out how to position each testimonial card correctly, especially since they had different sizes and some spanned multiple columns or rows.

To overcome this, I:

Studied the design carefully to understand the layout structure.

Experimented with different grid-template-columns, grid-template-rows, and grid-column/grid-row values.

Used browser dev tools to test changes live and adjust placements.

Searched for examples and tutorials on CSS Grid area placement.

This helped me get much closer to the intended design, and I now have a better understanding of how to build complex grid structures.

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

I would appreciate help with improving my CSS Grid layout structure, especially in these areas:

How to better organize grid areas for complex card layouts, like when some elements span multiple rows or columns.

Whether there’s a more efficient or cleaner way to write my CSS without repeating styles across different media queries.

Suggestions on accessibility improvements, such as better semantic HTML or ARIA usage.

Any tips on optimizing responsiveness for very small screen sizes or large displays.

If anyone notices specific parts of my code that could be simplified or made more readable, I’d really value that feedback too.