Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/codingwithjiro/frontend-mentor-testimonials-grid-section

A responsive testimonials grid section built with HTML and CSS. Created as part of a Frontend Mentor challenge.
https://github.com/codingwithjiro/frontend-mentor-testimonials-grid-section

3rd-month css frontend-mentor git github html lighthouse netlify perfectpixel project vscode

Last synced: about 2 months ago
JSON representation

A responsive testimonials grid section built with HTML and CSS. Created as part of a Frontend Mentor challenge.

Awesome Lists containing this project

README 

          
# Testimonials Grid Section



![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-3e54a3?style=for-the-badge&logo=frontendmentor&logoColor=white)](https://www.frontendmentor.io/)

[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://code.visualstudio.com/)

[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)](https://git-scm.com/)

[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/)

[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://www.netlify.com/)

[![PerfectPixel](https://img.shields.io/badge/PerfectPixel-F56C94?style=for-the-badge)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)

![Image → Code](https://img.shields.io/badge/Image%20→%20Code-✔️-6a1b9a?style=for-the-badge&labelColor=2e003e&logoColor=white)

![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)

![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)

![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)

![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)

![Dark Mode](https://img.shields.io/badge/Dark--Mode-Available-111?style=for-the-badge&logo=halfbrickstudios&logoColor=white)

[![Google Lighthouse](https://img.shields.io/badge/Lighthouse-Audit-00B0FF?style=for-the-badge&logo=lighthouse&logoColor=white)](./assets/downloads/lighthouse-performance-report.pdf)



[![Netlify Status](https://api.netlify.com/api/v1/badges/b8187089-ac76-4cac-8071-dcd99fed769b/deploy-status)](https://testimonials-grid-section-fm-jiro.netlify.app/)

![Status](https://img.shields.io/badge/status-complete-brightgreen)

![Learning Path](https://img.shields.io/badge/learning%20path-month%203-blue)

![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-testimonials-grid-section&left_text=repo%20views)



## A Responsive Grid of Testimonials Section Page



| _Mobile Preview (375x812)_                                   | _Desktop Preview (1440x960)_                                    |

| ------------------------------------------------------------ | --------------------------------------------------------------- |

| ![Mobile](./assets/img/site-preview-mobile_375x812.png)      | ![Desktop](./assets/img/site-preview-desktop_1440x960.png)      |

| ![Mobile](./assets/img/site-preview-mobile-dark_375x812.png) | ![Desktop](./assets/img/site-preview-desktop-dark_1440x960.png) |



This project showcases a responsive grid of testimonial cards, each featuring a real-world user’s experience.



Created as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.



---



## Overview



This site was built using semantic HTML5 and custom CSS, with accessibility and responsive design in mind where each testimonial card is styled individually using CSS Grid with named areas.



It features subtle hover effects, adaptive color schemes (light/dark), semantic ARIA markup, and is also optimized for reduced motion preferences and high-contrast environments.



---



## Features



- Mobile-first responsive design using CSS Grid

- Dark mode support using `prefers-color-scheme`

- Accessibility with semantic HTML and ARIA attributes

- Custom layout using named `grid-template-areas`

- Adaptive image sizing and inline SVG styling

- Custom testimonial card components with visual hierarchy

- PerfectPixel usage for pixel-precision alignment



---



## What I Learned



- Implementing advanced CSS Grid with area mapping for dynamic layouts

- Creating and organizing CSS variables for theme toggles

- Using `aria-labelledby` and `aria-describedby` for assistive technology navigation

- Designing for reduced motion preferences with fallbacks

- Structuring large multi-section layouts with scalable CSS architecture

- Troubleshooting alignment and spacing using PerfectPixel

- Applying a clean and organized project directory structure for scalability

- Self-hosting fonts using `@font-face` for performance and control



---



## Tech Used



- HTML5

- CSS3

- Git

- GitHub

- Netlify



---



## Design Reference & Tools



- JPG design image

- PerfectPixel



---



## How to Run



1. Clone the repository

2. Open `index.html` in your browser



---



## Live Demo



Or you can check out the **[live website here](https://testimonials-grid-section-fm-jiro.netlify.app/)**



---



## Performance Report



A **Google Lighthouse** audit was conducted on the final version of this project. You can view the **[full report here](./assets/downloads/lighthouse-performance-report.pdf)**.



---



## Author



Created by **Elmar Chavez**



Month/Year: **June 2025**



Journey: **3rd** month of learning _frontend web development_.