An Impeccable Lesson Plan — 22 chapters and 340 lessons
Your Step-By-Step Guide To JavaScript Mastery

We’ve crafted an impeccable lesson plan that helps you go from beginner to senior in less than 6 months (should you dedicate sufficient time and energy to go through the course).

This lesson plan guides you through every step of the learning—showing you everything you need to know, including coding patterns, best practices, and even accessibility.

(6 months is a short time for a huge topic like JavaScript—many developers have spent years learning JavaScript and they’re still not as good as you’ll be in 6 months).

Chapter 1
JavaScript and its ecosystem

Put the concepts and ideas in the right places by first understanding the ecosystem.

4 Lessons – 12 min
  1. Welcome to Learn JavaScript!
  2. What is JavaScript used for?
  3. The JavaScript ecosystem
  4. Varying versions of JavaScript

Chapter 2
JS Basics

Get to know the foundational basics where you'll build the rest of your skills on.

Star icon

Learn JavaScript is my number one choice for learning JavaScript. I finally feel that JavaScript is within my reach.

Picture of /assets/quotes/elmir-halebic.jpg

Elmir Halebic

20 Lessons – 74 min
  1. Linking your JavaScript file
  2. Preparing your text editor
  3. The Console
  5. On semicolons
  6. Strings, numbers and booleans
  7. Understanding Variables
  8. Understanding Functions
  9. The Flow of a Function
  10. Arrow functions
  11. Intro to objects
  12. If/else statements
  13. Comparing Objects
  14. The NOT operator
  15. Null and Undefined
  16. The BOM and the DOM
  17. Selecting an Element
  18. Changing Classes
  19. Listening to events
  20. Callbacks

Chapter 3
Building simple components

Begin to think like a developer by building simple components. 🛠 signifies practical lessons where I show you how to build things.

8 Lessons – 21 min
  1. How to think like a developer
  2. Starter files and Source codes
  3. Do this for every component
  4. 🛠 Off-canvas menu: Building an off-canvas menu
  5. 🛠 Modal: Building a Modal
  6. Lessons from the building process
  7. Debugging errors
  8. How to use a linter

Chapter 4
Arrays and loops

Gain clarity over the most confusing chapter for newbies.

7 Lessons – 35 min
  1. Introduction to Arrays
  2. Array methods
  3. For loops
  4. The forEach loop
  5. Selecting multiple elements
  6. Nodes vs Elements
  7. 🛠 Accordion: Building an accordion

Chapter 5
Dom basics

Have full control over the DOM — and make magic happen.

Star icon

Learn JavaScript will turn you into a JavaScript wizard. It is one of my favorite resources due to Zell’s ability to present content in a crystal clear manner.

Picture of /assets/quotes/christian-boyle.jpg

Christian Boyle

11 Lessons – 41 min
  1. Id, classes, attributes, and tags
  2. Changing CSS with JavaScript
  3. Getting CSS with JavaScript
  4. Changing Attributes
  5. Finding an element's size and position
  6. DOM Traversals
  7. 🛠 Tabby: Building Tabby (A Tabbed component)
  8. 🛠 Carousel: HTML and CSS
  9. 🛠 Carousel: Switching slides with JavaScript
  10. 🛠 Carousel: Working the dots
  11. 🛠 Carousel: Positioning slides with JavaScript

Chapter 6
Events deep dive

Gain mastery over Events, which is a core system in Vanilla JavaScript.

9 Lessons – 22 min
  1. The listening element
  2. Default Behaviors
  3. Event propagation
  4. Event delegation
  5. Removing Event Listeners
  6. 🛠 Modal: Closing the modal
  7. 🛠 Accordion: Event delegation
  8. 🛠 Tabby: Event delegation
  9. 🛠 Carousel: Event delegation

Chapter 7
Transitions and Animations

Learn to create smooth and buttery animations that enhances everything you build.

Star icon

I love the step-by-step structure in Learn JavaScript. I also love the text-based approach to lessons. They helped me understand and internalise JavaScript instead of feeling “I just watched some videos”.

Picture of /assets/quotes/dave-henson.jpg

Dave henson

