56 lessons

JavaScript Tutorial for Beginners

Learn JavaScript step by step with this beginner tutorial, from your first console.log to the DOM, events, async/await, fetch and Web Workers. Run every example online, read the console and change the code.

Start lesson 1 Test my level

Browse all 56 lessons by stage

Lessons
56
Live examples
166
Exercises
305
Quiz questions
220

JavaScript course at a glance

Who it's for

Beginners who know basic HTML and CSS, people learning their first programming language, and developers moving to the web.

Prerequisites

None for the first three stages. Basic HTML and CSS help from the DOM and Browser stage onwards.

What you need

A modern browser with developer tools. Every example runs on the page, with its console output shown below the code.

How long it takes

About two months at an hour a day for all five stages, with the core language covered in the first four weeks.

JavaScript roadmap: beginner to advanced

Work through the core stages in order, because each one builds on the last, then choose the optional tracks that match your goals. Every lesson has worked examples, exercises and a quiz.

1

Basics

Your first lines of code, variables, data types, operators, strings, numbers and comparisons.

  1. 1JS IntroductionWhat JavaScript does, where it runs, and your first lines of code.
  2. 2Where to Put JSThe script tag, external files, and why defer matters.
  3. 3Output & ConsoleShow results with console.log, console.table, warnings and the page itself.
  4. 4Variables (let, const)Store values in named boxes with let and const.
  5. 5Data TypesStrings, numbers, booleans, null, undefined, objects and arrays, plus typeof.
  6. 6OperatorsMaths, assignment shortcuts, comparisons and logic with &&, || and !.
Show all 11 lessonsShow fewer
  1. 7Strings & Template LiteralsText in quotes, joining strings, template literals and special characters.
  2. 8String MethodsSearch, cut, change case, split and clean up text.
  3. 9Numbers & MathRounding, random numbers, converting strings and the weird 0.1 + 0.2.
  4. 10Booleans & Comparisonstrue and false, === vs ==, and the values JavaScript treats as false.
  5. 11Logical OperatorsCombine conditions with &&, || and !, write short if/else with the ternary operator, and handle missing values safely with ?? and optional chaining.
2

Logic & Functions

Decisions, loops, functions, scope, hoisting, callbacks and recursion, one small step at a time.

  1. 12if / elseMake your code decide what to do with if, else if and else.
  2. 13switchCompare one value against many options cleanly with switch.
  3. 14for LoopsRepeat code a set number of times or once for every item.
  4. 15while LoopsRepeat code while a condition is true, when you don't know how many times you need.
  5. 16for...of & breakLoop over arrays and strings with for...of, over object keys with for...in, and control loops with break, continue and labels.
  6. 17FunctionsPackage code into reusable, named blocks with inputs and outputs.
Show all 11 lessonsShow fewer
  1. 18Arrow FunctionsThe short => function syntax, implicit returns and callbacks.
  2. 19Scope & ClosuresWhere variables live, which code can see them, and a gentle introduction to closures.
  3. 20Hoisting & var vs letUnderstand hoisting, the temporal dead zone, why let and const replaced var, how function declarations and expressions differ, and what "use strict" changes.
  4. 21CallbacksPass functions to other functions, return functions from functions, and understand callbacks, closures and why they power events, timers and array methods.
  5. 22RecursionWrite functions that call themselves: base cases, recursive cases, the call stack, walking nested data and trees, and when a loop is the better choice.
3

Data Structures

Arrays, array methods, sorting, objects, this, destructuring, Sets, Maps, dates and regex.

  1. 23ArraysOrdered lists of values: create, read, add, remove and search.
  2. 24Array Methods (map, filter…)Transform, filter, search, sort and total arrays in one readable line.
  3. 25Sort & Search ArraysSort numbers, strings and objects correctly with compare functions, sort without changing the original, and search arrays with find, findIndex, includes, some and every.
  4. 26ObjectsGroup related data with key and value pairs, methods and nested objects.
  5. 27Object MethodsWork with objects using Object.keys, values, entries, assign and freeze, add getters and setters, and copy objects safely with spread and structuredClone.
  6. 28this & bind()Learn what this refers to in methods, plain functions, arrow functions, event handlers and classes, and control it with call, apply and bind.
Show all 10 lessonsShow fewer
  1. 29Destructuring & SpreadUnpack values into variables, and copy or merge arrays and objects with ...
  2. 30Sets & MapsStore unique values with Set, key-value pairs with any type of key with Map, remove duplicates, count things, and know when to use them instead of arrays and objects.
  3. 31Dates & IntlCreate and read dates with the Date object, add days, compare and measure time, and format dates, numbers and currencies for any country with Intl.
  4. 32Regular ExpressionsSearch, validate and replace text with regular expressions: patterns, character classes, quantifiers, groups, flags, test, match and replace.
4

DOM & Browser

Elements, events and delegation, forms, timers, storage, JSON, browser APIs and the canvas.

  1. 33DOM: Selecting ElementsFind elements on the page with querySelector, querySelectorAll and friends.
  2. 34DOM: Changing ElementsChange text, styles, classes and attributes, and create or remove elements.
  3. 35Create & Remove ElementsBuild page content from data with createElement, append, prepend and template elements, remove and replace elements, and move around the DOM tree with parent, children and siblings.
  4. 36EventsReact to clicks, typing, form submits and key presses.
  5. 37Event DelegationUnderstand how events travel through the DOM, use event.target and currentTarget, stop propagation when needed, and handle many elements with one delegated listener.
  6. 38Forms & ValidationRead form values, handle submit, validate input with the Constraint Validation API and custom checks, show helpful errors, and send data with FormData.
Show all 13 lessonsShow fewer
  1. 39Timers (setTimeout)Run code later or repeatedly with setTimeout and setInterval.
  2. 40Debounce & ThrottleControl how often code runs during fast events like typing, scrolling and resizing with debounce and throttle, and write your own reusable versions.
  3. 41localStorageRemember data between visits with localStorage and sessionStorage.
  4. 42JSONThe text format for sending and saving data, with stringify and parse.
  5. 43Window & Browser APIsUse the window object, read and change the URL with location and URLSearchParams, update history without reloading, and detect elements entering the screen with IntersectionObserver.
  6. 44Responsive JavaScriptMake scripts adapt to screen size, orientation, touch input and user preferences with matchMedia, the resize event, ResizeObserver and pointer media queries.
  7. 45Canvas & AnimationDraw shapes, text and images on an HTML canvas with JavaScript, animate them smoothly with requestAnimationFrame, and handle mouse input and sharp drawing on high-density screens.
5

Advanced

Errors and debugging, Promises, async/await, the event loop, fetch, classes, modules and workers.

  1. 46Errors (try/catch)Read error messages, handle failures with try/catch and throw your own errors.
  2. 47DebuggingFind and fix bugs faster: read error messages, use console methods beyond log, set breakpoints, step through code, watch variables and inspect network requests in DevTools.
  3. 48PromisesHandle results that arrive later with then, catch and Promise.all.
  4. 49async / awaitWait for promises in a readable, top-to-bottom style with try/catch.
  5. 50Event LoopUnderstand how single-threaded JavaScript handles timers, events and promises: the call stack, task queue, microtask queue and rendering, with output-order puzzles.
  6. 51Fetch APILoad and send data over the network with fetch and async/await.
Show all 11 lessonsShow fewer
  1. 52ClassesBlueprints for objects: constructors, methods, inheritance and private fields.
  2. 53PrototypesSee how objects share methods through prototypes, follow the prototype chain, use Object.create, and understand what classes do behind the scenes.
  3. 54Iterators & GeneratorsLearn how for...of really works, make your own objects iterable with Symbol.iterator, write generator functions with yield, and use symbols as unique keys.
  4. 55Modules (import/export)Split code into files with export and import.
  5. 56Web WorkersRun heavy JavaScript on a background thread with Web Workers, send messages with postMessage, and meet related APIs: AbortController, BroadcastChannel and service workers.

What is JavaScript?

JavaScript is the programming language of the web. HTML builds the page, CSS styles it, and JavaScript makes it do things: respond to clicks, check forms, show and hide menus, load new data without refreshing, and run complete apps such as email clients, maps and online games.

