Web Development
Build sites and apps that run in the browser.
From your first HTML page to full-stack apps. Front end, back end and the frameworks in between.
117 resourcesSuggest a resource
Learning path
Work through these in order. Each step builds on the last.
Step 1: HTML and CSS
Structure and style. Make layouts click with a game.
Step 3: Build real projects
Guided projects that leave you with a portfolio.
Everything in Web Development
MDN Learn Web Development
Mozilla's structured course on HTML, CSS and JavaScript, from zero.
developer.mozilla.org
Flexbox Froggy
A tiny game that teaches CSS flexbox in 24 levels.
flexboxfroggy.com
A Complete Guide to Flexbox
The visual reference for every flexbox property.
css-tricks.com
The Modern JavaScript Tutorial
A thorough, well-written JavaScript tutorial, from basics to advanced topics.
javascript.info
The Odin Project
A free full-stack curriculum where you learn by building projects.
theodinproject.com
React
The official React docs, with an interactive tutorial for thinking in components.
react.dev
Astro
The framework this website is built with. Great for content sites.
docs.astro.build
Full Stack Open
University of Helsinki's course on React, Node, GraphQL, TypeScript and testing.
fullstackopen.com
Node.js Learn
The official guides to running JavaScript on the server.
nodejs.org
web.dev Learn
Google's in-depth courses on CSS, accessibility, performance and more.
web.dev
Frontend Developer Roadmap
Everything a front-end developer can learn, in a sensible order.
roadmap.sh
Backend Developer Roadmap
The step-by-step map for servers, APIs and databases.
roadmap.sh
Can I use
Check which browsers support a web feature before you use it.
caniuse.com
MDN Web Docs
The reference for HTML, CSS, JavaScript and every Web API, maintained by Mozilla.
developer.mozilla.org
freeCodeCamp
A free, project-based curriculum with certifications in web design, JavaScript and back end.
freecodecamp.org
CS50's Web Programming with Python and JavaScript
Harvard's free course on Django, JavaScript, SQL and building real web apps.
cs50.harvard.edu
Eloquent JavaScript
A free classic book that teaches programming through JavaScript, with exercises.
eloquentjavascript.net
You Don't Know JS Yet
Kyle Simpson's free book series that digs into how JavaScript really works.
github.com
JavaScript30
Build 30 small things in 30 days with vanilla JavaScript, no frameworks.
javascript30.com
TypeScript Handbook
The official guide to TypeScript's type system, from basics to advanced types.
typescriptlang.org
Total TypeScript Tutorials
Free interactive TypeScript exercises by Matt Pocock, from beginner to wizard.
totaltypescript.com
Type Challenges
Puzzles that sharpen your understanding of TypeScript's type system.
github.com
CSS Grid Garden
A game for learning CSS grid by watering your carrot garden.
cssgridgarden.com
A Complete Guide to CSS Grid
The visual reference for every CSS grid property.
css-tricks.com
Kevin Powell
A YouTube channel that makes CSS finally make sense, with layout tips and tutorials.
youtube.com
Frontend Mentor
Build real front-end projects from professional designs and get community feedback.
frontendmentor.io
CSSBattle
Recreate target images with the smallest CSS possible, a fun way to sharpen skills.
cssbattle.dev
Web Dev Simplified
Clear YouTube tutorials on JavaScript, React, CSS and web concepts.
youtube.com
Fireship
Fast, fun videos explaining web tech, frameworks and tools in 100 seconds and more.
youtube.com
Traversy Media
Long-running YouTube channel with crash courses on nearly every web technology.
youtube.com
Net Ninja
Bite-sized YouTube playlists on JavaScript, React, Vue, Node, Firebase and more.
youtube.com
Vue.js
The official Vue guide, an approachable framework for building user interfaces.
vuejs.org
Svelte Tutorial
Svelte's interactive in-browser tutorial covering Svelte and SvelteKit.
svelte.dev
Angular
The official Angular docs and tutorials for Google's full-featured framework.
angular.dev
Next.js Learn
The official free course for building a full-stack app with Next.js and React.
nextjs.org
Next.js Docs
Reference docs for routing, data fetching and rendering in Next.js.
nextjs.org
Nuxt
Docs for Nuxt, the full-stack framework built on Vue.
nuxt.com
React Router
Docs for React Router, the routing library and framework for React apps.
reactrouter.com
Solid
A fast, reactive UI library with a JSX syntax and an interactive tutorial.
solidjs.com
Tailwind CSS
Docs for the utility-first CSS framework used across modern web projects.
tailwindcss.com
Bootstrap
The classic CSS framework for responsive layouts and ready-made components.
getbootstrap.com
shadcn/ui
Beautiful, accessible React components you copy into your project and own.
ui.shadcn.com
Express
The minimal, classic web framework for Node.js servers and APIs.
expressjs.com
Fastify
A fast, low-overhead web framework for Node.js.
fastify.dev
Django Tutorial
Django's official tutorial that walks you through building a polls app.
docs.djangoproject.com
Django Girls Tutorial
A friendly beginner tutorial that builds a blog with Python and Django.
tutorial.djangogirls.org
Flask
Docs for Flask, the lightweight Python web framework.
flask.palletsprojects.com
The Flask Mega-Tutorial
Miguel Grinberg's long-running series that builds a full Flask app step by step.
blog.miguelgrinberg.com
FastAPI
Docs and tutorial for FastAPI, a modern Python framework for building APIs.
fastapi.tiangolo.com
Spring Guides
Short official guides for building web apps and APIs with Spring Boot in Java.
spring.io
Go by Example
Learn Go through short, annotated example programs.
gobyexample.com
Let's Go
A well-loved book on building production web apps in Go.
lets-go.alexedwards.net
Laravel
Docs for Laravel, the popular PHP framework for full-stack web apps.
laravel.com
Ruby on Rails Guides
Official guides for building web apps with Ruby on Rails.
guides.rubyonrails.org
SQLBolt
Interactive lessons that teach SQL right in your browser.
sqlbolt.com
PostgreSQL Tutorial
Step-by-step PostgreSQL tutorials with practical examples.
neon.com
MongoDB University
Free official courses on MongoDB and document databases.
learn.mongodb.com
Prisma
Docs for Prisma, a type-safe ORM for Node.js and TypeScript.
prisma.io
Drizzle ORM
A lightweight TypeScript ORM that stays close to SQL.
orm.drizzle.team
Supabase
An open-source Postgres backend with auth, storage and realtime built in.
supabase.com
GraphQL
The official introduction to GraphQL queries, schemas and servers.
graphql.org
How to GraphQL
A free full-stack tutorial for learning GraphQL from basics to production.
howtographql.com
Microsoft REST API Guidelines
Microsoft's widely cited guidelines for designing clean, consistent REST APIs.
github.com
Postman
A tool for building, testing and documenting HTTP APIs.
postman.com
Public APIs
A huge list of free APIs to use in your side projects.
github.com
JSONPlaceholder
A free fake REST API for prototyping and practising fetch requests.
jsonplaceholder.typicode.com
OWASP Top Ten
The most critical web application security risks every developer should know.
owasp.org
OWASP Cheat Sheet Series
Concise, practical security guidance on auth, sessions, input validation and more.
cheatsheetseries.owasp.org
Auth.js
Open-source authentication for Next.js and other web frameworks.
authjs.dev
JWT.io
Decode, verify and learn about JSON Web Tokens.
jwt.io
Vitest
A fast unit testing framework powered by Vite.
vitest.dev
Jest
The popular JavaScript testing framework with a simple API.
jestjs.io
Playwright
End-to-end testing across Chromium, Firefox and WebKit.
playwright.dev
Testing Library
Test UI components the way users actually use them.
testing-library.com
Vite
The fast dev server and build tool behind most modern front-end projects.
vite.dev
Chrome DevTools
Official docs for debugging, profiling and inspecting pages in Chrome.
developer.chrome.com
PageSpeed Insights
Measure your site's performance and Core Web Vitals and get fixes.
pagespeed.web.dev
The A11Y Project
A community-driven checklist and guides for making accessible websites.
a11yproject.com
WAI Web Accessibility Tutorials
W3C's tutorials on accessible page structure, menus, images, tables and forms.
w3.org
Vercel
Deploy front-end and full-stack apps from a Git repo in minutes.
vercel.com
Netlify
Host static sites and serverless functions with free Git-based deploys.
docs.netlify.com
GitHub Pages
Free hosting for static websites straight from a GitHub repo.
pages.github.com
Cloudflare Pages
Free, fast static and full-stack hosting on Cloudflare's network.
cloudflare.com
Full-Stack Developer Roadmap
A step-by-step map for becoming a full-stack developer.
roadmap.sh
JavaScript Roadmap
Every JavaScript concept to learn, laid out in order.
roadmap.sh
React Roadmap
What to learn in the React ecosystem, step by step.
roadmap.sh
App Ideas
A collection of project ideas sorted by difficulty to build your portfolio.
github.com
Awesome Lists
The original awesome list, linking curated lists for nearly every web topic.
github.com
Build Your Own X
Tutorials for rebuilding technologies from scratch, from web servers to frameworks.
github.com
Patterns.dev
Free book on design, rendering and performance patterns for modern web apps.
patterns.dev
Web Almanac
HTTP Archive's yearly report on the state of the web.
almanac.httparchive.org
JavaScript Weekly
A popular weekly newsletter rounding up JavaScript news and articles.
javascriptweekly.com
Syntax
A long-running podcast on web development by Wes Bos and Scott Tolinski.
syntax.fm
dev.to
A large community of developers writing about web dev and more.
dev.to
Reactiflux
A big Discord community for React and JavaScript developers.
reactiflux.com
Exercism JavaScript Track
Free JavaScript exercises with optional human mentoring.
exercism.org
HTTP Cats
A fun visual reference for every HTTP status code.
http.cat
HTTP Overview
MDN's guide to how HTTP requests, responses and headers work.
developer.mozilla.org
Josh W. Comeau's Blog
Interactive, deeply explained articles on CSS, React and animation.
joshwcomeau.com
Every Layout
Robust CSS layout primitives explained from first principles.
every-layout.dev
TanStack Query
The go-to library for fetching, caching and syncing server data in React and more.
tanstack.com
Zod
TypeScript-first schema validation for forms, APIs and config.
zod.dev
Socket.IO
Docs for realtime, bidirectional communication between browsers and servers.
socket.io
tRPC
End-to-end typesafe APIs for TypeScript without schemas or codegen.
trpc.io
Hono
A small, fast web framework that runs on Node, Bun, Deno and edge runtimes.
hono.dev
Bun
Docs for Bun, the fast all-in-one JavaScript runtime, bundler and package manager.
bun.sh
Deno
A secure JavaScript and TypeScript runtime with built-in tooling.
docs.deno.com
Regex101
Build, test and debug regular expressions with live explanations.
regex101.com
Excalidraw
A hand-drawn style whiteboard for sketching app ideas and architecture.
excalidraw.com
Web Security Academy
Free hands-on labs on XSS, SQL injection, CSRF and other web vulnerabilities.
portswigger.net
Docker Get Started
Containerize and run your web app with Docker's official guide.
docs.docker.com
Render
Deploy web services, databases and background workers with a free tier.
render.com
Lighthouse
Audit performance, accessibility, SEO and best practices from DevTools.
developer.chrome.com
State of JS
A yearly survey showing what JavaScript tools developers actually use and like.
stateofjs.com
Codecademy Learn HTML
An interactive beginner course on HTML with in-browser exercises.
codecademy.com
Scrimba
Interactive screencast courses where you edit the code inside the video.
scrimba.com
Learn X in Y Minutes
Whirlwind tours of a language's syntax on a single page.
learnxinyminutes.com
Nothing here matches those filters.