13 Lessons – 45 min
  1. CSS Transitions
  2. CSS Animations
  3. Silky-smooth animations
  4. Integrating CSS transitions and animations with JavaScript
  5. Animating with JavaScript
  6. GreenSock Animation API (GSAP)
  7. 🛠 Off-canvas menu: Animations
  8. 🛠 Modal: Animating the modal
  9. 🛠 Modal: Animating the pointing hand
  10. 🛠 Modal: Animating the waving hand
  11. 🛠 Modal: Wave hand animation with JavaScript (using GSAP)
  12. 🛠 Accordion: Animations
  13. 🛠 Carousel: Animations

Chapter 8
Useful JS features

Use the best JavaScript features to make coding much easier

15 Lessons – 40 min
  1. Ternary operators
  2. AND and OR operators
  3. Early returns
  4. Template Literals
  5. Destructuring
  6. Default parameters
  7. Enhanced Object Literals
  8. Rest and Spread
  9. Useful array methods
  10. Reduce
  11. Looping through objects
  12. Returning objects with implicit return
  13. 🛠 Accordion: Using useful JavaScript features
  14. 🛠 Tabby: Using useful JavaScript features
  15. 🛠 Carousel: Useful JavaScript features

Chapter 9
JS Best practices

Use industry-proven best practices to write code that's easy to read, maintain, and debug

Star icon

This is the first course where I learned to differentiate which parts of JavaScript are important and which parts are not.

I used the knowledge I learned to create real components. It’s very satisfying to see my code doing something of real and practical use.

Picture of /assets/quotes/jake-chiam.jpg

Jake Chiam

14 Lessons – 47 min
  1. Write declarative code
  2. Functions with a purpose
  3. Manage scope
  4. Reduce state changes
  5. Don't reassign
  6. Don't mutate
  7. Preventing Objects from mutating
  8. Preventing Arrays from mutating
  9. Write pure functions
  10. 🛠 Accordion: Refactor
  11. 🛠 Carousel: First refactor
  12. 🛠 Carousel: Refactoring the dots part
  13. 🛠 Carousel: Previous and next buttons
  14. 🛠 Carousel: Second refactor

Chapter 10
Manipulating text and content

More DOM goodness — which means more power and magic over what you can do.

Star icon

I wish Learn JavaScript was around when I first tried to learn JavaScript. It changed the way I approach JavaScript. Now, I actually know what I’m doing when I write JavaScript!

Picture of /assets/quotes/kevin-powell.jpg

Kevin Powell

16 Lessons – 94 min
  1. Changing Text and HTML
  2. Creating HTML Elements
  3. Adding multiple elements to the DOM
  4. Removing Elements from the DOM
  5. 🛠 Carousel: Creating dots with JavaScript
  6. 🛠️ Calculator: HTML and CSS
  7. 🛠️ Calculator: Happy Path
  8. 🛠️ Calculator: Testing the Happy Path
  9. 🛠️ Calculator: Easy Edge Cases
  10. 🛠️ Calculator: Difficult Edge Cases
  11. 🛠️ Calculator: Refactoring
  12. The switch statement
  13. 🛠️ Calculator: Refactoring (Part 2)
  14. 🛠️ Popover: Making one popover
  15. 🛠️ Popover: Making four popovers
  16. 🛠️ Popover: Making popovers with JavaScript

Chapter 11
Handling Forms

Everything you need to know about forms to build websites and apps

13 Lessons – 49 min
  1. Intro to forms
  2. Selecting form fields with JavaScript
  3. Form fields and their events
  4. Sanitize your output
  5. Generating unique IDs
  6. 🛠️ Popover: Dynamic ID
  7. 🛠️ Todolist: The HTML and CSS
  8. 🛠️ Todolist: Creating tasks with JavaScript
  9. 🛠️ Todolist: Deleting tasks with JavaScript
  10. 🛠️ Typeahead: The HTML and CSS
  11. 🛠️ Typeahead: Displaying predictions
  12. 🛠️ Typeahead: Selecting a prediction
  13. 🛠️ Typeahead: Bolding search terms

Chapter 12
Handling Dates

Everything you need to know about Date and Time in JavaScript—without using any libraries.

Star icon

Learn JavaScript is an incredible resource that helped me save time from searching around the internet for answers! It showed me the full landscape of the Vanilla JavaScript ecosystem.

