How to end your JavaScript struggles

Tell me if any of these sound familiar to you:

  • You lose confidence when you’re asked to make something that requires JavaScript.
  • You stare at a blank file and wonder how to even begin writing the JavaScript code you need—how do you think like a developer?
  • You get stuck trying to learn Javascript—the industry moves so fast and there are so many things to learn! Where do you begin learning?
  • Articles, books, and courses write in abstract terms that you can’t seem to understand.
  • You don’t understand documentation (for JavaScript, frameworks and even APIs) too .
  • You’ve always googled around and copy-pasted code to build things, but you’re sick of the process—you want to build things from scratch.
  • You feel like an idiot when your code refuses to work, especially when you coded along with a tutorial.

All you wanted to do was get good enough with Javascript to make an interactive website, build an app, or get hired as a junior frontend developer. Why is it so hard?

You lose confidence in yourself when you fail at learning JavaScript. Your dream of building a website, making an application, or getting hired, floats farther away.

It’s tough; I get you. I struggled with Javascript too. I cried when I wrote this, because I remember the days when I felt the same.

I didn’t believe I could learn JavaScript—I didn’t have a programming background, I couldn’t make sense of the Foobar geek-speak, I forgot everything I learned by the next day— and I almost convinced myself that I could never be a developer. I almost gave up on learning JavaScript altogether.

Almost.

But thankfully, I didn’t.

What if you understood JavaScript completely?

I knew this to be true: any web developer worth their salt needs to know the big three—HTML, CSS and Javascript. I knew I couldn’t give up on JavaScript since I wanted to be a good web developer.

Even though I felt it was hopeless, I continued to pursue JavaScript. I even buried myself in articles, books and courses for another three years!

Those years were incredibly stressful, but I got results to show :)

I’ve got to a point where I’m confident in my Javascript skills.

I’ve built crazy shit that I couldn’t imagine myself building when I got started. For example, I built a static site generator that runs my blog with JavaScript. Can you imagine that?

I’ve also built delightful animations like this one below. (Check it out. I love the huggy emoji. It brings a smile to your face everytime, doesn’t it?).

You can be confident in JavaScript too.

Imagine you’re at a place where you’re confident with your JavaScript skills. You can build webapps and cool animations from scratch, you’ll be able to remember JavaScript in your sleep, and you’ll be able to answer any JavaScript question any recruiter throws at you—even if you can’t find the answer on Google.

Wouldn’t you like to be there?

You don’t need a computer science degree

You can become great at Javascript even if you don’t have a computer science degree. This tweet expresses 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.

You don’t need to have a computer science degree to be a great developer.

You don’t need a programming background to learn Javascript.

On hindsight (after I’ve almost bled to death, banging my head on the wall, while going through the school of hard knocks), I realized that Javascript can be easy to learn.

The problem?

Most article/book/course authors oversimplified Javascript—they assumed you know the basics, so they jump into the advanced stuff, and they lose you from step one. (Or, they FOOBAR you to death).

Why do I know?

When I asked people what questions they had about Javascript, I was horrified by the amount of people who asked basic Javascript questions—the same questions that I had when I tried to learn JavaScript!

JavaScript isn’t that hard. I know it, because I got to the other end. JavaScript can be easy and fun to learn if you learn the right things, and the right time, in the right way.

I want to show you how, so you don’t go through the same horrible process I did.

Hello, I'm Zell :)

I’m a frontend developer from Singapore. I taught myself how to code when I was 24 without any prior programming experience.

I began freelancing when I was 25, with only a year of front-end development experience under my belt, and I have been freelancing ever since.

My knowledge of HTML, CSS and Javascript combined allowed me to command higher prices and helped me earn over $10,000 a month from my development skills.

Today, I’m here to teach you JavaScript.

Do you want to be able to build interactive components and webapps, from scratch, without copy-pasting other people’s code?

Do you want to be confident in JavaScript, remember JavaScript by heart, and make things you’re proud of?

Do you want to feel like a real developer who can solve complex problems? Do you want to learn to think like one and be able to show off your abilities in job interviews?

I’ll show you how in Learn Javascript.

In Learn JavaScript, you’ll get access to over 155 lessons to help you:

  • Learn to navigate yourself around the complicated world of Javascript, which includes libraries, frameworks, tools, improvements, and plugins.
  • Understand abstract JavaScript concepts in simple terms without any FOOBAR geek-speak.
  • Learn to think, act and code like a developer.
  • Build 20 real-world components—designed by four designers—from scratch with guided step-by-step instructions.
  • Build components that utilize AJAX, JSON and API calls.
  • Make silky smooth animations that respond to a multitude of user interactions.
  • Remember Javascript for life, even if you don’t code for three months straight.
  • Write JavaScript with best practices without getting confused by millions of opinions on the Internet.
  • Build plugins and libraries to reuse your components.
  • Build a webapp with vanilla JavaScript (no frameworks involved).
  • And much much more! (See the complete lesson list below).

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 used for
  3. Handling varying versions of JavaScript
  4. Navigating the JavaScript ecosystem
  5. Preparing your text editor

