Learn frontend from HTML to Next.js — free, with interactive exercises

Short lessons on HTML, CSS, JavaScript, TypeScript, React and Next.js. After every lesson you write code right on the page and instantly see what passes and what doesn’t. Free, no account needed.

Start with step one or pick a topic

102 lessons · 205 exercises · 80 glossary terms · no account

JavaScript · Functions and closures#2Counter with a closureSolved ✓

function createCounter(start = 0) {
  let n = start
  return () => ++n
}

CheckReset⌘ Enter

✓starts from start + 1
✓remembers the state
✓counters are independent

Why learn here

Theory without fluff
Every lesson: what it is, which types exist, how they differ and when to use each. Then common mistakes and a summary.
Instant feedback
Write code on the page and press ⌘ Enter. Tests show right away what works and what doesn’t. The solution is there when you’re stuck.
No account
Your progress and code are saved automatically. Come back and continue where you left off.
Terms explained inline
Hit “hoisting” or “closure”? Hover for a definition, click for the full lesson.
Official sources
Every lesson links to MDN, react.dev, nextjs.org and tailwindcss.com — not to five-year-old blog posts.
A complete, current path
From how the web works to Next.js 16, Tailwind 4 and architecture, in the order you actually need it.

The path

17 steps, in the order you actually need them. Jump straight to any topic.

Web

How the web works: client and server, HTTP, browser rendering, performance, storage and security.

7 lessons · 15 exercises

HTML

Structure, semantics, forms, images and accessibility — the foundation of every page.

4 lessons · 8 exercises

CSS

Cascade, box model, flexbox, grid, positioning, responsive design, animations and modern CSS.

8 lessons · 16 exercises

JavaScript

The complete language: types, functions, objects, async, modules, DOM.

17 lessons · 34 exercises

TypeScript

Types, objects, union types, generics, utility types and TS in React.

6 lessons · 12 exercises

Git

Commits, branches, merge vs rebase, pull requests and Conventional Commits.

3 lessons · 6 exercises

Tooling

npm and package.json, bundlers, ESLint and Prettier, debugging with DevTools.

4 lessons · 8 exercises

React

Components, state, effects, custom hooks, Context, performance and server state.

7 lessons · 14 exercises

State management

Kinds of state, Context, Zustand, Redux Toolkit, RTK Query and the alternatives.

4 lessons · 8 exercises

Next.js

App Router, Server Components, data, caching, Server Actions and deployment.

12 lessons · 24 exercises

Forms

Forms in React, React Hook Form, validation with Zod and Server Actions.

4 lessons · 8 exercises

Data and backend

REST APIs, SQL, ORMs with Drizzle and Prisma, Postgres in Next.js.

4 lessons · 8 exercises

SEO

How Google works, technical SEO, keywords, Analytics and Search Console, audits.

5 lessons · 10 exercises

Tailwind CSS

Utility-first, responsive, dark/light themes, custom typography and a UI kit with cn() and cva.

6 lessons · 12 exercises

Animations

The principles of motion, Motion for React, GSAP and ScrollTrigger, examples that impress.

4 lessons · 8 exercises

Testing

Kinds of tests, Vitest, Testing Library and Playwright.

4 lessons · 8 exercises

Architecture

Principles, Feature-Sliced Design and the alternatives, with pros and cons.

3 lessons · 6 exercises

Frequently asked questions

Is the course really free?: Yes. All lessons, exercises, the glossary and the library are free, with no account and no paywall.
Do I need to install anything?: No. You write and check code directly in the browser; your progress is saved automatically.
Who is it for?: For people who already write some code but want to really understand the fundamentals, and for motivated beginners.
What do I learn?: How the web works, HTML, CSS, JavaScript, TypeScript, Git, React, state management, Next.js, forms, backend basics, SEO, Tailwind CSS, animations, testing and architecture.

Was this page helpful?

One tap — no account needed.