Every time I jump into the course, I deepen my javascript knowledge and I become more marketable for work in the future.

Picture of /assets/quotes/lauralee-flores.jpg

Lauralee Flores

23 Lessons – 91 min
  1. The Date object
  2. Getting a formatted date
  3. Getting the time
  4. Local time and UTC Time
  5. Setting a specific date
  6. Setting a date with Date methods
  7. Adding (or subtracting) date and time
  8. Comparing Dates and times
  9. 🛠️ Datepicker: HTML and CSS
  10. 🛠️ Datepicker: Building the calendar
  11. 🛠️ Datepicker: Building the datepicker with JavaScript
  12. 🛠️ Datepicker: Previous and Next buttons
  13. 🛠️ Datepicker: Selecting a date
  14. 🛠️ Datepicker: Positioning the datepicker
  15. 🛠️ Datepicker: Showing and hiding
  16. Formatting a date with toLocaleString
  17. setTimeout
  18. setInterval
  19. 🛠️ Countdown timer: HTML and CSS
  20. 🛠️ Countdown timer: JavaScript
  21. 🛠️ Countdown timer: Counting Months
  22. 🛠️ Countdown timer: Daylight Saving Time
  23. 🛠️ Countdown timer: Counting Years

Chapter 13
Async JS

Master almost everything you need about Async JS—except building servers for Rest APIs (which is covered in another course).

Star icon

Zell is the rare sort of developer who both knows his stuff and can explain even the most technical jargon in approachable — and even fun! — ways.

I’ve taken his courses and always look forward to his writing because I know I’ll walk away with something that makes me a better front-ender.

Picture of /assets/quotes/geoff-graham.jpg

Geoff Graham

46 Lessons – 189 min
  1. Introduction to Ajax
  2. Understanding JSON
  3. The Fetch API
  4. Possible data types
  5. JavaScript Promises
  6. Requests and responses
  7. Sending a POST request
  8. Authentication
  9. Handling errors
  10. Viewing response headers
  11. CORS and JSONP
  12. XHR vs Fetch
  13. Using an Ajax library
  14. Reading API documentation
  15. Understanding curl
  16. 🛠️ Todolist: The Todolist API
  17. 🛠️ Todolist: Fetching tasks
  18. 🛠️ Todolist: Creating tasks
  19. 🛠️ Todolist: Editing tasks
  20. 🛠️ Todolist: Deleting tasks
  21. 🛠️ Todolist: Creating tasks with Optimistic UI
  22. 🛠️ Todolist: Handling Optimistic UI errors
  23. 🛠️ Todolist: Editing tasks with Optimistic UI
  24. 🛠️ Todolist: Deleting tasks with Optimistic UI
  25. 🛠️ Todolist: Refactor
  26. 🛠️ Typeahead: How to add Ajax
  27. 🛠️ Typeahead: Adding Ajax
  28. 🛠️ Typeahead: Handling errors
  29. 🛠️ Google Maps Clone: Creating your first Google Map
  30. 🛠️ Google Maps Clone: Fetching JSONP via JavaScript
  31. 🛠️ Google Maps Clone: Drawing directions
  32. 🛠️ Google Maps Clone: Driving directions
  33. 🛠️ Google Maps Clone: Handling errors
  34. 🛠️ Google Maps Clone: Adding stopovers
  35. 🛠️ Google Maps Clone: Refactor
  36. Requesting many resources at once
  37. Asynchronous functions
  38. Handling multiple awaits
  39. Asynchronous loops
  40. 🛠️ Dota Heroes: Listing heroes
  41. 🛠️ Dota Heroes: Filtering heroes (Part 1)
  42. 🛠️ Dota Heroes: Filtering heroes (Part 2)
  43. 🛠️ Dota Heroes: Refactoring
  44. 🛠️ Dota Heroes: Hero Page
  45. 🛠️ Dota Heroes: Making the hero page robust
  46. 🛠️ Dota Heroes: Heroes page refactor

Chapter 14
Advanced Async JS

Real and practical stuff you'll need to do, beyond the basics.

