Frontend Mentor - Testimonials grid section solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: Github
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite - Build Tool
• Vue - JS library

What I learned

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.

Useful resources

• 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.

Author

• Frontend Mentor - @KevDCS
• Twitter - @codosho