JavaScript – The Complete Guide 2020 (Beginner + Advanced)

JavaScript – The Complete Guide 2020 (Beginner + Advanced)
JavaScript – The Complete Guide 2020 (Beginner + Advanced)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 52 Hours | 19.3 GB
eLearning | Skill level: All Levels


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

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 on Udemy as well as on my YouTube channel Academind. 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

What you’ll learn

  • JavaScript from scratch – beginner to advanced
  • All core features and concepts you need to know in modern JavaScript development
  • Everything you need to become a JavaScript expert and apply for JavaScript jobs
  • Project-driven learning with plenty of examples
  • All about variables, functions, objects and arrays
  • Object-oriented programming
  • Deep dives into prototypes, JavaScript engines & how it works behind the scenes
  • Manipulating web pages (= the DOM) with JavaScript
  • Event handling, asynchronous coding and Http requests
  • Meta-programming, performance optimization, memory leak busting
  • Testing, security and deployment
  • And so much more!
+ Table of Contents

Introduction
1 Introduction
2 What is JavaScript?
3 JavaScript in Action!
4 Join our Online Learning Community
5 How JavaScript Is Executed
6 Dynamic vs Weakly Typed Languages
7 JavaScript Runs In A Host Environment
8 Course Outline – What Is In The Course?
9 How To Get The Most Out Of This Course
10 Using Course Resources
11 JavaScript vs Java
12 A Brief History Of JavaScript
13 Setting Up a Development Environment
14 Course FAQs

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

Efficient Development & Debugging
54 Module Introduction
55 Efficient Development & Debugging – An Overview
56 Configuring the IDE Look & Feel
57 Using Shortcuts
58 Working with Auto-Completion & IDE Hints
59 Installing IDE Extensions
60 Tweaking Editor Settings
61 Utilizing Different IDE Views
62 Finding Help & Working with MDN
63 The ECMAScript Standard
64 How to “google” Correctly
65 Debugging JavaScript – An Overview
66 An Error Message! No Reason To Panic!
67 Using console.log() to look “into the Code”
68 Next-Level Debugging with the Chrome Devtools & Breakpoints
69 Testing Code Changes Directly in the Devtools
70 Debugging Code directly Inside VS Code
71 Wrap Up
72 Useful Resources & Links

Working with Control Structures (if Statements, Loops, Error Handling)
73 Module Introduction
74 Introducing “if” Statements & Boolean (Comparison) Operators
75 Using Booleans in Conditions & More on Text Comparisons
76 Using “if” Statements
77 Working with “if”, “else” and “else-if”
78 Beware When Comparing Objects & Arrays for Equality!
79 The Logical AND and OR Operators
80 Understanding Operator Precedence
81 Beyond true/ false: “Truthy” and “Falsy” Values
82 Coercion vs Conversion
83 Setting Up a Bigger Example Project (The “Monster Killer”)
84 Adding an “Attack” Function
85 Using “if” Statements for Checking the Win-Condition
86 Adding More “if” Statements & A “Strong Attack” Functionality
87 Time for a “Heal Player” Functionality!
88 Controlling the Conditional Bonus Life (Without Boolean Operators!)
89 Adding a “Reset Game” Functionality
90 Validating User Input
91 Utilizing Global Constants as Identifiers in Conditional Code
92 Adding a Conditional Battle Log
93 Introducing the Ternary Operator
94 A Bit of Theory: Statements vs Expressions
95 Logical Operator “Tricks” & Shorthands
96 Logical Operators – A Quick Summary
97 Working with the “switch-case” Statement
98 Introducing Loops
99 The “for” Loop
100 The “for-of” Loop
101 The “for-in” Loop
102 The “while” & “do-while” Loops
103 Controlling Loops with “break”
104 Controlling Iterations with “continue”
105 More Control with Labeled Statements
106 Error Handling with “try-catch” – An Introduction
107 Throwing Custom Errors
108 Working with “try-catch” to Catch & Handle Errors
109 Wrap Up
110 Useful Resources & Links

Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript
111 Module Introduction
112 ES5 vs ES6+ (“Next Gen JS”) – Evolution of JavaScript
113 var vs let & const – Introducing “Block Scope”
114 Understanding “Hoisting”
115 Strict Mode & Writing Good Code
116 How Code is Parsed & Compiled
117 Inside the JavaScript Engine – How the Code Executes
118 [DEEP DIVE] JavaScript Language vs Browser APIs
119 Primitive vs Reference Values
120 Garbage Collection & Memory Management
121 Wrap Up
122 Useful Resources & Links

