Front-end tutorials
Web Development Tutorials
JavaScript, jQuery, TypeScript and React, in the order they build on each other. Around 92 tutorials, each one a worked example rather than a summary of the documentation.
- 4 technologies
- 92 tutorials
- 70 on React alone
1type Props = { name: string }; 2 3export function Greeting({ name }: Props) { 4 return <h1>Hello, {name}!</h1>; 5}
The shape of it
What Front-End Development Actually Is
Everything a person sees and clicks in a browser is built from three things, and every technology on this page is a layer on top of them.
HTML, CSS, JavaScript
HTML is the structure, CSS is the appearance, and JavaScript is the behaviour. A browser understands those three and nothing else. Every framework ever written, React included, eventually produces HTML and CSS and runs as JavaScript.
That is why the order on this page matters. TypeScript compiles to JavaScript. React is a JavaScript library. Neither replaces the thing underneath, so learning them before JavaScript means learning two unfamiliar things at once and not knowing which one is confusing you.
Front end and back end
The front end runs on the visitor’s machine, inside their browser. The back end runs on a server you control, holds the database and decides what the front end is allowed to see. They talk to each other over HTTP, usually by passing JSON back and forth.
Python lives on the back end, which is why it does not appear in the learning path above. A full-stack developer writes both halves: React in the browser, Django or Flask on the server.
The order that works
Recommended Learning Path
Front-end technologies stack on top of each other, so the order is not a matter of taste. React without JavaScript is the single most common way to get stuck.
-
1
JavaScript
Weeks 1–3The language itself. Variables, functions, arrays, objects, the DOM and events.
-
2
jQuery
Optional, 1 weekOnly if you will meet it in existing code. Skip it for anything new.
-
3
TypeScript
Weeks 4–5Types on top of the JavaScript you already write. Much easier after step 1.
-
4
React
Weeks 6–12Components, hooks, forms, data and routing. The longest stage by some way.
Three stacks
What Each One Is For
You do not need all of them on day one. Each section says what the technology does, what you will learn, and which tutorials to open first.
JavaScript & jQuery
The language every browser runs
JavaScript is the only programming language a browser runs natively, so anything that moves, validates or updates without a page reload is JavaScript underneath. jQuery is a library that made it far shorter to write back when browsers disagreed with each other. Modern JavaScript has absorbed most of what jQuery was for, but a great deal of working code still uses it, so being able to read both is worth an afternoon.
- Variables, functions, arrays and objects
- Selecting and changing elements in the DOM
- Events: clicks, input, form submission
- Fetching data and handling the response
- What jQuery does in one line that plain JS does in five
TypeScript
JavaScript that tells you when you are wrong
TypeScript is JavaScript with types added on top. You write almost the same code, declare what shape your data is, and the editor tells you about the mistake while you type instead of the browser telling you after you ship. It compiles down to ordinary JavaScript, so it runs anywhere JavaScript runs, and it has become the default for any project with more than one developer.
- Type annotations on variables and functions
- Interfaces and type aliases for object shapes
- Arrays, tuples and enums
- Union types, optional properties and generics
- Reading the compiler errors, which is most of the skill
React.js
Interfaces built out of reusable pieces
React lets you build an interface out of components: self-contained pieces that take some data and return some markup. You describe what the screen should look like for a given state, and React works out what to change in the browser. It is the most widely used front-end library, and the bulk of the tutorials on this page are about it.
- Components, props and state
- Hooks: useState, useEffect, useRef, useContext
- Handling forms and user input
- Fetching data from an API and rendering it
- Routing between pages, and testing what you built
All 70 React tutorials
Grouped by topic in the section below — components, props and state, hooks, UI components, forms, data, routing, TypeScript, component libraries and testing.
The bulk of the library
React Tutorials by Topic
70 tutorials in ten groups. Components, props and state first; the rest can be picked up as a project needs them.
-
Components
9The unit everything else is made of. A component takes data in and returns markup, and a React app is just components inside other components. Get this group straight before anything else, because every later topic assumes it.
-
Props and state
7How data gets in, and how it changes. Props come from the parent and are read-only; state belongs to the component and causes a re-render when it changes. Confusing the two is behind most early React bugs.
-
Hooks
6Functions that let a component remember and react to things. Hooks are how function components hold state, run side effects and reach shared data, and they replaced the class lifecycle methods almost entirely.
-
UI components
20Twenty things people actually get asked to build. Modals, carousels, tree views and date pickers are where most front-end time goes, and each of these is a complete worked example rather than a snippet.
-
Forms and validation
4Where most real user input goes wrong. Validation, resetting, file uploads and cancel behaviour all sound trivial and all have edge cases that only show up once real people start typing.
-
Data and APIs
3Getting information in from somewhere else. Fetching, loading states, errors and rendering the result is the pattern behind nearly every screen that shows real data.
-
Routing and navigation
4More than one screen in a single-page app. React Router handles the URL without a full page reload, including the protected routes you need once there is a login.
-
React with TypeScript
3The combination most teams settle on. Typing props and component return values catches a whole class of bug at the moment you write it rather than when a user finds it.
-
Component libraries
7When you would rather not build the date picker yourself. These libraries give you accessible, tested components so you can spend the time on the part that is specific to your product.
-
Testing, exporting and tools
8Proving it works, and getting it out of React again. Jest and Cypress for tests, plus converting components to PDF, PowerPoint or from Figma and HTML.
The other half
Where Python Fits In
Everything above runs in the browser. Python cannot — browsers execute JavaScript, so the front end is JavaScript or something that compiles to it.
Python’s place is the back end: the server that holds the database, checks the password and answers the request your React code sends. Django is the usual choice, and a full-stack developer writes both halves.
Python on the server
Common questions
Questions Before You Start
Do I need to learn JavaScript before React?
Yes, and skipping it is the most common reason React feels impossible. React is a JavaScript library, so every piece of React code is also JavaScript code. Arrow functions, destructuring,
map, spread syntax and promises all appear constantly, and if those are unfamiliar you will be learning two things at once and blaming the wrong one.Is jQuery still worth learning in 2026?
Not for new projects. Modern JavaScript does almost everything jQuery was invented for, and browsers no longer disagree the way they did. It is still worth a few hours if you maintain older code, because a great deal of the working web still runs on it and you need to be able to read it.
Should I learn TypeScript or plain JavaScript first?
JavaScript first, then TypeScript on top. TypeScript is a layer over JavaScript rather than an alternative to it, so the underlying language has to make sense before the types do. A couple of months of JavaScript is usually enough before adding it.
How long does it take to learn React?
Six to twelve weeks to be productive, assuming JavaScript is already comfortable. Components and props click quickly; state and hooks take longer, and the concept people find hardest is that you describe what the screen should look like rather than telling the browser what to change.
Can I use Python for front-end web development?
Not in the browser, no. The browser runs JavaScript, so the front end is JavaScript or something that compiles to it. Python’s place in web development is the back end, where Django or Flask serve the data that your React front end fetches.
Do I need to learn HTML and CSS first?
Enough of both to build a page without a framework, yes. You do not need to be a designer, but you should be able to write semantic HTML and lay something out with flexbox or grid before starting JavaScript. A week on each is usually plenty, and it makes everything afterwards less mysterious.
What is the difference between React and Next.js?
React is the library for building the interface. Next.js is a framework built on top of React that adds routing, server rendering and a build setup out of the box. Learn React first, because everything Next.js does to a component is still React underneath.
Which React component library should I use?
MUI if you want a complete set and do not mind the Material look, shadcn/ui if you want to own the code, Chakra or Mantine for something in between. Any of them beats building a date picker yourself, which is the real argument for using one at all.
Start now
Pick One and Open It
The fastest way through all of this is to build something small at every stage rather than finishing the reading first.