This is a solution to the Coding bootcamp testimonials slider challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This project is to improve my HTML, CSS and JavaScript skills for positioning design, accessibility and slider effects.
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
-
Mobile View at 375px : Tanya
-
Mobile View at 375px : John
-
Desktop View at 1440px : Tanya
-
Desktop View at 375px : John
- Solution URL: Frontend Mentor
- Live Site URL: Vercel
I put all contents in <main>, and centered within <body> by CSS-grid.
For background images, I attached them on the containers of relevant images/texts and posisitoned them.
By using <button> for arrows to control sliders, they are keybord focusable and controllable.
All contents are toggled by pressing prev/next arrow buttons.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JavaScript
- Dart Sass
- Slider effect for JavaScript. I would like to know what is the best solution for these type of slide which are sets of image and the description.
- Frontend Mentor - @sloth247