JavaScript - The Complete Guide (Beginner + Advanced)

Module Introduction

Setting Up the Project

More on Version Control & Git

Adding JavaScript to the Website

Introducing Variables & Constants

Declaring & Defining Variables

Working with Variables & Operators

Variables & Operators

Exercise: Variables & Operators

Understanding the Starting Code

Data Types: Numbers & Strings (Text)

Using Constants

More on Strings

Data Types & Constants

Time to Practice: Variables, Constants, Operators & Core Data Types

Introducing Functions

Adding A Custom Function

Code Styles, Conventions & Syntax

Returning Values

Exercise: Functions

The (Un)Importance of Code Order

An Introduction to Global & Local Scope

"Shadowed Variables"

More about the "return" Statement

Executing Functions "Indirectly"

"Indirect" vs "Direct" Function Execution - Summary

Exercise: Executing Functions Directly & Indirectly

Functions & Scope

Time to Practice: Functions

Converting Data Types

Mixing Numbers & Strings

Splitting Code into Functions

Connecting all Buttons to Functions

Working with Code Comments

More Operators!

More Core Data Types!

Using Arrays

Exercise: Arrays

Creating Objects

Exercise: Objects

Objects - Common Syntax Gotchas

Accessing Object Data

Arrays & Objects

Adding a Re-Usable Function That Uses Objects

Undefined, null & NaN

The "typeof" Operator

"undefined", "null" & "NaN"

Importing Scripts Correctly with "defer" & "async"

Importing JavaScript - Summary

Wrap Up

Useful Resources & Links

Module Introduction

Efficient Development & Debugging - An Overview

Configuring the IDE Look & Feel

Using Shortcuts

Working with Auto-Completion & IDE Hints

Installing IDE Extensions

Tweaking Editor Settings

Utilizing Different IDE Views

Finding Help & Working with MDN

The ECMAScript Standard

How to "google" Correctly

Debugging JavaScript - An Overview

An Error Message! No Reason To Panic!

Using console.log() to look "into the Code"

Next-Level Debugging with the Chrome Devtools & Breakpoints

Testing Code Changes Directly in the Devtools

Debugging Code directly Inside VS Code

Wrap Up

Useful Resources & Links

Module Introduction

Introducing "if" Statements & Boolean (Comparison) Operators

Using Booleans in Conditions & More on Text Comparisons

Using "if" Statements

Working with "if", "else" and "else-if"

Exercise: Getting Started with if Statements

Beware When Comparing Objects & Arrays for Equality!

The Logical AND and OR Operators

Understanding Operator Precedence

If & Boolean Operators - The Basics

Beyond true/ false: "Truthy" and "Falsy" Values

Coercion vs Conversion

Falsy and Truthy Values

Setting Up a Bigger Example Project (The "Monster Killer")

Adding an "Attack" Function

Using "if" Statements for Checking the Win-Condition

Adding More "if" Statements & A "Strong Attack" Functionality

Time for a "Heal Player" Functionality!

Controlling the Conditional Bonus Life (Without Boolean Operators!)

Adding a "Reset Game" Functionality

Validating User Input

Utilizing Global Constants as Identifiers in Conditional Code

Adding a Conditional Battle Log

Introducing the Ternary Operator

A Bit of Theory: Statements vs Expressions

Logical Operator "Tricks" & Shorthands

Logical Operators - A Quick Summary

Logical Operators & How They Work

Working with the "switch-case" Statement

Introducing Loops

The "for" Loop

Exercise: for Loops

The "for-of" Loop

The "for-in" Loop

The "while" & "do-while" Loops

Loops - Basics

Time to Practice: Control Structures

Controlling Loops with "break"

Controlling Iterations with "continue"

More Control with Labeled Statements

Break & continue

Error Handling with "try-catch" - An Introduction

Throwing Custom Errors

Working with "try-catch" to Catch & Handle Errors

Exercise: Throwing & Handling Errors

Error Handling

Wrap Up

