Frontend Mentor - Social proof section solution

This is a solution to the Social proof 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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: GitHub Repository
• Live Site URL: Live Demo

My process

Built with

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

What I learned

This project really helped me understand responsive design better. The biggest challenge was making the staggered layout work across different screen sizes.

I learned how to use CSS Grid for the testimonials section:

.social-proof__testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

And how to create the staggered effect on both ratings and testimonials:

.social-proof__rating:nth-child(2) {
  margin-left: 2rem;
}

.social-proof__rating:nth-child(3) {
  margin-left: 4rem;
}

The mobile-first approach made more sense to me this time. Starting with the simplest layout and then adding complexity for larger screens felt more natural.

I also got comfortable with CSS custom properties for the first time:

:root {
  --Very-Dark-Magenta: hsl(300, 43%, 22%);
  --Soft-Pink: hsl(333, 80%, 67%);
}

Continued development

I want to keep working on:

• More complex CSS Grid layouts
• Better understanding of when to use Flexbox vs Grid
• Improving my responsive design workflow
• Making my CSS more organized and maintainable

The hover effect on testimonials was fun to add, but I think I could explore more subtle animations and micro-interactions in future projects.

Author

• Frontend Mentor - @yourusername
• GitHub - @yourusername