The Complete JavaScript Course 2021: From Zero to Expert!

The Complete JavaScript Course 2021: From Zero to Expert!

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 68h 21m | 19.8 GB

The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one!

JavaScript is the most popular programming language in the world. It powers the entire modern web. It provides millions of high-paying jobs all over the world.

That’s why you want to learn JavaScript too. And you came to the right place!

Why is this the right JavaScript course for you?

This is the most complete JavaScript course on Udemy. It’s an all-in-one package that will take you from the very fundamentals of JavaScript, all the way to building modern and complex applications.

You will learn modern JavaScript from the very beginning, step-by-step. I will guide you through practical and fun code examples, important theory about how JavaScript works behind the scenes, and beautiful and complete projects.

You will also learn how to think like a developer, how to plan application features, how to architect your code, how to debug code, and a lot of other real-world skills that you will need on your developer job.

And unlike other courses, this one actually contains beginner, intermediate, advanced, and even expert topics, so you don’t have to buy any other course in order to master JavaScript from the ground up!

But… You don’t have to go into all these topics. This is a huge course, because, after all, it’s “The Complete JavaScript Course”. In fact, it’s like many courses in one! But you can become an excellent developer by watching only parts of the course. That’s why I built this course in a very modular way, and designed pathways that will take you through the course faster.

By the end of the course, you will have the knowledge and confidence that you need in order to ace your job interviews and become a professional developer.

So what exactly is covered in the course?

  • Build 5 beautiful real-world projects for your portfolio! In these projects, you will learn how to plan and architect your applications using flowcharts and common JavaScript patterns
  • Master the JavaScript fundamentals: variables, if/else, operators, boolean logic, functions, arrays, objects, loops, strings, and more
  • Learn modern JavaScript (ES6+) from the beginning: arrow functions, destructuring, spread operator, default arguments, optional chaining (ES2020), and more
  • How JavaScript works behind the scenes: engines, the call stack, hoisting, scoping, the ‘this’ keyword, reference values, and more.
  • Deep dive into functions: arrow functions, first-class and higher-order functions, bind, and closures.
  • Deep dive into object-oriented programming: prototypal inheritance, constructor functions (ES5), classes (ES6), encapsulation, abstraction, inheritance, and polymorphism. [This is like a small standalone course]
  • Deep dive into asynchronous JavaScript: the event loop, promises, async/await, and error handling. You will use these to access data from third-party APIs with AJAX calls. [This is like a small standalone course]
  • Learn modern tools that are used by professional web developers: NPM, Parcel (module bundler), Babel, and ES6 modules

What you’ll learn

  • Become an advanced, confident, and modern JavaScript developer from scratch
  • Build 6 beautiful real-world projects for your portfolio (not boring toy apps)
  • Become job-ready by understanding how JavaScript really works behind the scenes
  • How to think and work like a developer: problem-solving, researching, workflows
  • JavaScript fundamentals: variables, if/else, operators, boolean logic, functions, arrays, objects, loops, strings, etc.
  • Modern ES6+ from the beginning: arrow functions, destructuring, spread operator, optional chaining (ES2020), etc.
  • Modern OOP: Classes, constructors, prototypal inheritance, encapsulation, etc.
  • Complex concepts like the ‘this’ keyword, higher-order functions, closures, etc.
  • Asynchronous JavaScript: Event loop, promises, async/await, AJAX calls and APIs
  • How to architect your code using flowcharts and common patterns
  • Modern tools for 2021 and beyond: NPM, Parcel, Babel and ES6 modules
  • Practice your skills with 50+ challenges and assignments (solutions included)
  • Get friendly support in the Q&A area
  • Design your unique learning path according to your goals: course pathways
Table of Contents

Welcome, Welcome, Welcome
1 Course Structure and Projects
2 Watch Before You Start
3 Read Before You Start
4 Migration Guide to v2 + Old Course
5 Setting Up Our Code Editor

JavaScript Fundamentals – Part 1
6 Section Intro
7 Hello World
8 A Brief Introduction to JavaScript
9 Linking a JavaScript File
10 Values and Variables
11 Practice Assignments
12 Data Types
13 let, const and var
14 Basic Operators
15 Operator Precedence
16 Coding Challenge #1
17 Strings and Template Literals
18 Taking Decisions if else Statements
19 Coding Challenge #2
20 Type Conversion and Coercion
21 Truthy and Falsy Values
22 Equality Operators == vs. ===
23 Boolean Logic
24 Logical Operators
25 Coding Challenge #3
26 The switch Statement
27 Statements and Expressions
28 The Conditional (Ternary) Operator
29 Coding Challenge #4
30 JavaScript Releases ES5, ES6+ and ESNext

JavaScript Fundamentals – Part 2
31 Section Intro
32 Activating Strict Mode
33 Functions
34 Function Declarations vs. Expressions
35 Arrow Functions
36 Functions Calling Other Functions
37 Reviewing Functions
38 Coding Challenge #1
39 Introduction to Arrays
40 Basic Array Operations (Methods)
41 Coding Challenge #2
42 Introduction to Objects
43 Dot vs. Bracket Notation
44 Object Methods
45 Coding Challenge #3
46 Iteration The for Loop
47 Looping Arrays, Breaking and Continuing
48 Looping Backwards and Loops in Loops
49 The while Loop
50 Coding Challenge #4

