Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor.

Table of contents

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

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

Overview

The challenge

To build out the testimonials grid section of a bootcamp website and get it looking as close to the design as possible. Users should be able to:

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

Screenshot

Links

• Solution URL: https://t.co/hwCEA4ETA0
• Live Site URL: https://testimonials-grid-section-sdnitrogen.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow

What I learned

Used CSS Grid for the body as well the testimonial section and placed each testimonial articles in their specific grids according to the responsive layouts. I didn't use grid-template-areas for this solution but that is another fun way to implement grids for responsive layouts which I'll explore in the upcoming challenges.

Continued development

I'd continue to polish my css grid skills along with css flexbox for designing the perfect layouts.

Useful resources

• CSS Tricks - This website always comes in clutch when you need to lookup specific css functionalities.

Author

• Website - sdnitrogen
• Frontend Mentor - @sdnitrogen
• Hashnode - Nitro Blog

Acknowledgments

I've included a CSS Grid cheat-sheet that I always refer to when I'm stuck and I'd love to mention the original creator here - @simonpaix.