w3docs logo
Anmelden

JavaScript - The Complete Guide (Beginner + Advanced)

Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2020.

Start
  1. Courses
  3. JavaScript - The Complete Guide (Beginner + Advanced)

JavaScript is THE most important programming language you need to learn as a web developer - and with this course, you make sure that you will not miss a single thing you have to know as a JavaScript developer!

This is the most comprehensive and modern course you can find on JavaScript - it's based on all my JavaScript knowledge AND teaching experience. It's both a complete guide, starting with the core basics of the language, as well as an extensive reference of the JavaScript language and environment, ensuring that both newcomers as well as experienced JavaScript developers get a lot out of this course!

It's a huge course because it's packed with important knowledge and helpful content. From the core basics, over advanced concepts and JavaScript specialties, all the way up to expert topics like performance optimization and testing - this course has it all. My goal was to create your go-to resource for the JavaScript language, which you can not just use for learning it but also as a resource you can come back to and look up important topics.

The course is based on my experience as a long-term JavaScript developer as well as a teacher with more than 1,000,000 students online. It's packed with examples, demos, projects, assignments, quizzes and of course videos - all with the goal of giving you the best possible way of learning JavaScript.

What's in the course?

This course is obviously packed with content - I therefore strongly recommend that you check out the full course curriculum to get a clear idea of all the topics covered in the course. In general, here's what you'll find in the course:

  • Modern JavaScript from the start: The JavaScript syntax changed over time - in this course, you'll learn the latest syntax from the start (you'll also learn about the old one though, so that you can work in ANY JS project)
  • ALL the Basics: Variables, constants, functions, how scripts are loaded etc
  • Arrays & Objects: We'll explore these very important data structures in great detail
  • Control Structures: Understand how to run code conditionally and in loops
  • A look behind the Scenes: How JavaScript engines work behind the scenes and what that means for us
  • Deep dives into Core Concepts: ALL the special things about JavaScript function, different syntaxes
  • Working with the DOM: How to manipulate web pages dynamically via JavaScript (including deep dives and different use-cases)
  • Events in JavaScript: Learn how to listen to a broad variety of events (e.g. drag & drop) and execute appropriate code
  • Classes & Object-oriented Programming: Learn how to work with classes, prototypes, the "this" keyword, constructor functions and much more
  • Asynchronous and Synchronous Programming: We'll explore callbacks, promises, async/ await and other important tools and language features to execute code correctly
  • Http Requests: Learn how to send Http requests via JavaScript
  • Tooling, Optimizations & Browser Support: Code splitting, producing small code and ensuring that scripts work in all browsers - this matters and hence is covered in great detail
  • Libraries & Frameworks: Learn about libraries like Axios or frameworks like React.js - why they matter and how to use them
  • Node.js: Whilst focusing on the browser-side for the majority of the course (because the syntax is the same), we'll also have a dedicated section on Node.js to learn all about that JS host environment
  • Security & Performance Optimizations: Of course security matters, so does performance - no surprise that both is covered in the course!
  • Automated Testing: Testing manually is hard work and can be unreliable - in this course you'll also get an introduction into automated testing

Who this course is for:

  • Beginner web development students who have no or only little JavaScript experience
  • Also developers who know the basics about JavaScript and want to deepen their knowledge
  • Advanced JavaScript developers who want to learn more about the nitty-gritty details and dive into advanced concepts
  • Everyone interested in learning JavaScript and all about how it works

Section: Getting Started

1. Introduction (1:50)
2. What is JavaScript? (3:44)
3. JavaScript in Action! (8:57)
4. Join our Online Learning Community (1:00)
5. How JavaScript Is Executed (3:14)
6. Dynamic vs Weakly Typed Languages (3:24)
7. JavaScript Runs In A Host Environment (4:40)
8. Course Outline - What Is In The Course? (6:00)
9. How To Get The Most Out Of This Course (2:32)
10. Using Course Resources (1:00)
11. JavaScript vs Java (4:02)
12. A Brief History Of JavaScript (6:03)
13. Setting Up a Development Environment (11:12)
14. Course FAQs (1:00)

Section: Basics: Variables, Data Types, Operators & Functions