Useful Resources & Links

Module Introduction

ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScript

Var vs let & const - Introducing "Block Scope"

Understanding "Hoisting"

Strict Mode & Writing Good Code

"JavaScript Specialties"

How Code is Parsed & Compiled

Inside the JavaScript Engine - How the Code Executes

[DEEP DIVE] JavaScript Language vs Browser APIs

Primitive vs Reference Values

Garbage Collection & Memory Management

Wrap Up

Useful Resources & Links

Module Introduction

Recapping Functions Knowledge - What We Know Thus Far

Parameters vs Arguments

Functions vs Methods

Functions are Objects!

Function Expressions: Storing Functions in Variables

Function Expressions vs Function Declarations

Anonymous Functions

Working on the Project: Adding User Choices to the Game

Implementing the Core Game Logic

Introducing Arrow Functions

Different Arrow Function Syntaxes

Creating Functions

Outputting Messages to the User

Default Arguments in Functions

Introducing Rest Parameters ("Rest Operator")

Creating Functions Inside of Functions

Understanding Callback Functions

Time to Practice: Functions

Working with "bind()"

Functions - Advanced

Adding bind() to the Calculator Project

Call() and apply()

Wrap Up

Useful Resources & Links

Module Introduction

What's the "DOM"?

Document and Window Object

Understanding the DOM and how it's created

Nodes & Elements - Querying the DOM Overview

Selecting Elements in the DOM

Exercise: Selecting Elements in the DOM

Summary: Node Query Methods

Exploring and Changing DOM Properties

Attributes vs Properties

Selecting Multiple Elements & Summary

DOM Basics

Time to Practice: DOM Querying

Traversing the DOM - Overview

Traversing Child Nodes

Using parentNode & parentElement

Selecting Sibling Elements

DOM Traversal vs Query Methods

Styling DOM Elements

Creating Elements with JS - Overview

Adding Elements via HTML in Code

Adding Elements via createElement()

Exercise: Adding Elements

Inserting DOM Elements

Cloning DOM Nodes

Live Node Lists vs Static Node Lists

Removing Elements

Insertion & Removal Method Summary

Summary: Insert, Replace, Remove

Setting Up the Practice Project

Selecting the Modal and "Add" Button

Opening a Modal by Changing CSS Classes

Controlling the Backdrop

Fetching and Validating User Input

Creating a Movie in JavaScript & Clearing the Input

Rendering Movie Items on the Screen

Deleting Movie Elements

Showing & Hiding the "Are you sure?" Dialog

Starting with the Confirmation Logic

Finishing the App

Wrap Up

Useful Resources & Links

Module Introduction

What are "Iterables" and "Array-like Objects"?

Creating Arrays

Which Data Can You Store In Arrays?

Push(), pop(), unshift(), shift() - Adding & Removing Elements

The splice() Method

Selecting Ranges & Creating Copies with slice()

Adding Arrays to Arrays with concat()

Retrieving Indexes with indexOf() /& lastIndexOf()

Finding Stuff: find() and findIndex()

Is it Included?

Alternative to for Loops: The forEach() Method

Transforming Data with map()

Exercise: map()

Sort()ing and reverse()ing

Filtering Arrays with filter()

Where Arrow Functions Shine!

The Important reduce() Method

Chaining Methods in JavaScript

Arrays & Strings - split() and join()

The Spread Operator (...)

Understanding Array Destructuring

Maps & Sets - Overview

Working with Sets

Working with Maps

Maps vs Objects

Understanding WeakSet

Understanding WeakMap

Time to Practice: Arrays & Iterables

Wrap Up

Useful Resources & Links

Module Introduction

What's an Object?

Objects & Primitive Values

Objects - Recap

Adding, Modifying & Deleting Properties

Special Key Names & Square Bracket Property Access

Property Types & Property Order

Dynamic Property Access & Setting Properties Dynamically

Object Properties

Demo App & Shorthand Property Syntax

Rendering Elements based on Objects

