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
  • Continued development
  • Useful resources

Overview

The challenge

Users should be able to:

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

Screenshot

Screenshot of desktop version.

Screenshot of mobile version.

Links

• Solution URL: Johnsonworld Testimonial Code

• Live Site URL: Johnsonworld Testimonial Live Site

My process

Built with

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

What I learned

This was a good exercise for becoming more comfortable with Grid. Also it was my first time doing mobile first and also strictly doing layout before adding any additional styling - which helped greatly. Also, my Git & GitHub process is much better with this exercise.

Continued development

I would like to keep using Grid and Flexbox in challenges until it becomes second nature - practice!

Useful resources

• Mozilla Grid Layout Page - This is a good reference for Grid.