Imagine two people learning to code. The first jumps between random tutorials — a video here, a blog post there — and after three months has a folder full of half-finished experiments and a nagging feeling they still can't build anything real. The second follows one ordered path, builds a project at the end of each milestone, and after three months has four working apps on their GitHub and the confidence to talk about them in an interview.
The difference isn't talent. It's having a map. This lesson is that map. By the end of it you'll know exactly where we're going and why each stop matters — so you never have to wonder "what should I learn next?" The answer will always be: the next lesson.
The path: JavaScript first, then TypeScript
This course is built in a deliberate order. You'll learn JavaScript — the language that runs in every web browser on Earth — until you can build interactive apps with it. Then you'll learn TypeScript, which is JavaScript plus a safety layer that catches whole categories of bugs before your code ever runs.
Why this order? Because TypeScript is JavaScript with types added on top. Every TypeScript file is built on JavaScript rules. Trying to learn TypeScript without solid JavaScript is like learning to edit essays before you can write sentences — you'd be polishing something that isn't there yet. So we build the language first, then add the safety net.
What you'll learn
Across twelve sections you'll go from the absolute basics to skills companies hire for. In plain terms, you'll be able to:
- Write modern JavaScript — variables, functions, loops, objects, and the tricky-but-important bits like closures and
this. - Make web pages interactive by manipulating the DOM and responding to clicks, typing, and form submissions.
- Work with data from the internet using
fetch, promises, andasync/await— without getting lost. - Set up a professional toolchain: npm, Vite, ESLint, Prettier, Git, and automated tests.
- Add types with TypeScript so your editor catches mistakes as you type, not after users hit them.
- Build, type, test, and deploy a complete application to the live web.
You don't need to memorize any of this list. The goal of every lesson is to make you able to do the thing, looking up details as needed — exactly how working developers operate. Nobody keeps the whole language in their head.
The four projects you'll build
This is a build-first course. Reading about code is like reading about swimming — useful, but you only really learn in the water. So you'll ship four projects, each one proving a concrete skill:
- 📝 To-Do App — your first interactive app, using the DOM, events, and browser storage.
- 🌦️ Weather App — fetches live data from a real API, with loading and error states.
- ✅ Task Manager — your first fully typed app, built with Vite and TypeScript.
- 💰 Expense Tracker (capstone) — a complete, tested, type-safe app that you deploy to the web.
By the end, these four projects become your portfolio — concrete proof you can build real things, which is exactly what an employer wants to see.
A finished project on your GitHub is worth more than a hundred half-watched tutorials. Treat each project as the real milestone of its section — that's where the learning locks in.
How the course flows
Every teaching lesson follows the same simple rhythm, so you always know what to expect:
- In one line — the promise of the lesson, right under the title.
- Learning objectives — the concrete things you'll be able to do.
- Teaching — one idea at a time, with diagrams for the tricky parts.
- Examples — real, runnable code you can type and tweak.
- A hands-on exercise — a small task to make the idea stick.
- A summary and a quick quiz — to check yourself before moving on.
The sidebar on the left tracks your progress, and the "Mark complete" button at the bottom of each lesson fills your progress bar. Watching it grow is a surprisingly good motivator — and it's all saved right in your browser, no account needed.
Why are you learning this? A new career, a specific app you want to build, a class, pure curiosity? Name your reason now and keep it somewhere visible. On the days motivation dips, that "why" is what keeps you going.
Write down a one-sentence commitment in this shape: "I will spend [amount of time] on [which days] working through this course, because [your reason]." Keep it short and realistic — consistency beats intensity. Write yours before peeking at the example.
Show an example
"I will spend 45 minutes every weekday morning working through this course, because I want to build my own web apps and switch into a developer role within a year."
Notice what makes it work: a specific time (45 minutes), a specific cadence (every weekday morning), and a real reason. A plan you can actually keep beats an ambitious one you'll abandon by week two.
Further reading
- MDN JavaScript docs — the reference you'll return to throughout the course.
- This course follows one ordered path: JavaScript first, then TypeScript, because TypeScript is built on JavaScript.
- You'll build four projects — To-Do, Weather, Task Manager, and a deployed Expense Tracker capstone — that become your portfolio.
- Every lesson follows the same rhythm: objectives → teaching → examples → exercise → summary → quiz.
- Progress is saved in your browser. Go in order, do the exercises, and consistency beats intensity.