JavaScript – The Complete Guide 2020 (Beginner + Advanced)

JavaScript – The Complete Guide 2020 (Beginner + Advanced)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 52h 36m | 19.3 GB


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 template 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 Important Webpack Version
416 Bundling with Webpack
417 Bonus Multiple Entry Points
418 Development Mode & Fixing Lazy Loading
419 Using webpack-dev-server
420 Generating Sourcemaps
421 Building For Production
422 Final Optimizations
423 Using Third Party Packages with npm & Webpack
424 Wrap Up
425 Useful Resources & Links

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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