Question mark icon

Build anything you want with JavaScript

Have you tried learning JavaScript for a while now, but feel that you’re not making progress?

You freeze at a blank JavaScript file

You twiddle your thumbs as you watch the blinking cursor on your screen. Everything you learned about JavaScript seemed to disappear into thin air…

What should you write first?

Should you write variables or functions first? How do you use objects, arrays, and loops? When do you use Object Oriented Programming?

You’re not sure, so you Google.

You look for plugins. If plugins don’t exist, you look for tutorials. If tutorials don’t exist, you look for code written by others on Stack Overflow.

You copy-paste the code you found. Most of the time, you don’t understand what you copied. You can modify the code to your needs when you’re lucky, but that doesn’t happen often.

What if you can’t find the answer when every link on Google turned purple?

You lack confidence in JavaScript

You get nervous when you’re asked to build things that require JavaScript. Your hands begin to sweat. Your mind goes blank.

You feel this way because you don’t know how to code from scratch.

You hesitate to say “yes”. You don’t know if you can pull it off. What if you cannot deliver what you promised?

You don’t want to say “no”. You feel guilty for turning people away when your skills are lacking. If you turn them away, will they look down on you for not being able to build that simple thing?

Deep down, you feel like a fraud for not being good enough.

What if you knew how to think like a developer?

You can solve any JavaScript problem you encounter if you can think like a developer. You can build anything you want. You won’t freeze up. You won’t copy-paste from google either.

The process to think like a developer:

  1. Identify the problem you need to solve
  2. Break the problem down into smaller problems
  3. Figure out how to solve each small problem
  4. Assemble your tiny solutions into the final solution.

That’s it.

Sounds simple, but not easy.

Being able to think like a developer requires practice and experience. The hardest part is knowing how to break large problems into tiny ones.

How will your career be different if you knew how to think like a developer?

Become a real developer and build anything you want.

I’ve built many crazy things with JavaScript.

The craziest thing I built was a static-site generator. I even used this static site-generator to run my blog for over two years!

Can you imagine yourself doing this?

I couldn’t, not before I became confident at JavaScript. I took a while to get to this point.

I want to show you another example. I built this modal animation with a huggy-emoji. It brings a smile to my face whenever I see it 🤗🤗🤗.

Hello, I'm Zell :)

I helped thousands of students become better frontend developers through my blog and courses.

When I was 24, I taught myself how to code without any prior programming experience. I started freelancing one year later.

I managed to earn over $10,000 a month from my HTML, CSS and Javascript skills.

Today, I’m here to help you learn JavaScript.

Zell has been featured in:

alistapart codementor creativebloq csstricks freecodecamp javascriptweekly scotchio sitepoint smashingmagazine techinasia

Zell’s work is detailed and not overwhelming. He guided me step-by-step, from basics to advanced concepts. He ensured I understood everything before going deeper.

Thanks to Zell, I got a frontend job in Switzerland!

Picture of Pierre Wizla

Pierre Wizla

You don’t need a computer science degree

This tweet says it all:

A tweet that asks people to retweet if they think they can have a successful career in software development without a CS Degree. There are 931 retweets.

If you don’t need a computer science degree to become a great developer, you won’t need one to learn JavaScript.

I know this is true because I learned JavaScript without a computer science degree.

You may not believe this, but I used to be bad at JavaScript.

I avoided JavaScript whenever I can. I rather write hacky CSS than use JavaScript. (This was the first year in my programming career).

I didn’t believe I could learn JavaScript. These thoughts were swimming in my mind back then:

  1. I wasn’t smart enough.
  2. I don’t have a programming degree.
  3. It’s too late. I’m too old to learn programming.

It was so hard, I almost gave up learning JavaScript.

Don’t give up learning JavaScript

Maybe you’re like me.

  1. You don’t believe you can learn JavaScript
  2. Your mind blanks out when you try to code JavaScript
  3. You can’t remember anything you learned about JavaScript
  4. You want to give up.

Don’t give up.

I understand how you feel.

It’s hard.

But whatever you do, don’t give up.


I’m glad I persisted at learning JavaScript. I became comfortable with writing JavaScript. I can build anything I want.

Let me show you another crazy thing I built.

This component that lets people view an artwork on a wall. Users can switch between different furniture scenes.

Watch out for two things:

  1. How the artwork zooms into the furniture setting
  2. How furniture get switched with other furniture

You can learn JavaScript. You don’t need a computer science degree.

When you know JavaScript, you can build amazing things. You can get paid well for the things you make. (I was able to earn $10,000 a month from my HTML, CSS, and JavaScript skills).