How to Navigate This Course
51 Pathways and Section Roadmaps
52 Course Pathways

Developer Skills & Editor Setup
53 Section Intro
54 Section Roadmap
55 Setting up Prettier and VS Code
56 Installing Node.js and Setting Up a Dev Environment
57 Learning How to Code
58 How to Think Like a Developer Become a Problem Solver
59 Using Google, StackOverflow and MDN
60 Debugging (Fixing Errors)
61 Debugging with the Console and Breakpoints
62 Coding Challenge #1

[OPTIONAL] HTML & CSS Crash Course
63 Section Intro
64 Basic HTML Structure and Elements
65 Attributes, Classes and IDs
66 Basic Styling with CSS
67 Introduction to the CSS Box Model

JavaScript in the Browser DOM and Events Fundamentals
68 Section Intro
69 Section Roadmap
70 PROJECT #1 Guess My Number
71 What’s the DOM and DOM Manipulation
72 Selecting and Manipulating Elements
73 Handling Click Events
74 Implementing the Game Logic
75 Manipulating CSS Styles
76 Coding Challenge #1
77 Implementing Highscores
78 Refactoring Our Code The DRY Principle
79 PROJECT #2 Modal Window
80 Working With Classes
81 Handling an Esc Keypress Event
82 PROJECT #3 Pig Game
83 Rolling the Dice
84 Switching the Active Player
85 Holding Current Score
86 Resetting the Game

How JavaScript Works Behind the Scenes
87 Section Intro
88 Section Roadmap
89 An High-Level Overview of JavaScript
90 The JavaScript Engine and Runtime
91 Execution Contexts and The Call Stack
92 Scope and The Scope Chain
93 Scoping in Practice
94 Variable Environment Hoisting and The TDZ
95 Hoisting and TDZ in Practice
96 The this Keyword
97 The this Keyword in Practice
98 Regular Functions vs. Arrow Functions
99 Primitives vs. Objects (Primitive vs. Reference Types)
100 Primitives vs. Objects in Practice

Data Structures, Modern Operators and Strings
101 Section Intro
102 Section Roadmap
103 Destructuring Arrays
104 Destructuring Objects
105 The Spread Operator (…)
106 Rest Pattern and Parameters
107 Short Circuiting (&& and )
108 The Nullish Coalescing Operator ( )
109 Coding Challenge #1
110 Looping Arrays The for-of Loop
111 Enhanced Object Literals
112 Optional Chaining ( .)
113 Looping Objects Object Keys, Values, and Entries
114 Coding Challenge #2
115 Sets
116 Maps Fundamentals
117 Maps Iteration
118 Summary Which Data Structure to Use
119 Coding Challenge #3
120 Working With Strings – Part 1
121 Working With Strings – Part 2
122 Working With Strings – Part 3
123 Coding Challenge #4
124 String Methods Practice

A Closer Look at Functions
125 Section Intro
126 Section Roadmap
127 Default Parameters
128 How Passing Arguments Works Value vs. Reference
129 First-Class and Higher-Order Functions
130 Functions Accepting Callback Functions
131 Functions Returning Functions
132 The call and apply Methods
133 The bind Method
134 Coding Challenge #1
135 Immediately Invoked Function Expressions (IIFE)
136 Closures
137 More Closure Examples
138 Coding Challenge #2

Working With Arrays
139 Section Intro
140 Section Roadmap
141 Simple Array Methods
142 Looping Arrays forEach
143 forEach With Maps and Sets
144 PROJECT Bankist App
145 Creating DOM Elements
146 Coding Challenge #1
147 Data Transformations map, filter, reduce
148 The map Method
149 Computing Usernames
150 The filter Method
151 The reduce Method
152 Coding Challenge #2
153 The Magic of Chaining Methods
154 Coding Challenge #3
155 The find Method
156 Implementing Login
157 Implementing Transfers
158 The findIndex Method
159 some and every
160 flat and flatMap
161 Sorting Arrays
162 More Ways of Creating and Filling Arrays
163 Summary Which Array Method to Use
164 Array Methods Practice
165 Coding Challenge #4

Numbers, Dates, Intl and Timers
166 Section Intro
167 Section Roadmap
168 Converting and Checking Numbers
169 Math and Rounding
170 The Remainder Operator
171 Working with BigInt
172 Creating Dates
173 Adding Dates to Bankist App
174 Operations With Dates
175 Internationalizing Dates (Intl)
176 Internationalizing Numbers (Intl)
177 Timers setTimeout and setInterval
178 Implementing a Countdown Timer

