Frontend Mentor - Testimonials grid section

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Testimonials grid section
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

This challenge helped me understand CSS Grid layout. I worked a lot to learn the basics of Grid.

The challenge

The challenge was to build out this testimonials grid section and get it looking as close to the design as possible.

Working with Grid will be easy if you open the dev tool and see the Grid lines. Besides the layout, the HTML and choosing semantic elements was another challenge!

Screenshot

Links

• Live Site URL: Testimonials grid section
• Solution: Solution on Frontend Mentor

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• CSS Flexbox

What I learned

• Basic understanding of CSS Grid
• Using grid-tamplate-areas
• fr CSS Grid unit
• minmax() function

Continued development

Since I learned a lot on this project, I'm looking forward to trying more challenges from Frontend Mentor.

Author

• Telegram - Aram Moradian
• Frontend Mentor - @OhSorrow
• GitHub - OhSorrow