It's also the only programming language every browser understands, and with tools like Node.js it runs on servers, phones and desktops too. That makes it one of the most useful languages you can learn.

This tutorial is split into five stages. You'll start with values, variables and decisions, move on to functions and data, then use JavaScript to change real web pages, and finish with asynchronous code that loads data from the internet. Each lesson explains the idea in plain English, shows examples you can run and edit, and ends with exercises and a quiz.

You'll get the most out of this course if you know the basics of HTML and CSS, but the first two stages only use the console.

A short history of JavaScript

In 1995 the web was mostly static. Netscape, maker of the most popular browser at the time, wanted a lightweight scripting language that designers could add directly to pages. They hired Brendan Eich, who wrote the first version in about ten days in May 1995. It was first called Mocha, then LiveScript, and was renamed JavaScript when it shipped in Netscape Navigator later that year. The name was partly a marketing decision linked to the popularity of Java, but the two languages are very different.

To stop the language splitting into incompatible versions, Netscape handed it to the standards body Ecma International. The first edition of the ECMAScript standard was published in 1997, and ECMAScript is still the official name of the language specification. Edition 3 followed in 1999. A very ambitious fourth edition was abandoned, and ES5 arrived in 2009 with strict mode, JSON support and new array methods.

Two moments changed JavaScript's reputation. In 2005, the term AJAX described a new style of web app that loaded data in the background, showing what the language could do. In 2009, Node.js let JavaScript run on servers. Then ES2015, often called ES6, transformed the language with let and const, arrow functions, classes, modules, template literals and promises. Since then a new edition has been released every year, bringing features such as async and await, optional chaining and many new array methods. This course teaches modern JavaScript from the start.

How the course is organised

The 56 lessons are split into five stages. Basics (11 lessons) covers values, variables, data types, operators, strings, numbers and comparisons. Logic and Functions (11 lessons) teaches decisions, loops, functions, scope, callbacks and recursion. Data Structures (10 lessons) works with arrays, objects, Sets, Maps, dates and regular expressions. DOM and Browser (13 lessons) uses everything so far to change real pages, handle events, validate forms and store data. Advanced (11 lessons) covers errors and debugging, promises, async and await, the event loop, fetch, classes, modules and Web Workers.

The first three stages run in the console, so you can focus on the language itself before working with web pages.

How to follow this course

Run every example, then predict what a small change will do before you run it again. Change a number, rename a variable, remove a line. Predicting output is the single most useful habit when learning to program, because it forces you to read code the way the computer does.

Errors are part of the process. When something goes wrong, read the error message in the console carefully: it tells you what went wrong and usually on which line. The debugging lesson in the Advanced stage shows how to step through code with your browser's developer tools, but you'll benefit from reading error messages from the very first lesson.

Build as you learn. After the DOM stage, try small projects such as a tip calculator, a to-do list or a colour palette generator. The guided projects give you clear requirements and a full solution to compare with your own.

Where JavaScript is used

JavaScript started in the browser, and that is still where it does most of its work: menus, forms, maps, video players, chat windows and complete web applications. It now also runs web servers and APIs with Node.js, desktop apps built with Electron, mobile apps through frameworks such as React Native, browser extensions and even small devices. Popular frameworks like React, Vue, Angular and Svelte are all written in JavaScript, and they are much easier to learn once the fundamentals in this course feel familiar.

What you will learn

10 practical skills, built one lesson at a time

  • Write and run JavaScript and read the console like a developer
  • Store data in variables, strings, numbers, arrays and objects
  • Make decisions with if/else, switch and logical operators, and control loops with break and continue
  • Write reusable functions and understand scope, hoisting, callbacks, closures, recursion and this
  • Transform, sort and search data with array methods, Sets, Maps, dates and regular expressions
  • Create, change and remove page elements, handle events with delegation, and validate forms
  • Save data in localStorage and work with JSON
  • Handle errors, debug with DevTools, and work with Promises, async/await, fetch and the event loop
  • Build responsive, fast pages with matchMedia, debounce, canvas animation and Web Workers
  • Organise code with classes and modules