Advanced DOM and Events
179 Section Intro
180 Section Roadmap
181 PROJECT Bankist Website
182 How the DOM Really Works
183 Selecting, Creating, and Deleting Elements
184 Styles, Attributes and Classes
185 Implementing Smooth Scrolling
186 Types of Events and Event Handlers
187 Event Propagation Bubbling and Capturing
188 Event Propagation in Practice
189 Event Delegation Implementing Page Navigation
190 DOM Traversing
191 Building a Tabbed Component
192 Passing Arguments to Event Handlers
193 Implementing a Sticky Navigation The Scroll Event
194 A Better Way The Intersection Observer API
195 Revealing Elements on Scroll
196 Lazy Loading Images
197 Building a Slider Component Part 1
198 Building a Slider Component Part 2
199 Lifecycle DOM Events
200 Efficient Script Loading defer and async

Object-Oriented Programming (OOP) With JavaScript
201 Section Intro
202 Section Roadmap
203 What is Object-Oriented Programming
204 OOP in JavaScript
205 Constructor Functions and the new Operator
206 Prototypes
207 Prototypal Inheritance and The Prototype Chain
208 Prototypal Inheritance on Built-In Objects
209 Coding Challenge #1
210 ES6 Classes
211 Setters and Getters
212 Static Methods
213 Object.create
214 Coding Challenge #2
215 Inheritance Between Classes Constructor Functions
216 Coding Challenge #3
217 Inheritance Between Classes ES6 Classes
218 Inheritance Between Classes Object.create
219 Another Class Example
220 Encapsulation Protected Properties and Methods
221 Encapsulation Private Class Fields and Methods
222 Chaining Methods
223 ES6 Classes Summary
224 Coding Challenge #4

Mapty App OOP, Geolocation, External Libraries, and More
225 Section Intro
226 Section Roadmap
227 Project Overview
228 How to Plan a Web Project
229 Using the Geolocation API
230 Displaying a Map Using Leaflet Library
231 Displaying a Map Marker
232 Rendering Workout Input Form
233 Project Architecture
234 Refactoring for Project Architecture
235 Managing Workout Data Creating Classes
236 Creating a New Workout
237 Rendering Workouts
238 Move to Marker On Click
239 Working with localStorage
240 Final Considerations

Asynchronous JavaScript Promises, Async Await, and AJAX
241 Section Intro
242 Section Roadmap
243 Asynchronous JavaScript, AJAX and APIs
244 IMPORTANT API URL Change
245 Our First AJAX Call XMLHttpRequest
246 [OPTIONAL] How the Web Works Requests and Responses
247 Welcome to Callback Hell
248 Promises and the Fetch API
249 Consuming Promises
250 Chaining Promises
251 Handling Rejected Promises
252 Throwing Errors Manually
253 Coding Challenge #1
254 Asynchronous Behind the Scenes The Event Loop
255 The Event Loop in Practice
256 Building a Simple Promise
257 Promisifying the Geolocation API
258 Coding Challenge #2
259 Consuming Promises with Async Await
260 Error Handling With try…catch
261 Returning Values from Async Functions
262 Running Promises in Parallel
263 Other Promise Combinators race, allSettled and any
264 Coding Challenge #3

Modern JavaScript Development Modules, Tooling, and Functional
265 Section Intro
266 Section Roadmap
267 An Overview of Modern JavaScript Development
268 An Overview of Modules in JavaScript
269 Exporting and Importing in ES6 Modules
270 The Module Pattern
271 CommonJS Modules
272 A Brief Introduction to the Command Line
273 Introduction to NPM
274 Bundling With Parcel and NPM Scripts
275 Configuring Babel and Polyfilling
276 Review Writing Clean and Modern JavaScript
277 Let’s Fix Some Bad Code Part 1
278 Declarative and Functional JavaScript Principles
279 Let’s Fix Some Bad Code Part 2

Forkify App Building a Modern Application
280 Section Intro
281 Section Roadmap
282 Project Overview and Planning (I)
283 Loading a Recipe from API
284 Rendering the Recipe
285 Listening For load and hashchange Events
286 The MVC Architecture
287 Refactoring for MVC
288 Helpers and Configuration Files
289 Event Handlers in MVC Publisher-Subscriber Pattern
290 Implementing Error and Success Messages
291 Implementing Search Results – Part 1
292 Implementing Search Results – Part 2
293 Implementing Pagination – Part 1
294 Implementing Pagination – Part 2
295 Project Planning II
296 Updating Recipe Servings
297 Developing a DOM Updating Algorithm
298 Implementing Bookmarks – Part 1
299 Implementing Bookmarks – Part 2
300 Storing Bookmarks With localStorage
301 Project Planning III
302 Uploading a New Recipe – Part 1
303 Uploading a New Recipe – Part 2
304 Uploading a New Recipe – Part 3
305 Wrapping Up Final Considerations

Setting Up Git and Deployment
306 Section Intro
307 Section Roadmap
308 Simple Deployment With Netlify
309 Setting Up Git and GitHub
310 Git Fundamentals
311 Pushing to GitHub
312 Setting Up Continuous Integration With Netlify

The End
313 Where to Go from Here
314 My Other Courses + Updates

[LEGACY] Access the Old Course
315 Access the Old Course

Homepage