15. Module Introduction (1:17)
16. Setting Up the Project (4:25)
17. More on Version Control & Git (1:00)
18. Adding JavaScript to the Website (6:42)
19. Introducing Variables & Constants (5:17)
20. Declaring & Defining Variables (7:10)
21. Working with Variables & Operators (6:17)
22. Quiz 1: Variables & Operators (1:00)
23. Understanding the Starting Code (1:21)
24. Data Types: Numbers & Strings (Text) (6:00)
25. Using Constants (5:11)
26. More on Strings (15:51)
27. Quiz 2: Data Types & Constants (1:00)
28. Assignment - Variables, Constants, Operators & Core Data Types (Problem) (3:20)
29. Assignment - Variables, Constants, Operators & Core Data Types (Solution) (4:57)
30. Introducing Functions (5:50)
31. Adding A Custom Function (11:22)
32. Code Styles, Conventions & Syntax (1:00)
33. Returning Values (4:31)
34. The (Un)Importance of Code Order (4:34)
35. An Introduction to Global & Local Scope (5:31)
36. "Shadowed Variables" (1:00)
37. More about the "return" Statement (2:24)
38. Executing Functions "Indirectly" (11:10)
39. "Indirect" vs "Direct" Function Execution - Summary (1:00)
40. Quiz 3: Functions & Scope (1:00)
41. Assignment - Functions (Problem) (2:37)
42. Assignment - Functions (Solution) (6:40)
43. Converting Data Types (6:14)
44. Mixing Numbers & Strings (1:00)
45. Splitting Code into Functions (5:49)
46. Connecting all Buttons to Functions (7:43)
47. Working with Code Comments (4:09)
48. More Operators! (6:39)
49. More Core Data Types! (4:31)
50. Using Arrays (8:53)
51. Creating Objects (6:02)
52. Accessing Object Data (2:51)
53. Quiz 4: Arrays & Objects (1:00)
54. Adding a Re-Usable Function That Uses Objects (5:24)
55. undefined, null & NaN (6:20)
56. The "typeof" Operator (3:11)
57. Quiz 5: "undefined", "null" & "NaN" (1:00)
58. Importing Scripts Correctly with "defer" & "async" (12:57)
59. Wrap Up (2:13)
60. Useful Resources & Links (1:00)

Section: Efficient Development & Debugging

61. Module Introduction (1:28)
62. Efficient Development & Debugging - An Overview (3:18)
63. Configuring the IDE Look & Feel (2:25)
64. Using Shortcuts (4:12)
65. Working with Auto-Completion & IDE Hints (4:34)
66. Installing IDE Extensions (2:04)
67. Tweaking Editor Settings (2:15)
68. Utilizing Different IDE Views (1:41)
69. Finding Help & Working with MDN (5:53)
70. The ECMAScript Standard (1:00)
71. How to "google" Correctly (1:44)
72. Debugging JavaScript - An Overview (3:17)
73. An Error Message! No Reason To Panic! (4:26)
74. Using console.log() to look "into the Code" (3:49)
75. Next-Level Debugging with the Chrome Devtools & Breakpoints (8:20)
76. Testing Code Changes Directly in the Devtools (2:05)
77. Debugging Code directly Inside VS Code (4:55)
78. Wrap Up (1:22)
79. Useful Resources & Links (1:00)

Section: Working with Control Structures (if Statements, Loops, Error Handling)

80. Module Introduction (2:26)
81. Introducing "if" Statements & Boolean (Comparison) Operators (9:26)
82. Using "if" Statements (7:23)
83. Working with "if", "else" and "else-if" (5:10)
84. Beware When Comparing Objects & Arrays for Equality! (4:06)
85. The Logical AND and OR Operators (9:10)
86. Understanding Operator Precedence (7:20)
87. Quiz 6: if & Boolean Operators - The Basics (1:00)
88. Beyond true/ false: "Truthy" and "Falsy" Values (7:30)
89. Coercion vs Conversion (1:00)
90. Quiz 7: Falsy and Truthy Values (1:00)
91. Setting Up a Bigger Example Project (The "Monster Killer") (2:59)
92. Adding an "Attack" Function (7:57)
93. Using "if" Statements for Checking the Win-Condition (9:17)
94. Adding More "if" Statements & A "Strong Attack" Functionality (7:41)
95. Time for a "Heal Player" Functionality! (10:15)
96. Controlling the Conditional Bonus Life (Without Boolean Operators!) (5:59)
97. Adding a "Reset Game" Functionality (6:00)
98. Validating User Input (6:17)
99. Utilizing Global Constants as Identifiers in Conditional Code (3:20)
100. Adding a Conditional Battle Log (16:37)
101. Introducing the Ternary Operator (7:31)
102. A Bit of Theory: Statements vs Expressions (1:40)
103. Logical Operator "Tricks" & Shorthands (12:58)
104. Quiz 8: Logical Operators & How They Work (1:00)
105. Working with the "switch-case" Statement (7:10)
106. Introducing Loops (6:40)
107. The "for" Loop (7:38)
108. The "for-of" Loop (5:16)
109. The "for-in" Loop (6:49)
110. The "while" & "do-while" Loops (8:00)
111. Quiz 9: Loops - Basics (1:00)
112. Assignment - Control Structures (Problem) (2:47)
113. Assignment - Control Structures (Solution) (9:55)
114. Controlling Loops with "break" (8:11)
115. Controlling Iterations with "continue" (2:21)
116. More Control with Labeled Statements (6:26)
117. Quiz 10: break & continue (1:00)
118. Error Handling with "try-catch" - An Introduction (2:25)
119. Throwing Custom Errors (5:16)
120. Working with "try-catch" to Catch & Handle Errors (8:14)
121. Quiz 11: Error Handling (1:00)
122. Wrap Up (3:21)
123. Useful Resources & Links (1:00)

