- Overview
- Transcript
1.1 Welcome to the Course
Hello and welcome! I’m Adi Purdila, and in this course you’ll learn about seven vanilla JavaScript plugins that will take the guesswork out of complex tasks like creating progress bars, formatting inputs, lazy loading images, and more.
Along the way, I’ll explain how to use Headroom.js, ProgressBar.js, Cleave.js, ScrollTrigger.js, LazySizes.js, Swiper.js, and Darkmode.js.
We have a lot to cover, so let’s kick things off with the first plugin: Headroom.js. See you in the first lesson!
1.Introduction1 lesson, 01:30
1.1Welcome to the Course01:30
2.Handy JavaScript Plugins for Web Designers7 lessons, 1:31:26
2.1Headroom.js11:13
2.2ProgressBar.js15:37
2.3Cleave.js09:59
2.4ScrollTrigger.js15:26
2.5LazySizes.js09:32
2.6Swiper.js18:00
2.7Darkmode.js11:39
1.1 Welcome to the Course
Hello and welcome to another Tuts+ course I'm at the Adi Purdila. And in this course you'll learn about seven vanilla JavaScript plugins that will take the guesswork out of complex tasks, like creating progress bars, formatting inputs, lazy loading images, and more. Here's a detailed look at what we'll cover. We'll kick things off with Headroom.js, this is a plugin that adds extra functionality to fix headers and nav bars. In lesson two, you'll learn how to create animated progress bars, with a plug in called ProgressBar.js. Lesson 3 is about Cleve.js which is used for formatting inputs. In lesson 4, you learn how to trigger certain actions when scrolling to a particular element, that's possible thanks to a plugin called scroll trigger.js. Lesson five is about LazySizes.js, this is used for lazy loading images. In lesson six you'll learn about Swiper.js which is a fantastic responsive slider. Finally in lesson seven, you'll learn how to add a dark mode to your website in seconds, using a plugin called darkmode.js. We have a lot to cover, so let's kick things off with the first plugin. Coming up in the next lesson is headroom.js, see you there.