https://github.com/jkellerman/coding-bootcamp-testimonials-slider-master
https://github.com/jkellerman/coding-bootcamp-testimonials-slider-master
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/jkellerman/coding-bootcamp-testimonials-slider-master
- Owner: jkellerman
- Created: 2022-03-08T20:43:32.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-08T21:24:15.000Z (about 4 years ago)
- Last Synced: 2025-01-27T07:41:40.550Z (about 1 year ago)
- Language: SCSS
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Coding bootcamp testimonials slider solution
This is a solution to the [Coding bootcamp testimonials slider challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/coding-bootcamp-testimonials-slider-4FNyLA8JL). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### 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
### Links
- Solution URL: [Solution](https://github.com/jkellerman/coding-bootcamp-testimonials-slider-master)
- Live Site URL: [Live](https://jkellerman.github.io/coding-bootcamp-testimonials-slider-master/)
## My process
### Built with
- HTML5
- SCSS
- Flexbox
- Mobile-first workflow
### What I learned
I learned there are multiple ways to build a carousel, you can use arrow buttons as well as navigation dots. There are a few techniques i stumbled across but couldn't implement them well enough in this design. One was getting the measurements of an element in JS even when it is responsive, see below.
This was also the first time using SCSS.
To see how you can add code snippets, see below:
```js
getBoundingClientRect()
}
```
### Continued development
I need to be able to create a carousel that also have navigation dots underneath slides. I also need to be to use translate and transition to create a sliding affect when buttons are clicked.
### Useful resources
- [YouTube](https://www.youtube.com/watch?v=gBzsE0oieio&t=1627s)
- [YouTube](https://www.youtube.com/watch?v=eywZbJ5PVjg&list=PL-2rGHvBxh35HNEOrJF-vGIGJ0pfWI254&index=19&t=264s)
## Author
- Frontend Mentor - [@jkellerman](https://www.frontendmentor.io/profile/jkellerman)