Frontend Roadmap
What this is
A hand-picked set of 1200+ free resources for learning frontend development, organised by topic and sorted roughly by the order you’d meet them. Every entry is something a working developer would actually recommend — no paywalls, no signup walls, no link-farm blogs. It’s for self-taught learners, bootcamp graduates filling gaps, and anyone who wants a shortlist instead of a search results page.
It is not a tutorial — it points at material, it doesn’t teach. It is not exhaustive — plenty of good resources are deliberately left out to keep the list short enough to use. And it is not a job guarantee; it’s a map, you still have to walk it.
[!TIP] Start here. If you want a path, follow ROADMAP.md — five ordered stages with prerequisites, projects to build, self-assessment checklists, and time estimates. If you want a reference, jump straight to the topic file you need from the Contents table below.
Contents
| Topic | What’s inside | Level |
|---|---|---|
| 🧱 Foundations | ||
| HTML | Semantics, forms, modern elements, and metadata, plus validators and practice. | Beginner |
| CSS | The cascade, layout, responsive type and colour, animation, plus layout games and generators. | Beginner → Intermediate |
| JavaScript | Courses and books, then modern syntax, async, modules, debugging, and playgrounds. | Beginner → Advanced |
| 🔤 Language & types | ||
| TypeScript | Handbooks to get started, then the type system, project setup, and typing React. | Intermediate |
| ⚛️ Frameworks | ||
| React | Core concepts, hooks, React 19 and Server Components, plus routing, state, and data fetching. | Intermediate |
| Other frameworks & meta-frameworks | How to choose one, rendering strategies, and the Vue, Svelte, Angular, Solid, and Astro ecosystems. | Intermediate |
| 🛠 Craft | ||
| Accessibility | WCAG, semantics, keyboard and focus, screen readers, contrast, and automated audits. | All levels |
| Performance | Core Web Vitals, field versus lab data, loading and runtime cost, and profiling tools. | Intermediate → Advanced |
| Security | The origin model, XSS, CSP, CORS, auth and sessions, headers, and supply chain. | Intermediate → Advanced |
| Testing | Unit, component, and end-to-end testing, mocking, visual regression, and CI. | Intermediate |
| Browser APIs | The DOM, observers, storage, networking, workers, service workers, and feature detection. | Intermediate → Advanced |
| ⚙️ Tooling | ||
| Git | Git’s model, everyday workflow, branching, code review, and fixing mistakes. | Beginner |
| Build tooling | Package managers, bundlers, linters, type checking, monorepos, and dependency health. | Intermediate |
| Deployment | Static and serverless hosting, domains and TLS, CI/CD, caching, and monitoring. | Beginner → Intermediate |
| 🎨 Design & UI | ||
| Design | Colour and type, icons, illustrations, image tools, Figma resources, and AI-assisted design. | All levels |
| UI Frameworks | Design systems, utility-first CSS, headless primitives, and component libraries. | Intermediate |
| 📺 Beyond code | ||
| Learning | Curricula, docs, channels, courses, books, and communities. | All levels |
| AI Tools | Coding assistants, the habits that make them useful, their failure modes, and building AI features. | All levels |
| Practice & Getting Hired | Fifteen project briefs with acceptance criteria, interview prep, and where roles are posted. | All levels |
How to use this
- Go in order, once. Foundations before frameworks. React on shaky JavaScript is the single most common way to get stuck, and no amount of tutorials fixes it.
- Pick one resource per section, not all of them. Each file lists several options because people learn differently — they’re alternatives, not a checklist.
- Build something between topics. A section is done when you’ve shipped something using it, not when you’ve read it.
Contributing
Found a dead link, or know a resource that belongs here? Open a PR or an issue — small, single-link PRs are merged fastest.
Read CONTRIBUTING.md for what qualifies and docs/STYLE.md for the entry format before you open one. All participation is covered by the Code of Conduct.
License
CC BY 4.0 © 2021–2026 Shuhratbek Qobulov