W3docs
de
Anmelden

JavaScript - The Complete Guide (Beginner + Advanced)

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

Start course

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.

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

Who this course is for:

  • Beginner web development students who have no or only little JavaScript experience
  • Also developers who know the basics about JavaScript and want to deepen their knowledge
  • Advanced JavaScript developers who want to learn more about the nitty-gritty details and dive into advanced concepts
  • Everyone interested in learning JavaScript and all about how it works

Course content

Section 1Getting Started

  • Introduction
    1:50
  • What is JavaScript?
    3:44
  • JavaScript in Action!
    8:57
  • Join our Online Learning Community
    1:00
  • 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
    1:00
  • JavaScript vs Java
    4:02
  • A Brief History Of JavaScript
    6:03
  • Setting Up a Development Environment
    11:12
  • Course FAQs
    1:00

Section 2Basics: Variables, Data Types, Operators & Functions

  • Module IntroductionPremium
    1:17
  • Setting Up the ProjectPremium
    4:25
  • More on Version Control & GitPremium
    1:00
  • Adding JavaScript to the WebsitePremium
    6:42
  • Introducing Variables & ConstantsPremium
    5:17
  • Declaring & Defining VariablesPremium
    7:10
  • Working with Variables & OperatorsPremium
    6:17
  • Quiz 1: Variables & OperatorsPremium
    1:00
  • Understanding the Starting CodePremium
    1:21
  • Data Types: Numbers & Strings (Text)Premium
    6:00
  • Using ConstantsPremium
    5:11
  • More on StringsPremium
    15:51
  • Quiz 2: Data Types & ConstantsPremium
    1:00
  • Assignment - Variables, Constants, Operators & Core Data Types (Problem)Premium
    3:20
  • Assignment - Variables, Constants, Operators & Core Data Types (Solution)Premium
    4:57
  • Introducing FunctionsPremium
    5:50
  • Adding A Custom FunctionPremium
    11:22
  • Code Styles, Conventions & SyntaxPremium
    1:00
  • Returning ValuesPremium
    4:31
  • The (Un)Importance of Code OrderPremium
    4:34
  • An Introduction to Global & Local ScopePremium
    5:31
  • "Shadowed Variables"Premium
    1:00
  • More about the "return" StatementPremium
    2:24
  • Executing Functions "Indirectly"Premium
    11:10
  • "Indirect" vs "Direct" Function Execution - SummaryPremium
    1:00
  • Quiz 3: Functions & ScopePremium
    1:00
  • Assignment - Functions (Problem)Premium
    2:37
  • Assignment - Functions (Solution)Premium
    6:40
  • Converting Data TypesPremium
    6:14
  • Mixing Numbers & StringsPremium
    1:00
  • Splitting Code into FunctionsPremium
    5:49
  • Connecting all Buttons to FunctionsPremium
    7:43
  • Working with Code CommentsPremium
    4:09
  • More Operators!Premium
    6:39
  • More Core Data Types!Premium
    4:31
  • Using ArraysPremium
    8:53
  • Creating ObjectsPremium
    6:02
  • Accessing Object DataPremium
    2:51
  • Quiz 4: Arrays & ObjectsPremium
    1:00
  • Adding a Re-Usable Function That Uses ObjectsPremium
    5:24
  • undefined, null & NaNPremium
    6:20
  • The "typeof" OperatorPremium
    3:11
  • Quiz 5: "undefined", "null" & "NaN"Premium
    1:00
  • Importing Scripts Correctly with "defer" & "async"Premium
    12:57
  • Wrap UpPremium
    2:13
  • Useful Resources & LinksPremium
    1:00

Section 3Efficient Development & Debugging

  • Module IntroductionPremium
    1:28
  • Efficient Development & Debugging - An OverviewPremium
    3:18
  • Configuring the IDE Look & FeelPremium
    2:25
  • Using ShortcutsPremium
    4:12
  • Working with Auto-Completion & IDE HintsPremium
    4:34
  • Installing IDE ExtensionsPremium
    2:04
  • Tweaking Editor SettingsPremium
    2:15
  • Utilizing Different IDE ViewsPremium
    1:41
  • Finding Help & Working with MDNPremium
    5:53
  • The ECMAScript StandardPremium
    1:00
  • How to "google" CorrectlyPremium
    1:44
  • Debugging JavaScript - An OverviewPremium
    3:17
  • An Error Message! No Reason To Panic!Premium
    4:26
  • Using console.log() to look "into the Code"Premium
    3:49
  • Next-Level Debugging with the Chrome Devtools & BreakpointsPremium
    8:20
  • Testing Code Changes Directly in the DevtoolsPremium
    2:05
  • Debugging Code directly Inside VS CodePremium
    4:55
  • Wrap UpPremium
    1:22
  • Useful Resources & LinksPremium
    1:00

