https://github.com/ayokanmi-adejola/coding-bootcamp-testimonials
Responsive testimonials slider built with HTML, CSS (Flexbox & Grid), and vanilla JavaScript. Features smooth transitions, keyboard navigation, and adapts seamlessly to all device sizes.
https://github.com/ayokanmi-adejola/coding-bootcamp-testimonials
css3 flexbox-layout html5 mobile-first-workflow vanilla-js
Last synced: 8 months ago
JSON representation
Responsive testimonials slider built with HTML, CSS (Flexbox & Grid), and vanilla JavaScript. Features smooth transitions, keyboard navigation, and adapts seamlessly to all device sizes.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/coding-bootcamp-testimonials
- Owner: Ayokanmi-Adejola
- Created: 2025-06-27T12:28:22.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-27T12:33:36.000Z (12 months ago)
- Last Synced: 2025-09-30T00:00:35.396Z (9 months ago)
- Topics: css3, flexbox-layout, html5, mobile-first-workflow, vanilla-js
- Language: CSS
- Homepage: https://coding-bootcamp-testimonials-brown.vercel.app
- Size: 440 KB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Coding Bootcamp Testimonials Slider
## Overview
This project is a solution to the [Frontend Mentor Coding Bootcamp Testimonials Slider Challenge](https://www.frontendmentor.io/challenges/coding-bootcamp-testimonials-slider-4FNyLA8JL). It features a fully responsive testimonial slider built with HTML, CSS, and JavaScript, closely matching the provided design files.
### The challenge
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Navigate the slider using either their mouse/trackpad or keyboard
## Features
- Responsive layout for desktop and mobile
- Testimonial slider with smooth transitions
- Navigation using previous/next buttons
- Keyboard navigation support (left/right arrows)
- All images and decorative patterns included
- Accessible and semantic HTML structure
## How to Use
1. **Clone or download this repository.**
2. Open `index.html` in your browser.
3. Use the navigation buttons or your keyboard's left/right arrows to switch testimonials.
## Folder Structure
- `index.html` – Main HTML file
- `styles.css` – Custom styles for the slider
- `script.js` – JavaScript for slider functionality
- `images/` – All required images and icons
- `design/` – Reference design images
## Keyboard Accessibility
- Use the **Left Arrow** (`←`) to view the previous testimonial
- Use the **Right Arrow** (`→`) to view the next testimonial
## Built With
- HTML5
- CSS3 (with Flexbox & CSS Grid)
- JavaScript (ES6)
- Responsive design (with mobile-first principles and media queries)
## What I Learned
- How to use CSS Flexbox and Grid for modern, responsive layouts
- Structuring HTML for accessibility and semantics
- Implementing a slider with vanilla JavaScript (DOM manipulation, event listeners)
- Creating a responsive design that adapts to different screen sizes
- Managing state and synchronizing UI elements (testimonial text and images)
- Using media queries for mobile-first development
## Author
- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)