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

Links

• Solution URL: https://github.com/freakyjones/testimonial-grid
• Live Site URL: https://testimonial-grid1.netlify.app/

My process

1. Downloading all assets for the project.
2. Import required fonts from google fonts.
3. building THE HTML structure for the project.
4. Adding CSS for making it beautiful and mobile responsive.
5. Create a Github repo for the project.
6. deploy it to netlify.

Built with

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

What I learned

I learned a lot about grids with this project, including how to make a responsive layout with the grid.

.card:nth-of-type(5) {
  grid-row: 1/3;
  grid-column: 4/5;
}

Continued development

I love to focus on my time estimation although I can learn and create new things I would love to do it faster. Also, I will continue to work on making responsive and animated websites.

Useful resources

• https://www.youtube.com/watch?v=sKFW3wek21Q - This helped me for making my grid layout responsive.

Author

• Frontend Mentor - @freakyjones