JavaScript Course

Master the language of the web — 90 lessons from first script to advanced architecture.

Free JavaScript course from beginner to advanced: variables, functions and the DOM through closures, the event loop, async/await and design patterns.

What you'll learn

• ✓ Core syntax: variables, functions, arrays and objects
• ✓ Manipulate web pages with the DOM and handle user events
• ✓ Asynchronous JavaScript: promises, async/await and the Fetch API
• ✓ Advanced concepts: closures, prototypes, classes and design patterns
• ✓ Build real projects and write clean, maintainable code

Prerequisites

None — this course starts from zero. A little familiarity with HTML and CSS helps but isn't required; you can pick up the essentials as you go. All you need is a web browser and a code editor.

Start with Lesson 1 and learn to build interactive websites step by step — at your own pace.

Lessons in this course

• Introduction to JavaScript — How JavaScript works in the browser and what you can build with it
• Variables and Data Types — var, let, const — how to store and update data in your programs
• Functions — Write reusable blocks of code that do one thing well
• Strings & String Methods — slice, split, replace, template literals and the string methods you'll use daily
• Template Literals & Tagged Templates — Interpolate and build strings with backticks, multiline text, and tag functions
• Numbers & Math — parseInt/parseFloat, toFixed, the Math object, and handling NaN
• Loops & Iteration — for, while, for…of and for…in — and break/continue
• Conditionals & Operators — if/else, switch, ternary, &&/||, plus ?? and ?. (optional chaining)
• Type Coercion (== vs ===) — == vs ===, truthy/falsy values, and avoiding coercion bugs
• Hoisting — How var and function declarations are 'lifted' — and why let/const aren't
• Scope & var/let/const (TDZ) — Block vs function scope, the temporal dead zone, and choosing let vs const
• The this Keyword — How this is determined, and call / apply / bind
• Destructuring Assignment — Pull values out of arrays and objects in one clean line
• Spread & Rest Operators — Copy, merge and gather with the ... operator
• map, filter & reduce — The three array methods every JS developer must master
• Map & Set — The ES6 key-value and unique-value collections — and when to use them
• Callbacks & Callback Hell — How callbacks work and why they led to Promises
• Iterators & Iterables — Symbol.iterator, for…of, and what makes something iterable
• Generators (function*, yield) — Pause and resume functions to produce values on demand
• Recursion & the Call Stack — When a function calls itself — and how the call stack tracks it
• Checkpoint: Core JavaScript — Review & combine the core concepts in a build challenge — then a quiz
• Checkpoint: Data & Logic — Combine strings, loops and conditionals in a build challenge — then a quiz
• DOM Manipulation — Select and change HTML elements directly from JavaScript
• Events — Respond to user clicks, keypresses, and form submissions
• Arrays and Objects — Store lists and structured data, and loop through them efficiently
• ES6+ Features — Arrow functions, destructuring, template literals, and modern JS syntax
• Async/Await — Write asynchronous code that's as readable as synchronous code
• Fetch API — Load data from external APIs and display it on your page
• Error Handling — Catch and handle errors with try/catch and graceful fallbacks
• Closures and Scope — Understand how functions remember variables from their outer scope
• Prototypes and Classes — Model real-world objects with JS classes and prototype inheritance
• Design Patterns — Apply classic patterns like Module, Observer, and Factory in JavaScript
• Performance Optimization — Profile and speed up JavaScript with proven optimisation techniques
• Deep Dive into JavaScript Execution Context & Call Stack — How JS engines execute code, create frames, and manage the call stack
• Advanced Scope, Closures & Lexical Environments — The full picture of scope chains, variable hoisting, and closure patterns
• Event Loop, Microtasks & Async Internals — How the event loop, task queue, and microtask queue work together
• Mastering Promises: Chaining, Error Flow & Patterns — Chain promises, handle errors correctly, and use Promise.all/race
• Async/Await Architecture & Best Practices — Patterns for concurrent requests, cancellation, and error recovery
• JavaScript Modules: ES6 Imports, Exports, Bundling — Split code into modules and understand how bundlers resolve imports
• Prototype Chain & Advanced OOP Patterns — Traverse the prototype chain and build mixins and composable objects
• Functional Programming in JavaScript — Write composable, predictable code with pure functions and immutability
• Higher-Order Functions & Currying — Pass, return, and partially apply functions to build powerful abstractions
• Pure Functions, Immutability & Side Effects — Write predictable code by controlling side effects and avoiding mutation
• JavaScript Memory Management & Garbage Collection — How V8 allocates and collects memory, and how to avoid leaks
• Deep Copy vs Shallow Copy & Data Structures — Clone objects safely and choose the right data structure for the job
• Advanced Array & Object Transformations — Master reduce, flat, flatMap, Object.entries, and complex transforms
• Custom Event Emitters & Observer Pattern — Build your own event system and implement the observer pattern from scratch
• Debouncing & Throttling for Performance — Limit how often event handlers fire to keep UIs fast and responsive
• DOM Reflow, Repaint & Browser Rendering Pipeline — How the browser converts HTML to pixels and how JS triggers reflows
• Virtual DOM Concepts & Efficient UI Updates — How frameworks like React use a virtual DOM to minimise real DOM changes
• Advanced Fetch API Patterns (Retry, Timeout, AbortController) — Handle timeouts, retries, and cancellation in production-grade fetch code
• Web Storage APIs (localStorage, sessionStorage, IndexedDB) — Persist data in the browser across sessions using storage APIs
• Building Custom APIs with Fetch & Async Logic — Design reusable API modules with auth, caching, and error handling built in
• Error Handling Patterns in Large JS Apps — Centralise error handling with boundaries, loggers, and fallback strategies
• Regular Expressions Advanced Techniques — Master lookaheads, named groups, and real-world regex patterns
• Working with Dates, Timezones & Intl API — Parse, format, and localise dates correctly across timezones
• JavaScript Design Patterns (Factory, Singleton, Strategy, etc.) — Apply advanced GoF patterns and architectural patterns to real JS apps
• Writing Maintainable & Scalable Code Architecture — Structure large codebases with clear boundaries, naming, and conventions
• Deep Dive into JSON, Parsing & Serialization — Parse, validate, transform, and safely serialise complex JSON data
• Client-Side Security Essentials (XSS, CSRF, Sanitisation) — Prevent the most common web security vulnerabilities in JS apps
• Working with WebSockets for Real-Time Features — Build live chat, notifications, and dashboards with WebSocket connections
• JavaScript Performance Optimization Techniques — Identify and fix slow JS with profiling, lazy loading, and code splitting
• Building Reusable UI Components with Pure JS — Create modular, accessible components without a framework
• Module Bundlers: Webpack, Parcel, Vite (Overview) — Understand how bundlers work and configure them for your project
• Intro to TypeScript & Strong Typing Concepts — Add static types to JavaScript with TypeScript and avoid runtime bugs
• Testing JavaScript with Jest & Mocha — Write unit tests, mocks, and assertions with Jest and Mocha
• Building Simple SPAs with Vanilla JavaScript — Build a single-page application with client-side routing and state
• Deploying JavaScript Apps (CDN, Minification, Bundling) — Optimise and ship JavaScript apps to production with confidence
• Optional Chaining & Nullish Coalescing — Safely access deep properties with ?. and provide defaults with ??
• Essential Array Methods — find, some, every, flat, at, and immutable toSorted/toReversed
• Object Methods (keys, entries, assign, freeze) — Iterate, copy, merge and lock objects with the built-in Object methods
• Symbols & Well-Known Symbols — Unique keys and customizing behavior with Symbol.iterator and friends
• Getters, Setters & Property Descriptors — Computed and validated properties with get/set and defineProperty
• Proxy & Reflect (Metaprogramming) — Intercept object operations with traps — the basis of modern reactivity
• BigInt & Number Precision — Work with integers beyond MAX_SAFE_INTEGER and avoid precision loss
• Checkpoint: Modern JavaScript — Combine modern syntax, methods and a Proxy in a build — then a quiz
• Promise Combinators (all, race, allSettled, any) — Coordinate multiple async operations and handle partial failures
• Async Iterators & for-await-of — Stream and paginate async data with async generators
• AbortController & Cancelling Async Work — Cancel fetches and timers cleanly with AbortController and signals
• Web Workers (Background Threads) — Run CPU-heavy work off the main thread to keep the UI responsive
• IntersectionObserver (Lazy Load & Infinite Scroll) — React to element visibility without slow scroll listeners
• MutationObserver (Watching the DOM) — Observe DOM changes — added nodes, attributes, and text
• IndexedDB (Client-Side Database) — Store large structured data in the browser with transactions and indexes
• The Canvas API — Draw shapes, paths, text and animations on a 2D canvas
• Checkpoint: Browser APIs — Combine promises, async iterators and a cache in a build — then a quiz
• Final Project Ideas — Guided project ideas to consolidate everything you've learned
• Web Components & Custom Elements — Build reusable, framework-agnostic elements with Custom Elements and Shadow DOM
• Service Workers & PWAs — Cache assets, work offline, and make installable progressive web apps
• WebAssembly & JS Interop — Run near-native compiled code and call between WebAssembly and JavaScript
• Advanced State Management — Stores, observers, immutable updates and reducers without a framework

