Frontend Mentor - Testimonials grid section solution

This is my 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

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: https://github.com/daHatta/fem-testimonials-grid-section
• Live Site URL: https://dahatta.github.io/fem-testimonials-grid-section/

My process

Built with

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

What I learned

It was a great lesson about grid and some pseudo-classes.

I used some of the tree-structural pseudo-classes:

.testimonial-card:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.testimonial-quote:last-child {
  line-height: 1.4;
}

It was also nice to set up a grid with different row heights and gaps:

.testimonial-box {
  gap: 24px 30px;
  grid-template-columns: repeat(4, 255px);
  grid-template-rows: 282px 266px;
  margin-block-start: 0;
}

Continued development

As it was a great exercise to practice grid and flex, i still need some more to do. Next will be something with JS again.

Useful resources

• A (more) Modern CSS Reset - This article by Andy Bell helped me to reset websites for browser.
• Google Fonts - Font Barlow Semi Condensed used
• grid - Nice source to learn about grid.
• flex - Nice source to learn about flex.
• Pseudo-classes - Nice source to learn about pseudo-classes.

Author

• Frontend Mentor - @daHatta