Section: Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript

124. Module Introduction (1:43)
125. ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScript (8:14)
126. var vs let & const - Introducing "Block Scope" (14:32)
127. Understanding "Hoisting" (4:07)
128. Strict Mode & Writing Good Code (5:46)
129. Quiz 12: "JavaScript Specialties" (1:00)
130. How Code is Parsed & Compiled (8:16)
131. Inside the JavaScript Engine - How the Code Executes (15:59)
132. [DEEP DIVE] JavaScript Language vs Browser APIs (1:00)
133. Primitive vs Reference Values (19:24)
134. Garbage Collection & Memory Management (12:00)
135. Wrap Up (1:55)
136. Useful Resources & Links (1:00)

Section: More on Functions

137. Module Introduction (1:31)
138. Recapping Functions Knowledge - What We Know Thus Far (1:52)
139. Parameters vs Arguments (1:00)
140. Functions vs Methods (5:46)
141. Functions are Objects! (2:47)
142. Function Expressions: Storing Functions in Variables (5:12)
143. Function Expressions vs Function Declarations (2:47)
144. Anonymous Functions (5:54)
145. Working on the Project: Adding User Choices to the Game (7:44)
146. Implementing the Core Game Logic (7:20)
147. Introducing Arrow Functions (8:41)
148. Quiz 13: Creating Functions (1:00)
149. Outputting Messages to the User (3:53)
150. Default Arguments in Functions (10:45)
151. Introducing Rest Parameters ("Rest Operator") (8:57)
152. Creating Functions Inside of Functions (3:04)
153. Understanding Callback Functions (6:09)
154. Assignment - Functions (Problem) (3:16)
155. Assignment - Functions (Solution) (8:19)
156. Working with "bind()" (8:39)
157. Adding bind() to the Calculator Project (3:46)
158. Quiz 14: Functions - Advanced (1:00)
159. call() and apply() (1:18)
160. Wrap Up (2:10)
161. Useful Resources & Links (1:00)

Section: Working with the DOM (Browser HTML Code) in JavaScript

162. Module Introduction (1:48)
163. What's the "DOM"? (6:00)
164. Document and Window Object (6:20)
165. Understanding the DOM and how it's created (7:07)
166. Nodes & Elements - Querying the DOM Overview (5:55)
167. Selecting Elements in the DOM (9:54)
168. Summary: Node Query Methods (1:00)
169. Exploring and Changing DOM Properties (7:37)
170. Attributes vs Properties (8:58)
171. Selecting Multiple Elements & Summary (5:13)
172. Quiz 15: DOM Basics (1:00)
173. Assignment - DOM Querying (Problem) (2:10)
174. Assignment - DOM Querying (Solution) (5:41)
175. Traversing the DOM - Overview (6:22)
176. Traversing Child Nodes (9:15)
177. Using parentNode & parentElement (5:01)
178. Selecting Sibling Elements (4:05)
179. DOM Traversal vs Query Methods (4:35)
180. Styling DOM Elements (12:18)
181. Creating Elements with JS - Overview (2:42)
182. Adding Elements via HTML in Code (7:42)
183. Adding Elements via createElement() (5:42)
184. Inserting DOM Elements (8:15)
185. Cloning DOM Nodes (1:45)
186. Live Node Lists vs Static Node Lists (4:55)
187. Removing Elements (1:56)
188. Insertion & Removal Method Summary (2:38)
189. Summary: Insert, Replace, Remove (1:00)
190. Setting Up the Practice Project (2:16)
191. Selecting the Modal and "Add" Button (8:58)
192. Opening a Modal by Changing CSS Classes (5:01)
193. Controlling the Backdrop (8:04)
194. Fetching and Validating User Input (8:06)
195. Creating a Movie in JavaScript & Clearing the Input (4:00)
196. Rendering Movie Items on the Screen (8:23)
197. Deleting Movie Elements (9:12)
198. Showing & Hiding the "Are you sure?" Dialog (7:08)
199. Starting with the Confirmation Logic (4:29)
200. Finishing the App (11:45)
201. Wrap Up (1:55)
202. Useful Resources & Links (1:00)

