Бесплатный структурированный роадмап full-stack веб-разработки: от HTML до деплоя production-приложения.
Сайт маршрута · Начать обучение · Как учиться · 22 проекта · Ресурсы · Contributing
web-roadmap — открытый учебный маршрут для тех, кто хочет стать junior full-stack разработчиком с нуля или систематизировать пробелы. Не курс с видео, а пошаговый план: теория → практика → проект недели → самопроверка.
Вдохновлено форматом roadmap.sh, React Developer Roadmap и Python-Roadmap, но сфокусировано на практике 6–7 часов в день и связном пути к full-stack.
HTML → CSS → Git → JavaScript → TypeScript → React
→ Python → SQL/PostgreSQL → FastAPI
→ Node.js/Express → Auth & Testing → Docker → Deploy
| Аудитория | Зачем |
|---|---|
| Новички | Понятный путь без хаоса «что учить дальше» |
| Самоучки | Структура, проекты, чеклисты, литература |
| Junior'ы | Закрыть пробелы в фундаменте и full-stack связке |
- 154 учебных дня (22 недели × 7 дней)
- 22 проекта недели + финальный DevHub capstone
- Git с дня 1 — первый коммит
index.htmlв неделю 1 - Ежедневные блоки: теория, практика, ловушки, ревью
- 22 проекта недели + финальный capstone
- Сайт krwg.github.io/web-roadmap: TOC по дням, поиск, прогресс, шпаргалки, PWA
- Протокол «анти-вайбкодер» — учиться понимать, а не копировать ИИ
| Нед. | Тема | Файл |
|---|---|---|
| 1 | HTML: структура, семантика, формы, a11y | week-01 |
| 2 | CSS: селекторы, box model, типографика | week-02 |
| 3 | CSS: Flexbox, Grid, адаптив, анимации | week-03 |
| 4 | Git advanced, PR, DevTools | week-04 |
| 5 | JavaScript: основы | week-05 |
| 6 | JavaScript: объекты, DOM, события | week-06 |
| 7 | JS: storage, Fetch, формы, модули | week-07 |
| 8 | Async JS, Event Loop, HTTP, API | week-08 |
| 9 | JS advanced: closures, ООП, паттерны | week-09 |
| 10 | TypeScript | week-10 |
| 11 | React: основы, JSX, компоненты | week-11 |
| 12 | React: state, effects, формы | week-12 |
| 13 | React Router, hooks, Context | week-13 |
| 14 | Проект: Frontend SPA | week-14 |
| 15 | Python: основы, venv | week-15 |
| 16 | Python: ООП, алгоритмы, файлы | week-16 |
| 17 | SQL и PostgreSQL | week-17 |
| 18 | SQLAlchemy + FastAPI | week-18 |
| 19 | Node.js + Express | week-19 |
| 20 | Auth, безопасность, тестирование | week-20 |
| 21 | Full-stack + Docker | week-21 |
| 22 | Capstone: DevHub full-stack | week-22 |
flowchart TB
subgraph frontend [Frontend]
HTML[HTML/CSS]
JS[JavaScript]
TS[TypeScript]
React[React]
end
subgraph backend [Backend]
Py[Python]
SQL[SQL/PostgreSQL]
FastAPI[FastAPI]
Node[Node/Express]
end
subgraph ship [Ship]
Auth[Auth & Security]
Docker[Docker]
Deploy[Deploy]
end
HTML --> JS --> TS --> React
React --> Py --> SQL --> FastAPI
React --> Node
FastAPI --> Auth
Node --> Auth
Auth --> Docker --> Deploy
- Прочитай docs/getting-started.md — создай learning-log до дня 1
- Открой roadmap/introduction.md — принципы и «анти-вайбкодер»
- Начни с roadmap/weeks/week-01.md — день 0 = Git, день 1 = первый HTML-коммит
- Каталог проектов: docs/projects.md
- Сайт: krwg.github.io/web-roadmap
Этот роадмап показывает ландшафт full-stack разработки и порядок тем. Цель — понять, что и зачем учить, а не гнаться за хайпом. Инструменты меняются; фундамент (HTTP, DOM, SQL, компоненты, API) остаётся.
Исправления, новые задания и ссылки — через Issues и Pull Requests. См. CONTRIBUTING.md.
Материалы защищены авторским правом. Личное использование — да; публикация контента отдельно от репозитория — только с согласия автора. Подробности в license.
Copyright © 2026 krwg