Testimonials Grid Section Solution

Solution retrospective
I started by creating all the HTML elements and assigning them classes. Next, I started to work on the cards, where I added things like box shadows, background images, and padding. Then, I moved onto the text, where I spent time getting the colors, sizes, and styles right. I then moved onto the top of the cards, where I used proprties such as Display: flex, and margin to get the spacing and design right. Once I was down styling the cards, I moved onto the layout. I used flexbox properties on the body, to get everything centered horizontally and vertically. Once, I was done, I learned about some basic grid properties, as this was my first project using and learning about grid. I used things like grid template columns, to create my layout. I had some difficulty dealing with the second row, and the long card, as they would be spaced further away, ruining the layout. I spent some time experimenting, writing things out, and reworking my HTML, until I fixed my issue. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Daniyal Master'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