For-in Loops & Outputting Dynamic Properties

Adding the Filter Functionality

Understanding "Chaining" (Property & Method Chaining)

The Object Spread Operator (...)

Understanding Object.assign()

Object Destructuring

Checking for Property Existance

Introducing "this"

The Method Shorthand Syntax

The "this" Keyword And Its Strange Behavior

Call() and apply()

What the Browser (Sometimes) Does to "this"

"this" and Arrow Functions

"this" - Summary

"this"

Getters & Setters

Wrap Up

Useful Resources & Links

Module Introduction

What is "Object-oriented Programming" (OOP)?

Getting Started with OOP Code

Defining & Using a First Class

Working with Constructor Methods

Fields vs Properties

Using & "Connecting" Multiple Classes

Binding Class Methods & Working with "this"

Adding a Cart and Shop Class

Communicating Can Be Challenging!

Static Methods & Properties

First Summary & Classes vs Object Literals

Getters & Setters

Introducing Inheritance

Implementing Inheritance

Using Inheritance Everywhere

Overriding Methods and the super() Constructor

Super() Constructor Execution, Order & "this"

Different Ways of Adding Methods

Private Properties

"Pseudo-Private" Properties

Time to Practice: Classes & OOP

The "instanceof" Operator

Built-in Classes

Understanding Object Descriptors

Classes

Wrap Up

Useful Resources & Links

Module Introduction

Introducing Constructor Functions

Constructor Functions vs Classes & Understanding "new"

Introducing Prototypes

Prototypes - Summary

Working with Prototypes

The Prototype Chain and the Global "Object"

Constructor Functions & Prototypes

Classes & Prototypes

Methods in Classes & In Constructors

Built-in Prototypes in JavaScript

Setting & Getting Prototypes

Wrap Up

Useful Resources & Links

Module Introduction

First Project Steps & Planning

Creating Project Lists & Parsing Element Data

Starting with the "Switch Project" Logic

Passing Method References Around

Moving DOM Elements

Adding a Tooltip

Adding Inheritance

Wrap Up

Useful Resources & Links

Module Introduction

Using "dataset" (data-* Attributes)

Getting Element Box Dimensions

Working with Element Sizes & Positions

The DOM & Prototypes

Positioning the Tooltip

Handling Scrolling

Working with <template> Tags

Loading Scripts Dynamically

Setting Timers & Intervals

The "location" and "history" Objects

The "navigator" Object

Working with Dates

The "Error" Object & Constructor Function

Wrap Up

Useful Resources & Links

Module Introduction

Introduction to Events in JavaScript

Different Ways of Listening to Events

Removing Event Listeners

The "event" Object

Supported Event Types

Example: Basic Infinite Scrolling

Working with "preventDefault()"

Understanding "Capturing" & "Bubbling" Phases

Event Propagation & "stopPropagation()"

Using Event Delegation

Triggering DOM Elements Programmatically

Event Handler Functions & "this"

Events

Drag & Drop - Theory

Configuring Draggable Elements

Marking the "Drop Area"

Dropping & Moving Data + Elements

Firefox Adjustments

Wrap Up

Useful Resources & Links

Module Introduction

Pure Functions & Side-Effects

Impure vs Pure Functions

Factory Functions

Closures

Closures in Practice

Closures & Memory Management

Optional: IIFEs

Introducing "Recursion"

Advanced Recursion

Advanced Functions

Wrap Up

Useful Resources & Links

Module Introduction

How Numbers Work & Behave in JavaScript

Floating Point (Im)Precision

The BigInt Type

The Global "Number" and "Math" Objects

Example: Generate Random Number Between Min/ Max

Exploring String Methods

Tagged Templates

Introducing Regular Expressions ("RegEx")

More on Regular Expressions

Wrap Up

Useful Resources & Links

Module Introduction

Understanding Synchronous Code Execution ("Sync Code")

Understanding Asynchronous Code Execution ("Async Code")

Blocking Code & The "Event Loop"

