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
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Live Site URL: Hosted on Github Pages

My process

Built with

• HTML
• Sass/Css
• CSS Grid
• Mobile-first workflow

What I learned

This was my first time using CSS Grid. As for what I learned from this project, two main concepts stick out in my head. The first being the creation of grids using the "grid-template-area" css rule which allowed me to visually create a template and map out where each cell's content would appear. The second being the "grid-template-rows" and "grid-template-columns" css rules which allowed me to define the size of the columns and rows respectively.

Continued development

For future projects that require grids my aim is to utilize more of the CSS Grid features. One that comes to mind is the use of the "repeat()" function in conjunction with the "fr" units. I imagine it would prove useful in situations where you are loading dynamic content from an api and are looking for more of a generic CSS Grid template loading X cells ( where X is greater than one and hopefully less than infinity lol).

Useful resources

• My Intro to CSS Grid - This tutorial was my introduction to CSS Grid. Initially I followed along with the tutorial using CodePen.io to get some of the basic concepts down. Throughout my design process I also used it as a reference.
• Lining up the Background Quotation Marks - I still haven't built up the intuition for positioning background images. I used this as a reference and it helped me achieve the position of the quotation mark background image.

Author

• Website - Rashid Wilson
• Frontend Mentor - @shangum

Acknowledgments

Shout out to Joy Shaheb from FreeCodeCamp.org for the great CSS Grid introduction tutorial. It really helped!