Build anything you want with JavaScript

Have you tried learning JavaScript for a while, 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 clamp up. You begin sweating. 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. But 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.

Become a real developer and build anything you want.

How will your career be different if you can solve every JavaScript problem you encounter?

I wouldn’t believe it was possible for me to make anything with JavaScript three years ago. My JavaScript skills were lacking so much that I’d rather use hacky CSS methods over JavaScript.

But now, I can solve every JavaScript problem I encounter. I know how to build things from scratch. I even built crazy things like a static site generator for my blog with JavaScript.

I also built delightful animations like. Here’s one example:

(I love the huggy emoji so much! It brings a smile to my face whenever I see it. Check it out!)

Now, I ready myself for a challenge when I see a JavaScript problem. I’ll crack my knuckles and get to work. Within a few minutes, I’ll know what I need to do.

I can build things from scratch because I know how to think like a developer.

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

The key is to know how to break big problems down into small problems. Sometimes, you may even need to break your small problems into tiny teeny problems. Then, you create the solution by solving every small problem you identified.

It’s the same as breaking large tasks down into simple ones.

Hello, I'm Zell :)

I’m a teacher and frontend developer. 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 combined.

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.

I’ve gotten so good at JavaScript that I can build crazy shit when I want to. I already showed you the huggy emoji animation earlier. Let me show you another crazy one.

This is a component that allows people to view an artwork on a wall. Users can switch between different furniture scenes and play with the wall colors.

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 too. You don’t need a computer science degree. You don’t need a math degree either.

Don’t give up hope on learning JavaScript

Maybe you don’t believe you can learn JavaScript. Maybe you failed at learning JavaScript so many times that you want to give up.

Don’t give up.

I understand how you feel because I almost gave up on learning JavaScript.

JavaScript was hard for me because I didn’t believe I was smart enough to learn it.

I’m glad I have persisted. I’m proud to say I’m a pretty good frontend developer now. I even have results to show! You’ve seen the crazy things I made. You’ve also heard how I earned $10,000 a month with my skills.

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

First, let’s talk about why learning JavaScript feels so hard.

Books and courses teach abstract concepts with jargons

There are three big problems with most programming books, courses, and tutorials.

  1. They don’t explain programming jargons properly. If you don’t understand the jargon used, there’s no way you’re going to understand the concept.
  2. They FOOBAR you to death with fake examples. Examples with FOOBAR are meaningless. They’re hard to understand. You need real examples to help you learn.
  3. They skip the basics. They assume you know some knowledge you didn’t have. That’s why most books and courses get too hard too quickly, even if they started out easy!

JavaScript isn’t that hard. It just feels hard because of the problems I mentioned above.

I know JavaScript can be fun and easy to learn because I got to the other side. It will be fun and easy if you learn the right things in the right order.

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 in one hour when 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

I can show you how.

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 new insights about 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.

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 are turned into primary-school stuff 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 without even knowing how you did it.
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
No more copy-pasting code from Google.

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:

Module 1
—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

Module 2
—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

Module 3
—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

Module 4
—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

Module 5
—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)

Module 6
—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

Module 7
—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 window

Module 8
—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 carousel

Module 9
—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

Module 10
—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

Module 11

  1. Intro to Forms
  2. Getting form fields
  3. Form fields and their events
  4. Hands on: building a popover
  5. Hands on: building an autocomplete input
  6. Hands on: building a todo-list
  7. Persistent data
  8. Hands on: Improving the todo-list

Module 12

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

Module 13
—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: Building a Dota Heroes list
  17. Hands on: Building a Google maps component
  18. Hands on: Building a loading indicator
  19. Hands on: Improving the popover
  20. Hands on: Improving the carousel

Module 14
—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

Module 15
—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

Module 16
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 heores list
  9. Hands on: improving the Google maps component
  10. Hands on: improving the date picker

Module 17

  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

Module 18
—Progressive Enhancement*

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

Module 19
—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

Module 20
—Integrating components*

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

Module 21
—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

The 20 components

These components are designed by real designers. 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. Functional Programming
  4. Object-Oriented programming

Here's 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 that you'll learn to build
  • Image of the modal that you'll learn to build
  • Image of the accordion that you'll learn to build
  • Image of the tabbed component that you'll learn to build
  • Image of the carousel menu that you'll learn to build
  • Image of the calculator that you'll learn to build
  • Image of the popover that you'll learn to build
  • Image of the card generator that you'll learn to build

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 now.

Picture of Ion-leahu

Ion Leahu

Learn JavaScript with motivated peers

Peers Two people talking to each other

When you enroll in Learn JavaScript, you get access to a private community of students learning JavaScript. You can ask questions, provide answers, and form accountability groups to nail down your JavaScript knowledge.

I’ll also hang out in the community to help answer questions. You can find me there almost every day.

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

Reviews from students who joined Learn JavaScript

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 know I can learn JavaScript. I no longer panic when I use it!

Picture of Marion-couneson

Marion Couneson

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 because I understood JavaScript much better than before. I also spend less time on Google and Stack Overflow.

Picture of Oriol-gasquez

Oriol Gasquez

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

Learn JavaScript is right for you if you want to build exciting UI components you’ve always imagined building.

The course cleared up many questions I had about JavaScript, helped me save lots time from googling, and improved my confidence as a developer.

Picture of Israel-obiagba

Israel Obiagba

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

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 now. I no longer avoid JavaScript.

Picture of Robert-mittl

Robert Mittl

Join the waiting list for Learn JavaScript

Enrollment for Learn JavaScript is currently closed. I will open enrollment again in January 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