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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Mobile-first workflow
- Vite - Build Tool
- Vue - JS library
I haven't used grid in a long time, and I had a hard time trying to make it responsive and arranging the cards. Also it took me a while to figure out how to make it responsive, cause I was setting the media queries right, but I had set the width and height, and that wasn't letting the items to adjust in lower resolutions.
Also I tried to use variables in CSS this time, just to get me use to use them, it's easier but I still need practice to know how to use them properly.
- CSS Tricks Grid Guide - This is an amazing article which helped to remember a couple of things, and even when I know I know something, I still double-check it, it's the best guide. I'd recommend it to anyone still learning this concept.