Section 4Working with Control Structures (if Statements, Loops, Error Handling)

  • Module IntroductionPremium
    2:26
  • Introducing "if" Statements & Boolean (Comparison) OperatorsPremium
    9:26
  • Using "if" StatementsPremium
    7:23
  • Working with "if", "else" and "else-if"Premium
    5:10
  • Beware When Comparing Objects & Arrays for Equality!Premium
    4:06
  • The Logical AND and OR OperatorsPremium
    9:10
  • Understanding Operator PrecedencePremium
    7:20
  • Quiz 6: if & Boolean Operators - The BasicsPremium
    1:00
  • Beyond true/ false: "Truthy" and "Falsy" ValuesPremium
    7:30
  • Coercion vs ConversionPremium
    1:00
  • Quiz 7: Falsy and Truthy ValuesPremium
    1:00
  • Setting Up a Bigger Example Project (The "Monster Killer")Premium
    2:59
  • Adding an "Attack" FunctionPremium
    7:57
  • Using "if" Statements for Checking the Win-ConditionPremium
    9:17
  • Adding More "if" Statements & A "Strong Attack" FunctionalityPremium
    7:41
  • Time for a "Heal Player" Functionality!Premium
    10:15
  • Controlling the Conditional Bonus Life (Without Boolean Operators!)Premium
    5:59
  • Adding a "Reset Game" FunctionalityPremium
    6:00
  • Validating User InputPremium
    6:17
  • Utilizing Global Constants as Identifiers in Conditional CodePremium
    3:20
  • Adding a Conditional Battle LogPremium
    16:37
  • Introducing the Ternary OperatorPremium
    7:31
  • A Bit of Theory: Statements vs ExpressionsPremium
    1:40
  • Logical Operator "Tricks" & ShorthandsPremium
    12:58
  • Quiz 8: Logical Operators & How They WorkPremium
    1:00
  • Working with the "switch-case" StatementPremium
    7:10
  • Introducing LoopsPremium
    6:40
  • The "for" LoopPremium
    7:38
  • The "for-of" LoopPremium
    5:16
  • The "for-in" LoopPremium
    6:49
  • The "while" & "do-while" LoopsPremium
    8:00
  • Quiz 9: Loops - BasicsPremium
    1:00
  • Assignment - Control Structures (Problem)Premium
    2:47
  • Assignment - Control Structures (Solution)Premium
    9:55
  • Controlling Loops with "break"Premium
    8:11
  • Controlling Iterations with "continue"Premium
    2:21
  • More Control with Labeled StatementsPremium
    6:26
  • Quiz 10: break & continuePremium
    1:00
  • Error Handling with "try-catch" - An IntroductionPremium
    2:25
  • Throwing Custom ErrorsPremium
    5:16
  • Working with "try-catch" to Catch & Handle ErrorsPremium
    8:14
  • Quiz 11: Error HandlingPremium
    1:00
  • Wrap UpPremium
    3:21
  • Useful Resources & LinksPremium
    1:00

Section 5Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript

  • Module IntroductionPremium
    1:43
  • ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScriptPremium
    8:14
  • var vs let & const - Introducing "Block Scope"Premium
    14:32
  • Understanding "Hoisting"Premium
    4:07
  • Strict Mode & Writing Good CodePremium
    5:46
  • Quiz 12: "JavaScript Specialties"Premium
    1:00
  • How Code is Parsed & CompiledPremium
    8:16
  • Inside the JavaScript Engine - How the Code ExecutesPremium
    15:59
  • [DEEP DIVE] JavaScript Language vs Browser APIsPremium
    1:00
  • Primitive vs Reference ValuesPremium
    19:24
  • Garbage Collection & Memory ManagementPremium
    12:00
  • Wrap UpPremium
    1:55
  • Useful Resources & LinksPremium
    1:00

Section 6More on Functions

  • Module IntroductionPremium
    1:31
  • Recapping Functions Knowledge - What We Know Thus FarPremium
    1:52
  • Parameters vs ArgumentsPremium
    1:00
  • Functions vs MethodsPremium
    5:46
  • Functions are Objects!Premium
    2:47
  • Function Expressions: Storing Functions in VariablesPremium
    5:12
  • Function Expressions vs Function DeclarationsPremium
    2:47
  • Anonymous FunctionsPremium
    5:54
  • Working on the Project: Adding User Choices to the GamePremium
    7:44
  • Implementing the Core Game LogicPremium
    7:20
  • Introducing Arrow FunctionsPremium
    8:41
  • Quiz 13: Creating FunctionsPremium
    1:00
  • Outputting Messages to the UserPremium
    3:53
  • Default Arguments in FunctionsPremium
    10:45
  • Introducing Rest Parameters ("Rest Operator")Premium
    8:57
  • Creating Functions Inside of FunctionsPremium
    3:04
  • Understanding Callback FunctionsPremium
    6:09
  • Assignment - Functions (Problem)Premium
    3:16
  • Assignment - Functions (Solution)Premium
    8:19
  • Working with "bind()"Premium
    8:39
  • Adding bind() to the Calculator ProjectPremium
    3:46
  • Quiz 14: Functions - AdvancedPremium
    1:00
  • call() and apply()Premium
    1:18
  • Wrap UpPremium
    2:10
  • Useful Resources & LinksPremium
    1:00

