https://github.com/ayokanmi-adejola/testimonial-grid-section
Testimonials Grid Section built with HTML5, CSS Grid, and responsive design. Featuring a complex grid layout that adapts from 4-column desktop to single-column mobile view.
https://github.com/ayokanmi-adejola/testimonial-grid-section
css3 google-fonts grid-layout html5 mobile-first-workflow
Last synced: 8 months ago
JSON representation
Testimonials Grid Section built with HTML5, CSS Grid, and responsive design. Featuring a complex grid layout that adapts from 4-column desktop to single-column mobile view.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/testimonial-grid-section
- Owner: Ayokanmi-Adejola
- Created: 2025-06-04T17:10:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-24T19:06:08.000Z (10 months ago)
- Last Synced: 2025-09-30T00:00:40.730Z (9 months ago)
- Topics: css3, google-fonts, grid-layout, html5, mobile-first-workflow
- Language: HTML
- Homepage: https://testimonial-grid-section-two-delta.vercel.app
- Size: 304 KB
- Stars: 13
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Testimonials Grid Section Solution
This is a solution to the [Testimonials grid section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
## My process
### Built with
- Semantic HTML5 markup
- CSS Grid
- CSS custom properties
- Mobile-first workflow
- Google Fonts (Barlow Semi Condensed)
- Responsive design principles
### What I learned
This project was an excellent opportunity to practice CSS Grid layout and responsive design. Here are some key learnings:
**CSS Grid Layout**: I implemented a complex grid layout that changes from a 4-column desktop layout to a single-column mobile layout.
```css
.testimonials-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, auto);
gap: 30px 24px;
}
.daniel {
grid-column: 1 / 3;
grid-row: 1;
}
.kira {
grid-column: 4;
grid-row: 1 / 3;
}
```
**Responsive Design**: Used mobile-first approach with media queries to ensure the layout works perfectly on all devices.
```css
@media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, auto);
}
}
```
**Semantic HTML**: Structured the content using semantic elements for better accessibility and SEO.
```html
Daniel Clifford
Verified Graduate
```
### Continued development
Areas I want to continue focusing on in future projects:
- Advanced CSS Grid techniques and subgrid
- CSS animations and transitions for enhanced user experience
- Accessibility improvements (ARIA labels, keyboard navigation)
- Performance optimization techniques
- CSS custom properties for better maintainability
### Useful resources
- [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) - Comprehensive guide to CSS Grid
- [MDN CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - Official documentation
- [Google Fonts](https://fonts.google.com/) - For the Barlow Semi Condensed font
- [Can I Use](https://caniuse.com/) - For checking browser compatibility