📚 Frontend Mentor Challenge - Social Proof Section

A responsive page for [Social Proof Section on Frontend Mentor]. A responsive social proof component showcasing customer ratings and testimonials with a modern, clean design.

🔗 Links

• Solution URL: github.com/itsadnwn/social-proof-section
• Live Site URL: itsadnwn-social-proof-section.vercel.app

🛠️ Technologies Used

This project was built with:

• HTML5
• CSS3
• Flexbox
• CSS Grid
• Google Fonts (Leage Spartan)
• Media Queries for responsive design

🎯 What I learned & Practiced

⭐ Grid vs Flexbox Decision Making

Through building this project, I have come to understand truly when to use each layout system:

Grid: For 2-Dimensional & Content-Independent Layouts:

• Perfect for the ratings container where I needed 3 specific rows
• The layout exists first, content fills it second
• Great when control is needed over both rows and columns

Flexbox: For 1-Dimensional & Content-Dependent Layouts

• Used inside each rating cards
• Used for the customer profile layout
• Great for component-level arrangements in a single direction

⭐ CSS Alignment Properties Mastery

The biggest breakthrough for this project was understanding these 4 alignment properties and when to use each:

justify-content [Flexbox & Grid Container]

• Controls all items along the main axis
• Use when you want to distribute/space all items together
• Applies to the container

justify-items [Grid Container Only]

• Controls all grid items horizontally at once
• Use when you want all grid items to align the same way
• Applies to the grid container

justify-self [Grid Item Only]

• Controls a single item's horizontal position
• Use when you want one item positioned differently
• Applies to individual grid items

align-self [Flexbox & Grid Item]

• Controls a single item's vertical alignment
• Use when you want one item's vertical alignment to differ
• Applies to individual items

🧩 Challenges Faced & Solutions

🌱 Staggering Issues

I wanted a staggered layout for the ratings cards on desktop. And my first attempt failed because I used justify-items and that's for containers to control all children, yet I was applying it to the items themselves.

To fix this, I used justify-self instead because each rating card is a grid item, and justify-self allows for individual items to position themselves differently within their grid areas.

In the same way, I used align-self for the testimonials to position each item differently vertically.

✨ Key Features

• Fully Responsive Design: Optimized layout that adapts to different screen sizes
• Modern CSS Techniques: Built using CSS Grid and Flexbox for robust layout control

📁 File Structure

• index.html: Main HTML markup and content structure
• styles.css: CSS styling with responsive design and interactive effects
• resources: Images and other assets

🔧 Development Notes

• Built with semantic HTML5 for accessibility
• CSS organized with custom properties for maintainability
• Mobile-first approach ensures optimal performance on all devices
• Tested across multiple browsers and device sizes