Autoplay
Autocomplete
Previous Lesson
Complete and Continue
JavaScript - The Complete Guide (Beginner + Advanced)
Getting Started
Introduction (1:50)
What is JavaScript? (3:44)
JavaScript in Action! (8:57)
Join our Online Learning Community
How JavaScript Is Executed (3:14)
Dynamic vs Weakly Typed Languages (3:24)
JavaScript Runs In A Host Environment (4:40)
Course Outline - What Is In The Course? (6:00)
How To Get The Most Out Of This Course (2:32)
Using Course Resources
JavaScript vs Java (4:02)
A Brief History Of JavaScript (6:03)
Setting Up a Development Environment (11:12)
Course FAQs
The Academind Pro Referral Program
Basics: Variables, Data Types, Operators & Functions
Module Introduction (1:17)
Setting Up the Project (4:25)
More on Version Control & Git
Adding JavaScript to the Website (6:42)
Introducing Variables & Constants (5:17)
Declaring & Defining Variables (7:10)
Working with Variables & Operators (6:17)
Quiz 1: Variables & Operators
Understanding the Starting Code (1:21)
Data Types: Numbers & Strings (Text) (6:00)
Using Constants (5:11)
More on Strings (15:51)
Quiz 2: Data Types & Constants
Assignment - Variables, Constants, Operators & Core Data Types (Problem) (3:20)
Assignment - Variables, Constants, Operators & Core Data Types (Solution) (4:57)
Introducing Functions (5:50)
Adding A Custom Function (11:22)
Code Styles, Conventions & Syntax
Returning Values (4:31)
The (Un)Importance of Code Order (4:34)
An Introduction to Global & Local Scope (5:31)
"Shadowed Variables"
More about the "return" Statement (2:24)
Executing Functions "Indirectly" (11:10)
"Indirect" vs "Direct" Function Execution - Summary
Quiz 3: Functions & Scope
Assignment - Functions (Problem) (2:37)
Assignment - Functions (Solution) (6:40)
Converting Data Types (6:14)
Mixing Numbers & Strings
Splitting Code into Functions (5:49)
Connecting all Buttons to Functions (7:43)
Working with Code Comments (4:09)
More Operators! (6:39)
More Core Data Types! (4:31)
Using Arrays (8:53)
Creating Objects (6:02)
Accessing Object Data (2:51)
Quiz 4: Arrays & Objects
Adding a Re-Usable Function That Uses Objects (5:24)
undefined, null & NaN (6:20)
The "typeof" Operator (3:11)
Quiz 5: "undefined", "null" & "NaN"
Importing Scripts Correctly with "defer" & "async" (14:37)
Wrap Up (2:13)
Useful Resources & Links
Efficient Development & Debugging
Module Introduction (1:28)
Efficient Development & Debugging - An Overview (3:18)
Configuring the IDE Look & Feel (2:25)
Using Shortcuts (4:12)
Working with Auto-Completion & IDE Hints (4:34)
Installing IDE Extensions (2:04)
Tweaking Editor Settings (2:15)
Utilizing Different IDE Views (1:41)
Finding Help & Working with MDN (5:53)
The ECMAScript Standard
How to "google" Correctly (1:44)
Debugging JavaScript - An Overview (3:17)
An Error Message! No Reason To Panic! (4:46)
Using console.log() to look "into the Code" (3:49)
Next-Level Debugging with the Chrome Devtools & Breakpoints (8:20)
Testing Code Changes Directly in the Devtools (2:05)
Debugging Code directly Inside VS Code (4:55)
Wrap Up (1:22)
Useful Resources & Links
Working with Control Structures (if Statements, Loops, Error Handling)
Module Introduction (2:26)
Introducing "if" Statements & Boolean (Comparison) Operators (9:26)
Using "if" Statements (7:23)
Working with "if", "else" and "else-if" (5:10)
Beware When Comparing Objects & Arrays for Equality! (4:06)
The Logical AND and OR Operators (9:10)
Understanding Operator Precedence (7:20)
Quiz 6: if & Boolean Operators - The Basics
Beyond true/ false: "Truthy" and "Falsy" Values (7:30)
Coercion vs Conversion
Quiz 7: Falsy and Truthy Values
Setting Up a Bigger Example Project (The "Monster Killer") (2:59)
Adding an "Attack" Function (7:57)
Using "if" Statements for Checking the Win-Condition (9:17)
Adding More "if" Statements & A "Strong Attack" Functionality (7:41)
Time for a "Heal Player" Functionality! (10:15)
Controlling the Conditional Bonus Life (Without Boolean Operators!) (5:59)
Adding a "Reset Game" Functionality (6:00)
Validating User Input (6:17)
Utilizing Global Constants as Identifiers in Conditional Code (3:20)
Adding a Conditional Battle Log (16:37)
Introducing the Ternary Operator (7:31)
A Bit of Theory: Statements vs Expressions (1:40)
Logical Operator "Tricks" & Shorthands (12:58)
Quiz 8: Logical Operators & How They Work
Working with the "switch-case" Statement (7:10)
Introducing Loops (6:40)
The "for" Loop (7:38)
The "for-of" Loop (5:16)
The "for-in" Loop (6:49)
The "while" & "do-while" Loops (8:00)
Quiz 9: Loops - Basics
Assignment - Control Structures (Problem) (2:47)
Assignment - Control Structures (Solution) (9:55)
Controlling Loops with "break" (8:11)
Controlling Iterations with "continue" (2:21)
More Control with Labeled Statements (6:26)
Quiz 10: break & continue
Error Handling with "try-catch" - An Introduction (2:25)
Throwing Custom Errors (5:16)
Working with "try-catch" to Catch & Handle Errors (8:14)
Quiz 11: Error Handling
Wrap Up (3:21)
Useful Resources & Links
Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript
Module Introduction (1:43)
ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScript (8:14)
var vs let & const - Introducing "Block Scope" (14:32)
Understanding "Hoisting" (4:07)
Strict Mode & Writing Good Code (5:46)
Quiz 12: "JavaScript Specialties"
How Code is Parsed & Compiled (8:16)
Inside the JavaScript Engine - How the Code Executes (15:59)
[DEEP DIVE] JavaScript Language vs Browser APIs
Primitive vs Reference Values (19:24)
Garbage Collection & Memory Management (12:00)
Wrap Up (1:55)
Useful Resources & Links
More on Functions
Module Introduction (1:31)
Recapping Functions Knowledge - What We Know Thus Far (1:52)
Parameters vs Arguments
Functions vs Methods (5:46)
Functions are Objects! (2:47)
Function Expressions: Storing Functions in Variables (5:12)
Function Expressions vs Function Declarations (2:47)
Anonymous Functions (5:54)
Working on the Project: Adding User Choices to the Game (7:44)
Implementing the Core Game Logic (7:20)
Introducing Arrow Functions (8:41)
Quiz 13: Creating Functions
Outputting Messages to the User (3:53)
Default Arguments in Functions (10:45)
Introducing Rest Parameters ("Rest Operator") (8:57)
Creating Functions Inside of Functions (3:04)
Understanding Callback Functions (6:09)
Assignment - Functions (Problem) (3:16)
Assignment - Functions (Solution) (8:19)
Working with "bind()" (8:39)
Adding bind() to the Calculator Project (3:46)
Quiz 14: Functions - Advanced
call() and apply() (1:18)
Wrap Up (2:10)
Useful Resources & Links
Working with the DOM (Browser HTML Code) in JavaScript
Module Introduction (1:48)
What's the "DOM"? (6:00)
Document and Window Object (6:20)
Understanding the DOM and how it's created (7:07)
Nodes & Elements - Querying the DOM Overview (5:55)
Selecting Elements in the DOM (9:54)
Summary: Node Query Methods
Exploring and Changing DOM Properties (7:37)
Attributes vs Properties (8:58)
Selecting Multiple Elements & Summary (5:13)
Quiz 15: DOM Basics
Assignment - DOM Querying (Problem) (2:10)
Assignment - DOM Querying (Solution) (5:41)
Traversing the DOM - Overview (6:22)
Traversing Child Nodes (9:15)
Using parentNode & parentElement (5:01)
Selecting Sibling Elements (4:05)
DOM Traversal vs Query Methods (4:35)
Styling DOM Elements (12:18)
Creating Elements with JS - Overview (2:42)
Adding Elements via HTML in Code (7:42)
Adding Elements via createElement() (5:42)
Inserting DOM Elements (8:15)
Cloning DOM Nodes (1:45)
Live Node Lists vs Static Node Lists (4:55)
Removing Elements (1:56)
Insertion & Removal Method Summary (2:38)
Summary: Insert, Replace, Remove
Setting Up the Practice Project (2:16)
Selecting the Modal and "Add" Button (8:58)
Opening a Modal by Changing CSS Classes (5:01)
Controlling the Backdrop (8:04)
Fetching and Validating User Input (8:06)
Creating a Movie in JavaScript & Clearing the Input (4:00)
Rendering Movie Items on the Screen (8:23)
Deleting Movie Elements (9:12)
Showing & Hiding the "Are you sure?" Dialog (7:08)
Starting with the Confirmation Logic (4:29)
Finishing the App (11:45)
Wrap Up (1:55)
Useful Resources & Links
More on Arrays & Iterables
Module Introduction (1:08)
What are "Iterables" and "Array-like Objects"? (2:11)
Creating Arrays (8:55)
Which Data Can You Store In Arrays? (3:47)
push(), pop(), unshift(), shift() - Adding & Removing Elements (6:59)
The splice() Method (5:37)
Selecting Ranges & Creating Copies with slice() (6:06)
arrays-it-08-concat (2:23)
Retrieving Indexes with indexOf() /& lastIndexOf() (3:47)
Finding Stuff: find() and findIndex() (5:20)
Is it Included? (1:20)
Alternative to for Loops: The forEach() Method (4:24)
Transforming Data with map() (2:38)
sort()ing and reverse()ing (4:15)
Filtering Arrays with filter() (2:35)
Where Arrow Functions Shine! (1:31)
The Important reduce() Method (7:33)
Chaining Methods in JavaScript
Arrays & Strings - split() and join() (4:21)
The Spread Operator (...) (10:31)
Understanding Array Destructuring (4:24)
Maps & Sets - Overview (4:16)
Working with Sets (7:20)
Working with Maps (9:30)
Maps vs Objects (3:41)
Understanding WeakSet (4:50)
Understanding WeakMap (2:51)
Assignment - Arrays & Iterables (Problem) (3:05)
Assignment - Arrays & Iterables (Solution) (10:55)
Wrap Up (1:25)
Useful Resources & Links
More on Objects
Module Introduction (1:38)
What's an Object? (5:54)
Objects - Recap (2:42)
Adding, Modifying & Deleting Properties (6:46)
Special Key Names & Square Bracket Property Access (8:36)
Property Types & Property Order (3:55)
Dynamic Property Access & Setting Properties Dynamically (4:11)
Quiz 16: Object Properties
Demo App & Shorthand Property Syntax (9:22)
Rendering Elements based on Objects (5:36)
for-in Loops & Outputting Dynamic Properties (5:24)
Adding the Filter Functionality (5:38)
Understanding "Chaining" (Property & Method Chaining) (1:51)
The Object Spread Operator (...) (5:54)
Understanding Object.assign() (2:08)
Object Destructuring (6:13)
Checking for Property Existance (2:42)
Introducing "this" (5:52)
The Method Shorthand Syntax (1:07)
The "this" Keyword And Its Strange Behavior (5:41)
call() and apply() (3:22)
What the Browser (Sometimes) Does to "this" (2:32)
"this" and Arrow Functions (10:36)
Quiz 17: "this"
Getters & Setters (7:05)
Wrap Up (1:33)
Useful Resources & Links
Classes & Object-oriented Programming (OOP)
Module Introduction (1:55)
What is "Object-oriented Programming" (OOP)? (3:17)
Getting Started with OOP Code (12:10)
Defining & Using a First Class (7:17)
Working with Constructor Methods (4:51)
Fields vs Properties (2:19)
Using & "Connecting" Multiple Classes (9:06)
Binding Class Methods & Working with "this" (4:57)
Adding a Cart and Shop Class (4:37)
Communicating Can Be Challenging! (3:54)
Static Methods & Properties (7:51)
First Summary & Classes vs Object Literals (4:06)
Getters & Setters (5:43)
Introducing Inheritance (2:34)
Implementing Inheritance (11:50)
Using Inheritance Everywhere (6:51)
Overriding Methods and the super() Constructor (6:00)
super() Constructor Execution, Order & "this" (6:46)
Different Ways of Adding Methods (5:51)
Private Properties (7:24)
Assignment - Classes & OOP (Problem) (2:39)
Assignment - Classes & OOP (Solution) (13:36)
The "instanceof" Operator (4:30)
Understanding Object Descriptors (7:35)
Built-in Classes (1:09)
Quiz 18: Classes
Wrap Up (1:51)
Useful Resources & Links
Deep Dive: Constructor Functions & Prototypes
Module Introduction (1:34)
Introducing Constructor Functions (4:02)
Constructor Functions vs Classes & Understanding "new" (4:17)
Introducing Prototypes (16:46)
Working with Prototypes (5:19)
The Prototype Chain and the Global "Object" (8:26)
Quiz 19: Constructor Functions & Prototypes
Classes & Prototypes (5:24)
Methods in Classes & In Constructors (10:16)
Built-in Prototypes in JavaScript (2:12)
Setting & Getting Prototypes (10:58)
Wrap Up (2:49)
Useful Resources & Links
Practice: OOP & Classes
Module Introduction (1:38)
First Project Steps & Planning (4:46)
Creating Project Lists & Parsing Element Data (4:08)
Starting with the "Switch Project" Logic (9:59)
Passing Method References Around (7:02)
Moving DOM Elements (11:49)
Adding a Tooltip (8:58)
Adding Inheritance (6:13)
Wrap Up (0:57)
Useful Resources & Links
Back to the DOM & More Browser APIs
Module Introduction (2:31)
Using "dataset" (data-* Attributes) (6:51)
Getting Element Box Dimensions (5:53)
Working with Element Sizes & Positions (4:56)
The DOM & Prototypes (2:21)
Positioning the Tooltip (10:57)
Handling Scrolling (5:36)
Working with Tags (5:14)
Loading Scripts Dynamically (7:35)
Setting Timers & Intervals (7:37)
The "location" and "history" Objects (4:20)
The "navigator" Object (4:50)
Working with Dates (3:17)
The "Error" Object & Constructor Function (3:21)
Wrap Up (0:43)
Useful Resources & Links
Working with Events
Module Introduction (1:31)
Introduction to Events in JavaScript (6:18)
Different Ways of Listening to Events (6:59)
Removing Event Listeners (5:13)
The "event" Object (5:43)
Supported Event Types (8:00)
Working with "preventDefault()" (5:15)
Understanding "Capturing" & "Bubbling" Phases (2:02)
Event Propagation & "stopPropagation()" (7:39)
Using Event Delegation (8:33)
Triggering DOM Elements Programmatically (3:40)
Event Handler Functions & "this" (2:28)
Quiz 20: Events
Drag & Drop - Theory (4:58)
Configuring Draggable Elements (6:23)
Marking the "Drop Area" (8:52)
Dropping & Moving Data + Elements (6:58)
Firefox Adjustments
Wrap Up (1:15)
Useful Resources & Links
Advanced Function Concepts
Module Introduction (0:57)
Pure Functions & Side-Effects (6:13)
Impure vs Pure Functions (2:00)
Factory Functions (5:41)
Closures (7:45)
Closures in Practice (7:01)
Closures & Memory Management (1:23)
Optional: IIFEs
Introducing "Recursion" (7:32)
Advanced Recursion (9:01)
Quiz 21: Advanced Functions
Wrap Up (1:14)
Useful Resources & Links
More on Numbers & Strings
Module Introduction (0:53)
How Numbers Work & Behave in JavaScript (7:46)
Floating Point (Im)Precision (11:04)
The BigInt Type (3:36)
The Global "Number" and "Math" Objects (2:47)
Example: Generate Random Number Between Min/ Max (5:33)
Exploring String Methods (1:43)
Tagged Templates (10:28)
Introducing Regular Expressions ("RegEx") (4:30)
More on Regular Expressions (7:25)
Wrap Up (1:20)
Useful Resources & Links
Async JavaScript: Promises & Callbacks
Module Introduction (1:12)
Understanding Synchronous Code Execution ("Sync Code") (2:51)
Understanding Asynchronous Code Execution ("Async Code") (5:44)
Blocking Code & The "Event Loop" (10:30)
Sync + Async Code - The Execution Order (4:03)
Multiple Callbacks & setTimeout(0) (3:20)
Quiz 22: Asynchronous Code
Getting Started with Promises (8:25)
Chaining Multiple Promises (5:52)
Promise Error Handling (7:46)
Async/ await (9:11)
Async/ await & Error Handling (3:07)
Async/ await vs "Raw Promises" (4:56)
Promise.all(), Promise.race() etc. (7:59)
Quiz 23: Promises & async/ await
Wrap Up (1:27)
Useful Resources & Links
Working with Http Requests
Module Introduction (1:06)
What & Why (5:03)
More Background about Http (5:24)
Getting Started with Http (3:35)
Sending a GET Request (3:46)
JSON Data & Parsing Data (9:14)
Promisifying Http Requests (with XMLHttpRequest) (3:49)
Sending Data with a POST Request (4:55)
Triggering Requests via the UI (3:12)
Sending a DELETE Request (4:56)
Handling Errors (5:03)
Using the fetch() API (7:10)
POSTing Data with the fetch() API (2:38)
Adding Request Headers (3:01)
fetch() & Error Handling (7:11)
XMLHttpRequest vs fetch() (1:42)
Working with FormData (6:58)
Wrap Up (1:17)
Useful Resources & Links
Working with JavaScript Libraries
Module Introduction (0:59)
What & Why (2:55)
Adding Libraries (Example: lodash) (9:10)
Example: jQuery (2:30)
Discovering Libraries (3:25)
Axios Library & Http Requests (10:46)
Third-Party Library Considerations (4:54)
Wrap Up (0:59)
Useful Resources & Links
Modular JavaScript (Working with Modules)
Module Introduction (0:56)
Splitting Code in a Sub-optimal Way (7:12)
A First Step Towards JavaScript Modules (3:25)
We Need a Development Server! (5:58)
First import / export Work (3:41)
Switching All Files To Use Modules (4:26)
More Named Export Syntax Variations (6:12)
Working With Default Exports (3:35)
Dynamic Imports & Code Splitting (5:24)
When Does Module Code Execute? (2:06)
Module Scope & globalThis (6:18)
Quiz 24: Modules
Wrap Up (1:37)
Useful Resources & Links
JavaScript Tooling & Workflows
Module Introduction (3:23)
Project Limitations & Why We Need Tools (8:11)
Workflow Overview (2:42)
Setting Up a npm Project (3:45)
Working with npm Packages (3:39)
Linting with ESLint (8:38)
Bundling with Webpack (15:13)
Bonus: Multiple Entry Points
Development Mode & Fixing "Lazy Loading" (4:00)
Using webpack-dev-server (3:14)
Generating Sourcemaps (3:05)
Building For Production (3:45)
Final Optimizations (6:35)
Using Third Party Packages with npm & Webpack (4:06)
Wrap Up (1:39)
Useful Resources & Links
Utilizing Browser Storage
Module Introduction (1:05)
Browser Storage Options (7:21)
localStorage & sessionStorage (10:43)
Getting Started with Cookies (6:06)
Working with Cookies (8:10)
Getting Started with IndexedDB (8:55)
Working with IndexedDB (4:06)
Wrap Up (0:48)
Useful Resources & Links
JavaScript & Browser Support
Module Introduction (1:29)
What Is "Browser Support" About? (7:36)
Determining Browser Support For A JavaScript Feature (8:20)
Determining Required Support (3:29)
Solution: Feature Detection + Fallback Code (9:55)
Solution: Using Polyfills (3:18)
Solution: Transpiling Code (12:01)
Improvement: Automatically Detect + Add Polyfills (11:02)
What about Support Outside of Browsers? (0:57)
Browser Support Outside of JavaScript Files (2:36)
Wrap Up (1:18)
Useful Resources & Links
Time to Practice: Share My Place App
Module Introduction (0:53)
Setting Up the Project (3:05)
Getting DOM Access (4:33)
Getting the User Location (6:27)
Adding Feedback (Showing a Modal) (11:16)
Hiding the Modal (2:38)
Rendering a Map with Google Maps (14:16)
Continuing without a Credit Card
Finding an Address & Getting the Coordinates (8:22)
Converting User Input to Coordinates (3:35)
Creating a "Share Place" Link (8:30)
Copying the Link to the Clipboard (3:36)
Rendering the "Shared Place" Screen (6:22)
Useful Resources & Links
Working with JavaScript Frameworks
Module Introduction (1:06)
What and Why? (7:35)
The Idea Behind React.js (2:46)
Analysing a React Project (17:38)
Wrap Up (1:35)
Useful Resources & Links
Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API
Module Introduction (1:51)
Understanding Symbols (8:27)
Well-known Symbols (5:15)
Understanding Iterators (5:32)
Generators & Iterable Objects (11:02)
Generators Summary & Built-in Iterables Examples (3:21)
The Reflect API (7:10)
The Proxy API and a First "Trap" (9:04)
Working with Proxy Traps (2:57)
Wrap Up (1:37)
Useful Resources & Links
Node.js: An Introduction
Module Introduction (1:42)
JavaScript is a Hosted Language (2:21)
Installation & Basics (6:16)
Understanding Modules & File Access (4:39)
Working with Incoming Http Requests (5:46)
Sending Responses (HTML Data) (4:01)
Parsing Incoming Data (10:53)
Introducing & Installing Express.js (2:48)
Express.js: The Basics (6:33)
Extracting Data (4:23)
Rendering Server-side HTML with Templates & EJS (6:52)
Enhancing Our Project (3:44)
Adding Basic REST Routes (12:09)
Understanding CORS (Cross Origin Resource Sharing) (5:13)
Sending the Location ID to the Frontend (2:16)
Adding the GET Location Route (7:16)
Introducing MongoDB (Database) (14:44)
NodeJS Error Handling
Wrap Up (1:50)
Useful Resources & Links
Security
Module Introduction (1:35)
Security Hole Overview & Exposing Data in your Code (6:45)
Cross-Site Scripting Attacks (XSS) (14:39)
Third-Party Libraries & XSS (5:17)
Quiz 25: XSS & Exposing Confidential Details
CSRF Attacks (Cross Site Request Forgery) (4:16)
CORS (Cross Origin Resource Sharing) (2:53)
Wrap Up (1:30)
Useful Resources & Links
Deploying JavaScript Code
Module Introduction (1:11)
Deployment Steps (7:29)
Different Types of Websites
Example: Static Host Deployment (no Server-side Code) (9:43)
Injecting Script Imports Into HTML Automatically
Example: Dynamic Page Deployment (with Server-side Code) (12:45)
Useful Resources & Links
Performance & Optimizations
Module Introduction (1:49)
What is "Performance Optimization" About? (6:16)
Optimization Potentials (6:48)
Measuring Performance (3:42)
Diving Into The Browser Devtools (for Performance Measuring) (15:30)
Further Resources (2:13)
Preparing The Testing Setup (4:03)
Optimizing Startup Time & Code Usage / Coverage (11:51)
Updating The DOM Correctly (9:53)
Updating Lists Correctly (8:11)
Optimizing The Small Things (3:58)
Micro-Optimizations (Think Twice!) (8:49)
Finding & Fixing Memory Leaks (9:43)
Server-side Performance Optimizations
Wrap Up (3:26)
Useful Resources & Links
Introduction to Testing
Module Introduction (0:49)
What Is Testing? Why Does It Matter? (7:09)
Testing Setup (4:10)
Writing & Running Unit Tests (11:15)
Writing & Running Integration Tests (6:03)
Writing & Running e2e Tests (10:16)
Dealing with Async Code (10:20)
Working with Mocks (7:51)
Useful Resources & Links
Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)
Module Introduction (0:48)
What are Programming Paradigms? (3:01)
Procedural Programming in Practice (8:53)
Object Oriented Programming in Practice (13:20)
Functional Programming in Practice (13:52)
Wrap Up (3:26)
Useful Resources & Links
Bonus: Data Structures & Algorithms Introduction
Module Introduction (2:02)
What are "Data Structures" & "Algorithms"? (4:22)
A First Example (10:22)
Solving the Same Problem Differently (7:26)
Performance & The "Big O" Notation (11:44)
More Time Complexities & Comparing Algorithms (3:35)
More on Big O (5:23)
More Examples (10:15)
Diving into Data Structures & Time Complexities (12:07)
Where to Learn More & Wrap Up (3:22)
Useful Resources & Links
Bonus: TypeScript Introduction
Module Introduction (1:09)
What is TypeScript and Why would you use it? (4:51)
Working with Types (10:05)
Core Types & Diving Deeper (17:26)
Object Types, Array Types & Function Types (9:22)
Advanced Types (Literal Types, Union Types, Enums) (9:20)
Classes & Interfaces (12:02)
Generic Types (5:02)
Configuring the TypeScript Compiler (5:11)
Wrap Up (1:31)
Useful Resources & Links
Bonus: Web Components
Module Introduction (1:59)
Web Components in Action (6:30)
What are Web Components? (3:22)
Why Web Components? (2:44)
Getting Started! (4:56)
Web Component Browser Support (2:44)
Our Development Setup (3:53)
A First Custom Element (8:16)
Interacting with the Surrounding DOM (5:04)
Understanding the Custom Element Lifecycle (2:51)
Using "connectedCallback" for DOM Access (2:05)
Listening to Events Inside the Component (9:12)
Using Attributes on Custom Elements (4:45)
Styling our Elements (4:08)
Working with the "Shadow DOM" (5:00)
Adding an HTML Template (5:40)
Using Slots (1:50)
Defining the Template in JavaScript (3:21)
Using Style Tags in the Shadow DOM (2:40)
Extending Built-in Elements (7:33)
Assignment - The Basics (Problem) (2:55)
Assignment - The Basics (Solution) (11:31)
The Next Steps (0:49)
Understanding Shadow DOM Projection (2:26)
Styling "slot" Content Outside of the Shadow DOM (3:44)
Styling "slot" Content Inside of the Shadow DOM (3:10)
Styling the Host Component (4:42)
Conditional Host Styling (2:49)
Styling with the Host Content in Mind (2:27)
Smart Dynamic Styling with CSS Variables (6:20)
Cleaning Up the Overall Styling (3:22)
Observing Attribute Changes (6:17)
Adjusting the Component Behavior Upon Attribute Changes (2:34)
Using "disconnectedCallback" (6:10)
Adding a render() Method (6:13)
Final Adjustment
The Next Steps (0:52)
Creating the Basic Modal Component (6:33)
Adding the Modal Container (2:29)
Styling the Modal Elements (5:35)
Adding Some General App Logic (3:49)
Opening the Modal via CSS (5:23)
Public Methods & Properties (6:37)
Understanding Named Slots (5:45)
Listening to Slot Content Changes (5:10)
Closing the Modal (6:57)
Dispatching Custom Events (3:40)
Configuring Custom Events (4:52)
Finishing it up! (4:50)
Useful Resources & Links
Roundup & Next Steps
Congratulations! (6:09)
Diving Into The Browser Devtools (for Performance Measuring)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock