JavaScript – The Complete Guide 2023 (Beginner + Advanced)

JavaScript – The Complete Guide 2023 (Beginner + Advanced)

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 616 lectures (52h 32m) | 11.73 GB

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

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 2,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 Executes In A Hosted Environment
8 Course Outline – What’s In This 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 & Configuring npm Scripts
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 Note Use the LTS Version of NodeJS
449 Setting Up the Project
450 Getting DOM Access
451 Getting the User Location
452 Adding Feedback (Showing a Modal)
453 Hiding the Modal
454 Rendering a Map with Google Maps
455 Continuing without a Credit Card
456 Finding an Address & Getting the Coordinates
457 Converting User Input to Coordinates
458 Creating a Share Place Link
459 Copying the Link to the Clipboard
460 Rendering the Shared Place Screen
461 Useful Resources & Links

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

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

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

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

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

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

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

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

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

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

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

Roundup & Next Steps
615 Course Roundup
616 Bonus! (Next Steps Overview Other Topics)

Homepage