Section: More on Arrays & Iterables

203. Module Introduction (1:08)
204. What are "Iterables" and "Array-like Objects"? (2:11)
205. Creating Arrays (8:55)
206. Which Data Can You Store In Arrays? (3:47)
207. push(), pop(), unshift(), shift() - Adding & Removing Elements (6:59)
208. The splice() Method (5:37)
209. Selecting Ranges & Creating Copies with slice() (4:26)
210. arrays-it-08-concat (2:23)
211. Retrieving Indexes with indexOf() /& lastIndexOf() (3:47)
212. Finding Stuff: find() and findIndex() (5:20)
213. Is it Included? (1:20)
214. Alternative to for Loops: The forEach() Method (4:24)
215. Transforming Data with map() (2:38)
216. sort()ing and reverse()ing (4:15)
217. Filtering Arrays with filter() (2:35)
218. Where Arrow Functions Shine! (1:31)
219. The Important reduce() Method (7:33)
220. Chaining Methods in JavaScript (1:00)
221. Arrays & Strings - split() and join() (4:21)
222. The Spread Operator (...) (10:31)
223. Understanding Array Destructuring (4:24)
224. Maps & Sets - Overview (4:16)
225. Working with Sets (7:20)
226. Working with Maps (9:30)
227. Maps vs Objects (3:41)
228. Understanding WeakSet (4:50)
229. Understanding WeakMap (2:51)
230. Assignment - Arrays & Iterables (Problem) (3:05)
231. Assignment - Arrays & Iterables (Solution) (10:55)
232. Wrap Up (1:25)
233. Useful Resources & Links (1:00)

Section: More on Objects

234. Module Introduction (1:38)
235. What's an Object? (5:54)
236. Objects - Recap (2:42)
237. Adding, Modifying & Deleting Properties (6:46)
238. Special Key Names & Square Bracket Property Access (8:36)
239. Property Types & Property Order (3:55)
240. Dynamic Property Access & Setting Properties Dynamically (4:11)
241. Quiz 16: Object Properties (1:00)
242. Demo App & Shorthand Property Syntax (9:22)
243. Rendering Elements based on Objects (5:36)
244. for-in Loops & Outputting Dynamic Properties (5:24)
245. Adding the Filter Functionality (5:38)
246. Understanding "Chaining" (Property & Method Chaining) (1:51)
247. The Object Spread Operator (...) (5:54)
248. Understanding Object.assign() (2:08)
249. Object Destructuring (6:13)
250. Checking for Property Existance (2:42)
251. Introducing "this" (5:52)
252. The Method Shorthand Syntax (1:07)
253. The "this" Keyword And Its Strange Behavior (5:41)
254. call() and apply() (3:22)
255. What the Browser (Sometimes) Does to "this" (3:32)
256. "this" and Arrow Functions (10:36)
257. Quiz 17: "this" (1:00)
258. Getters & Setters (7:05)
259. Wrap Up (1:33)
260. Useful Resources & Links (1:00)

Section: Classes & Object-oriented Programming (OOP)

261. Module Introduction (1:55)
262. What is "Object-oriented Programming" (OOP)? (3:17)
263. Getting Started with OOP Code (12:10)
264. Defining & Using a First Class (7:17)
265. Working with Constructor Methods (4:51)
266. Fields vs Properties (2:19)
267. Using & "Connecting" Multiple Classes (9:06)
268. Binding Class Methods & Working with "this" (4:57)
269. Adding a Cart and Shop Class (4:37)
270. Communicating Can Be Challenging! (3:54)
271. Static Methods & Properties (4:31)
272. First Summary & Classes vs Object Literals (4:06)
273. Getters & Setters (5:43)
274. Introducing Inheritance (2:34)
275. Implementing Inheritance (11:50)
276. Using Inheritance Everywhere (6:51)
277. Overriding Methods and the super() Constructor (6:00)
278. super() Constructor Execution, Order & "this" (6:46)
279. Different Ways of Adding Methods (5:51)
280. Private Properties (7:24)
281. Assignment - Classes & OOP (Problem) (2:39)
282. Assignment - Classes & OOP (Solution) (13:36)
283. The "instanceof" Operator (4:30)
284. Understanding Object Descriptors (7:35)
285. Built-in Classes (1:09)
286. Quiz 18: Classes (1:00)
287. Wrap Up (1:51)
288. Useful Resources & Links (1:00)

Section: Deep Dive: Constructor Functions & Prototypes

289. Module Introduction (1:34)
290. Introducing Constructor Functions (4:02)
291. Constructor Functions vs Classes & Understanding "new" (4:17)
292. Introducing Prototypes (16:46)
293. Working with Prototypes (5:19)
294. The Prototype Chain and the Global "Object" (8:26)
295. Quiz 19: Constructor Functions & Prototypes (1:00)
296. Classes & Prototypes (5:24)
297. Methods in Classes & In Constructors (10:16)
298. Built-in Prototypes in JavaScript (2:12)
299. Setting & Getting Prototypes (10:58)
300. Wrap Up (2:49)
301. Useful Resources & Links (1:00)

Section: Practice: OOP & Classes

302. Module Introduction (1:38)
303. First Project Steps & Planning (4:46)
304. Creating Project Lists & Parsing Element Data (4:08)
305. Starting with the "Switch Project" Logic (9:59)
306. Passing Method References Around (7:02)
307. Moving DOM Elements (11:49)
308. Adding a Tooltip (8:58)
309. Adding Inheritance (6:13)
310. Wrap Up (0:57)
311. Useful Resources & Links (1:00)

Section: Back to the DOM & More Browser APIs

312. Module Introduction (2:31)
313. Using "dataset" (data-* Attributes) (6:51)
314. Getting Element Box Dimensions (5:53)
315. Working with Element Sizes & Positions (4:56)
316. The DOM & Prototypes (2:21)
317. Positioning the Tooltip (10:57)
318. Handling Scrolling (5:36)
319. Working with Tags (5:14)
320. Loading Scripts Dynamically (7:35)
321. Setting Timers & Intervals (7:37)
322. The "location" and "history" Objects (4:20)
323. The "navigator" Object (4:50)
324. Working with Dates (3:17)
325. The "Error" Object & Constructor Function (3:21)
326. Wrap Up (0:43)
327. Useful Resources & Links (1:00)

Section: Working with Events

328. Module Introduction (1:31)
329. Introduction to Events in JavaScript (6:18)
330. Different Ways of Listening to Events (6:59)
331. Removing Event Listeners (5:13)
332. The "event" Object (5:43)
333. Supported Event Types (8:00)
334. Working with "preventDefault()" (5:15)
335. Understanding "Capturing" & "Bubbling" Phases (2:02)
336. Event Propagation & "stopPropagation()" (7:39)
337. Using Event Delegation (8:33)
338. Triggering DOM Elements Programmatically (3:40)
339. Event Handler Functions & "this" (2:28)
340. Quiz 20: Events (1:00)
341. Drag & Drop - Theory (4:58)
342. Configuring Draggable Elements (6:23)
343. Marking the "Drop Area" (8:52)
344. Dropping & Moving Data + Elements (6:58)
345. Firefox Adjustments (1:00)
346. Wrap Up (1:15)
347. Useful Resources & Links (1:00)

Section: Advanced Function Concepts

348. Module Introduction (0:57)
349. Pure Functions & Side-Effects (6:13)
350. Impure vs Pure Functions (2:00)
351. Factory Functions (5:41)
352. Closures (7:45)
353. Closures in Practice (7:01)
354. Closures & Memory Management (1:23)
355. Optional: IIFEs (1:00)
356. Introducing "Recursion" (7:32)
357. Advanced Recursion (9:01)
358. Quiz 21: Advanced Functions (1:00)
359. Wrap Up (1:14)
360. Useful Resources & Links (1:00)

Section: More on Numbers & Strings

361. Module Introduction (0:53)
362. How Numbers Work & Behave in JavaScript (7:46)
363. Floating Point (Im)Precision (11:04)
364. The BigInt Type (3:36)
365. The Global "Number" and "Math" Objects (2:47)
366. Example: Generate Random Number Between Min/ Max (5:33)
367. Exploring String Methods (1:43)
368. Tagged Templates (10:28)
369. Introducing Regular Expressions ("RegEx") (4:30)
370. More on Regular Expressions (7:25)
371. Wrap Up (1:20)
372. Useful Resources & Links (1:00)

Section: Async JavaScript: Promises & Callbacks

373. Module Introduction (1:12)
374. Understanding Synchronous Code Execution ("Sync Code") (2:51)
375. Understanding Asynchronous Code Execution ("Async Code") (5:44)
376. Blocking Code & The "Event Loop" (10:30)
377. Sync + Async Code - The Execution Order (4:03)
378. Multiple Callbacks & setTimeout(0) (3:20)
379. Quiz 22: Asynchronous Code (1:00)
380. Getting Started with Promises (8:25)
381. Chaining Multiple Promises (5:52)
382. Promise Error Handling (7:46)
383. Async/ await (9:11)
384. Async/ await & Error Handling (3:07)
385. Async/ await vs "Raw Promises" (4:56)
386. Promise.all(), Promise.race() etc. (7:59)
387. Quiz 23: Promises & async/ await (1:00)
388. Wrap Up (1:27)
389. Useful Resources & Links (1:00)

Section: Working with Http Requests

390. Module Introduction (1:06)
391. What & Why (5:03)
392. More Background about Http (5:24)
393. Getting Started with Http (3:35)
394. Sending a GET Request (3:46)
395. JSON Data & Parsing Data (9:14)
396. Promisifying Http Requests (with XMLHttpRequest) (3:49)
397. Sending Data with a POST Request (4:55)
398. Triggering Requests via the UI (3:12)
399. Sending a DELETE Request (4:56)
400. Handling Errors (5:03)
401. Using the fetch() API (7:10)
402. POSTing Data with the fetch() API (2:38)
403. Adding Request Headers (3:01)
404. fetch() & Error Handling (7:11)
405. XMLHttpRequest vs fetch() (1:42)
406. Working with FormData (6:58)
407. Wrap Up (1:17)
408. Useful Resources & Links (1:00)

Section: Working with JavaScript Libraries

409. Module Introduction (0:59)
410. What & Why (2:55)
411. Adding Libraries (Example: lodash) (9:10)
412. Example: jQuery (2:30)
413. Discovering Libraries (3:25)
414. Axios Library & Http Requests (10:46)
415. Third-Party Library Considerations (4:54)
416. Wrap Up (0:59)
417. Useful Resources & Links (1:00)

Section: Modular JavaScript (Working with Modules)

418. Module Introduction (0:56)
419. Splitting Code in a Sub-optimal Way (7:12)
420. A First Step Towards JavaScript Modules (3:25)
421. We Need a Development Server! (5:58)
422. First import / export Work (3:41)
423. Switching All Files To Use Modules (4:26)
424. More Named Export Syntax Variations (6:12)
425. Working With Default Exports (3:35)
426. Dynamic Imports & Code Splitting (5:24)
427. When Does Module Code Execute? (2:06)
428. Module Scope & globalThis (6:18)
429. Quiz 24: Modules (1:00)
430. Wrap Up (1:37)
431. Useful Resources & Links (1:00)

Section: JavaScript Tooling & Workflows

432. Module Introduction (3:23)
433. Project Limitations & Why We Need Tools (8:11)
434. Workflow Overview (2:42)
435. Setting Up a npm Project (3:45)
436. Working with npm Packages (3:39)
437. Linting with ESLint (8:38)
438. Bundling with Webpack (15:13)
439. Bonus: Multiple Entry Points (1:00)
440. Development Mode & Fixing "Lazy Loading" (4:00)
441. Using webpack-dev-server (3:14)
442. Generating Sourcemaps (3:05)
443. Building For Production (3:45)
444. Final Optimizations (6:35)
445. Using Third Party Packages with npm & Webpack (4:06)
446. Wrap Up (1:39)
447. Useful Resources & Links (1:00)

Section: Utilizing Browser Storage

448. Module Introduction (1:05)
449. Browser Storage Options (7:21)
450. localStorage & sessionStorage (10:43)
451. Getting Started with Cookies (6:06)
452. Working with Cookies (8:10)
453. Getting Started with IndexedDB (8:55)
454. Working with IndexedDB (4:06)
455. Wrap Up (0:48)
456. Useful Resources & Links (1:00)

Section: JavaScript & Browser Support