More on Functions
123 Module Introduction
124 Recapping Functions Knowledge – What We Know Thus Far
125 Parameters vs Arguments
126 Functions vs Methods
127 Functions are Objects!
128 Function Expressions: Storing Functions in Variables
129 Function Expressions vs Function Declarations
130 Anonymous Functions
131 Working on the Project: Adding User Choices to the Game
132 Implementing the Core Game Logic
133 Introducing Arrow Functions
134 Different Arrow Function Syntaxes
135 Outputting Messages to the User
136 Default Arguments in Functions
137 Introducing Rest Parameters (“Rest Operator”)
138 Creating Functions Inside of Functions
139 Understanding Callback Functions
140 Working with “bind()”
141 Adding bind() to the Calculator Project
142 call() and apply()
143 Wrap Up
144 Useful Resources & Links

Working with the DOM (Browser HTML Code) in JavaScript
145 Module Introduction
146 What’s the “DOM”?
147 Document and Window Object
148 Understanding the DOM and how it’s created
149 Nodes & Elements – Querying the DOM Overview
150 Selecting Elements in the DOM
151 Summary: Node Query Methods
152 Exploring and Changing DOM Properties
153 Attributes vs Properties
154 Selecting Multiple Elements & Summary
155 Traversing the DOM – Overview
156 Traversing Child Nodes
157 Using parentNode & parentElement
158 Selecting Sibling Elements
159 DOM Traversal vs Query Methods
160 Styling DOM Elements
161 Creating Elements with JS – Overview
162 Adding Elements via HTML in Code
163 Adding Elements via createElement()
164 Inserting DOM Elements
165 Cloning DOM Nodes
166 Live Node Lists vs Static Node Lists
167 Removing Elements
168 Insertion & Removal Method Summary
169 Summary: Insert, Replace, Remove
170 Setting Up the Practice Project
171 Selecting the Modal and “Add” Button
172 Opening a Modal by Changing CSS Classes
173 Controlling the Backdrop
174 Fetching and Validating User Input
175 Creating a Movie in JavaScript & Clearing the Input
176 Rendering Movie Items on the Screen
177 Deleting Movie Elements
178 Showing & Hiding the “Are you sure?” Dialog
179 Starting with the Confirmation Logic
180 Finishing the App
181 Wrap Up
182 Useful Resources & Links

More on Arrays & Iterables
183 Module Introduction
184 What are “Iterables” and “Array-like Objects”?
185 Creating Arrays
186 Which Data Can You Store In Arrays?
187 push(), pop(), unshift(), shift() – Adding & Removing Elements
188 The splice() Method
189 Selecting Ranges & Creating Copies with slice()
190 Adding Arrays to Arrays with concat()
191 Retrieving Indexes with indexOf() /& lastIndexOf()
192 Finding Stuff: find() and findIndex()
193 Is it Included?
194 Alternative to for Loops: The forEach() Method
195 Transforming Data with map()
196 sort()ing and reverse()ing
197 Filtering Arrays with filter()
198 Where Arrow Functions Shine!
199 The Important reduce() Method
200 Chaining Methods in JavaScript
201 Arrays & Strings – split() and join()
202 The Spread Operator (…)
203 Understanding Array Destructuring
204 Maps & Sets – Overview
205 Working with Sets
206 Working with Maps
207 Maps vs Objects
208 Understanding WeakSet
209 Understanding WeakMap
210 Wrap Up
211 Useful Resources & Links

More on Objects
212 Module Introduction
213 What’s an Object?
214 Objects & Primitive Values
215 Objects – Recap
216 Adding, Modifying & Deleting Properties
217 Special Key Names & Square Bracket Property Access
218 Property Types & Property Order
219 Dynamic Property Access & Setting Properties Dynamically
220 Demo App & Shorthand Property Syntax
221 Rendering Elements based on Objects
222 for-in Loops & Outputting Dynamic Properties
223 Adding the Filter Functionality
224 Understanding “Chaining” (Property & Method Chaining)
225 The Object Spread Operator (…)
226 Understanding Object.assign()
227 Object Destructuring
228 Checking for Property Existance
229 Introducing “this”
230 The Method Shorthand Syntax
231 The “this” Keyword And Its Strange Behavior
232 call() and apply()
233 What the Browser (Sometimes) Does to “this”
234 “this” and Arrow Functions
235 “this” – Summary
236 Getters & Setters
237 Wrap Up
238 Useful Resources & Links

Classes & Object-oriented Programming (OOP)
239 Module Introduction
240 What is “Object-oriented Programming” (OOP)?
241 Getting Started with OOP Code
242 Defining & Using a First Class
243 Working with Constructor Methods
244 Fields vs Properties
245 Using & “Connecting” Multiple Classes
246 Binding Class Methods & Working with “this”
247 Adding a Cart and Shop Class
248 Communicating Can Be Challenging!
249 Static Methods & Properties
250 First Summary & Classes vs Object Literals
251 Getters & Setters
252 Introducing Inheritance
253 Implementing Inheritance
254 Using Inheritance Everywhere
255 Overriding Methods and the super() Constructor
256 super() Constructor Execution, Order & “this”
257 Different Ways of Adding Methods
258 Private Properties
259 “Pseudo-Private” Properties
260 The “instanceof” Operator
261 Built-in Classes
262 Understanding Object Descriptors
263 Wrap Up
264 Useful Resources & Links

Deep Dive: Constructor Functions & Prototypes
265 Module Introduction
266 Introducing Constructor Functions
267 Constructor Functions vs Classes & Understanding “new”
268 Introducing Prototypes
269 Prototypes – Summary
270 Working with Prototypes
271 The Prototype Chain and the Global “Object”
272 Classes & Prototypes
273 Methods in Classes & In Constructors
274 Built-in Prototypes in JavaScript
275 Setting & Getting Prototypes
276 Wrap Up
277 Useful Resources & Links

Practice: OOP & Classes
278 Module Introduction
279 First Project Steps & Planning
280 Creating Project Lists & Parsing Element Data
281 Starting with the “Switch Project” Logic
282 Passing Method References Around
283 Moving DOM Elements
284 Adding a Tooltip
285 Adding Inheritance
286 Wrap Up
287 Useful Resources & Links

Back to the DOM & More Browser APIs
288 Module Introduction
289 Using “dataset” (data-* Attributes)
290 Getting Element Box Dimensions
291 Working with Element Sizes & Positions
292 The DOM & Prototypes
293 Positioning the Tooltip
294 Handling Scrolling
295 Working with Tags
296 Loading Scripts Dynamically
297 Setting Timers & Intervals
298 The “location” and “history” Objects
299 The “navigator” Object
300 Working with Dates
301 The “Error” Object & Constructor Function
302 Wrap Up
303 Useful Resources & Links

Working with Events
304 Module Introduction
305 Introduction to Events in JavaScript
306 Different Ways of Listening to Events
307 Removing Event Listeners
308 The “event” Object
309 Supported Event Types
310 Example: Basic Infinite Scrolling
311 Working with “preventDefault()”
312 Understanding “Capturing” & “Bubbling” Phases
313 Event Propagation & “stopPropagation()”
314 Using Event Delegation
315 Triggering DOM Elements Programmatically
316 Event Handler Functions & “this”
317 Drag & Drop – Theory
318 Configuring Draggable Elements
319 Marking the “Drop Area”
320 Dropping & Moving Data + Elements
321 Firefox Adjustments
322 Wrap Up
323 Useful Resources & Links

Advanced Function Concepts
324 Module Introduction
325 Pure Functions & Side-Effects
326 Impure vs Pure Functions
327 Factory Functions
328 Closures
329 Closures in Practice
330 Closures & Memory Management
331 Optional: IIFEs
332 Introducing “Recursion”
333 Advanced Recursion
334 Wrap Up
335 Useful Resources & Links

More on Numbers & Strings
336 Module Introduction
337 How Numbers Work & Behave in JavaScript
338 Floating Point (Im)Precision
339 The BigInt Type
340 The Global “Number” and “Math” Objects
341 Example: Generate Random Number Between Min/ Max
342 Exploring String Methods
343 Tagged Templates
344 Introducing Regular Expressions (“RegEx”)
345 More on Regular Expressions
346 Wrap Up
347 Useful Resources & Links

Async JavaScript: Promises & Callbacks
348 Module Introduction
349 Understanding Synchronous Code Execution (“Sync Code”)
350 Understanding Asynchronous Code Execution (“Async Code”)
351 Blocking Code & The “Event Loop”
352 Sync + Async Code – The Execution Order
353 Multiple Callbacks & setTimeout(0)
354 Getting Started with Promises
355 Chaining Multiple Promises
356 Promise Error Handling
357 Promise States & “finally”
358 Async/ await
359 Async/ await & Error Handling
360 Async/ await vs “Raw Promises”
361 Promise.all(), Promise.race() etc.
362 Wrap Up
363 Useful Resources & Links

Working with Http Requests
364 Module Introduction
365 What & Why
366 How The Web Works
367 More Background about Http
368 Getting Started with Http
369 Sending a GET Request
370 JSON Data & Parsing Data
371 JSON Data Deep Dive
372 Promisifying Http Requests (with XMLHttpRequest)
373 Sending Data with a POST Request
374 Triggering Requests via the UI
375 The “Fetch” Button Always Appends
376 Sending a DELETE Request
377 Handling Errors
378 Using the fetch() API
379 POSTing Data with the fetch() API
380 Adding Request Headers
381 fetch() & Error Handling
382 XMLHttpRequest vs fetch()
383 Working with FormData
384 Wrap Up
385 Useful Resources & Links

Working with JavaScript Libraries
386 Module Introduction
387 What & Why
388 Adding Libraries (Example: lodash)
389 Example: jQuery
390 Discovering Libraries
391 Axios Library & Http Requests
392 Third-Party Library Considerations
393 Wrap Up
394 Useful Resources & Links

Modular JavaScript (Working with Modules)
395 Module Introduction
396 Splitting Code in a Sub-optimal Way
397 A First Step Towards JavaScript Modules
398 We Need a Development Server!
399 First import / export Work
400 Switching All Files To Use Modules
401 More Named Export Syntax Variations
402 Working With Default Exports
403 Dynamic Imports & Code Splitting
404 When Does Module Code Execute?
405 Module Scope & globalThis
406 Wrap Up
407 Useful Resources & Links

JavaScript Tooling & Workflows
408 Module Introduction
409 Project Limitations & Why We Need Tools
410 Workflow Overview
411 Setting Up a npm Project
412 Working with npm Packages
413 Linting with ESLint
414 Configuring ESLint
415 Bundling with Webpack
416 Bonus: Multiple Entry Points
417 Development Mode & Fixing “Lazy Loading”
418 Using webpack-dev-server
419 Generating Sourcemaps
420 Building For Production
421 Final Optimizations
422 Using Third Party Packages with npm & Webpack
423 Wrap Up
424 Useful Resources & Links

Utilizing Browser Storage
425 Module Introduction
426 Browser Storage Options
427 localStorage & sessionStorage
428 Getting Started with Cookies
429 Working with Cookies
430 Getting Started with IndexedDB
431 Working with IndexedDB
432 Wrap Up
433 Useful Resources & Links

JavaScript & Browser Support
434 Module Introduction
435 What Is “Browser Support” About?
436 Determining Browser Support For A JavaScript Feature
437 Determining Required Support
438 Solution: Feature Detection + Fallback Code
439 Solution: Using Polyfills
440 Solution: Transpiling Code
441 Improvement: Automatically Detect + Add Polyfills
442 What about Support Outside of Browsers?
443 Browser Support Outside of JavaScript Files
444 Wrap Up
445 Useful Resources & Links

Time to Practice: Share My Place App
446 Module Introduction
447 Setting Up the Project
448 Getting DOM Access
449 Getting the User Location
450 Adding Feedback (Showing a Modal)
451 Hiding the Modal
452 Rendering a Map with Google Maps
453 Continuing without a Credit Card
454 Finding an Address & Getting the Coordinates
455 Converting User Input to Coordinates
456 Creating a “Share Place” Link
457 Copying the Link to the Clipboard
458 Rendering the “Shared Place” Screen
459 Useful Resources & Links

Working with JavaScript Frameworks
460 Module Introduction
461 What and Why?
462 The Idea Behind React.js
463 Analysing a React Project
464 Wrap Up
465 Useful Resources & Links

Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API
466 Module Introduction
467 Understanding Symbols
468 Well-known Symbols
469 Understanding Iterators
470 Generators & Iterable Objects
471 Generators Summary & Built-in Iterables Examples
472 The Reflect API
473 The Proxy API and a First “Trap”
474 Working with Proxy Traps
475 Wrap Up
476 Useful Resources & Links

Node.js: An Introduction
477 Module Introduction
478 JavaScript is a Hosted Language
479 Installation & Basics
480 Understanding Modules & File Access
481 Working with Incoming Http Requests
482 Sending Responses (HTML Data)
483 Parsing Incoming Data
484 Introducing & Installing Express.js
485 Express.js: The Basics
486 Extracting Data
487 Rendering Server-side HTML with Templates & EJS
488 Enhancing Our Project
489 Adding Basic REST Routes
490 Understanding CORS (Cross Origin Resource Sharing)
491 Sending the Location ID to the Frontend
492 Adding the GET Location Route
493 Introducing MongoDB (Database)
494 NodeJS Error Handling
495 Wrap Up
496 Useful Resources & Links

Security
497 Module Introduction
498 Security Hole Overview & Exposing Data in your Code
499 Cross-Site Scripting Attacks (XSS)
500 Third-Party Libraries & XSS
501 CSRF Attacks (Cross Site Request Forgery)
502 CORS (Cross Origin Resource Sharing)
503 Wrap Up
504 Useful Resources & Links

Deploying JavaScript Code
505 Module Introduction
506 Deployment Steps
507 Different Types of Websites
508 Example: Static Host Deployment (no Server-side Code)
509 Injecting Script Imports Into HTML Automatically
510 Example: Dynamic Page Deployment (with Server-side Code)
511 Useful Resources & Links

Performance & Optimizations
512 Module Introduction
513 What is “Performance Optimization” About?
514 Optimization Potentials
515 Measuring Performance
516 Diving Into The Browser Devtools (for Performance Measuring)
517 Further Resources
518 Preparing The Testing Setup
519 Optimizing Startup Time & Code Usage / Coverage
520 Updating The DOM Correctly
521 Updating Lists Correctly
522 Optimizing The Small Things
523 Micro-Optimizations (Think Twice!)
524 Finding & Fixing Memory Leaks
525 Server-side Performance Optimizations
526 Wrap Up
527 Useful Resources & Links

Introduction to Testing
528 Module Introduction
529 What Is Testing? Why Does It Matter?
530 Testing Setup
531 Writing & Running Unit Tests
532 Writing & Running Integration Tests
533 Writing & Running e2e Tests
534 Dealing with Async Code
535 Working with Mocks
536 Useful Resources & Links

Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)
537 Module Introduction
538 What are Programming Paradigms?
539 Procedural Programming in Practice
540 Object Oriented Programming in Practice
541 Functional Programming in Practice
542 Wrap Up
543 Useful Resources & Links

Bonus: Data Structures & Algorithms Introduction
544 Module Introduction
545 What are “Data Structures” & “Algorithms”?
546 A First Example
547 Solving the Same Problem Differently
548 Performance & The “Big O” Notation
549 More Time Complexities & Comparing Algorithms
550 More on Big O
551 More Examples
552 Diving into Data Structures & Time Complexities
553 Where to Learn More & Wrap Up
554 Useful Resources & Links

Bonus: TypeScript Introduction
555 Module Introduction
556 What is TypeScript and Why would you use it?
557 Working with Types
558 Core Types & Diving Deeper
559 Object Types, Array Types & Function Types
560 Advanced Types (Literal Types, Union Types, Enums)
561 Classes & Interfaces
562 Generic Types
563 Configuring the TypeScript Compiler
564 Useful Resources & Links

Bonus: Web Components
565 Module Introduction
566 Web Components in Action
567 What are Web Components?
568 Why Web Components?
569 Getting Started!
570 Web Component Browser Support
571 Our Development Setup
572 A First Custom Element
573 Interacting with the Surrounding DOM
574 Understanding the Custom Element Lifecycle
575 Using “connectedCallback” for DOM Access
576 Listening to Events Inside the Component
577 Using Attributes on Custom Elements
578 Styling our Elements
579 Working with the “Shadow DOM”
580 Adding an HTML Template
581 Using Slots
582 Defining the Template in JavaScript
583 Using Style Tags in the Shadow DOM
584 Extending Built-in Elements
585 The Next Steps
586 Understanding Shadow DOM Projection
587 Styling “slot” Content Outside of the Shadow DOM
588 Styling “slot” Content Inside of the Shadow DOM
589 Styling the Host Component
590 Conditional Host Styling
591 Styling with the Host Content in Mind
592 Smart Dynamic Styling with CSS Variables
593 Cleaning Up the Overall Styling
594 Observing Attribute Changes
595 Adjusting the Component Behavior Upon Attribute Changes
596 Using “disconnectedCallback”
597 Adding a render() Method
598 Final Adjustment
599 The Next Steps
600 Creating the Basic Modal Component
601 Adding the Modal Container
602 Styling the Modal Elements
603 Adding Some General App Logic
604 Opening the Modal via CSS
605 Public Methods & Properties
606 Understanding Named Slots
607 Listening to Slot Content Changes
608 Closing the Modal
609 Dispatching Custom Events
610 Configuring Custom Events
611 Finishing it up!
612 Useful Resources & Links

Roundup & Next Steps
613 Congratulations!
614 Bonus! (Next Steps Overview / Other Topics)