56 lessons166 examples305 exercises

Practise JavaScript your way

Learning sticks when you use it. Pick a mode.

JavaScript Exercises

Fill in blanks, predict output and fix broken code with instant feedback.

305 exercises

JavaScript Quiz

5, 10 or 20 questions with a timer and explanations after every answer.

220 questions

JavaScript Cheat Sheet

Every important piece of syntax on one printable page.

Open cheat sheet

Code Playground

A full HTML, CSS and JavaScript editor with live preview and console.

Open playground

Build projects with JavaScript

Real mini-projects with starter code, steps and a full solution.

Beginner1 hour

Tip Calculator

Split a bill between friends with live tip buttons. Your first real interactive app.

HTMLCSSJavaScript
Intermediate2 hours

To-Do List App

Add, complete, delete and filter tasks, saved in the browser so they survive a refresh.

HTMLCSSJavaScript
Beginner45 min

Digital Clock & Greeting

A live clock with date, a 12/24-hour toggle and a greeting that changes with the time of day.

HTMLCSSJavaScript
Intermediate1.5 hours

Colour Palette Generator

Generate random harmonious palettes, lock favourites, copy HEX codes and press Space for new colours.

HTMLCSSJavaScript

JavaScript FAQ

How long does it take to learn JavaScript?

Most beginners get comfortable with the basics in four to eight weeks of regular practice, at about an hour a day. Building interactive projects is what turns knowledge into skill, so try our projects after the DOM stage.

Is JavaScript the same as Java?

No. Despite the name, they're completely different languages. The similar name was a marketing decision made in 1995.

Do I need to know HTML and CSS first?

Not for the first two stages, which only use the console. From the DOM stage onwards, basic HTML and CSS make everything much easier.

Should I learn JavaScript or Python first?

For building websites and anything interactive in the browser, learn JavaScript. Both are excellent first languages, and the core ideas, such as variables, loops and functions, transfer directly from one to the other.

What should I learn after JavaScript?

Popular next steps are a framework such as React, TypeScript (JavaScript with types), Git for version control, and Node.js for server-side code. A few small projects of your own are the best preparation for all of them.

What is ECMAScript?

ECMAScript is the official name of the standard that defines the JavaScript language. Browsers and Node.js implement that standard. Names like ES6 or ES2015 refer to editions of it, and a new edition is published every year.

Do I need to learn a framework like React?

Not at first. Frameworks are built on JavaScript, so they are much easier to learn once you understand functions, arrays, objects, the DOM, events and async code. Finish this course, build a few projects in plain JavaScript, then pick a framework when you have a reason to use one.

Is JavaScript hard for beginners?

The basics are approachable, and you can see results in the browser straight away. Some ideas, such as asynchronous code and this, take longer to understand. The course introduces them gradually, with runnable examples and common mistakes for each one.

Can JavaScript run outside the browser?

Yes. Node.js runs JavaScript on servers and computers, so you can build APIs, command-line tools and scripts with the same language. The Node.js course builds directly on what you learn here.

What is the difference between let, const and var?

Use const for values that won't be reassigned and let for values that will. Both are limited to the block they are declared in. var is the older keyword with function scope and confusing hoisting behaviour, so modern code avoids it. The variables lesson explains each one with examples.

More tutorials

HTML

The skeleton of every web page. Start here.

44 lessons235 exercises182 quiz questions Start HTML

CSS

Colours, fonts, spacing and layouts that make pages beautiful.

49 lessons277 exercises198 quiz questions Start CSS

Python

A friendly first programming language for scripts, data and automation.

107 lessons289 exercises289 quiz questions Start Python

Java

A reliable, widely used language for apps, Android and big systems.

127 lessons329 exercises333 quiz questions Start Java

Kotlin

The modern language for Android apps, servers and multiplatform code.

43 lessons143 exercises161 quiz questions Start Kotlin

Swift

Apple's fast, safe language for iPhone, iPad, Mac and SwiftUI apps.

43 lessons143 exercises161 quiz questions Start Swift

See all 15 tutorials

Esc
↑↓ to navigateEnter to open