Frontend Mentor - Coding Bootcamp Testimonials Slider Solution

This is a solution to the Coding Bootcamp Testimonials Slider Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/coding-bootcamp-testimonials-slider/
• Solution URL: TO_BE_UPDATED

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox
• CSS Grid
• Vanilla JS
• Mobile-first workflow

What I learned

Believe it or not, this was my first time building a slider. Whenever I'm going to build something for the first time, I always try to conquer the challenge by myself. I highly suggest you do the same, before jumping into YouTube or Google to find solutions. First, try to come up with a solution that just works, and doesn't matter how messy your JS looks at the moment. Next, try to refactor that messy code, so that when you need to work on that project again you can figure out what is what just in a glance. Lastly, if along the way you've come across a problem that you cannot solve by yourself, then try using Google or YouTube to figure out what you did wrong. And trust me, this simple process will help you a lot. If you're someone who's trying to come out of tutorial hell, then you should definitely stick to this routine. Otherwise, you'll always be watching others' videos on YouTube and copy and paste their code from CodePen or GitHub repo.

Useful resources

• JS Sliders - Here is some JS slider inspirations for your next project.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals