JavaScript: complete course
Go from syntax and browser fundamentals to DOM applications, async APIs, modules, Node.js backend concepts and full-stack projects. Every chapter ends with practical projects so you build while you learn.
1JavaScript and the runtime~10 min
What you are learning
1 JavaScript and the runtime ~10 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const title = "Orbit Code";
console.log(title);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
2Variables, types and operators~12 min
What you are learning
2 Variables, types and operators ~12 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
let score = 0;
score += 10;
console.log(typeof score, score);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
3Conditions and loops~14 min
What you are learning
3 Conditions and loops ~14 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const score = 82;
if (score >= 80) console.log("Great");
for (let i = 1; i <= 3; i++) console.log(i);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
4Functions and scope~16 min
What you are learning
4 Functions and scope ~16 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
function add(a, b) { return a + b; }
console.log(add(4, 6));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
5Arrays and modern collection methods~18 min
What you are learning
5 Arrays and modern collection methods ~18 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const courses = ["HTML", "CSS", "JavaScript"];
console.log(courses.map(c => c.length));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
6Objects and data modeling~20 min
What you are learning
6 Objects and data modeling ~20 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const course = { title: "HTML", chapters: 17, done: false };
course.done = true;
console.log(course);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
7DOM selection and manipulation~22 min
What you are learning
7 DOM selection and manipulation ~22 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
document.body.innerHTML = "<h1 id=\"title\">Old title</h1>";
document.querySelector("#title").textContent = "New title";Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
8Events and browser interaction~24 min
What you are learning
8 Events and browser interaction ~24 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
document.body.innerHTML = "<button id=\"btn\">Click</button>";
document.querySelector("#btn").addEventListener("click", () => console.log("Clicked"));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
9Errors, debugging and code quality~26 min
What you are learning
9 Errors, debugging and code quality ~26 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
try { JSON.parse("broken"); } catch (error) { console.log(error.name); }Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
10Web storage and browser APIs~28 min
What you are learning
10 Web storage and browser APIs ~28 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
11Promises and asynchronous JavaScript~30 min
What you are learning
11 Promises and asynchronous JavaScript ~30 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
Promise.resolve("Loaded").then(console.log);
console.log("Synchronous line");Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
12Fetch and HTTP APIs~32 min
What you are learning
12 Fetch and HTTP APIs ~32 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
fetch("https://jsonplaceholder.typicode.com/todos/1").then(r => r.json()).then(console.log);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
13Modules and application architecture~34 min
What you are learning
13 Modules and application architecture ~34 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const double = n => n * 2;
console.log(double(5));
// In a module, export/import this function between files.Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
14Advanced language features~36 min
What you are learning
14 Advanced language features ~36 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const user = { name: "Sam" };
const copy = { ...user, role: "student" };
console.log(copy?.name ?? "Unknown");Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
15Node.js fundamentals~38 min
What you are learning
15 Node.js fundamentals ~38 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const http = require("node:http");
const server = http.createServer((req, res) => res.end("Hello"));
server.listen(3000);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
16Backend APIs and full-stack patterns~40 min
What you are learning
16 Backend APIs and full-stack patterns ~40 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
async function handler(req, res) {
res.json({ courses: ["HTML", "CSS"] });
}Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
17Capstone: full-stack JavaScript application~42 min
What you are learning
17 Capstone: full-stack JavaScript application ~42 min is a core part of JAVASCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
async function loadCourses() {
const response = await fetch("/api/courses");
return response.json();
}
loadCourses().then(console.log);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused JAVASCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example