Module 2
—JavaScript Basics

  1. Linking your JavaScript file
  2. The console
  3. Strings, Numbers and Booleans
  4. Comments
  5. Declaring variables
  6. Semicolons
  7. Functions
  8. Arrow functions
  9. Scopes and Closures
  10. Introduction to Objects
  11. Introduction to Arrays
  12. If/else statements
  13. And, or, and not operators
  14. Null and undefined
  15. For loops
  16. Debugging errors
  17. Callbacks

Module 3
—DOM Basics

  1. BOM and DOM
  2. Selecting an element
  3. Changing CSS with JavaScript
  4. Array.prototype.forEach
  5. Selecting multiple elements
  6. Nodes vs Elements
  7. Changing classes
  8. Changing attributes
  9. DOM Traversals
  10. ID, Classes, Tags or Attributes

Module 4
—Events

  1. Events in JavaScript
  2. The listening element
  3. Removing event listeners
  4. Default behaviors
  5. Event propagation
  6. Event delegation

Module 5
—Building real components

  1. How to think like a developer
  2. Using the starter template
  3. Hands on: build an off-canvas sidebar menu
  4. Hands on: build a modal window
  5. Hands on: build an accordion
  6. Hands on: build a tabbed-component
  7. Hands on: build a carousel*
  8. Lessons from the building process

Module 6
—Spicing components with animations

  1. CSS transitions
  2. CSS animations
  3. Jank free animations
  4. Integrating CSS transitions and animations with JavaScript*
  5. Getting the positional information of an element
  6. Detecting vendor prefixes*
  7. Animating with JavaScript
  8. Introduction to Greensock Animation API (GSAP)
  9. Hands on: animating the off canvas menu
  10. Hands on: animating the modal window
  11. Hands on: animating the accordion*
  12. Hands on: animating the carousel*

Module 7
—Functional Programming

  1. What is Functional Programming
  2. Higher-order-functions
  3. Preventing objects from mutating
  4. Preventing arrays from mutating
  5. Declarative vs Imperative programming
  6. Composing functions
  7. Functional array methods
  8. Destructuring
  9. Rest and spread

Module 8
—Object-oriented Programming

  1. Object literal shorthands
  2. Template Strings
  3. What is Object-oriented Programming?
  4. This in JavaScript
  5. JavaScript Classes
  6. Inheritance
  7. JavaScript prototype
  8. Inheritance through prototype
  9. The best way to construct objects*
  10. Composition and inheritance*
  11. Private and public variables*
  12. Call, bind and apply*
  13. OOP Best Practices*

Module 9
—Text, Content and Forms*

  1. Getting and setting html and text
  2. Creating, adding, and removing elements
  3. Form events and methods
  4. Hands on: building a tooltip
  5. Hands on: building an autocomplete input
  6. Hands on: building a calculator
  7. Hands on: building a todo-list
  8. Hands on: building a date picker

Module 10
—Asynchronous JavaScript*

  1. Basics to asynchronous JavaScript
  2. JSON
  3. Understanding REST APIs
  4. JavaScript Promises
  5. The Fetch API
  6. The Axios library
  7. Error handling
  8. Hands on: building a loading indicator
  9. Hands on: building an instagram feed
  10. Hands on: building a Google maps component
  11. Hands on: improving autocomplete input
  12. Hands on: improving the tooltip
  13. Hands on: improving the carousel

Module 11
—Progressive enhancement*

  1. The progressive enhancement mindset
  2. What if there’s no JavaScript?
  3. Moving from mobile to desktop
  4. Feature detection and polyfilling
  5. Hands on: Improving the accordion
  6. Hands on: improving the tabbed-component
  7. Hands on: improving the carousel

Module 12
—Scroll, mouse and touch 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 13
—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

Module 14
—Accessibility*

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

Module 15
—Libraries and plugins*

  1. When to create libraries & plugins
  2. Default variables
  3. Extending options
  4. Method chaining
  5. Hands on: Pluginify the calendar widget

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

Module 17
—Webpack and Asset management*

  1. Introduction to Webpack
  2. Importing JavaScript files with Webpack
  3. Preparing your assets for production
  4. Using new JavaScript features with Babel
