Learn JavaScript From Scratch

6/24/22, 9:28 PM Learn JavaScript from scratch
Here’s the best way to learn JavaScript

When I teach JavaScript, I focus on a two-step process that’s proven to work:
I help you understand JavaScript concepts

You learn to apply these concepts by building real things
I help you understand concepts by turning abstract concepts into simple

everyday examples. These analogies have helped many students understand
JavaScript concepts.
For example:
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.
Once you understand the concept, I teach you how to use them in real
projects, which cements the knowledge into your subconscious, and you’ll
always know (and remember) what to do.
Zell makes JavaScript fun and easy to learn. He explains technical

jargon 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.
– Marion Couneson
https://learnjavascript.today/?ck_subscriber_id=1780671610&utm_source=convertkit&utm_medium=email&utm_campaign=… 7/44
Learn
JavaScript
{ No }
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 everyday examples through
relevant analogies.
Step-by-step lessons
Each lesson builds on the knowledge you learned from
previous lessons. We don’t skip steps so you won’t get
confused.
From theory to practice

Learn to apply JavaScript concepts as you build real-world
components so you remember JavaScript for life.
Build 20 real-world components

You’ll make animations, use best practices, improve the
components you built throughout the course, and more.
A community that answers your questions.
All your JavaScript questions will get answered in this

community — no exceptions — so ask away!
With over 300 in-depth lessons,

Learn JavaScript helps you:
Understand JavaScript
Learn JavaScript best

practices
Think like a developer
Make silky smooth

animations
Make things from scratch
Build frameworks
Build 20 real-world
components
Write reusable code
Have confidence in
JavaScript
Remember JavaScript for life
And much more! (See the complete lesson list below).

Email Address
changer248@gmail.com
Working...
// 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. The JavaScript ecosystem
4. Varying versions of JavaScript
Module 2 —JavaScript Basics

1. Linking your JavaScript file
2. Preparing your text editor
3. The console
4. Comments
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
https://learnjavascript.today/?ck_subscriber_id=1780671610&utm_source=convertkit&utm_medium=email&utm_campaign… 11/44
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. 🛠️ Building an off-canvas menu
5. 🛠️ 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. Introduction to arrays
2. Array methods
3. For loops
4. The forEach loop
5. Selecting multiple elements
6. Node vs Elements
7. 🛠️ 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. 🛠️ Building 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
Module 6 —Events deep dive

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
Module 7 —Transitions and Animations

1. CSS transitions
2. CSS animations
3. Silky-smooth animations
4. Integrating CSS transitions and animations with Javascript
5. JavaScript animations
6. The Greensock Animation API (GSAP)
7. 🛠️ Modal: Animating the modal
8. 🛠️ Modal: Animating the pointing hand
9. 🛠️ Modal: Animating the waving hand
10. 🛠️ Modal: Modal: Wave hand animation with JavaScript (using GSAP)
11. 🛠️ Modal: Wave hand animation with JavaScript (using GSAP)
12. 🛠️ Accordion: Animations
🛠️ Carousel: Animations
13.
I’ve been trying to understand CSS transitions and animations for so

many times, and I failed each time in the past.
I never thought I would understand CSS transitions and

animations while learning JavaScript, but I did. The CSS
transitions and animation lessons in Learn JavaScript is so clear
and easy to understand. This is beyond my expectation.
– Sirapop Lam-o-pas
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. 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
Module 9 —JavaScript best practices

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
Module 10 —Text and Content

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 Path
9. 🛠️ Calculator: Easy Edge Cases
10. 🛠️ Calculator: Difficult Edge Cases 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
At first, I didn’t know if Learn JavaScript was worth it. I was familiar
with the first ten modules already. But now, I’m halfway into the
course and I totally love it.
Learn JavaScript gave me a deep understanding of the

language and its capabilities. I gained new perspectives on things
I already know, and I learned new things like Forms and APIs.
– Maxim Konoval
Module 11 —Forms
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
Module 12 —Dates
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: Initial 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: The HTML and CSS
20. 🛠️ Countdown: The JavaScript
21. 🛠️ Countdown: Counting months
22. 🛠️ Countdown: Daylight Saving Time
23. 🛠️ Countdown: Counting years
Module 13 —Asynchronous JavaScript

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
Learn Javascript showed me the full landscape of the Vanilla

JavaScript ecosystem. Everything Zell taught laid an important
foundation, and I immediately get to use them on practical projects.
I became more confident with my existing skills and I filled up any gaps
I had. Every time I jump into the course I learn something to
deepen my javascript knowledge, and I become more marketable for

work in the future.
I’ve become more confident writing Javascript. I’ve increased my

Javascript knowledge, and I’ve also saved a lot of time searching
around the internet trying to learn what Zell has put all together
in one incredible resource.
– Lauralee Flores
Module 14 —Advanced Asynchronous JavaScript

