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

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: Vercel

My process

Built with

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

What I learned

This is the first time I used :nth-child(). I totally see the benefit of using it in this excercise.

article:nth-child(1) .social-avatar {
  border: 3px solid var(--clr-accent-200);
}

Continued development

Learn more grid. Learn about using utility-classes as that seems a thing now.

Useful resources

• Learn CSS Grid The Easy Way - Kevin Powell - I watched his tutorial before I got started, to understand better how grid works and how to work with grid-template-areas. I also took some inspiration in how he sets up his css-file. Though I also thought it was important to keep writing code the way I do now, before going totally in this idea of 'utilities' and 'variables'.
• Modern Container - Kevin Powell - Another Kevin Powell-resource. This for setting up the .container.

Author

• Frontend Mentor - @graficdoctor
• Twitter - @graficdoctor