
Design comparison
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.
Community feedback
- P@sdkdeepaPosted 3 months ago
Great effort! Could match the design
- Instead of <header> and <footer> for each testimonial, you could try just with <section>.
- The background does not not match the design [var(--light-grayish-blue)].
- The page is responsive however does not match the design
- The image
bg-pattern-quotation.svg
missing. - Also verify the font weight and colors inside the footer and section.
- Check out - https://gridbyexample.com/patterns/
Hope this help!
Marked as helpful0 - @GentlestanPosted 3 months ago
Thank you @sdkdeepa for your feedback! After reviewing your comment, I took the time to go through my project and noticed that I had unintentionally missed a few design elements. While I originally would have loved to build everything from scratch, I had to find a way to incorporate those missing parts, including the background image, background color, and removing the footer. Your input has been incredibly valuable, and I truly appreciate your help in improving the design. Thanks again!
0
Please log in to post a comment
Log in with GitHubJoin 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