JavaScript - The Complete Guide (Beginner + Advanced)
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource!
50h+
Video
600+
Lectures
All
Levels
About This Course
Welcome to "JavaScript - The Complete Guide"!
JavaScript is THE most important programming language you need to learn as a web developer - and with this course, you make sure that you will not miss a single thing you have to know as a JavaScript developer!
This is the most comprehensive and modern course you can find on JavaScript - it's based on all my JavaScript knowledge AND teaching experience. It's both a complete guide, starting with the core basics of the language, as well as an extensive reference of the JavaScript language and environment, ensuring that both newcomers as well as experienced JavaScript developers get a lot out of this course!
It's a huge course because it's packed with important knowledge and helpful content. From the core basics, over advanced concepts and JavaScript specialties, all the way up to expert topics like performance optimization and testing - this course has it all. My goal was to create your go-to resource for the JavaScript language, which you can not just use for learning it but also as a resource you can come back to and look up important topics.
The course is based on my experience as a long-term JavaScript developer as well as a teacher with more than 1,000,000 students online. It's packed with examples, demos, projects, assignments, quizzes and of course videos - all with the goal of giving you the best possible way of learning JavaScript.
Why Learn JavaScript?
JavaScript is the language of the web. It powers interactive websites, web applications, mobile apps, server-side applications and much more. Mastering JavaScript opens countless doors in your development career and forms the foundation for learning frameworks like React, Vue, Angular and Node.js!
What's in This Course?
This course is packed with content - I strongly recommend checking out the full curriculum to get a clear idea of all the topics covered. Here's an overview of what you'll find:
Modern JavaScript
Learn the latest JavaScript syntax from the start! The JavaScript syntax changed over time - you'll learn modern syntax while also understanding the old one, so you can work in ANY JS project.
ALL the Basics
Variables, constants, functions, how scripts are loaded and much more. Master the fundamentals that every JavaScript developer needs to know.
Arrays & Objects
Explore these essential data structures in great detail. Learn all the methods, patterns and best practices for working with arrays and objects.
DOM Manipulation
Learn how to manipulate web pages dynamically via JavaScript, including deep dives into different use-cases and advanced DOM techniques.
In Detail, You'll Learn
This course covers everything from the fundamentals to expert-level topics. Here's a deeper look at what's included:
Core Concepts
Master these essential JavaScript skills:
- Control Structures: conditionals and loops
- A look behind the scenes: how JS engines work
- Deep dives into core concepts & function syntaxes
- Working with the DOM & events (incl. drag & drop)
- Classes & Object-oriented Programming
- The "this" keyword, prototypes & constructor functions
Advanced Topics
Take your skills to the next level:
- Async programming: callbacks, promises, async/await
- Sending HTTP requests via JavaScript
- Tooling, optimizations & browser support
- Libraries & Frameworks (Axios, React.js, etc.)
- Node.js: dedicated section on server-side JS
- Security & performance optimizations
Your Go-To JavaScript Resource
This course was designed to be your complete JavaScript reference. Use it not just for learning but as a resource you can come back to whenever you need to look up important topics. From basics to expert concepts like automated testing - it's all here!
Packed with Examples & Projects!
This course includes examples, demos, projects, assignments and quizzes - all designed to give you the best possible way of learning JavaScript. After finishing this course, you'll be well prepared to build your own JavaScript projects and advance your web development career!
Who Is This Course For?
Beginners Welcome
Perfect for beginner web development students who have no or only
little JavaScript experience
Deepen Your Knowledge
Ideal for developers who know the basics about JavaScript and want
to deepen their knowledge
Advanced Developers
For advanced JavaScript developers who want to learn more about the
nitty-gritty details and dive into advanced concepts
Everyone Curious
Anyone interested in learning JavaScript and understanding how it
works under the hood
See The Course In Action
Curriculum
Getting Started
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Modular JavaScript (Working with Modules)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
JavaScript & Browser Support
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Performance & Optimizations
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)
Available in
days
days
after you enroll
Bonus: Data Structures & Algorithms Introduction
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Course Prerequisites
Here's what you need to get the most out of this course
Required
- NO prior JavaScript knowledge is required.
- Basic web development knowledge is recommended.
Good News!
- Basic understanding of HTML and CSS helps but is NOT required.
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 10464 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "JavaScript - The Complete Guide (Beginner + Advanced)"
$89
one-time
This is a one-time payment that grants access to this course only, not to any other courses.
Most Popular
Academind Pro Membership
Unlimited access to this and all other current & future courses!
$25
/month
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.product.
