Learning Path

The fastest route from no technical experience to a full-stack, frontend or backend engineering role. It interleaves what the job needs with what the interview needs, in the order to learn them.

Roadmap 4 of 6

JavaScript Frontend

This roadmap introduces JavaScript, the language of the web, and teaches you to wield it to build frontend applications. Many software engineering roles prefer someone who can contribute across the full stack, so strong web development skills make you more valuable to the market and open many doors.

Stage 1
JavaScript in the browser engine
What better way to begin your JavaScript journey than with the engine it was made for: your browser.
Start here
How does the internet work?
link
What is HTML?
link
Set up your dev environment
link
Your first JavaScript program in HTML
link
Linking a JavaScript file
link
Beginner JavaScript
Pick one, depending on whether you learn best by watching or by reading.
Video
Two videos
Watch in this order
JavaScript for beginners
link
Object-oriented JavaScript
link
Reading
MDN JavaScript guide
Read in this order
You can do this whole guide in the browser console, as “JS in the browser console” explains, but I recommend the VS Code and HTML setup from earlier in this roadmap.
What is JavaScript?
link
JS in the browser console
link
Grammar and types
link
Control flow and error handling
link
Loops and iteration
link
Functions
link
Expressions and operators
link
Numbers and strings
link
Dates and times
link
Collections
indexedkeyed
Objects
link
Classes
link
Async JavaScript
Promises and async/await
linklink
The event loop
linkvisualizer
Stage 2
Vanilla web development
It’s important to learn how web development was done before all the fancy frameworks. You don’t need to become an expert, just know the basics of how things work under the hood. These concepts still matter in the age of frameworks and AI.
Under the hood
What is the DOM?
link
HTML, CSS and an intro to DOM manipulation
link
DOM manipulation
link
Client-side vs server-side rendering
Context on the kinds of web rendering, and which one React uses, before you pick up a framework.
link
Stage 3
React basics
Start with the React docs tutorials, and do them in CodeSandbox. The React docs do a great job of explaining the framework. The tutorials use JavaScript, which is fine to get started.
Learn React
What does React accomplish?
link
Quick start
link
Tic-tac-toe tutorial
link
Thinking in React
link
Stage 4
TypeScript
Most companies use TypeScript, a typed superset of JavaScript, for web development. Its static type checking catches many errors before runtime and makes large codebases easier to refactor and maintain.
Set up
Install Node.js and npm
As the instructions say, install them with a Node version manager like nvm. You’ll use npm to install TypeScript and Node to run it as you code along.
link
Run your first TypeScript script
link
Learn TypeScript
Pick one, depending on whether you learn best by watching or by reading.
Video
One long video
Watch it start to finish
TypeScript
link
Reading
TypeScript handbook
Read in this order
Start here
link
The basics
link
Everyday types
link
Narrowing
link
Stage 5
React with TypeScript
Most companies use React with TypeScript, so that’s what the rest of this roadmap focuses on.
Get set up
Create a React app
Build a single-page app without a framework. A framework adds concepts and features of its own, so learn the basics of React without one first.
link
Scaffold it with Vite
Create a TypeScript project. Most companies prefer it over plain JavaScript.
linklink
Set up formatting in VS Code
link
React and TypeScript
React with TypeScript
link
An in-depth React and TypeScript tutorial
Follow along as you watch.
link
Redux
No need to go deep, but know what it is and how it generally works.
link

See the full roadmap free

Every step and every resource, with just the free plan.

Create a free account

Already have one? Sign in

JavaScript Frontend

Watch in this order

Read in this order

Watch it start to finish

Read in this order