Testimonial Grid Project

Solution retrospective
I am most proud of how I was able to leverage the grid system to create a responsive layout for the testimonials. Through this project, I deepened my understanding of key grid properties like grid-template-columns, grid-column, grid-span, and how to rearrange or order grid items effectively. Additionally, I gained valuable insights into semantic HTML and using meaningful CSS class names, making the code both cleaner and more readable.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was determining the best way to organize the grid layout to ensure responsiveness. The initial arrangement didn’t look good on smaller screens, and it took some time to refine the layout so it displayed correctly across devices. I solved this by using media queries and experimenting with different grid settings to ensure that the layout adjusted as expected on larger screens. I also encountered some issues with aligning text and images, which I resolved by adjusting padding and margins.
Another challenge was ensuring that the project was properly structured in terms of semantic HTML. This was a learning curve, but I solved it by reviewing best practices for semantic elements and ensuring I used appropriate tags such as <header>, <section>, and <footer>.
What specific areas of your project would you like help with?Advanced Grid Techniques: I'd love to explore more advanced grid concepts, like creating more complex layouts and using grid areas for more intricate designs.
Accessibility: Mentorship on how to improve accessibility further, ensuring that this project can be fully usable for all users, especially those with disabilities.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Ohazulike Stanley'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