Go from theory to application

Master The Process of Thinking Like A Developer

We’ll go beyond theory together with you—showing you how to build 20 components that are real, practical, and beautifully designed.

For each component, we’ll start from scratch with a blank JavaScript file, and we’ll improve it as you learn more advanced techniques.

By doing this, our students students internalize the process and develop the intuition of thinking and building like real developers — allowing them to exit tutorial hell and build things by themselves.

Component #1
Off Canvas Navigation

We’ll start by building the simplest and most practical component you can ever build.

  • Learn the absolute basics of thinking like a developer
  • Create a strong foundation to build everything else
Off Canvas Navigation

Component #2

This is the second easiest thing to build with JavaScript.

Later, you'll learn to improve the Modal with the following:

  • Transitions and Animations
  • Keyboard accessibility
  • Screen Read accessibility

Component #3

One of the most useful and practical components you’ll use anywhere.

This is the perfect component to build to learn how to use JavaScript loops.

Later, you’ll learn to improve the Accordion with transitions, animations, keyboards and screen reader accessibility too.


Component #4

These are similar to accordions, but they have a different purpose. They can also be built with JavaScript loops.

We’ll show you a slightly different way to do things compared to the Accordion.


Component #5

Next we build carousels. Before we do so, you need to be introduced to basic DOM manipulation.

Later, you'll learn to improve the component with the following:

  • Event Delegation
  • Transitions and Animations
  • Keyboard accessibility
  • Screen Read accessibility

Component #6

You can build many things once you know DOM Manipulation. The Calculator is a prime example that’s complex and very rewarding to build.

When building this, you’ll:

  • Learn to handle complex use cases
  • Learn to write tests with console.assert
  • Learn to refactor the component

Component #7

Placing things with exact precision is one of the important aspects you have to understand to build good UI. We explore this in the Popover.

You’ll also learn to improve this later with

  • Transitions and Animations
  • Keyboard accessibility
  • Screen Read accessibility

Component #8
Typeahead (or Autocomplete)

Here we explore how to create HTML elements, how to place them into the DOM, and also how to filter data — all these are important concepts for later components.

Typeahead (or Autocomplete)

Component #9
Google Maps Clone

Learn to create a Google Maps component with Google Maps API — you’ll feel accomplished for doing something really complex.

Component #10

The Todolist gives you the opportunity to build a real app with Async JS and REST API.


Component #11
Dota Heroes Page

Here we get data with another real API. You’ll learn how to find the data you need, how to fetch them, and how to massage the data to create a proper app.

Component #12

Here you learn to create a complex component with lots of interaction. You’ll improve this later to include keyboard accessibility for power users.


Component #13
Countdown Timer

Here you learn to work with dates, timeouts, intervals and also Daylight savings time.

Component #14
Auto Hiding Sticky Nav

HThis is where we begin to play with basic scroll events — which is useful for delightful interactions.

Component #15
Slide Reveal

Here you’ll learn to use the Intersection Observer to begin building scroll-based interactions.

Component #16
Infinite Scroll

The Infinite Scroll is a useful pattern for loading information after a user scrolls to a certain point.

Component #17
Spinning Pacman

In this component you learn to use mouse, touch, and pointer events effectively to detect and trace movement.

Component #18
Drag and Drop

Here you’ll learn to use mouse and pointer events to build a drag-and-drop functionally entirely in JavaScript in just 100+ lines of code.

You’ll be amazed by what you can make!

Component #19
Tiny Framework

Learn to use frameworks by building a framework — so you understand the inner workings and never be confused.

Component #20
Single Page App

Learn everything you need to know to build Single Page Applications by building one ourselves — with Vanilla JavaScript.

This helps you understand routing and url manipulation effectively.

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 Scotch.io 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)