So persist in your quest to Learn JavaScript. Don’t give up.

I want to share with you the best way to learn JavaScript. I’ll tell you more about it later.

First, let’s talk about why it’s so hard to learn JavaScript.

Three problems with most JavaScript materials

Most JavaScript materials are too hard for you to understand.

It’s okay.

It’s not your fault for not understanding them.

There are three problems with most JavaScript materials:

  1. They assume you know something (but you don’t), and they say things that go right over your head.
  2. They use fake examples filled with foo and bar variables. foo and bar are meaningless. They don’t make sense. They impede learning.
  3. They explain abstract concepts with jargons, and they explain jargons with more jargons. You get confused because these jargons don’t make sense in your world.

JavaScript feels hard because of these problems.

But why must JavaScript be difficult?

Is there a way to learn JavaScript without feeling like an idiot?

A fun and easy way to learn JavaScript

I taught thousands of developers over the years. I know to make JavaScript fun and easy to learn.

What you need are lessons that help you understand and apply JavaScript.

I can turn abstract concepts into simple everyday examples anyone can understand.

Here are some examples:

  1. When I teach functions, I ask students to imagine drawing water from a well.
  2. When I teach if/else statements, I ask students to imagine crossing the street at a traffic light.
  3. When I teach for-loop, I ask students to imagine bouncing a ball.
  4. When I teach scopes, I ask students to imagine a one-way glass.

These analogies distill “abstract” concepts into simple, everyday things you can understand.

Once you understand the concept, what’s next is to use them to build real things. When you apply the concept to something real, you’ll remember what you learned.

That’s the simple and easy way to learn JavaScript.

It works.

I’ve taught many students in the past. Most of them are like you—they want to learn JavaScript but they’re stuck. They can’t understand JavaScript even though they read books and courses others recommend.

Things begin to click when I explain JavaScript to these students. I’ve seen their faces brighten up and they go “oooohhhhhh!”.

Zell makes JavaScript fun and easy to learn. He explains technical jargons with everyday life examples. These examples make me curious and excited to learn every day!

Now, I no longer panic when I use JavaScript. I know I can learn it.

Picture of Marion Couneson

Marion Couneson

Everything you need to know about JavaScript explained in the right order.

No JavaScript knowledge required

I don’t assume you know anything. I teach you the absolute basics, including how to link your JavaScript file to your HTML file.

Easy to understand examples

Real examples in every lesson. No foo, no bar. Abstract concepts get turned into primary-school examples through relevant analogies.

Step-by-step lessons

Each lesson builds on the knowledge you learned from previous lessons. We don’t skip steps. You won’t get confused.

From theory to practice

Learn to apply JavaScript concepts as you build real-world components. Remember JavaScript for life.

Build 20 real-world components

Make animations, use best practices, improve the components you built throughout the course, and more.

A community that answers your questions.

The best part about Learn JavaScript. It’s why many students learn JavaScript successfully. More on this later.

With over 200 in-depth lessons, Learn JavaScript helps you:

Understand JavaScript once and for all.
Have confidence in your JavaScript skills.
Know what to learn instinctively.
Think like a developer.
Build 20 real-world components.
Make silky smooth animations.
Learn JavaScript best practices.
Remember JavaScript for life.
Build things from scratch.
Stop copy-pasting code from Google.

And much more! (See the complete lesson list below).

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

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

I love having Zell as a mentor. He is patient and willing to teach me and other members in the community. I feel comfortable asking questions and getting directions from him.

Picture of Rich Edmund

Rich Edmund

The lesson plan

Here’s a quick table of contents for your viewing pleasure:

—JavaScript and its Ecosystem

  1. How to use this course
  2. What is JavaScript and what its used for
  3. Varying versions of JavaScript
  4. JavaScript frameworks and libraries

—JavaScript Basics

  1. Your JavaScript file
  2. Preparing your text editor
  3. The console
  5. You don't need semicolons
  6. Strings, numbers, and booleans
  7. Declaring variables
  8. Functions
  9. Arrow functions
  10. Intro to objects
  11. If/else statements
  12. The NOT operator
  13. Null and undefined
  14. The BOM and the DOM
  15. Selecting an element
  16. Changing classes
  17. Listening to events
  18. Callbacks

—Building simple components

  1. How to think like a developer
  2. How to use the starter template
  3. Do this for every component
  4. Hands on: building an off-canvas menu
  5. Hands on: building a modal window
  6. Lessons from the building process
  7. Debugging errors
  8. How to use a linter