*These modules/lessons are still being written.

Get immediate access to new lessons

Immediate Access A person surfing the web

Do you want to learn JavaScript properly now, or do you want to wait for another six months?

My intention for Learn JavaScript is bold—upon completion, you’ll be able to build anything you want from scratch, remember Javascript for life, and code without googling or copy-pasting other people’s code.

In Learn JavaScript, I explain JavaScript concepts in ways you can understand; that means you’ll never find FOOBAR anywhere in Learn JavaScript. When you go through the course, you’ll be able to understand JavaScript no matter what level you’re at right now.

That’s why I know Learn JavaScript is valuable for you; I want to give you the opportunity to benefit from Learn JavaScript even though it’s still being created as we speak.

The 20 components

The 20 components you’ll build build in Learn JavaScript are designed by designers; they resemble components you build in the real world.

You’ll first learn to build a basic version of each component. Then, you’ll learn to integrate best practices—like Accessibility, Progressive Enhancement, Functional Programming and Object Oriented Programming— into your code..

Here's the 20 components you'll build:

  1. Off-canvas sidebar
  2. Modal window
  3. Accordion
  4. Tabbed component
  5. Carousel
  6. To-do list
  7. Autocomplete input
  8. Calculator UI
  9. Tooltip
  10. Date picker
  1. Google maps comp
  2. Loading indicator
  3. Twitter feed
  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 card generator that you'll learn to build

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 JavaScript learners. You can ask questions, provide answers, and form accountability groups to nail down your JavaScript knowledge.

If you participate actively, maybe you’ll create long-term friendships with folks who are as motivated and as hardworking as you are!

Direct access to Zell through group coaching calls

Group coaching calls A person wearing headphones and is chatting with someone else through a laptop

Getting the right feedback helps you improve tremendously. To help you speed up your JavaScript learning process, I’m opening up my schedule to include four group coaching calls with you and your peers.

In these calls, you get to ask me anything related to JavaScript. You’ll also get to listen to questions from your peers. If you want to improve quickly at JavaScript, hop onto the calls!

Don’t worry if you can’t make it to the call. You’ll get access to these recorded calls so you can view them later at your own pace.

Nice things people have said about my work

Zell is a talented developer with in-depth knowledge of various front-end technologies and tools. He’s not only proficient at his work, but he also regularly shares his knowledge with the community.

His books and articles are so well written and full of useful information that I would recommend them to everyone in the web development industry.

Picture of Zoran
Zoran Jambor
CSS Weekly

Zell’s work is detailed but not overwhelming. He guided me slowly—from basics to more advanced concepts, step by step—and ensured I understood everything before going deeper; he understood my needs, offered solutions, but doesn’t force me into a one.

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

Picture of Pierre
Pierre Wizla
Frontend developer

Zell’s style of writing is accessible to new-comers because he shares his own learning experience. He covers are current topics and helps readers level up their web development skills. A must-subscribe blog.

Picture of Hui Jing
Chen Huijing
Talk.css

Automating Your Workflow took me by the hand, led me through the jungle of tools and frameworks, and left me with a working setup; it saved me a lot of time from searching the web for opinions, incomplete how-to’s, and piecing together components to setup a decent workflow.

Picture of Klaus
Klaus Jørgensen
Frontend developer

Node.js and Gulp were foreign concepts to me even though I’ve hand-coded websites for over 10 years.

Zell’s book was exactly what I needed—explanation of the concepts, showing me how to code the various parts of it, and how to bolt it all together—to get my own custom automated workflow, which suits me and is easily adjustable for the project I’m currently working on.

Picture of Eystein
Eystein Mack Alnæs
Frontend developer

Zell makes an amazing effort to deliver good content in an engaging and easy to understand manner. I found that automation is much easier than I expected after reading Automating Your Workflow—where Zell covers a difficult topic that's partially explained by other people.

Picture of Tom
Tom Bessems
Frontend developer

Mastering Responsive Typography is an excellent walkthrough of everything you need to know about Responsive Typography. I was able to learn something new even though I've been building for the web for several years!

Picture of Ire
Ire Aderinokun
Bitsofco.de

Zell’s writing style, content, and thoroughness is fantastic.

I’ve been around long enough (20 years) to remember that getting expert, well written, and thorough help on new topics was just about hopeless.

The small percentage of people like Zell who go out and become experts on topics and then work hard to teach others like me are the reason that software these days is so much easier and fun to write.

Eric Gaut
Web developer

Join the waiting list for Learn JavaScript

Enrollment for Learn JavaScript is closed. It’ll open again again in July 2018. 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.