Section 7Working with the DOM (Browser HTML Code) in JavaScript

  • Module IntroductionPremium
    1:48
  • What's the "DOM"?Premium
    6:00
  • Document and Window ObjectPremium
    6:20
  • Understanding the DOM and how it's createdPremium
    7:07
  • Nodes & Elements - Querying the DOM OverviewPremium
    5:55
  • Selecting Elements in the DOMPremium
    9:54
  • Summary: Node Query MethodsPremium
    1:00
  • Exploring and Changing DOM PropertiesPremium
    7:37
  • Attributes vs PropertiesPremium
    8:58
  • Selecting Multiple Elements & SummaryPremium
    5:13
  • Quiz 15: DOM BasicsPremium
    1:00
  • Assignment - DOM Querying (Problem)Premium
    2:10
  • Assignment - DOM Querying (Solution)Premium
    5:41
  • Traversing the DOM - OverviewPremium
    6:22
  • Traversing Child NodesPremium
    9:15
  • Using parentNode & parentElementPremium
    5:01
  • Selecting Sibling ElementsPremium
    4:05
  • DOM Traversal vs Query MethodsPremium
    4:35
  • Styling DOM ElementsPremium
    12:18
  • Creating Elements with JS - OverviewPremium
    2:42
  • Adding Elements via HTML in CodePremium
    7:42
  • Adding Elements via createElement()Premium
    5:42
  • Inserting DOM ElementsPremium
    8:15
  • Cloning DOM NodesPremium
    1:45
  • Live Node Lists vs Static Node ListsPremium
    4:55
  • Removing ElementsPremium
    1:56
  • Insertion & Removal Method SummaryPremium
    2:38
  • Summary: Insert, Replace, RemovePremium
    1:00
  • Setting Up the Practice ProjectPremium
    2:16
  • Selecting the Modal and "Add" ButtonPremium
    8:58
  • Opening a Modal by Changing CSS ClassesPremium
    5:01
  • Controlling the BackdropPremium
    8:04
  • Fetching and Validating User InputPremium
    8:06
  • Creating a Movie in JavaScript & Clearing the InputPremium
    4:00
  • Rendering Movie Items on the ScreenPremium
    8:23
  • Deleting Movie ElementsPremium
    9:12
  • Showing & Hiding the "Are you sure?" DialogPremium
    7:08
  • Starting with the Confirmation LogicPremium
    4:29
  • Finishing the AppPremium
    11:45
  • Wrap UpPremium
    1:55
  • Useful Resources & LinksPremium
    1:00

Section 8More on Arrays & Iterables

  • Module IntroductionPremium
    1:08
  • What are "Iterables" and "Array-like Objects"?Premium
    2:11
  • Creating ArraysPremium
    8:55
  • Which Data Can You Store In Arrays?Premium
    3:47
  • push(), pop(), unshift(), shift() - Adding & Removing ElementsPremium
    6:59
  • The splice() MethodPremium
    5:37
  • Selecting Ranges & Creating Copies with slice()Premium
    4:26
  • arrays-it-08-concatPremium
    2:23
  • Retrieving Indexes with indexOf() /& lastIndexOf()Premium
    3:47
  • Finding Stuff: find() and findIndex()Premium
    5:20
  • Is it Included?Premium
    1:20
  • Alternative to for Loops: The forEach() MethodPremium
    4:24
  • Transforming Data with map()Premium
    2:38
  • sort()ing and reverse()ingPremium
    4:15
  • Filtering Arrays with filter()Premium
    2:35
  • Where Arrow Functions Shine!Premium
    1:31
  • The Important reduce() MethodPremium
    7:33
  • Chaining Methods in JavaScriptPremium
    1:00
  • Arrays & Strings - split() and join()Premium
    4:21
  • The Spread Operator (...)Premium
    10:31
  • Understanding Array DestructuringPremium
    4:24
  • Maps & Sets - OverviewPremium
    4:16
  • Working with SetsPremium
    7:20
  • Working with MapsPremium
    9:30
  • Maps vs ObjectsPremium
    3:41
  • Understanding WeakSetPremium
    4:50
  • Understanding WeakMapPremium
    2:51
  • Assignment - Arrays & Iterables (Problem)Premium
    3:05
  • Assignment - Arrays & Iterables (Solution)Premium
    10:55
  • Wrap UpPremium
    1:25
  • Useful Resources & LinksPremium
    1:00