—Arrays and loops

  1. Intro to arrays
  2. For loops
  3. The forEach loop
  4. Selecting multiple elements
  5. Node vs Elements
  6. Hands on: Building an accordion

—DOM basics

  1. Id, classes, tags, and attributes
  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. Hands on: Building a tabbed component
  8. Hands on: Building a carousel
  9. Hands on: Building a carousel (part 2)

—Events deep dive

  1. The listening element
  2. Default behaviors
  3. Event propagation
  4. Event delegation
  5. Removing event listeners
  6. Hands on: Improving the modal window
  7. Hands on: Improving the accordion
  8. Hands on: Improving the tabbed component
  9. Hands on: Improving the carousel

—Transitions and Animations

  1. CSS transitions
  2. CSS animations
  3. Jank-free animations
  4. Integrating CSS transitions and animations with Javascript
  5. Hands on: Animating the off-canvas menu
  6. Hands on: Animating the accordions
  7. Hands on: Animating the carousel
  8. Animating with JavaScript
  9. The Greensock Animation API (gsap)
  10. Hands on: Animating the modal (part 1)
  11. Hands on: Animating the modal (part 2)

—Useful JavaScript features

  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 operators
  9. Useful array methods
  10. Array.prototype.reduce
  11. Looping through objects
  12. Implicit return with objects
  13. Hands on: Improving the according
  14. Hands on: Improving the tabbed-component
  15. Hands on: Improving the carousel

—JavaScript best practices

  1. Write declarative code
  2. Build functions with one purpose
  3. Understanding Scope
  4. Understanding State
  5. Don't reassign
  6. Don't mutate
  7. Prevent objects from mutating
  8. Prevent arrays from mutating
  9. Write pure functions
  10. Hands on: Refactoring the off-canvas
  11. Hands on: Refactoring modal window
  12. Hands on: Refactoring accordion
  13. Hands on: Refactoring tabbed component
  14. Hands on: Refactoring carousel

—Creating HTML Elements*

  1. Changing text and HTML
  2. Creating HTML elements
  3. Adding multiple HTML elements at once
  4. Removing elements
  5. Hands on: Improving carousel
  6. Hands on: Building a calculator
  7. Hands on: Building a calculator (part 2)
  8. Hands on: Refactoring the calculator
  9. Hands on: Building a popover
  10. Hands on: Building a dynamic popover
  11. Hands on: Improving the popover's space variable

Learn JavaScript is right for you if you want to build exciting UI components you always wanted to build.

The course cleared up many questions I had about JavaScript. I saved lots of time from googling, and I became more confident as a developer.

Picture of Israel Obiagba

Israel Obiagba


  1. Intro to forms
  2. Getting form fields
  3. Types of form fields
  4. Sanitize your output
  5. Generating unique IDs
  6. Hands on: Todolist: Building the component
  7. Hands on: Autocomplete: Building the component
  8. Hands on: Autocomplete: Bolding terms

—Asynchronous JavaScript

  1. Introduction to Ajax
  2. Understanding JSON
  3. The Fetch API
  4. Data Types
  5. JavaScript Promises
  6. Requests and responses
  7. Sending post requests
  8. Authentication
  9. Handling errors
  10. Viewing response headers
  11. CORS and JSONP
  12. XHR or Fetch
  13. Using an Ajax library
  14. Understanding API Documentations
  15. Understanding CURL
  16. Hands on: Todolist: The Todolist API
  17. Hands on: Todolist: Using the Todolist API
  18. Hands on: Dota Heroes: Building the app
  19. Hands on: Dota Heroes: Filtering heroes
  20. Hands on: Dota Heroes: Refactoring
  21. Hands on: Google Maps clone: Creating your first map
  22. Hands on: Google Maps clone: Fetching JSONP
  23. Hands on: Google Maps clone: Getting directions
  24. Hands on: Google Maps clone: Searching for places
  25. Hands on: Google Maps clone: Handling incomplete searches
  26. Hands on: Google Maps clone: Refactor #1
  27. Hands on: Google Maps clone: Adding stopovers
  28. Hands on: Google Maps clone: Removing stopovers
  29. Hands on: Google Maps clone: Refactor #2

—Advanced asynchronous JavaScript*

  1. Requesting many resources at once
  2. Getting Response headers in JavaScript
  3. Dealing with paginated responses (part 1)
  4. Dealing with paginated responses (part 2)
  5. Async and await
  6. Timeouts
  7. Async loops
  8. Hands on: Improving a Dota Heroes list
  9. Hands on: Improving a Google maps component
  10. Hands on: Improving a loading indicator


  1. The date object
  2. Hands on: Building a datepicker

—Scroll, mouse and resize events*

  1. Handling Scroll events
  2. Handling Mouse events
  3. Handling Touch events
  4. Hands on: building an auto-hiding sticky nav
  5. Hands on: building a same-page-scroll link
  6. Hands on: building an infinite-scrolling page
  7. Hands on: building a scrollspy
  8. Hands on: building a drag & drop component
  9. Hands on: improving the carousel
  10. Hands on: improving the date picker

Keyboard events*

  1. Handling keyboard events
  2. Hands on: Improving the off-canvas menu
  3. Hands on: improving the modal window
  4. Hands on: improving the tabbed component
  5. Hands on: improving carousel
  6. Hands on: improving the calculator
  7. Hands on: improving the popover
  8. Hands on: improving the Dota heroes list
  9. Hands on: improving the Google maps component
  10. Hands on: improving the date picker


  1. Getting started with Accessibility
  2. How to use a screen reader
  3. Important ARIA Roles
  4. >Hands on: Improving the off-canvas menu
  5. Hands on: improving the modal window
  6. Hands on: improving the accordion
  7. Hands on: improving the tabbed component
  8. Hands on: improving the tooltip
  9. Hands on: improving the calculator
  10. Hands on: improving the todo-list
  11. Hands on: improving the date picker
  12. Hands on: improving the scrollspy
  13. Hands on: improving the drag & drop component

—Progressive Enhancement*

  1. The progressive enhancement mindset
  2. What if there’s no JavaScript?
  3. Feature detection and polyfilling
  4. Vendor prefixing
  5. Hands on: Enhancing every component you've built

—Object-oriented programming

  1. What is Object Oriented Programming?
  2. This in Javascript
  3. Javascript Classes
  4. Inheritance
  5. Prototype in Javascript
  6. Inheritance with Prototype
  7. Constructing objects
  8. Composition and inheritance
  9. Private and public variables
  10. Call, bind and apply

—Integrating components*

  1. PubSub pattern
  2. Custom events
  3. ES6 imports
  4. Decoupling
  5. Hands on: Combining loading indicator with other components

—Single page applications*

  1. The foundation to frontend frameworks
  2. The MVC Architecture
  3. Hands on: building the card generator
  4. Routing
  5. Hands on: adding routing to the card generator
  6. Data flow with vanilla-style flux/redux
  7. Hands on: adding data-flow to the card generator
  8. Authentication
  9. Hands on: adding authentication to the card generator

* These modules are still being written.

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

Picture of Elmir Halebic

Elmir Halebic

Learn to build 20 components

These components are real components. They’re not toys—unlike what you find in most books and courses.

You start by building simple components. You’ll improve the components as you go through the course. You’ll also learn to make more complicated components in later lessons.

You’ll even integrate these best practices into your code:

  1. Accessibility
  2. Progressive Enhancement
  3. Object-Oriented programming

Here are the 20 components you'll build:

  1. Off-canvas sidebar
  2. Modal window
  3. Accordion
  4. Tabbed component
  5. Carousel
  6. Calculator UI
  7. Autocomplete input
  8. To-do list
  9. Popover
  10. Date picker
  1. Google maps comp
  2. Loading indicator
  3. Dota heroes list
  4. Auto-hiding nav
  5. Infinite Scroll
  6. Same-page scroll link
  7. Infinite-scrolling page
  8. Scrollspy component
  9. Drag and Drop
  10. Card generator webapp

Here's a sneak peek of the components:

  • Image of the off-canvas menu
  • Image of the modal
  • Image of the accordion
  • Image of the tabbed component
  • Image of the carousel menu
  • Image of the calculator
  • Image of the popover
  • Image of the Autocomplete
  • Image of the Todolist
  • Image of the Dota Explorer app
  • Image of the Goole Maps Clone
  • Image of the card generator

Learn JavaScript showed me a clear path to learn JavaScript. It integrated theory into real-life projects and helped me stay focused and motivated.

I feel more confident about my JavaScript skills and I’m no longer afraid to show my work at job interviews.

Picture of Ion Leahu

Ion Leahu

Remember JavaScript for life

A kid and an adult cycling. The kid is waving at you.

JavaScript is is a skill you can keep for life, like swimming and riding a bicycle. When you learn JavaScript properly, you can recall JavaScript whenever you need it.

People forget JavaScript because they try to learn JavaScript without understanding the concepts. It doesn’t matter how hard they try. You can’t remember JavaScript if you don’t understand it.

Don’t waste your time learning and forgetting JavaScript. Learn it once, learn it well.