Sync + Async Code - The Execution Order

Multiple Callbacks & setTimeout(0)

Asynchronous Code

Getting Started with Promises

Chaining Multiple Promises

Promise Error Handling

Promise States & "finally"

Async/ await

Async/ await & Error Handling

Async/ await vs "Raw Promises"

Promise.all(), Promise.race() etc.

Promises & async/ await

Wrap Up

Useful Resources & Links

Module Introduction

What & Why

How The Web Works

More Background about Http

Getting Started with Http

Sending a GET Request

JSON Data & Parsing Data

JSON Data Deep Dive

Promisifying Http Requests (with XMLHttpRequest)

Sending Data with a POST Request

Triggering Requests via the UI

The "Fetch" Button Always Appends

Sending a DELETE Request

Handling Errors

Using the fetch() API

POSTing Data with the fetch() API

Adding Request Headers

Fetch() & Error Handling

XMLHttpRequest vs fetch()

Working with FormData

Wrap Up

Useful Resources & Links

Module Introduction

What & Why

Adding Libraries (Example: lodash)

Example: jQuery

Discovering Libraries

Axios Library & Http Requests

Third-Party Library Considerations

Wrap Up

Useful Resources & Links

Module Introduction

Splitting Code in a Sub-optimal Way

A First Step Towards JavaScript Modules

We Need a Development Server!

First import / export Work

Switching All Files To Use Modules

More Named Export Syntax Variations

Working With Default Exports

Dynamic Imports & Code Splitting

When Does Module Code Execute?

Module Scope & globalThis

Modules

Wrap Up

Useful Resources & Links

Module Introduction

Project Limitations & Why We Need Tools

Workflow Overview

Setting Up a npm Project

Working with npm Packages

Linting with ESLint

Configuring ESLint

Important: Webpack Version & Configuring npm Scripts

Bundling with Webpack

Bonus: Multiple Entry Points

Development Mode & Fixing "Lazy Loading"

Using webpack-dev-server

Generating Sourcemaps

Building For Production

Final Optimizations

Using Third Party Packages with npm & Webpack

Wrap Up

Useful Resources & Links

Module Introduction

Browser Storage Options

LocalStorage & sessionStorage

Getting Started with Cookies

Working with Cookies

Getting Started with IndexedDB

Working with IndexedDB

Wrap Up

Useful Resources & Links

Module Introduction

What Is "Browser Support" About?

Determining Browser Support For A JavaScript Feature

Determining Required Support

Solution: Feature Detection + Fallback Code

Solution: Using Polyfills

Solution: Transpiling Code

Improvement: Automatically Detect + Add Polyfills

What about Support Outside of Browsers?

Browser Support Outside of JavaScript Files

Wrap Up

Useful Resources & Links

Module Introduction

Note: Use the LTS Version of NodeJS

Setting Up the Project

Getting DOM Access

Getting the User Location

Adding Feedback (Showing a Modal)

Hiding the Modal

Rendering a Map with Google Maps

Continuing without a Credit Card

Finding an Address & Getting the Coordinates

Converting User Input to Coordinates

Creating a "Share Place" Link

Copying the Link to the Clipboard

Rendering the "Shared Place" Screen

Useful Resources & Links

Module Introduction

What and Why?

The Idea Behind React.js

Analysing a React Project

Wrap Up

Useful Resources & Links

Module Introduction

Understanding Symbols

Well-known Symbols

Understanding Iterators

Generators & Iterable Objects

Generators Summary & Built-in Iterables Examples

The Reflect API

The Proxy API and a First "Trap"

Working with Proxy Traps

Wrap Up

Useful Resources & Links

Module Introduction

JavaScript is a Hosted Language

Installation & Basics

Understanding Modules & File Access

Working with Incoming Http Requests

Sending Responses (HTML Data)

Parsing Incoming Data

Introducing & Installing Express.js

Express.js: The Basics

Extracting Data

Rendering Server-side HTML with Templates & EJS