Section 9More on Objects

  • Module IntroductionPremium
    1:38
  • What's an Object?Premium
    5:54
  • Objects - RecapPremium
    2:42
  • Adding, Modifying & Deleting PropertiesPremium
    6:46
  • Special Key Names & Square Bracket Property AccessPremium
    8:36
  • Property Types & Property OrderPremium
    3:55
  • Dynamic Property Access & Setting Properties DynamicallyPremium
    4:11
  • Quiz 16: Object PropertiesPremium
    1:00
  • Demo App & Shorthand Property SyntaxPremium
    9:22
  • Rendering Elements based on ObjectsPremium
    5:36
  • for-in Loops & Outputting Dynamic PropertiesPremium
    5:24
  • Adding the Filter FunctionalityPremium
    5:38
  • Understanding "Chaining" (Property & Method Chaining)Premium
    1:51
  • The Object Spread Operator (...)Premium
    5:54
  • Understanding Object.assign()Premium
    2:08
  • Object DestructuringPremium
    6:13
  • Checking for Property ExistancePremium
    2:42
  • Introducing "this"Premium
    5:52
  • The Method Shorthand SyntaxPremium
    1:07
  • The "this" Keyword And Its Strange BehaviorPremium
    5:41
  • call() and apply()Premium
    3:22
  • What the Browser (Sometimes) Does to "this"Premium
    3:32
  • "this" and Arrow FunctionsPremium
    10:36
  • Quiz 17: "this"Premium
    1:00
  • Getters & SettersPremium
    7:05
  • Wrap UpPremium
    1:33
  • Useful Resources & LinksPremium
    1:00

Section 10Classes & Object-oriented Programming (OOP)

  • Module IntroductionPremium
    1:55
  • What is "Object-oriented Programming" (OOP)?Premium
    3:17
  • Getting Started with OOP CodePremium
    12:10
  • Defining & Using a First ClassPremium
    7:17
  • Working with Constructor MethodsPremium
    4:51
  • Fields vs PropertiesPremium
    2:19
  • Using & "Connecting" Multiple ClassesPremium
    9:06
  • Binding Class Methods & Working with "this"Premium
    4:57
  • Adding a Cart and Shop ClassPremium
    4:37
  • Communicating Can Be Challenging!Premium
    3:54
  • Static Methods & PropertiesPremium
    4:31
  • First Summary & Classes vs Object LiteralsPremium
    4:06
  • Getters & SettersPremium
    5:43
  • Introducing InheritancePremium
    2:34
  • Implementing InheritancePremium
    11:50
  • Using Inheritance EverywherePremium
    6:51
  • Overriding Methods and the super() ConstructorPremium
    6:00
  • super() Constructor Execution, Order & "this"Premium
    6:46
  • Different Ways of Adding MethodsPremium
    5:51
  • Private PropertiesPremium
    7:24
  • Assignment - Classes & OOP (Problem)Premium
    2:39
  • Assignment - Classes & OOP (Solution)Premium
    13:36
  • The "instanceof" OperatorPremium
    4:30
  • Understanding Object DescriptorsPremium
    7:35
  • Built-in ClassesPremium
    1:09
  • Quiz 18: ClassesPremium
    1:00
  • Wrap UpPremium
    1:51
  • Useful Resources & LinksPremium
    1:00

Section 11Deep Dive: Constructor Functions & Prototypes

  • Module IntroductionPremium
    1:34
  • Introducing Constructor FunctionsPremium
    4:02
  • Constructor Functions vs Classes & Understanding "new"Premium
    4:17
  • Introducing PrototypesPremium
    16:46
  • Working with PrototypesPremium
    5:19
  • The Prototype Chain and the Global "Object"Premium
    8:26
  • Quiz 19: Constructor Functions & PrototypesPremium
    1:00
  • Classes & PrototypesPremium
    5:24
  • Methods in Classes & In ConstructorsPremium
    10:16
  • Built-in Prototypes in JavaScriptPremium
    2:12
  • Setting & Getting PrototypesPremium
    10:58
  • Wrap UpPremium
    2:49
  • Useful Resources & LinksPremium
    1:00

Section 12Practice: OOP & Classes

  • Module IntroductionPremium
    1:38
  • First Project Steps & PlanningPremium
    4:46
  • Creating Project Lists & Parsing Element DataPremium
    4:08
  • Starting with the "Switch Project" LogicPremium
    9:59
  • Passing Method References AroundPremium
    7:02
  • Moving DOM ElementsPremium
    11:49
  • Adding a TooltipPremium
    8:58
  • Adding InheritancePremium
    6:13
  • Wrap UpPremium
    0:57
  • Useful Resources & LinksPremium
    1:00

Section 13Back to the DOM & More Browser APIs

  • Module IntroductionPremium
    2:31
  • Using "dataset" (data-* Attributes)Premium
    6:51
  • Getting Element Box DimensionsPremium
    5:53
  • Working with Element Sizes & PositionsPremium
    4:56
  • The DOM & PrototypesPremium
    2:21
  • Positioning the TooltipPremium
    10:57
  • Handling ScrollingPremium
    5:36
  • Working with TagsPremium
    5:14
  • Loading Scripts DynamicallyPremium
    7:35
  • Setting Timers & IntervalsPremium
    7:37
  • The "location" and "history" ObjectsPremium
    4:20
  • The "navigator" ObjectPremium
    4:50
  • Working with DatesPremium
    3:17
  • The "Error" Object & Constructor FunctionPremium
    3:21
  • Wrap UpPremium
    0:43
  • Useful Resources & LinksPremium
    1:00

Section 14Working with Events

  • Module IntroductionPremium
    1:31
  • Introduction to Events in JavaScriptPremium
    6:18
  • Different Ways of Listening to EventsPremium
    6:59
  • Removing Event ListenersPremium
    5:13
  • The "event" ObjectPremium
    5:43
  • Supported Event TypesPremium
    8:00
  • Working with "preventDefault()"Premium
    5:15
  • Understanding "Capturing" & "Bubbling" PhasesPremium
    2:02
  • Event Propagation & "stopPropagation()"Premium
    7:39
  • Using Event DelegationPremium
    8:33
  • Triggering DOM Elements ProgrammaticallyPremium
    3:40
  • Event Handler Functions & "this"Premium
    2:28
  • Quiz 20: EventsPremium
    1:00
  • Drag & Drop - TheoryPremium
    4:58
  • Configuring Draggable ElementsPremium
    6:23
  • Marking the "Drop Area"Premium
    8:52
  • Dropping & Moving Data + ElementsPremium
    6:58
  • Firefox AdjustmentsPremium
    1:00
  • Wrap UpPremium
    1:15
  • Useful Resources & LinksPremium
    1:00

Section 15Advanced Function Concepts

  • Module IntroductionPremium
    0:57
  • Pure Functions & Side-EffectsPremium
    6:13
  • Impure vs Pure FunctionsPremium
    2:00
  • Factory FunctionsPremium
    5:41
  • ClosuresPremium
    7:45
  • Closures in PracticePremium
    7:01
  • Closures & Memory ManagementPremium
    1:23
  • Optional: IIFEsPremium
    1:00
  • Introducing "Recursion"Premium
    7:32
  • Advanced RecursionPremium
    9:01
  • Quiz 21: Advanced FunctionsPremium
    1:00
  • Wrap UpPremium
    1:14
  • Useful Resources & LinksPremium
    1:00

Section 16More on Numbers & Strings

  • Module IntroductionPremium
    0:53
  • How Numbers Work & Behave in JavaScriptPremium
    7:46
  • Floating Point (Im)PrecisionPremium
    11:04
  • The BigInt TypePremium
    3:36
  • The Global "Number" and "Math" ObjectsPremium
    2:47
  • Example: Generate Random Number Between Min/ MaxPremium
    5:33
  • Exploring String MethodsPremium
    1:43
  • Tagged TemplatesPremium
    10:28
  • Introducing Regular Expressions ("RegEx")Premium
    4:30
  • More on Regular ExpressionsPremium
    7:25
  • Wrap UpPremium
    1:20
  • Useful Resources & LinksPremium
    1:00

Section 17Async JavaScript: Promises & Callbacks

  • Module IntroductionPremium
    1:12
  • Understanding Synchronous Code Execution ("Sync Code")Premium
    2:51
  • Understanding Asynchronous Code Execution ("Async Code")Premium
    5:44
  • Blocking Code & The "Event Loop"Premium
    10:30
  • Sync + Async Code - The Execution OrderPremium
    4:03
  • Multiple Callbacks & setTimeout(0)Premium
    3:20
  • Quiz 22: Asynchronous CodePremium
    1:00
  • Getting Started with PromisesPremium
    8:25
  • Chaining Multiple PromisesPremium
    5:52
  • Promise Error HandlingPremium
    7:46
  • Async/ awaitPremium
    9:11
  • Async/ await & Error HandlingPremium
    3:07
  • Async/ await vs "Raw Promises"Premium
    4:56
  • Promise.all(), Promise.race() etc.Premium
    7:59
  • Quiz 23: Promises & async/ awaitPremium
    1:00
  • Wrap UpPremium
    1:27
  • Useful Resources & LinksPremium
    1:00

Section 18Working with Http Requests

  • Module IntroductionPremium
    1:06
  • What & WhyPremium
    5:03
  • More Background about HttpPremium
    5:24
  • Getting Started with HttpPremium
    3:35
  • Sending a GET RequestPremium
    3:46
  • JSON Data & Parsing DataPremium
    9:14
  • Promisifying Http Requests (with XMLHttpRequest)Premium
    3:49
  • Sending Data with a POST RequestPremium
    4:55
  • Triggering Requests via the UIPremium
    3:12
  • Sending a DELETE RequestPremium
    4:56
  • Handling ErrorsPremium
    5:03
  • Using the fetch() APIPremium
    7:10
  • POSTing Data with the fetch() APIPremium
    2:38
  • Adding Request HeadersPremium
    3:01
  • fetch() & Error HandlingPremium
    7:11
  • XMLHttpRequest vs fetch()Premium
    1:42
  • Working with FormDataPremium
    6:58
  • Wrap UpPremium
    1:17
  • Useful Resources & LinksPremium
    1:00

Section 19Working with JavaScript Libraries

  • Module IntroductionPremium
    0:59
  • What & WhyPremium
    2:55
  • Adding Libraries (Example: lodash)Premium
    9:10
  • Example: jQueryPremium
    2:30
  • Discovering LibrariesPremium
    3:25
  • Axios Library & Http RequestsPremium
    10:46
  • Third-Party Library ConsiderationsPremium
    4:54
  • Wrap UpPremium
    0:59
  • Useful Resources & LinksPremium
    1:00

Section 20Modular JavaScript (Working with Modules)

  • Module IntroductionPremium
    0:56
  • Splitting Code in a Sub-optimal WayPremium
    7:12
  • A First Step Towards JavaScript ModulesPremium
    3:25
  • We Need a Development Server!Premium
    5:58
  • First import / export WorkPremium
    3:41
  • Switching All Files To Use ModulesPremium
    4:26
  • More Named Export Syntax VariationsPremium
    6:12
  • Working With Default ExportsPremium
    3:35
  • Dynamic Imports & Code SplittingPremium
    5:24
  • When Does Module Code Execute?Premium
    2:06
  • Module Scope & globalThisPremium
    6:18
  • Quiz 24: ModulesPremium
    1:00
  • Wrap UpPremium
    1:37
  • Useful Resources & LinksPremium
    1:00

Section 21JavaScript Tooling & Workflows

  • Module IntroductionPremium
    3:23
  • Project Limitations & Why We Need ToolsPremium
    8:11
  • Workflow OverviewPremium
    2:42
  • Setting Up a npm ProjectPremium
    3:45
  • Working with npm PackagesPremium
    3:39
  • Linting with ESLintPremium
    8:38
  • Bundling with WebpackPremium
    15:13
  • Bonus: Multiple Entry PointsPremium
    1:00
  • Development Mode & Fixing "Lazy Loading"Premium
    4:00
  • Using webpack-dev-serverPremium
    3:14
  • Generating SourcemapsPremium
    3:05
  • Building For ProductionPremium
    3:45
  • Final OptimizationsPremium
    6:35
  • Using Third Party Packages with npm & WebpackPremium
    4:06
  • Wrap UpPremium
    1:39
  • Useful Resources & LinksPremium
    1:00

Section 22Utilizing Browser Storage

  • Module IntroductionPremium
    1:05
  • Browser Storage OptionsPremium
    7:21
  • localStorage & sessionStoragePremium
    10:43
  • Getting Started with CookiesPremium
    6:06
  • Working with CookiesPremium
    8:10
  • Getting Started with IndexedDBPremium
    8:55
  • Working with IndexedDBPremium
    4:06
  • Wrap UpPremium
    0:48
  • Useful Resources & LinksPremium
    1:00

Section 23JavaScript & Browser Support

  • Module IntroductionPremium
    1:29
  • What Is "Browser Support" About?Premium
    7:36
  • Determining Browser Support For A JavaScript FeaturePremium
    8:20
  • Determining Required SupportPremium
    3:29
  • Solution: Feature Detection + Fallback CodePremium
    9:55
  • Solution: Using PolyfillsPremium
    3:18
  • Solution: Transpiling CodePremium
    12:01
  • Improvement: Automatically Detect + Add PolyfillsPremium
    11:02
  • What about Support Outside of Browsers?Premium
    0:57
  • Browser Support Outside of JavaScript FilesPremium
    2:36
  • Wrap UpPremium
    1:18
  • Useful Resources & LinksPremium
    1:00

Section 24Time to Practice: Share My Place App

  • Module IntroductionPremium
    0:53
  • Setting Up the ProjectPremium
    3:05
  • Getting DOM AccessPremium
    4:33
  • Getting the User LocationPremium
    6:27
  • Adding Feedback (Showing a Modal)Premium
    11:16
  • Hiding the ModalPremium
    2:38
  • Rendering a Map with Google MapsPremium
    14:16
  • Continuing without a Credit CardPremium
    1:00
  • Finding an Address & Getting the CoordinatesPremium
    8:22
  • Converting User Input to CoordinatesPremium
    3:35
  • Creating a "Share Place" LinkPremium
    8:30
  • Copying the Link to the ClipboardPremium
    3:36
  • Rendering the "Shared Place" ScreenPremium
    6:22
  • Useful Resources & LinksPremium
    1:00

