English | MP4 | AVC 1280×7200 | AAC 44KHz 2ch | 320 lectures (68h 33m) | 24.20 GB
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one!
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 2023 and beyond: NPM, Parcel, Babel and ES6 modules
- Practice your skills with 50+ challenges and assignments (solutions included)
- Get fast and friendly support in the Q&A area
- Course pathways: design your unique learning path according to your goals!
Table of Contents
Welcome, Welcome, Welcome!
1 Course Structure and Projects
2 Read Before You Start!
3 Watch 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 Logical Assignment Operators
110 Coding Challenge #1
111 Looping Arrays The for-of Loop
112 Enhanced Object Literals
113 Optional Chaining (.)
114 Looping Objects Object Keys, Values, and Entries
115 Coding Challenge #2
116 Sets
117 Maps Fundamentals
118 Maps Iteration
119 Summary Which Data Structure to Use
120 Coding Challenge #3
121 Working With Strings – Part 1
122 Working With Strings – Part 2
123 Working With Strings – Part 3
124 Coding Challenge #4
125 String Methods Practice
A Closer Look at Functions
126 Section Intro
127 Section Roadmap
128 Default Parameters
129 How Passing Arguments Works Value vs. Reference
130 First-Class and Higher-Order Functions
131 Functions Accepting Callback Functions
132 Functions Returning Functions
133 The call and apply Methods
134 The bind Method
135 Coding Challenge #1
136 Immediately Invoked Function Expressions (IIFE)
137 Closures
138 More Closure Examples
139 Coding Challenge #2
Working With Arrays
140 Section Intro
141 Section Roadmap
142 Simple Array Methods
143 The new at Method
144 Looping Arrays forEach
145 forEach With Maps and Sets
146 PROJECT Bankist App
147 Creating DOM Elements
148 Coding Challenge #1
149 Data Transformations map, filter, reduce
150 The map Method
151 Computing Usernames
152 The filter Method
153 The reduce Method
154 Coding Challenge #2
155 The Magic of Chaining Methods
156 Coding Challenge #3
157 The find Method
158 Implementing Login
159 Implementing Transfers
160 The findIndex Method
161 some and every
162 flat and flatMap
163 Sorting Arrays
164 More Ways of Creating and Filling Arrays
165 Summary Which Array Method to Use
166 Array Methods Practice
167 Coding Challenge #4
Numbers, Dates, Intl and Timers
168 Section Intro
169 Section Roadmap
170 Converting and Checking Numbers
171 Math and Rounding
172 The Remainder Operator
173 Numeric Separators
174 Working with BigInt
175 Creating Dates
176 Adding Dates to Bankist App
177 Operations With Dates
178 Internationalizing Dates (Intl)
179 Internationalizing Numbers (Intl)
180 Timers setTimeout and setInterval
181 Implementing a Countdown Timer
Advanced DOM and Events
182 Section Intro
183 Section Roadmap
184 PROJECT Bankist Website
185 How the DOM Really Works
186 Selecting, Creating, and Deleting Elements
187 Styles, Attributes and Classes
188 Implementing Smooth Scrolling
189 Types of Events and Event Handlers
190 Event Propagation Bubbling and Capturing
191 Event Propagation in Practice
192 Event Delegation Implementing Page Navigation
193 DOM Traversing
194 Building a Tabbed Component
195 Passing Arguments to Event Handlers
196 Implementing a Sticky Navigation The Scroll Event
197 A Better Way The Intersection Observer API
198 Revealing Elements on Scroll
199 Lazy Loading Images
200 Building a Slider Component Part 1
201 Building a Slider Component Part 2
202 Lifecycle DOM Events
203 Efficient Script Loading defer and async
Object-Oriented Programming (OOP) With JavaScript
204 Section Intro
205 Section Roadmap
206 What is Object-Oriented Programming
207 OOP in JavaScript
208 Constructor Functions and the new Operator
209 Prototypes
210 Prototypal Inheritance and The Prototype Chain
211 Prototypal Inheritance on Built-In Objects
212 Coding Challenge #1
213 ES6 Classes
214 Setters and Getters
215 Static Methods
216 Object.create
217 Coding Challenge #2
218 Inheritance Between Classes Constructor Functions
219 Coding Challenge #3
220 Inheritance Between Classes ES6 Classes
221 Inheritance Between Classes Object.create
222 Another Class Example
223 Encapsulation Protected Properties and Methods
224 Encapsulation Private Class Fields and Methods
225 Chaining Methods
226 ES6 Classes Summary
227 Coding Challenge #4
Mapty App OOP, Geolocation, External Libraries, and More!
228 Section Intro
229 Section Roadmap
230 Project Overview
231 How to Plan a Web Project
232 Using the Geolocation API
233 Displaying a Map Using Leaflet Library
234 Displaying a Map Marker
235 Rendering Workout Input Form
236 Project Architecture
237 Refactoring for Project Architecture
238 Managing Workout Data Creating Classes
239 Creating a New Workout
240 Rendering Workouts
241 Move to Marker On Click
242 Working with localStorage
243 Final Considerations
Asynchronous JavaScript Promises, AsyncAwait, and AJAX
244 Section Intro
245 Section Roadmap
246 Asynchronous JavaScript, AJAX and APIs
247 IMPORTANT API URL Change
248 Our First AJAX Call XMLHttpRequest
249 [OPTIONAL] How the Web Works Requests and Responses
250 Welcome to Callback Hell
251 Promises and the Fetch API
252 Consuming Promises
253 Chaining Promises
254 Handling Rejected Promises
255 Throwing Errors Manually
256 Coding Challenge #1
257 Asynchronous Behind the Scenes The Event Loop
258 The Event Loop in Practice
259 Building a Simple Promise
260 Promisifying the Geolocation API
261 Coding Challenge #2
262 Consuming Promises with AsyncAwait
263 Error Handling With try…catch
264 Returning Values from Async Functions
265 Running Promises in Parallel
266 Other Promise Combinators race, allSettled and any
267 Coding Challenge #3
Modern JavaScript Development Modules, Tooling, and Functional
268 Section Intro
269 Section Roadmap
270 An Overview of Modern JavaScript Development
271 An Overview of Modules in JavaScript
272 Exporting and Importing in ES6 Modules
273 Top-Level await (ES2022)
274 The Module Pattern
275 CommonJS Modules
276 A Brief Introduction to the Command Line
277 Introduction to NPM
278 Bundling With Parcel and NPM Scripts
279 Configuring Babel and Polyfilling
280 Review Writing Clean and Modern JavaScript
281 Let’s Fix Some Bad Code Part 1
282 Declarative and Functional JavaScript Principles
283 Let’s Fix Some Bad Code Part 2
Forkify App Building a Modern Application
284 Section Intro
285 Section Roadmap
286 Project Overview and Planning (I)
287 Latest Code Updates (Parcel v2 and more)
288 Loading a Recipe from API
289 Rendering the Recipe
290 Listening For load and hashchange Events
291 The MVC Architecture
292 Refactoring for MVC
293 Helpers and Configuration Files
294 Event Handlers in MVC Publisher-Subscriber Pattern
295 Implementing Error and Success Messages
296 Implementing Search Results – Part 1
297 Implementing Search Results – Part 2
298 Implementing Pagination – Part 1
299 Implementing Pagination – Part 2
300 Project Planning II
301 Updating Recipe Servings
302 Developing a DOM Updating Algorithm
303 Implementing Bookmarks – Part 1
304 Implementing Bookmarks – Part 2
305 Storing Bookmarks With localStorage
306 Project Planning III
307 Uploading a New Recipe – Part 1
308 Uploading a New Recipe – Part 2
309 Uploading a New Recipe – Part 3
310 Wrapping Up Final Considerations
Setting Up Git and Deployment
311 Section Intro
312 Section Roadmap
313 Simple Deployment With Netlify
314 Setting Up Git and GitHub
315 Git Fundamentals
316 Pushing to GitHub
317 Setting Up Continuous Integration With Netlify
The End!
318 Where to Go from Here
319 My Other Courses + Updates
[LEGACY] Access the Old Course
320 Access the Old Course
Resolve the captcha to access the links!