1. Requesting many resources at once New
2. Asynchronous functions New
3. Handling multiple awaits New
4. Asynchronous loops New
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 New
10. 🛠️ Dota Heroes: Making the hero page robust New
11. 🛠️ Dota Heroes: Heroes page refactor
Module 15 Keyboard
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
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.
– Israel Obiagba
Module 16 —Accessibility
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
Module 17 —Handling Scroll

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
Module 18 Mouse, Touch, and Pointers

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
I thought the price seemed a little high at first but I always found Zell’s
content informing and easy to understand so I bought the course, and
I’m glad I did!
The content in Learn Javascript is easy to understand and laid out in

a way that builds in the areas you need to know for web development
fundamentals. Even for an industry veteran like myself, I’ve found that
knowing the fundamentals is most important, regardless of what

framework you decide to work in.
I highly recommend taking this course whether you’re starting out

or already experienced in Javascript.
– Tom Mulkins
Module 19 —Object-oriented programming

1. Before we begin
2. What is Object Oriented Programming?
3. Four Flavours of Object Oriented Programming
4. Inheritance
5. This in JavaScript
6. Call, bind, apply
7. Creating Derivative Objects
8. Composition vs Inheritance
9. Polymorphism
10. Encapsulation
11. Closures
12. Encapsulation in Object Oriented Programming
13. Getters and Setters
14. What OOP flavour to use
15. When to use Object Oriented Programming
Module 20 —Writing reusable code

1. Creating reusable code by writing libraries
2. Two Types of libraries Updated
3. Including libraries with Script tags
4. Including libraries with ES6 Modules
5. Dynamic imports
🛠️ Off Canvas: Building a Library Updated
6.
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
Module 21 —Vanilla JS to Frameworks

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
Module 22 —Single page applications

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
🛠️: Practical lessons where we build things.

Learn JavaScript is my number one choice for learning JavaScript.
I finally feel that JavaScript is within my reach.
– Elmir Halebic
// Learn to build 20 components
Learn to build practical components you use at work — you get to:
Understand how each component works

Build them from scratch (without frameworks or libraries)
Tweak them so you improve their usability and accessibility.
We’ll cover each component step-by-step — even if the difficulty of components rises as
you go thorugh the course.
Here are the 20 components you'll build:
1. Off-canvas Menu
2. Modal Window
3. Accordion
4. Tabbed Component
5. Carousel
6. Calculator
7. Popover
8. Todolist
9. Typeahead
10. Datepicker
11. Countdown Timer
12. Google Maps Clone
13. Dota Heroes Page
14. Auto-hiding Sticky Nav
15. Slide & Reveal
16. Infinite Scroll

17. Spinning Pacman
18. Drag and Drop
19. A Tiny Framework
20. Dota Heroes SPA
Here's a sneak peek of the components:
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.
– Ion Leahu
// Written to help you learn

Learn JavaScript From Scratch

Uploaded by

Learn JavaScript From Scratch

Uploaded by

6/24/22, 9:28 PM Learn JavaScript from scratch

Here’s the best way to learn JavaScript

I help you understand JavaScript concepts

I help you understand concepts by turning abstract concepts into simple

1. When I teach functions, I ask students to imagine drawing water from a

Zell makes JavaScript fun and easy to learn. He explains technical

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

No JavaScript knowledge required

Easy to understand examples

From theory to practice

Build 20 real-world components

A community that answers your questions.

All your JavaScript questions will get answered in this

With over 300 in-depth lessons,

Learn JavaScript best

Think like a developer

Make silky smooth

Make things from scratch

Write reusable code

Remember JavaScript for life

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

// The lesson plan

Module 1 —JavaScript and its Ecosystem

Module 2 —JavaScript Basics

14. The BOM and the DOM

Module 3 —Building simple components

Module 4 —Arrays and loops

Module 6 —Events deep dive

Module 7 —Transitions and Animations

I’ve been trying to understand CSS transitions and animations for so

I never thought I would understand CSS transitions and

Module 8 —Useful JavaScript features

Module 9 —JavaScript best practices

2. Functions with a purpose

Module 10 —Text and Content

Learn JavaScript gave me a deep understanding of the

5. Setting a specific date

Module 13 —Asynchronous JavaScript

11. CORS and JSONP

Learn Javascript showed me the full landscape of the Vanilla

deepen my javascript knowledge, and I become more marketable for

I’ve become more confident writing Javascript. I’ve increased my

Module 14 —Advanced Asynchronous JavaScript

8. How to choose keyboard shortcuts

Learn JavaScript is right for you if you want to build exciting UI

The course cleared up many questions I had about JavaScript.

Module 17 —Handling Scroll

6. Intersection Observer Options

Module 18 Mouse, Touch, and Pointers

The content in Learn Javascript is easy to understand and laid out in

knowing the fundamentals is most important, regardless of what

I highly recommend taking this course whether you’re starting out

Module 19 —Object-oriented programming

Module 20 —Writing reusable code

Module 21 —Vanilla JS to Frameworks

Module 22 —Single page applications

🛠️: Practical lessons where we build things.

// Learn to build 20 components

Understand how each component works

Here are the 20 components you'll build:

16. Infinite Scroll

Here's a sneak peek of the components:

Learn JavaScript showed me a clear path to learn JavaScript. It

I feel more confident about my JavaScript skills and I’m no

// Written to help you learn

You might also like