Section 25Working with JavaScript Frameworks

  • Module IntroductionPremium
    1:06
  • What and Why?Premium
    7:35
  • The Idea Behind React.jsPremium
    2:46
  • Analysing a React ProjectPremium
    17:38
  • Wrap UpPremium
    1:35
  • Useful Resources & LinksPremium
    1:00

Section 26Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API

  • Module IntroductionPremium
    1:51
  • Understanding SymbolsPremium
    8:27
  • Well-known SymbolsPremium
    5:15
  • Understanding IteratorsPremium
    5:32
  • Generators & Iterable ObjectsPremium
    11:02
  • Generators Summary & Built-in Iterables ExamplesPremium
    3:21
  • The Reflect APIPremium
    7:10
  • The Proxy API and a First "Trap"Premium
    9:04
  • Working with Proxy TrapsPremium
    2:57
  • Wrap UpPremium
    1:37
  • Useful Resources & LinksPremium
    1:00

Section 27Node.js: An Introduction

  • Module IntroductionPremium
    1:42
  • JavaScript is a Hosted LanguagePremium
    2:21
  • Installation & BasicsPremium
    6:16
  • Understanding Modules & File AccessPremium
    4:39
  • Working with Incoming Http RequestsPremium
    5:46
  • Sending Responses (HTML Data)Premium
    4:01
  • Parsing Incoming DataPremium
    10:53
  • Introducing & Installing Express.jsPremium
    2:48
  • Express.js: The BasicsPremium
    6:33
  • Extracting DataPremium
    4:23
  • Rendering Server-side HTML with Templates & EJSPremium
    6:52
  • Enhancing Our ProjectPremium
    3:44
  • Adding Basic REST RoutesPremium
    12:09
  • Understanding CORS (Cross Origin Resource Sharing)Premium
    5:13
  • Sending the Location ID to the FrontendPremium
    2:16
  • Adding the GET Location RoutePremium
    7:16
  • Introducing MongoDB (Database)Premium
    14:44
  • NodeJS Error HandlingPremium
    1:00
  • Wrap UpPremium
    1:50
  • Useful Resources & LinksPremium
    1:00

Section 28Security

  • Module IntroductionPremium
    1:35
  • Security Hole Overview & Exposing Data in your CodePremium
    6:45
  • Cross-Site Scripting Attacks (XSS)Premium
    14:39
  • Third-Party Libraries & XSSPremium
    5:17
  • Quiz 25: XSS & Exposing Confidential DetailsPremium
    1:00
  • CSRF Attacks (Cross Site Request Forgery)Premium
    4:16
  • CORS (Cross Origin Resource Sharing)Premium
    2:53
  • Wrap UpPremium
    1:30
  • Useful Resources & LinksPremium
    1:00

Section 29Deploying JavaScript Code

  • Module IntroductionPremium
    1:11
  • Deployment StepsPremium
    7:29
  • Different Types of WebsitesPremium
    1:00
  • Example: Static Host Deployment (no Server-side Code)Premium
    9:43
  • Injecting Script Imports Into HTML AutomaticallyPremium
    1:00
  • Example: Dynamic Page Deployment (with Server-side Code)Premium
    12:45
  • Useful Resources & LinksPremium
    1:00

Section 30Performance & Optimizations

  • Module IntroductionPremium
    1:49
  • What is "Performance Optimization" About?Premium
    6:16
  • Optimization PotentialsPremium
    6:48
  • Measuring PerformancePremium
    3:42
  • Diving Into The Browser Devtools (for Performance Measuring)Premium
    15:30
  • Further ResourcesPremium
    2:13
  • Preparing The Testing SetupPremium
    4:03
  • Optimizing Startup Time & Code Usage / CoveragePremium
    11:51
  • Updating The DOM CorrectlyPremium
    9:53
  • Updating Lists CorrectlyPremium
    8:11
  • Optimizing The Small ThingsPremium
    3:58
  • Micro-Optimizations (Think Twice!)Premium
    8:49
  • Finding & Fixing Memory LeaksPremium
    9:43
  • Server-side Performance OptimizationsPremium
    1:00
  • Wrap UpPremium
    3:26
  • Useful Resources & LinksPremium
    1:00

Section 31Introduction to Testing

  • Module IntroductionPremium
    0:49
  • What Is Testing? Why Does It Matter?Premium
    7:09
  • Testing SetupPremium
    4:10
  • Writing & Running Unit TestsPremium
    11:15
  • Writing & Running Integration TestsPremium
    6:03
  • Writing & Running e2e TestsPremium
    10:16
  • Dealing with Async CodePremium
    10:20
  • Working with MocksPremium
    7:51
  • Useful Resources & LinksPremium
    1:00