457. Module Introduction (1:29)
458. What Is "Browser Support" About? (7:36)
459. Determining Browser Support For A JavaScript Feature (8:20)
460. Determining Required Support (3:29)
461. Solution: Feature Detection + Fallback Code (9:55)
462. Solution: Using Polyfills (3:18)
463. Solution: Transpiling Code (12:01)
464. Improvement: Automatically Detect + Add Polyfills (11:02)
465. What about Support Outside of Browsers? (0:57)
466. Browser Support Outside of JavaScript Files (2:36)
467. Wrap Up (1:18)
468. Useful Resources & Links (1:00)

Section: Time to Practice: Share My Place App

469. Module Introduction (0:53)
470. Setting Up the Project (3:05)
471. Getting DOM Access (4:33)
472. Getting the User Location (6:27)
473. Adding Feedback (Showing a Modal) (11:16)
474. Hiding the Modal (2:38)
475. Rendering a Map with Google Maps (14:16)
476. Continuing without a Credit Card (1:00)
477. Finding an Address & Getting the Coordinates (8:22)
478. Converting User Input to Coordinates (3:35)
479. Creating a "Share Place" Link (8:30)
480. Copying the Link to the Clipboard (3:36)
481. Rendering the "Shared Place" Screen (6:22)
482. Useful Resources & Links (1:00)

Section: Working with JavaScript Frameworks

483. Module Introduction (1:06)
484. What and Why? (7:35)
485. The Idea Behind React.js (2:46)
486. Analysing a React Project (17:38)
487. Wrap Up (1:35)
488. Useful Resources & Links (1:00)

Section: Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API

489. Module Introduction (1:51)
490. Understanding Symbols (8:27)
491. Well-known Symbols (5:15)
492. Understanding Iterators (5:32)
493. Generators & Iterable Objects (11:02)
494. Generators Summary & Built-in Iterables Examples (3:21)
495. The Reflect API (7:10)
496. The Proxy API and a First "Trap" (9:04)
497. Working with Proxy Traps (2:57)
498. Wrap Up (1:37)
499. Useful Resources & Links (1:00)

Section: Node.js: An Introduction

500. Module Introduction (1:42)
501. JavaScript is a Hosted Language (2:21)
502. Installation & Basics (6:16)
503. Understanding Modules & File Access (4:39)
504. Working with Incoming Http Requests (5:46)
505. Sending Responses (HTML Data) (4:01)
506. Parsing Incoming Data (10:53)
507. Introducing & Installing Express.js (2:48)
508. Express.js: The Basics (6:33)
509. Extracting Data (4:23)
510. Rendering Server-side HTML with Templates & EJS (6:52)
511. Enhancing Our Project (3:44)
512. Adding Basic REST Routes (12:09)
513. Understanding CORS (Cross Origin Resource Sharing) (5:13)
514. Sending the Location ID to the Frontend (2:16)
515. Adding the GET Location Route (7:16)
516. Introducing MongoDB (Database) (14:44)
517. NodeJS Error Handling (1:00)
518. Wrap Up (1:50)
519. Useful Resources & Links (1:00)

Section: Security

520. Module Introduction (1:35)
521. Security Hole Overview & Exposing Data in your Code (6:45)
522. Cross-Site Scripting Attacks (XSS) (14:39)
523. Third-Party Libraries & XSS (5:17)
524. Quiz 25: XSS & Exposing Confidential Details (1:00)
525. CSRF Attacks (Cross Site Request Forgery) (4:16)
526. CORS (Cross Origin Resource Sharing) (2:53)
527. Wrap Up (1:30)
528. Useful Resources & Links (1:00)

Section: Deploying JavaScript Code

529. Module Introduction (1:11)
530. Deployment Steps (7:29)
531. Different Types of Websites (1:00)
532. Example: Static Host Deployment (no Server-side Code) (9:43)
533. Injecting Script Imports Into HTML Automatically (1:00)
534. Example: Dynamic Page Deployment (with Server-side Code) (12:45)
535. Useful Resources & Links (1:00)

Section: Performance & Optimizations

536. Module Introduction (1:49)
537. What is "Performance Optimization" About? (6:16)
538. Optimization Potentials (6:48)
539. Measuring Performance (3:42)
540. Diving Into The Browser Devtools (for Performance Measuring) (15:30)
541. Further Resources (2:13)
542. Preparing The Testing Setup (4:03)
543. Optimizing Startup Time & Code Usage / Coverage (11:51)
544. Updating The DOM Correctly (9:53)
545. Updating Lists Correctly (8:11)
546. Optimizing The Small Things (3:58)
547. Micro-Optimizations (Think Twice!) (8:49)
548. Finding & Fixing Memory Leaks (9:43)
549. Server-side Performance Optimizations (1:00)
550. Wrap Up (3:26)
551. Useful Resources & Links (1:00)

