What You'll Learn in This JavaScript Course

This free course takes you far enough with browser JavaScript to write production-level code. You'll work through the basics — variables, arrays — then move into conditionals, loops, functions, and object-oriented programming with classes, finishing with the DOM (the browser's structure for reading and writing HTML elements from JavaScript) and fetch for network requests. Diagrams and hands-on exercises carry you through it step by step.

This article explains where JavaScript actually runs, and what this course teaches, in what order.

Why Learn JavaScript — The Browser Runs It Directly

A button that toggles on click. Input that gets validated as you type. Product data fetched from a server and rendered as a list. Every one of these behaviors on a web page comes from JavaScript.

JavaScript is the only language a web browser can run straight from source, so if you're building anything that moves on the page, you'll be writing JavaScript.

Node.js (software that runs JavaScript outside the browser) is also everywhere now, so server-side logic and build tools can be written in the same language. Learn JavaScript once, and you can work on both the front end and the back end.

Where JavaScript Runs — Browser, Node.js, and This Site's Console

The same JavaScript behaves differently depending on where you run it. The language itself — variables, arrays, objects, functions, classes — never changes, no matter where you run it.

What changes is what that environment adds on top. The browser gives you the screen (the DOM) and a way to store data locally; Node.js lets you read and write files and run a server. Understanding this distinction makes it much easier to figure out why code isn't working.

The code example below doesn't need to make sense yet — just notice what differs across the three environments.

// Same everywhere — the language itself
const cart = [
  { name: "Mug", price: 1200 },
  { name: "Coaster", price: 400 },
];
console.log(cart.length);   // 2

// Browser only — rewriting the screen
document.querySelector("#total").textContent = "$1,600";

// Node.js only — reading a file
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));

This Site's Console Has No Screen

The exercise console runs your code in a browser environment with no screen. An element you create doesn't show up anywhere, so you check your results by reading the text you print with console.log. Dialogs like alert aren't available either. Even in the browser APIs category, you'll check that your code works by printing the contents of the elements you create as text.

What This Course Covers — 4 Categories

This course is organized into 4 categories. You'll start with values and data structure basics, move into control flow and functions, then object-oriented programming with classes, and finish with browser APIs (DOM manipulation, events, networking, storage) for working with the screen and data.

Work through them top to bottom, and each article builds on what the previous one taught. The one exception is if, used to check a condition — it shows up in its simplest form even in the basics articles that cover comparing values.

Each article follows the same flow: explanation → diagram → exercise → quiz. Exercises run right in the console on the page, so there's no editor to install and no environment to set up.

You won't just read — every article has you write and run real code as you go.

Why the Fundamentals Still Matter in the AI Era — Reading and Fixing Errors

AI writes code for you more often these days. But reading the code it produces, running it, and fixing it when it breaks are all still your job.

JavaScript lets values move around without declared types, so a value of the wrong shape won't stop execution on the spot — it fails somewhere completely different, later on. Being able to trace back to where a value went wrong is what actually separates fast debugging from slow.

When something breaks, the first thing to read is the error message. Most JavaScript errors pack the type, the situation, and the target into a single line. Read those three separately, and you can narrow the fix down to "the value one step before the line that failed."

The next example uses two terms this course explains in detail later: a property (a name-value pair an object holds), in article 8, and undefined (a value meaning nothing has been assigned yet), in article 9.

const user = { name: "Alice", age: 34 };

// user has no property called profile
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')

This course deliberately builds error scenarios into its exercises, so you practice reading the message and fixing the code yourself. Work through the 4 categories in order, and you'll reach the point where you can write the kind of JavaScript that ships in real projects, and fix it yourself when something breaks.

Next up: let and const, the two ways to declare variables — you'll write real code with both.