This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
This is my third Frontend Mentor challenge!
I started as usual, building the HTML structure. Once finished I continued styling everything. I already knew that I was going to use a Grid layout, I just needed to recap the grid properties (see Useful resources). I was struggling with the height of the items and their content, but using grid-gap and padding helped me to solve it.
After finishing the desktop design, I used media queries to style the mobile version. It was very easy, I just changed the grid layout for a Flexbox one (in columns), and adjusted some images; I also added a little shadow to the items.
This challenge was fun and easy, I really enjoyed practicing my Grid skills, and now I feel more comfortable using it :)
Grid layouts are awesome, so I want to master Grid and Flexbox to make some pretty websites.
I will probably do some JS next.
- A Complete Guide to Grid - This guide was a great resource to review all the Grid properties when I needed.
- Frontend Mentor - @Rich15
- Twitter - @rich_osio