Section: Introduction to Testing

552. Module Introduction (0:49)
553. What Is Testing? Why Does It Matter? (7:09)
554. Testing Setup (4:10)
555. Writing & Running Unit Tests (11:15)
556. Writing & Running Integration Tests (6:03)
557. Writing & Running e2e Tests (10:16)
558. Dealing with Async Code (10:20)
559. Working with Mocks (7:51)
560. Useful Resources & Links (1:00)

Section: Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)

561. Module Introduction (0:48)
562. What are Programming Paradigms? (3:01)
563. Procedural Programming in Practice (8:53)
564. Object Oriented Programming in Practice (13:20)
565. Functional Programming in Practice (13:52)
566. Wrap Up (3:26)
567. Useful Resources & Links (1:00)

Section: Bonus: Data Structures & Algorithms Introduction

568. Module Introduction (2:02)
569. What are "Data Structures" & "Algorithms"? (4:22)
570. A First Example (10:22)
571. Solving the Same Problem Differently (7:26)
572. Performance & The "Big O" Notation (11:44)
573. More Time Complexities & Comparing Algorithms (3:35)
574. More on Big O (5:23)
575. More Examples (10:15)
576. Diving into Data Structures & Time Complexities (12:07)
577. Where to Learn More & Wrap Up (3:22)
578. Useful Resources & Links (1:00)

Section: Bonus: TypeScript Introduction

579. Module Introduction (1:09)
580. What is TypeScript and Why would you use it? (4:51)
581. Working with Types (10:05)
582. Core Types & Diving Deeper (17:26)
583. Object Types, Array Types & Function Types (9:22)
584. Advanced Types (Literal Types, Union Types, Enums) (9:20)
585. Classes & Interfaces (12:02)
586. Generic Types (5:02)
587. Configuring the TypeScript Compiler (5:11)
588. Wrap Up (1:31)
589. Useful Resources & Links (1:00)

Section: Bonus: Web Components

590. Module Introduction (1:59)
591. Web Components in Action (6:30)
592. What are Web Components? (3:22)
593. Why Web Components? (2:44)
594. Getting Started! (4:56)
595. Web Component Browser Support (2:44)
596. Our Development Setup (3:53)
597. A First Custom Element (8:16)
598. Interacting with the Surrounding DOM (5:04)
599. Understanding the Custom Element Lifecycle (2:51)
600. Using "connectedCallback" for DOM Access (2:05)
601. Listening to Events Inside the Component (9:12)
602. Using Attributes on Custom Elements (4:45)
603. Styling our Elements (4:08)
604. Working with the "Shadow DOM" (5:00)
605. Adding an HTML Template (5:40)
606. Using Slots (1:50)
607. Defining the Template in JavaScript (3:21)
608. Using Style Tags in the Shadow DOM (2:40)
609. Extending Built-in Elements (7:33)
610. Assignment - The Basics (Problem) (2:55)
611. Assignment - The Basics (Solution) (11:31)
612. The Next Steps (0:49)
613. Understanding Shadow DOM Projection (2:26)
614. Styling "slot" Content Outside of the Shadow DOM (3:44)
615. Styling "slot" Content Inside of the Shadow DOM (3:10)
616. Styling the Host Component (4:42)
617. Conditional Host Styling (2:49)
618. Styling with the Host Content in Mind (2:27)
619. Smart Dynamic Styling with CSS Variables (6:20)
620. Cleaning Up the Overall Styling (3:22)
621. Observing Attribute Changes (6:17)
622. Adjusting the Component Behavior Upon Attribute Changes (2:34)
623. Using "disconnectedCallback" (6:10)
624. Adding a render() Method (6:13)
625. Final Adjustment (1:00)
626. The Next Steps (0:52)
627. Creating the Basic Modal Component (6:33)
628. Adding the Modal Container (2:29)
629. Styling the Modal Elements (5:35)
630. Adding Some General App Logic (3:49)
631. Opening the Modal via CSS (5:23)
632. Public Methods & Properties (6:37)
633. Understanding Named Slots (5:45)
634. Listening to Slot Content Changes (5:10)
635. Closing the Modal (6:57)
636. Dispatching Custom Events (3:40)
637. Configuring Custom Events (4:52)
638. Finishing it up! (4:50)
639. Useful Resources & Links (1:00)

Section: Roundup & Next Steps

640. Congratulations! (6:09)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.