11 Lessons – 49 min
  1. Requesting many resources at once
  2. Asynchronous functions
  3. Handling multiple awaits
  4. Asynchronous loops
  5. 🛠️ Dota Heroes: Listing heroes
  6. 🛠️ Dota Heroes: Filtering heroes (Part 1)
  7. 🛠️ Dota Heroes: Filtering heroes (Part 2)
  8. 🛠️ Dota Heroes: Refactoring
  9. 🛠️ Dota Heroes: Hero Page
  10. 🛠️ Dota Heroes: Making the hero page robust
  11. 🛠️ Dota Heroes: Heroes page refactor

Chapter 15
Handling Keyboard Events

Make your website and app keyboard accessible, and give power users keyboard shortcuts to play with.

Star icon

Learn JavaScript gave me a deep understanding of the language and its capabilities. Even though I am a professional web developer, I gained new perspectives on things I already know, and I also learned new things that I didn’t know before.

Picture of /assets/quotes/maxim-konoval.jpg

Maxim Konoval

27 Lessons – 126 min
  1. Keyboard users
  2. Handling commonly used keys
  3. Keyboard events
  4. Understanding Tabindex
  5. Detecting the focused element
  6. Directing focus
  7. Preventing people from tabbing into elements
  8. How to choose keyboard shortcuts
  9. Creating single-key shortcuts
  10. 🛠️ Off-canvas: Adding keyboard interaction
  11. 🛠️ Modal: Adding keyboard interaction
  12. 🛠️ Accordion: Adding keyboard interaction
  13. 🛠️ Tabby: Adding keyboard interaction
  14. 🛠️ Tabby: Refactoring
  15. 🛠️ Carousel: Adding keyboard interaction
  16. 🛠️ Carousel: Displaying help text
  17. 🛠️ Calculator: Adding keyboard interaction
  18. 🛠️ Popover: Keyboard
  19. 🛠️ Popover: Refactor
  20. Keyboard shortcuts with Command and Control modifiers
  21. 🛠️ Todolist: Keyboard
  22. 🛠️ Typeahead: Keyboard
  23. 🛠️ Typeahead: Selecting a prediction with the keyboard
  24. 🛠️ Google Maps Clone: Keyboard
  25. 🛠️ Dota Heroes: Keyboard
  26. 🛠️ Datepicker: Tabbing in and out
  27. 🛠️ Datepicker: Keyboard shortcuts

Chapter 16
Screen reader accessibility

Everything you need to know about JavaScript accessibilty written for self-taught developers.

Star icon

I went from knowing nothing about JavaScript to building a custom design system for my company entirely in JavaScript. What’s more, each component I build is also accessible thanks to Zell’s accessibility lessons

Picture of /assets/quotes/mark-teekman.jpg

Mark Teekman

24 Lessons – 74 min
  1. What is accessibility?
  2. How to use a screen reader
  3. Using NVDA
  4. Using Voiceover
  5. Aria roles
  6. Landmark roles
  7. Document structure roles
  8. Live region roles
  9. Widget roles
  10. Window and Abstract roles
  11. Accessible names and descriptions
  12. Hiding content
  13. ARIA properties and ARIA states
  14. ARIA for expandable widgets
  15. 🛠️ Off-canvas: Accessibility
  16. ARIA for modal dialogs
  17. 🛠️ Modal: Screen reader accessibility
  18. 🛠️ Accordion: Screen reader accessibility
  19. ARIA for Tabbed components
  20. 🛠️ Tabby: Screen reader accessibility
  21. 🛠️ Tabby: Refactor
  22. 🛠️ Carousel: Screen reader accessibility
  23. Roles that trigger Forms and Application modes
  24. What's next for accessibility?

Chapter 17
Handling Scroll

Learn to add fancy animations that gives your website the zing when a user scrolls.

13 Lessons – 37 min
  1. The Scroll event
  2. 🛠️ Auto-hiding Sticky-nav: HTML and CSS
  3. 🛠️ Auto-hiding Sticky-nav: JavaScript
  4. 🛠️ Auto-hiding Sticky-nav: Natural reveal
  5. Intersection Observer API
  6. Intersection Observer Options
  7. 🛠️ Slide & Reveal
  8. 🛠️ Slide & Reveal: Always fade-in when you scroll down
  9. 🛠️ Slide & Reveal: Fine-tuning the animation
  10. 🛠️ Infinite Scroll: Anatomy
  11. 🛠️ Infinite Scroll: Infinite load
  12. 🛠️ Infinite Scroll: Refactor
  13. 🛠️ Infinite Scroll: Implementing the Infinite Scroll