Enhancing Our Project

Adding Basic REST Routes

Understanding CORS (Cross Origin Resource Sharing)

Sending the Location ID to the Frontend

Adding the GET Location Route

Introducing MongoDB (Database)

NodeJS Error Handling

Wrap Up

Useful Resources & Links

Module Introduction

Security Hole Overview & Exposing Data in your Code

Cross-Site Scripting Attacks (XSS)

Third-Party Libraries & XSS

XSS & Exposing Confidential Details

CSRF Attacks (Cross Site Request Forgery)

CORS (Cross Origin Resource Sharing)

Wrap Up

Useful Resources & Links

Module Introduction

Deployment Steps

Different Types of Websites

Example: Static Host Deployment (no Server-side Code)

Injecting Script Imports Into HTML Automatically

Example: Dynamic Page Deployment (with Server-side Code)

Useful Resources & Links

Module Introduction

What is "Performance Optimization" About?

Optimization Potentials

Measuring Performance

Diving Into The Browser Devtools (for Performance Measuring)

Further Resources

Preparing The Testing Setup

Optimizing Startup Time & Code Usage / Coverage

Updating The DOM Correctly

Updating Lists Correctly

Optimizing The Small Things

Micro-Optimizations (Think Twice!)

Finding & Fixing Memory Leaks

Server-side Performance Optimizations

Wrap Up

Useful Resources & Links

Module Introduction

What Is Testing? Why Does It Matter?

Testing Setup

Writing & Running Unit Tests

Writing & Running Integration Tests

Writing & Running e2e Tests

Dealing with Async Code

Working with Mocks

Useful Resources & Links

Module Introduction

What are Programming Paradigms?

Procedural Programming in Practice

Object Oriented Programming in Practice

Functional Programming in Practice

Wrap Up

Useful Resources & Links

Module Introduction

What are "Data Structures" & "Algorithms"?

A First Example

Solving the Same Problem Differently

Performance & The "Big O" Notation

More Time Complexities & Comparing Algorithms

More on Big O

More Examples

Diving into Data Structures & Time Complexities

Where to Learn More & Wrap Up

Useful Resources & Links

Module Introduction

What is TypeScript and Why would you use it?

Working with Types

Core Types & Diving Deeper

Object Types, Array Types & Function Types

Advanced Types (Literal Types, Union Types, Enums)

Classes & Interfaces

Generic Types

Configuring the TypeScript Compiler

Useful Resources & Links

Module Introduction

Web Components in Action

What are Web Components?

Why Web Components?

Getting Started!

Web Component Browser Support

Our Development Setup

A First Custom Element

Interacting with the Surrounding DOM

Understanding the Custom Element Lifecycle

Using "connectedCallback" for DOM Access

Listening to Events Inside the Component

Using Attributes on Custom Elements

Styling our Elements

Working with the "Shadow DOM"

Adding an HTML Template

Using Slots

Defining the Template in JavaScript

Using Style Tags in the Shadow DOM

Extending Built-in Elements

Time to Practice - The Basics

The Next Steps

Understanding Shadow DOM Projection

Styling "slot" Content Outside of the Shadow DOM

Styling "slot" Content Inside of the Shadow DOM

Styling the Host Component

Conditional Host Styling

Styling with the Host Content in Mind

Smart Dynamic Styling with CSS Variables

Cleaning Up the Overall Styling

Observing Attribute Changes

Adjusting the Component Behavior Upon Attribute Changes

Using "disconnectedCallback"

Adding a render() Method

Final Adjustment

The Next Steps

Creating the Basic Modal Component

Adding the Modal Container

Styling the Modal Elements

Adding Some General App Logic

Opening the Modal via CSS

Public Methods & Properties

Understanding Named Slots

Listening to Slot Content Changes

Closing the Modal

Dispatching Custom Events

Configuring Custom Events

Finishing it up!

Useful Resources & Links

Course Roundup

Bonus! (Next Steps Overview / Other Topics)