Frequently asked questions

Should I learn JavaScript as my first language?

JavaScript is an excellent first language for anyone interested in web development. It runs in every browser with no setup, gives instant visual feedback, and is the only language that runs natively on the front end of the web — so the skills transfer directly to building real websites and apps.

How long does it take to learn JavaScript?

Core JavaScript (variables, functions, arrays, objects, the DOM) takes about 1–2 months of regular practice. Becoming comfortable with asynchronous code, closures and a framework like React usually takes 4–9 months of building projects.

What is the difference between JavaScript and Java?

Despite the similar name, they are unrelated languages. JavaScript runs in browsers and Node.js and is dynamically typed; Java is a statically typed, compiled language used mainly for enterprise backends and Android. The naming was a 1990s marketing decision.

What can you build with JavaScript?

Interactive websites, single-page apps (React, Vue), server backends (Node.js), mobile apps (React Native), browser games, and desktop apps (Electron). It is the most widely used programming language in the world.

Do I need to know HTML and CSS before JavaScript?

A basic understanding of HTML and CSS helps, since JavaScript manipulates the page they create. You don't need to be an expert first — a few hours of HTML/CSS basics is enough to start learning JavaScript productively.

More for this course

• JavaScript cheat sheet — Quick syntax reference you can scan while you code
• Async/Await in JavaScript Explained — Master asynchronous JavaScript with async/await and handle promises like a pro.
• Array Methods in JavaScript You Must Know — Comprehensive guide to JavaScript array methods like map, filter, and reduce.
• Understanding the DOM in JavaScript — Master DOM manipulation in JavaScript. Learn element selection, event handling, content modification, performance optimization, and build dynamic interactive websites.
• Understanding JavaScript Closures — Master one of JavaScript's most powerful and misunderstood features with practical examples.