Chapter 18
Mouse, Touch, and Pointer events

Everything you need to know about handling mouse, touch, and pointers.

14 Lessons – 46 min
  1. Mouse Events
  2. 🛠️ Spinning Pacman: HTML and CSS
  3. 🛠️ Spinning Pacman: JavaScript
  4. Touch events
  5. Pointer events
  6. Touch-action
  7. 🛠️ Spinning Pacman: Supporting Touch
  8. Cloning elements
  9. 🛠️ DragDrop: HTML and CSS
  10. 🛠️ DragDrop: JavaScript
  11. 🛠️ DragDrop: Creating a drop preview
  12. 🛠️ DragDrop: Sortable drop preview
  13. 🛠️ DragDrop: Robustness
  14. 🛠️ DragDrop: Refactor

Chapter 19
Object Oriented Programming

Learn about this major JavaScript pillar. We only cover this here because you need sufficient skill before diving into this chapter.

Star icon

Learn JavaScript helped me discover holes in my knowledge even though I have a few years of JavaScript experience!

I became more confident when working with frameworks and libraries, and I spend less time on Google and Stack Overflow.

Picture of /assets/quotes/oriol-gasquez.jpg

Oriol Gasquez

22 Lessons – 98 min
  1. Introduction to Arrays
  2. Array methods
  3. For loops
  4. The forEach loop
  5. Selecting multiple elements
  6. Nodes vs Elements
  7. 🛠 Accordion: Building an accordion
  8. Before we begin
  9. What is Object Oriented Programming?
  10. Four Flavours of Object Oriented Programming
  11. Inheritance
  12. This in JavaScript
  13. Call, bind, apply
  14. Creating Derivative Objects
  15. Composition vs Inheritance
  16. Polymorphism
  17. Encapsulation
  18. Closures
  19. Encapsulation in Object Oriented Programming
  20. Getters and Setters
  21. What OOP flavour to use
  22. When to use Object Oriented Programming

Chapter 20
Writing reusable code

Learn to make your code reusable so you can build stuff faster.

Star icon

Learn JavaScript is excellent. It is beginner friendly and has very clear explanations. It does not assume I knew anything and zip through things unlike other courses.

It’s very easy for me to learn with the examples and source code provided.

Picture of /assets/quotes/tim-st-john.jpg

Tim St. John

23 Lessons – 125 min
  1. Creating reusable code by writing libraries
  2. Two Types of libraries
  3. Including libraries with Script tags
  4. Including libraries with ES6 Modules
  5. Dynamic imports
  6. 🛠️ Off Canvas: Building a Library
  7. 🛠️ Modal: Library setup
  8. 🛠️ Modal: Opening the Modal
  9. 🛠️ Modal: Closing the modal
  10. 🛠️ Modal: Inheritance and Polymorphism
  11. 🛠️ Modal: Resolving differences between subclasses
  12. 🛠️ Modal: Exposing properties and methods
  13. 🛠️ Accordion: Building a library
  14. 🛠️ Tabby: Building a library
  15. 🛠️ Carousel: Building a library
  16. 🛠️ Calculator: Library
  17. 🛠️ Calculator: Fixing the Clear Key
  18. 🛠️ Calculator: Handling other keys
  19. 🛠️ Calculator: State
  20. 🛠️ Popover: Library
  21. 🛠️ Popover: Adding event listeners
  22. 🛠️ Typeahead: Library
  23. 🛠️ DatePicker: Library

Chapter 21
Going from Vanilla JS to JS Frameworks

Understand how to use a framework by building one — absolutely overkill, but you emerge with incredibly deep skill and expertise

