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

• Frontend Mentor - Testimonials grid section solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

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

Screenshot

Preview:

My solution:

Links

• Solution URL: Testimonials Grid Repo
• Live Site URL: Testimonials Grid Live Solution

My process

Built with

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

What I learned

1 - One of the most important lessons I learned from this project was working with measurements based on multiples of 10. I had used this technique before, but I believe I now truly understand how much easier it makes things. It involves setting the HTML font size to a percentage equivalent to ten pixels. From there, 10px = 1rem, so to apply, for example, 13px, you just use 1.3rem. After that, the work flowed much faster, and the results were more precise.

html {
    font-size: 62.5%;
}

2 -I learned how to change the color of .svg via CSS.

.card-header__icon[data-icon="quotation"] {
    ...
    fill: var(--co-primary-03-light-pink-70);
    ...
}

Continued development

I need to learn more about shadows and how to name classes using BEM. I think I not only need to work on more projects or watch more tutorials but also to see other people's solutions.

Useful resources

The main resources I used were:

• Origamid's Complete CSS Grid Guide - It helps me recall property names and their purposes. It's an excellent quick-reference guide.
• Origamid's Complete CSS Flexbox Guide - For the same reasons I chose the CSS Grid guide.
• Cesar Lopes’ blog post on "How to Change SVG Color with CSS" - I learned how to change SVG colors via CSS.
• CSS Tricks’ Complete Guide to Grid - Also great for quick references and solving specific CSS Grid doubts.
• CSS Grid Layout da Mozila - I’m reading it to improve my understanding of Grid and to do better in future projects.

Author

• Website - Gillian Oliveira
• Frontend Mentor - @lia-oliveira
• X - @byliaoliveira 🚧

Acknowledgments

Thank you to my colleagues @AdrianoEscarabote, @R3ygoski, and @damigand for the time spent analyzing and contributing to the improvement of the Four card feature section solution. Your valuable insights have made this project better than it would have been originally.