It’s easy to remember JavaScript for life. You only got two steps:

  1. Understand the concepts
  2. Practice until you’re familiar with them

You’ll go through both steps in Learn JavaScript.

Know what to learn instinctively

JavaScript changes so quickly. What you learned yesterday feels outdated already. Frameworks change; new frameworks pop up. You have new things to learn all the time!

How do you keep up?

People who complain the industry moves too fast feel that they have to learn everything. They try to learn everything, but they don’t understand what they’re learning, and in the end, they learn nothing.

Here’s a secret: you don’t need to learn everything.

Learn what you need to fulfill your goals. Everything else is a distraction.

To know what you need to learn, you need to understand the JavaScript ecosystem. Once you do, you don’t have to worry about the speed the industry moves at. It’s not relevant to you anymore.

You can focus on what matters to you.

Ironically, this focus can increase your learning speed. For example, I understood Object-Oriented Programming in only 4 days.

Imagine you have the same focus. What will you do with it?

Become a JavaScript expert

Being a JavaScript expert doesn’t mean you know everything about JavaScript.

It means:

  1. You can make anything you want from scratch.
  2. You can solve any JavaScript problem you encounter.
  3. You know what to learn and how to learn them.
  4. You can make decisions between different coding styles.
  5. You can choose between frameworks effortlessly.
  6. You won’t waste time wondering if your code is good enough. You know it is.
  7. You gain insights into coding techniques and frameworks when you read articles
  8. You can apply the insights you learned immediately to your code.
  9. You can grasp deep concepts without getting a headache.

You can become a JavaScript expert.

Learn JavaScript is the best way to learn JavaScript. I never found anything like it out there. It starts all the way from the beginning. And it shows you understandable code examples all the way through.

The course pushed me forward in my coding career. JavaScript became fun to write. I no longer avoid JavaScript.

Picture of Robert Mittl

Robert Mittl

Reviews from students who joined Learn JavaScript

Learn JavaScript is the best and most helpful JavaScript course I found.

I used to think that JavaScript is overwhelming and hard. This course breaks JavaScript into doable chunks. Each lesson is clear and concise. I don’t feel overwhelmed or confused as I go through them.

I gained the confidence that I can not only learn understand JS, I can master it.

Picture of Jesse Mcintire

Jesse Mcintire

I would have given up on JavaScript if I didn’t join Learn JavaScript. This course is well structured and beginner friendly. Zell and other students are always there to answer my questions when I get stuck.

Now, I can help newer programmers with their questions. I can even understand books like Eloquent JavaScript!

Picture of Michiko Y

Michiko Y

Learn JavaScript takes you through all the steps in building the components. The course doesn’t stop after the first steps. It shows you how to improve the component and include best practices.

This is something I found so hard to learn from other courses. I finally started to understand how to move on from a beginner level to an intermediate level.

Picture of Pelle Lundgren

Pelle Lundgren

Zell knows how to help me get to the next level. He teaches what I need to know, reinforces my learnings through exercises, and shows me why the things I’m learning are important through real examples.

Learn JavaScript changed the way I approach JavaScript. I actually know what I’m doing when I write JavaScript now!

Picture of Kevin Powell

Kevin Powell

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 Jake Chiam

Jake Chiam

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

I understood JavaScript much better than before. I became more confident when working with frameworks and libraries, and I spend less time on Google and Stack Overflow

Picture of Oriol Gasquez

Oriol Gasquez

I love Learn JavaScript. This course is a fail-safe system for learning JavaScript. If you want to really understand JavaScript, this is the only course you’ll need.

Zell breaks everything down into simple understandable blocks. He encouraged and empowered his students to ask questions, which helped me learn a lot.

Picture of Shahar Levy

Shahar Levy

Zell explains things in a way that no other instructor has been able to do in my 15+ years of trying to “self educate” in the world of Javascript.

In this course, Zell integrates every piece of JavaScript theory into building real UI. He shows you how to build simple things, then how to refactor the code with useful modern techniques.

Learn JavaScript helped increase my confidence at JavaScript. I’ve since refactored our style guide at work to completely remove jQuery. I also have the confidence to start a Vue project.

Picture of Joshua Briley

Joshua Briley

Join the waiting list for Learn JavaScript

Enrollment for Learn JavaScript is currently closed. I will open enrollment again in July 2019. If you want to be kept informed of the course progress, fill in your name and email address to join the waiting list.

Besides updates about Learn JavaScript, you’ll also get a course to help you understand the path to becoming a JavaScript expert–JavaScript Roadmap. It’s yours for free.

JavaScript Roadmap logo