Build 30 things with vanilla ES6 JavaScript in 30 days with 30 tutorials
No Frameworks × No Compilers × No Libraries × No Boilerplate
by Wes Bos
Take the challenge at JavaScript 30 Website
Beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.
You should already know some JavaScript to start - This isn't a JavaScript 101 course. We learn by application - encountering many new situations while talking about the hows, the whys and the whats that we use to solve them.
We steer clear of opinionated design patterns, frameworks, libraries and any type of abstraction. These things are great and often needed, but can obstruct learning and constrain initial understanding.
These tutorials rely heavily upon browser APIs, most of which involve interaction with the page.
Listed are the JavaScript 30 Challenges, and as they are completed i will be including a link to the working code.
| Day | Course |
|---|---|
| Day 01 | JavaScript Drum Kit |
| Day 02 | JavaScript and CSS Clock |
| Day 03 | Playing with CSS Variables and JS |
| Day 04 | Array Cardio Day 1 |
| Day 05 | Flex Panel Gallery |
| Day 06 | Type Ahead |
| Day 07 | Array Cardio Day 2 |
| Day 08 | Fun with HTML5 Canvas |
| Day 09 | 14 Must Know Dev Tools Tricks |
| Day 10 | Hold Shift and Check Checkboxes |
| Day 11 | Custom Video Player |
| Day 12 | Key Sequence Detection |
| Day 13 | Slide in on Scroll |
| Day 14 | JavaScript References VS Copying |
| Day 15 | LocalStorage |
| Day 16 | Mouse Move Shadow |
| Day 17 | Sort Without Articles |
| Day 18 | Adding Up Times with Reduce |
| Day 19 | Webcam Fun |
| Day 20 | Speech Detection |
| Day 21 | Geolocation |
| Day 22 | Follow Along Link Highlighter |
| Day 23 | Speech Synthesis |
| Day 24 | Sticky Nav |
| Day 25 | Event Capture, Propagation, Bubbling and Once |
| Day 26 | Stripe Follow Along Nav |
| Day 27 | Click and Drag |
| Day 28 | Video Speed Controller |
| Day 29 | Countdown Timer |
| Day 30 | Whack A Mole |