Section 32Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)

  • Module IntroductionPremium
    0:48
  • What are Programming Paradigms?Premium
    3:01
  • Procedural Programming in PracticePremium
    8:53
  • Object Oriented Programming in PracticePremium
    13:20
  • Functional Programming in PracticePremium
    13:52
  • Wrap UpPremium
    3:26
  • Useful Resources & LinksPremium
    1:00

Section 33Bonus: Data Structures & Algorithms Introduction

  • Module IntroductionPremium
    2:02
  • What are "Data Structures" & "Algorithms"?Premium
    4:22
  • A First ExamplePremium
    10:22
  • Solving the Same Problem DifferentlyPremium
    7:26
  • Performance & The "Big O" NotationPremium
    11:44
  • More Time Complexities & Comparing AlgorithmsPremium
    3:35
  • More on Big OPremium
    5:23
  • More ExamplesPremium
    10:15
  • Diving into Data Structures & Time ComplexitiesPremium
    12:07
  • Where to Learn More & Wrap UpPremium
    3:22
  • Useful Resources & LinksPremium
    1:00

Section 34Bonus: TypeScript Introduction

  • Module IntroductionPremium
    1:09
  • What is TypeScript and Why would you use it?Premium
    4:51
  • Working with TypesPremium
    10:05
  • Core Types & Diving DeeperPremium
    17:26
  • Object Types, Array Types & Function TypesPremium
    9:22
  • Advanced Types (Literal Types, Union Types, Enums)Premium
    9:20
  • Classes & InterfacesPremium
    12:02
  • Generic TypesPremium
    5:02
  • Configuring the TypeScript CompilerPremium
    5:11
  • Wrap UpPremium
    1:31
  • Useful Resources & LinksPremium
    1:00

Section 35Bonus: Web Components

  • Module IntroductionPremium
    1:59
  • Web Components in ActionPremium
    6:30
  • What are Web Components?Premium
    3:22
  • Why Web Components?Premium
    2:44
  • Getting Started!Premium
    4:56
  • Web Component Browser SupportPremium
    2:44
  • Our Development SetupPremium
    3:53
  • A First Custom ElementPremium
    8:16
  • Interacting with the Surrounding DOMPremium
    5:04
  • Understanding the Custom Element LifecyclePremium
    2:51
  • Using "connectedCallback" for DOM AccessPremium
    2:05
  • Listening to Events Inside the ComponentPremium
    9:12
  • Using Attributes on Custom ElementsPremium
    4:45
  • Styling our ElementsPremium
    4:08
  • Working with the "Shadow DOM"Premium
    5:00
  • Adding an HTML TemplatePremium
    5:40
  • Using SlotsPremium
    1:50
  • Defining the Template in JavaScriptPremium
    3:21
  • Using Style Tags in the Shadow DOMPremium
    2:40
  • Extending Built-in ElementsPremium
    7:33
  • Assignment - The Basics (Problem)Premium
    2:55
  • Assignment - The Basics (Solution)Premium
    11:31
  • The Next StepsPremium
    0:49
  • Understanding Shadow DOM ProjectionPremium
    2:26
  • Styling "slot" Content Outside of the Shadow DOMPremium
    3:44
  • Styling "slot" Content Inside of the Shadow DOMPremium
    3:10
  • Styling the Host ComponentPremium
    4:42
  • Conditional Host StylingPremium
    2:49
  • Styling with the Host Content in MindPremium
    2:27
  • Smart Dynamic Styling with CSS VariablesPremium
    6:20
  • Cleaning Up the Overall StylingPremium
    3:22
  • Observing Attribute ChangesPremium
    6:17
  • Adjusting the Component Behavior Upon Attribute ChangesPremium
    2:34
  • Using "disconnectedCallback"Premium
    6:10
  • Adding a render() MethodPremium
    6:13
  • Final AdjustmentPremium
    1:00
  • The Next StepsPremium
    0:52
  • Creating the Basic Modal ComponentPremium
    6:33
  • Adding the Modal ContainerPremium
    2:29
  • Styling the Modal ElementsPremium
    5:35
  • Adding Some General App LogicPremium
    3:49
  • Opening the Modal via CSSPremium
    5:23
  • Public Methods & PropertiesPremium
    6:37
  • Understanding Named SlotsPremium
    5:45
  • Listening to Slot Content ChangesPremium
    5:10
  • Closing the ModalPremium
    6:57
  • Dispatching Custom EventsPremium
    3:40
  • Configuring Custom EventsPremium
    4:52
  • Finishing it up!Premium
    4:50
  • Useful Resources & LinksPremium
    1:00

Section 36Roundup & Next Steps

  • Congratulations!Premium
    6:09

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.