11 Lessons – 47 min
  1. 🛠️ Building a Tiny framework
  2. 🛠️ Tiny: Add event listeners
  3. 🛠️ Tiny: Updating state
  4. 🛠️ Tiny: Rendering Child Components
  5. 🛠️ Tiny: Changing Parent State
  6. 🛠️ Tiny: Passing Props
  7. 🛠️ Tiny: Multiple Props
  8. 🛠️ Tiny: Passing values from sibling components
  9. 🛠️ Tiny: Mounting
  10. 🛠️ Tiny: Passing props to descendants
  11. 🛠️ Tiny: A tiny refactor

Chapter 22
Building Single Page Apps

Learn everything you need about building Single Page Apps without the use of a framework — another overkill, but you understand what all framework routers do.

Star icon

This is the course I’ve been needing my whole career. If you really want to learn JavaScript, you need this course.

I now feel so much more confident in JavaScript. I can read and understand JavaScript without relying on Google for answers.

And I love having Zell as a mentor. He is patient and willing to teach me and other members of the community

Picture of /assets/quotes/rich-edmund.jpg

Rich Edmund

14 Lessons – 50 min
  1. What is a Single Page App?
  2. Simple SPA using only CSS
  3. The Location Interface
  4. The History Interface
  5. Minimum viable server for a SPA
  6. 🛠️ Dota SPA: Introduction
  7. 🛠️ Dota SPA: Building The Heroes List
  8. 🛠️ Dota SPA: Building the filters
  9. 🛠️ Dota SPA: Filtering heroes
  10. 🛠️ Dota SPA: Displaying filtered heroes
  11. 🛠️ Dota SPA: Getting Ready to build the Hero Page
  12. 🛠️ Dota SPA: Building the hero page
  13. 🛠️ Dota SPA: Lore and abilities
  14. 🛠️ Dota SPA: Routing for Single-page apps

Trusted by Industry Professionals and Publications

Star icon

I wish Learn JavaScript was around when I first tried to learn JavaScript. It changed the way I approach JavaScript. Now, I actually know what I’m doing when I write JavaScript!

Picture of /assets/quotes/kevin-powell.jpg

Kevin Powell

Star icon

Zell is the rare sort of developer who both knows his stuff and can explain even the most technical jargon in approachable — and even fun! — ways.

I’ve taken his courses and always look forward to his writing because I know I’ll walk away with something that makes me a better front-ender.

Picture of /assets/quotes/geoff-graham.jpg

Geoff Graham

Star icon

Your articles are honestly the best resources out there! They have really helped 100Devs folx understand topics that are always stumbling blocks for new devs.

Really appreciate the work you put into your content!

Picture of /assets/quotes/leon-noel.jpg

Leon Noel

Star icon

If you’re looking to learn JavaScript, Zell just made a new course that shows how to build 20 real components from scratch, step by step.

Zell is a really fun person too, so that helps when you’re trying to learn :)

Picture of /assets/quotes/sarah-drasner.jpg

Sarah Drasner

Star icon

Zell is one of those rare people who commands tremendous knowledge and experience but remains humble and helpful.

They want you to know what they know, not just be impressed by it. In other words, Zell is a natural teacher. You’re lucky to have him because he feels lucky to be able to help you in your journey.

Picture of /assets/quotes/heydon-pickering.jpg

Heydon Pickering

Star icon

Zell has a really comprehensive style so I’m stoked to have him dishing out some Gulp on CSS Tricks.

Picture of /assets/quotes/chris-coyier.jpg

Chris Coyier

A List Apart Codementor Creative Bloq CSS Tricks Free Code Camp JavaScript Weekly Sitepoint Smashing Magazine Tech in Asia

There’s a right plan for everyone
It’s Time For Your To Become An Amazing JavaScript Developer

Just select a plan to begin. Before you know it, you’ll be able to build anything you want with JavaScript.


Gain initial confidence in JS.
  • 3 Chapters
  • 36 Lessons
  • 2 Real Components


Good enough to learn frameworks.
  • 13 Chapters
  • 199 Lessons
  • 7 Real Components
  • Community Access

(Or 6 payments of $55)


Become a JavaScript Master.
  • 22 Chapters
  • 338 Lessons
  • 20 Real Components
  • Community Access

(Or 6 payments of $99)


Everything we have.
  • Everything in Mastery
  • All other courses
  • All other workshops
  • Community Access

(Save 2 months with annual billing)