Дорожная карта обучения веб-разработке с нуля

Когда я только начинал работать в веб-студии, ко мне регулярно приходили с одним и тем же вопросом: «С чего вообще начать учить веб-разработку?» И почти всегда за этим вопросом скрывалась одна и та же проблема — человек пытался учиться без системы. Кто-то открывал сразу десять вкладок с курсами и метался между ними. Кто-то надолго застревал на HTML и CSS, потому что не понимал, куда двигаться дальше. А кто-то месяцами учил JavaScript, но без привязки к реальным задачам, и в итоге терял мотивацию.

Поэтому дорожная карта обучения веб-разработке — это не просто список технологий. Это нормальный маршрут: что изучать, в каком порядке, зачем именно это нужно и по каким признакам понимать, что пора переходить дальше. В веб-разработке особенно важно не только «что знать», но и «когда это учить». Если перепутать этапы, обучение превращается в хаос.

Ниже я собрал план, который хорошо работает для новичков: без лишней теории, без прыжков через ступени и с понятным выходом к первой работе junior-разработчиком. Это не единственно возможный путь, но один из самых практичных.

Что такое дорожная карта разработчика и зачем она нужна

Дорожная карта обучения веб-разработке — это структурированный план развития, который задаёт последовательность изучения технологий, инструментов и навыков. Она отвечает сразу на несколько вопросов: что учить, почему именно это, в каком порядке и как разбить процесс на этапы, чтобы не утонуть в информации.

На практике отсутствие дорожной карты почти всегда бьёт по времени и мотивации. Новичок вроде бы старается, но двигается рывками и без понимания общей картины. В итоге возникают типичные проблемы:

  • начинает с неправильного языка программирования для своих целей;
  • тратит время на технологии, которые не пригодятся на первой работе;
  • не понимает, когда переходить на следующий уровень;
  • изучает инструменты в неправильном порядке — например, React раньше JavaScript;
  • разочаровывается, потому что долго не видит ощутимого прогресса.

Хорошая дорожная карта помогает сэкономить 3–6 месяцев обучения и избежать ошибок, которые допускает большинство новичков. И это не абстрактная цифра. Я видел это и по начинающим разработчикам, и по стажёрам, и по тем, кто приходил после «самостоятельного» обучения без структуры. Когда человек понимает, зачем он изучает конкретную тему и куда она встроена в общий путь, прогресс идёт заметно быстрее.

Три этапа обучения веб-разработке

Прежде чем разбирать конкретные технологии, важно увидеть всю траекторию целиком. Обучение веб-разработке удобно делить на три этапа. Такое деление помогает не ждать от себя слишком многого слишком рано и не путать фундамент с профессиональной специализацией.

Этап 1. Фундамент (основы программирования и веб)

На этом этапе вы учитесь мыслить как разработчик и понимать, как вообще устроен веб. Что такое страница, как браузер читает код, как связаны HTML, CSS и JavaScript, как данные приходят с сервера. Обычно на фундамент уходит 2–3 месяца интенсивного обучения.

Это самый недооценённый этап. Новички часто хотят побыстрее перейти к модным инструментам, но именно база потом определяет, насколько уверенно вы будете чувствовать себя в работе. Если фундамент слабый, на следующем уровне всё будет сыпаться.

Этап 2. Специализация (выбор направления и углубление)

После базы нужно выбрать направление: фронтенд-разработка, бэкенд-разработка или fullstack. Дальше вы углубляетесь в нужный стек — то есть в набор технологий, с которыми работает выбранная роль. Обычно этот этап занимает 3–5 месяцев.

Здесь важно не распыляться. Специализация — это момент, когда полезнее знать один стек достаточно хорошо, чем пять поверхностно.

Этап 3. Практика и трудоустройство (портфолио и поиск работы)

На этом этапе вы уже не просто изучаете темы, а собираете реальные проекты, оформляете GitHub, учитесь работать с системой контроля версий, CI/CD и параллельно готовитесь к собеседованиям. Формально этот этап идёт параллельно со вторым, но на практике становится основным примерно на 5–8 месяце.

Именно здесь становится видно, насколько обучение было прикладным. Можно знать теорию, но споткнуться на развёртывании проекта, настройке роутинга, работе с API или банальном README. А работодатель как раз смотрит не на количество просмотренных уроков, а на то, что вы реально умеете собрать своими руками.

Этап 1: Фундамент — с чего реально начать

Если говорить совсем честно, большинство проблем в обучении начинаются из-за попытки перескочить фундамент. Поэтому здесь лучше идти спокойно, но последовательно. Этот этап не самый эффектный, зато самый полезный.

Шаг 1. HTML и CSS (неделя 1–3)

Начинайте с HTML и CSS. Формально это не программирование в классическом смысле, но это основа всей веб-разработки. Без понимания HTML и CSS невозможно нормально работать ни во фронтенде, ни даже в бэкенде, если вы хоть как-то соприкасаетесь с веб-интерфейсами.

Что учить:

  • HTML: семантика, структура документа, формы, атрибуты;
  • CSS: селекторы, каскадность, специфичность, flexbox, grid, адаптивная вёрстка;
  • Инструменты: текстовый редактор (VS Code), браузерные инструменты разработчика.

Поясню важный момент. Семантика HTML — это не «дополнительная красота», а способ сделать страницу понятной браузеру, поисковым системам и технологиям доступности. Когда вместо бесконечных <div> вы используете <header>, <main>, <section>, <article>, страница становится логичнее и для машины, и для человека. В реальной работе это влияет и на SEO, и на поддержку проекта.

С CSS та же история. Новичкам часто кажется, что стили — это просто «сделать красиво». На деле CSS отвечает ещё и за поведение интерфейса: как блоки тянутся, как перестраиваются на мобильных, что происходит при переполнении контента. Именно здесь многие впервые понимают, почему сайт «по макету» и сайт «в реальности» — это не одно и то же.

Практика:

Создайте 3–5 статических страниц:

  • личный блог или портфолио (одна страница);
  • лендинг для вымышленного продукта;
  • копия известного сайта, например главной страницы YouTube, но без функциональности.

Из практики веб-студии: именно на таких задачах быстрее всего набивается рука. Не на абстрактных упражнениях про «сверстайте блок 200 на 300», а на страницах, где есть шапка, карточки, кнопки, форма, подвал, мобильная версия и длинные тексты. Там сразу становятся видны типичные проблемы: ломается сетка, уезжают отступы, текст не помещается, кнопки ведут себя по-разному в разных состояниях.

Почему это важно: HTML и CSS — это язык, на котором браузер «понимает» страницу. Если вы не знаете его нормально, вы не сможете понять внутреннее устройство сайта. А без этого дальше будет очень трудно: хоть с JavaScript, хоть с React, хоть с CMS вроде WordPress.

Шаг 2. JavaScript основы (неделя 4–8)

После HTML и CSS переходите к JavaScript. Это уже полноценный язык программирования, с которого для большинства и начинается настоящее ощущение «я пишу код, который что-то делает».

Что учить:

  • переменные, типы данных, операторы;
  • функции и область видимости;
  • объекты и массивы;
  • основы DOM — то есть как JavaScript взаимодействует с HTML;
  • события и обработчики событий;
  • асинхронность: callback, Promise, async/await;
  • работа с API через fetch.

Если говорить простыми словами, DOM — это способ получить доступ к элементам страницы через код: найти кнопку, повесить на неё обработчик клика, поменять текст, показать сообщение, скрыть блок. А API — это интерфейс, через который ваше приложение получает данные извне: например, прогноз погоды, список фильмов, курсы валют или репозитории GitHub.

На этом этапе очень важно не свалиться в бесконечное чтение теории. JavaScript нужно учить руками. Причём руками нужно набивать и базовые вещи: циклы, условия, функции, работу с массивами. Потом именно на этих мелочах строится любая логика приложения.

Практика:

Сделайте несколько интерактивных проектов:

  • калькулятор;
  • список дел (TODO app) с добавлением и удалением задач;
  • приложение для поиска погоды через API;
  • галерею изображений с фильтрацией.

Совет из практики: не пытайтесь сразу сделать «идеальный» проект. Лучше сделать рабочий, пусть и простой. Например, в TODO-приложении сначала реализуйте добавление и удаление задач, затем сохранение в localStorage, а уже потом фильтры, счётчики и редактирование. Такой подход ближе к реальной разработке, где продукт почти всегда развивается итерациями.

Почему это важно: JavaScript — основной язык фронтенда. Даже если вы планируете идти в бэкенд, базовое знание JavaScript всё равно полезно. В команде вам придётся понимать, как работает клиентская часть, как данные попадают в интерфейс и где могут возникать ошибки на стыке фронтенда и сервера.

Шаг 3. Системы контроля версий (неделя 8–9)

Параллельно с JavaScript начните изучать Git. Для новичков это часто выглядит как «что-то техническое, к чему я вернусь потом», но на практике Git нужен почти сразу. Без него вы не сможете нормально работать в команде, да и в одиночных проектах тоже будете терять контроль над изменениями.

Что учить:

  • основные команды: git init, add, commit, push, pull;
  • ветвление и слияние (branches и merge);
  • работу с GitHub или GitLab;
  • базовый workflow: создание веток под фичи, pull request, code review.

Если объяснить простыми словами, Git — это система, которая хранит историю вашего кода. Можно откатить изменения, посмотреть, что и когда менялось, вести несколько веток разработки и безопасно экспериментировать. В студийной работе это буквально спасает проекты. Ошибся, сломал верстку, залил не ту версию — история изменений помогает быстро восстановиться.

Практика:

  • загружайте все свои проекты на GitHub;
  • практикуйтесь с ветвлением на собственных проектах;
  • участвуйте в open source проектах, даже в небольших.

Новичкам я обычно советую очень простую привычку: каждый законченный логический кусок работы оформляйте отдельным коммитом с понятным сообщением. Не «fix» и не «123», а что-то вроде add weather search form или fix mobile header layout. Такая история коммитов выглядит профессионально и помогает самому лучше понимать ход своей работы.

Почему это важно: Git — не дополнительный плюс, а обязательный инструмент. На собеседовании про него действительно спрашивают. Но ещё важнее то, что без Git вы не выстроите нормальную рабочую дисциплину уже на этапе обучения.

Этап 2: Специализация — выбираем направление

После фундамента важно принять решение, в какую сторону вы идёте дальше. Веб-разработка — это не одна профессия, а несколько разных маршрутов. На старте лучше выбрать один основной путь, а не пытаться сразу охватить всё.

Обычно есть три варианта: фронтенд, бэкенд и fullstack.

Путь 1: Фронтенд-разработчик

Если вам интересны интерфейсы, поведение сайта в браузере, анимации, логика пользовательских сценариев и в целом то, что видит человек на экране, тогда стоит смотреть в сторону фронтенда.

Дорожная карта фронтенда:

Месяц Что учить Практика
1–2 React или Vue (основы) Компоненты, состояние, props
3 State management (Redux, Vuex) Глобальное состояние приложения
4 Работа с API, асинхронные операции Интеграция с бэкенд API
5 Сборщики (Webpack, Vite) и инструменты Оптимизация и сборка проекта
6+ TypeScript, тестирование, performance Реальные проекты и портфолио

Популярные стеки для фронтенда:

  • React + Redux + TypeScript — самый распространённый вариант;
  • Vue + Vuex — обычно воспринимается проще новичками;
  • Angular — частый корпоративный выбор, но для старта обычно тяжелее.

Совет: начните с React. Не потому, что это «лучший» фреймворк вообще, а потому что это очень востребованный выбор на рынке. Плюс по React больше вакансий, больше материалов, больше готовых примеров и разборов. Когда вы поймёте React и компонентный подход, переход на Vue действительно будет заметно легче.

Из практики: во многих небольших проектах фронтенд-разработчик занимается не только интерфейсом, но и интеграцией форм, обработкой ошибок, адаптивностью, состояниями загрузки и мелочами, которые напрямую влияют на UX. UX — это пользовательский опыт, то есть насколько удобно человеку пользоваться сайтом. И как раз эти «мелочи» часто отличают учебный проект от рабочего.

Путь 2: Бэкенд-разработчик

Если вам ближе логика приложения, работа с базами данных, обработка запросов, безопасность, архитектура и интеграции, тогда ваш путь — бэкенд.

Дорожная карта бэкенда:

Месяц Что учить Практика
1–2 Node.js + Express (или Python + Flask) Простой REST API
3 Базы данных (SQL и/или NoSQL) Работа с PostgreSQL или MongoDB
4 Аутентификация и авторизация JWT, OAuth, сессии
5 Архитектура приложений, паттерны Структурирование больших проектов
6+ Тестирование, деплой, DevOps основы Production-ready приложения

Популярные стеки для бэкенда:

  • Node.js + Express + PostgreSQL — удобно тем, что JavaScript используется и на клиенте, и на сервере;
  • Python + Django или FastAPI — популярный и понятный выбор, особенно в стартапах и небольших командах;
  • Java + Spring — сильный корпоративный стек.

Совет: если вы уже знаете JavaScript, логично идти в Node.js. Если же вы начинаете именно бэкенд-направление и хотите более плавный вход, Python для многих новичков действительно оказывается проще.

От себя добавлю важную деталь: на бэкенде новичков часто недооценивает тема данных. А потом оказывается, что написать один маршрут API несложно, а вот спроектировать нормальные связи в базе, обработать ошибки, продумать валидацию и не допустить уязвимостей — уже совсем другой уровень. Поэтому базы данных и авторизация — это не «дополнительные темы», а ядро практической работы.

Путь 3: Fullstack-разработчик

Если вам интересно и то, как выглядит интерфейс, и то, как работает серверная часть, можно идти в fullstack. Это более широкий маршрут, но и более требовательный по времени.

Дорожная карта fullstack:

Месяц Фронтенд Бэкенд
1–2 React основы Node.js + Express
3 State management Базы данных
4 Работа с API Аутентификация
5 TypeScript Архитектура
6+ Полные проекты Полные проекты

Совет: fullstack почти всегда требует больше времени на обучение — примерно 8–12 месяцев вместо 6–8. Если ваша цель — как можно быстрее выйти на первую работу, чаще разумнее сначала специализироваться. А уже потом расширять зону компетенций.

В реальных командах fullstack-разработчик часто особенно ценен в небольших компаниях и студиях, где нужно быстро собирать и поддерживать проекты целиком. Но именно поэтому от него ждут не поверхностного знакомства со всем, а способности собрать рабочее решение от интерфейса до сервера и деплоя.

Практический план обучения: месяц за месяцем

Ниже — конкретный план для фронтенд-разработчика. Это один из самых популярных маршрутов у новичков, потому что он даёт быстрый визуальный результат и позволяет довольно рано собирать проекты для портфолио.

Месяц 1: HTML, CSS, основы JavaScript

Неделя 1–2: HTML и CSS

  • Курсы: Codecademy, freeCodeCamp или Hexlet
  • Проект: создайте простой сайт-портфолио (3–5 страниц)
  • Время: 20–30 часов

Неделя 3–4: JavaScript основы

  • учите переменные, функции, объекты, массивы;
  • проект: калькулятор или TODO app;
  • время: 20–30 часов.

Итого: 40–60 часов, 1 проект на GitHub.

Здесь важно не просто «пройти уроки», а довести проект до состояния, когда его не стыдно открыть через неделю. То есть не бросать на полпути, а дорабатывать: нормальные отступы, читаемый код, понятная структура файлов.

Месяц 2: JavaScript продвинутые концепции

Неделя 1–2: DOM, события, асинхронность

  • работа с HTML через JavaScript;
  • Fetch API, Promise, async/await;
  • проект: приложение для поиска погоды через API;
  • время: 20–30 часов.

Неделя 3–4: Git и GitHub

  • базовые команды, ветвление, pull request;
  • загрузите все предыдущие проекты на GitHub;
  • время: 10–15 часов.

Итого: 30–45 часов, 1–2 новых проекта на GitHub.

На этом этапе полезно уже начать читать чужой код. Даже если вы пока понимаете не всё, это очень развивает насмотренность: как люди называют функции, как разбивают проект на файлы, как оформляют компоненты и запросы к API.

Месяц 3: React основы

Неделя 1–2: Компоненты, JSX, props, state

  • создайте 3–5 компонентов;
  • проект: приложение для управления списком фильмов;
  • время: 25–35 часов.

Неделя 3–4: Хуки (useState, useEffect)

  • работа с состоянием и побочными эффектами;
  • проект: расширьте приложение фильмов, добавьте фильтрацию и сортировку;
  • время: 20–30 часов.

Итого: 45–65 часов, 2 React проекта.

React хорошо учит компонентному мышлению: разбивать интерфейс на понятные части, а не писать всё в одном файле. В реальных проектах это критично — особенно когда приложение растёт, появляются формы, модальные окна, фильтры и списки.

Месяц 4: React продвинутые концепции

Неделя 1–2: Работа с API в React

  • fetch данных в useEffect;
  • обработка ошибок и загрузки;
  • проект: приложение для поиска репозиториев GitHub;
  • время: 20–30 часов.

Неделя 3–4: Роутинг (React Router)

  • многостраничное приложение;
  • динамические маршруты;
  • проект: добавьте роутинг в один из предыдущих проектов;
  • время: 15–25 часов.

Итого: 35–55 часов, 2 проекта.

Очень советую уже здесь уделять внимание состояниям интерфейса: загрузка, пустой результат, ошибка запроса, отсутствие соединения. Именно эти моменты чаще всего упускают в учебных проектах, хотя в боевой разработке они обязательны.

Месяц 5: State Management и TypeScript

Неделя 1–2: Redux или Context API

  • глобальное состояние;
  • actions, reducers, selectors;
  • проект: перепишите одно приложение с Redux;
  • время: 25–35 часов.

Неделя 3–4: TypeScript

  • типы, интерфейсы, дженерики;
  • интеграция с React;
  • проект: перепишите React-приложение на TypeScript;
  • время: 20–30 часов.

Итого: 45–65 часов.

TypeScript особенно полезен тем, что учит заранее думать о структуре данных и уменьшает количество глупых ошибок. В командах это сильно помогает, особенно когда над кодом работают несколько человек. Новичку может быть непривычно, но после нескольких проектов обычно приходит понимание, зачем вообще нужна типизация.

Месяц 6–8: Портфолио и практика

Месяц 6: Создайте 1 большой проект

  • это должен быть проект, который можно показать на собеседовании;
  • полный стек: React + API + TypeScript + Redux;
  • хорошо оформленный код, README, документация;
  • время: 60–80 часов.

Месяц 7: Второй проект и углубление

  • добавьте новые технологии, например Tailwind CSS или Next.js;
  • второй проект в портфолио;
  • время: 60–80 часов.

Месяц 8: Подготовка к собеседованиям

  • решайте задачи на LeetCode и HackerRank;
  • практикуйте собеседования с друзьями;
  • улучшайте существующие проекты;
  • напишите резюме и подготовьте ответы на типовые вопросы;
  • время: 40–60 часов.

Здесь главный акцент — не просто на количестве проектов, а на качестве. Один действительно хорошо сделанный проект полезнее трёх недоделанных. Лучше показать приложение, где продуманы структура, роутинг, работа с API, адаптивность и оформление репозитория, чем набор «демок» без законченного сценария.

Что должно быть в вашем портфолио

К концу обучения у вас должно быть 2–3 проекта, которые не просто лежат на GitHub, а реально демонстрируют ваши навыки работодателю. Портфолио — это не витрина «я что-то изучал», а доказательство того, что вы умеете доводить задачу до рабочего результата.

Требования к проекту для портфолио:

  • Функциональность: приложение должно работать и решать реальную задачу;
  • Код: чистый, структурированный, с понятными названиями переменных;
  • Git история: логичные коммиты, показывающие процесс разработки;
  • README: описание проекта, инструкция по запуску, список технологий;
  • Визуальное оформление: приложение должно выглядеть аккуратно; можно использовать UI-фреймворки вроде Material UI или Tailwind;
  • Адаптивность: сайт должен нормально работать на мобильных устройствах;
  • Деплой: проект должен быть опубликован в интернете — например, через Vercel, Netlify или GitHub Pages.

Из практики: работодатели и тимлиды часто открывают не весь код подряд, а смотрят несколько вещей очень быстро — есть ли README, понятна ли структура проекта, запускается ли демо, не выглядит ли всё как случайный набор файлов. Поэтому оформление — не второстепенная деталь, а часть впечатления о вас как о разработчике.

Примеры хороших проектов для портфолио:

  1. Приложение для управления задачами — TODO app с сохранением в localStorage или через API;
  2. Поисковое приложение — поиск фильмов, музыки, репозиториев через публичный API;
  3. Социальная сеть в миниатюре — создание постов, комментариев, лайков;
  4. E-commerce приложение — каталог товаров, корзина, оформление заказа;
  5. Дашборд с графиками — визуализация данных, фильтры, экспорт.

Если хотите сделать проект сильнее, добавьте не только «основную фичу», но и детали, которые встречаются в реальной работе: валидацию формы, состояния загрузки, обработку ошибок, пустые состояния, адаптивную сетку, пагинацию, фильтры, поиск, сохранение данных. Именно такие нюансы делают проект взрослым.

Ошибки, которые делают новички при обучении

За годы я видел одну и ту же картину много раз: люди приходят в веб-разработку мотивированными, но потом начинают буксовать не потому, что «это не их», а потому что совершают типичные ошибки в процессе обучения. Ниже — самые частые из них.

Ошибка 1: Начинают с фреймворка вместо основ

Типичный сценарий:

Новичок: «Я буду учить React!»
Через неделю: «Почему я вообще ничего не понимаю?»

React, Vue, Angular — это инструменты. Если вы не знаете JavaScript, фреймворк не решит проблему. Наоборот, он добавит слой абстракции и только запутает. Поэтому сначала JavaScript, потом уже фреймворк.

Это примерно как пытаться водить машину с автоматической коробкой, не понимая, что такое дорога, правила и педали. Интерфейс может быть удобным, но база всё равно нужна.

Ошибка 2: Смотрят видео вместо практики

Можно посмотреть 100 часов видео по JavaScript и всё равно не научиться программировать. Пока вы сами не пишете код, знания остаются пассивными. Они кажутся понятными, пока вы смотрите на преподавателя, но исчезают, как только открываете пустой редактор.

Практика — это не дополнение к обучению. Это и есть обучение.

Правило 80/20: 80% времени пишите код, 20% времени смотрите видео или читаете документацию.

Это правило очень жизненное. В студийной работе никто не оценивает, сколько роликов вы посмотрели. Оценивают, можете ли вы реализовать задачу, найти ошибку, поправить поведение сайта и не сломать остальное.

Ошибка 3: Изучают слишком много одновременно

Классический пример:

«Буду учить React, TypeScript, Redux, Next.js и Docker одновременно!»

Через месяц обычно происходит одно и то же: перегрузка, потеря фокуса, выгорание и заброшенное обучение.

Учите по одному слою за раз. Закончили JavaScript — переходите к React. Освоились с React — добавляйте TypeScript. Когда уже понимаете, как устроено приложение, подключайте более сложные инструменты.

Последовательность здесь важнее скорости. В разработке почти всегда выигрывает не тот, кто схватил больше терминов, а тот, кто глубже понял базовые вещи.

Ошибка 4: Не создают проекты

Некоторые новички заканчивают курс и думают, что этого уже достаточно для работы. На деле курс — это, как правило, организованная теория плюс guided practice. А проекты — это момент, когда вы начинаете принимать технические решения самостоятельно.

Без собственных проектов вы не поймёте:

  • как проектировать архитектуру приложения;
  • как обрабатывать ошибки;
  • как писать код, который понятен другим;
  • как работать с API;
  • как деплоить приложение.

Именно на проектах появляются реальные вопросы: куда положить логику, как разделить компоненты, как не дублировать код, как организовать состояние, как назвать переменные, чтобы через неделю самому не запутаться.

Ошибка 5: Не используют Git с самого начала

Git — не инструмент «для продвинутых». Это базовая часть повседневной работы разработчика. Если начать использовать его с первого проекта, вы быстро привыкнете к коммитам, веткам и аккуратной истории изменений.

Если откладывать Git на потом, потом обычно приходится переучиваться. А это всегда неприятнее, чем сразу выстроить нормальную привычку.

Ошибка 6: Выбирают неправильный стек для своих целей

Бывает так: человек хочет стать фронтенд-разработчиком, но почему-то уходит глубоко в Python и Django. Или наоборот — интересуется серверной логикой, но тратит месяцы на интерфейсные библиотеки.

Выберите направление — фронтенд, бэкенд или fullstack — и уже после этого подбирайте стек. Иначе обучение получится не стратегией, а набором случайных решений.

Особенно это важно, если вы ограничены по времени и хотите быстрее выйти на первую работу. Тогда каждый месяц должен приближать вас к нужной роли, а не уводить в сторону.

Ресурсы для обучения

Ниже — ресурсы, которые действительно полезны новичкам. Я сознательно не включаю сюда всё подряд. На старте важнее не максимальное количество ссылок, а несколько нормальных источников, которыми можно пользоваться системно.

Бесплатные ресурсы:

Ресурс Для чего Язык
freeCodeCamp Полные курсы по веб-разработке Английский
MDN Web Docs Документация по HTML, CSS, JavaScript Английский, русский
JavaScript.info Интерактивный учебник по JavaScript Русский
Hexlet Курсы по программированию Русский
Codewars Практика через задачи Английский
Frontend Mentor Реальные проекты для практики Английский

MDN Web Docs особенно советую не как «что-то на потом», а как рабочий справочник с самого начала. Хороший разработчик отличается не тем, что всё помнит наизусть, а тем, что умеет быстро находить точную информацию в документации.

Платные курсы (если нужна структура):

Курс Для чего Цена
The Complete JavaScript Course (Udemy) JavaScript и основы веб-разработки $15–50
React — The Complete Guide (Udemy) React в деталях $15–50
Full Stack Open (University of Helsinki) Fullstack разработка Бесплатно или платно
Scrimba Интерактивные курсы $10–20/месяц

Совет: начинайте с бесплатных ресурсов. Платные курсы имеют смысл, когда вы уже попробовали базовые варианты и понимаете, что вам нужна более жёсткая структура, дедлайны или проверка кода.

Главное — не попадаться на типичную ловушку: «Раз я заплатил, значит точно научусь». Платный курс не заменяет практику, а только организует её.

Как отслеживать прогресс

Если не фиксировать прогресс, очень легко попасть в ощущение, что вы стоите на месте, даже когда это не так. В обучении разработке это случается постоянно: знаний становится больше, задачи усложняются, и человеку начинает казаться, что он «ничего не знает». Поэтому прогресс важно отслеживать не по эмоциям, а по конкретным действиям.

Еженедельный чек-лист:

  • ☐ Выучил что-то новое (тему, концепцию, инструмент)
  • ☐ Написал код (минимум 10 часов в неделю)
  • ☐ Создал или улучшил проект
  • ☐ Загрузил изменения на GitHub
  • ☐ Прочитал документацию или статью по теме

Даже такой простой чек-лист хорошо работает. Он помогает сместить фокус с абстрактного «я молодец / я отстаю» на конкретный факт: были ли действия или нет.

Ежемесячная оценка:

  • ☐ Завершил 1 новый проект
  • ☐ Выучил 1 новую технологию
  • ☐ Решил 10–15 задач на Codewars или LeetCode
  • ☐ Обновил портфолио на GitHub

Хорошая идея — в конце месяца кратко записывать, что именно получилось: какие темы закрыли, что сломалось и как вы это починили, что было самым сложным. Это помогает лучше видеть рост и заодно тренирует навык рефлексии, который очень полезен и в работе.

Критерии готовности к первой работе:

Вы готовы искать работу junior-разработчиком, когда:

  1. Знаете основы: HTML, CSS, JavaScript, React или другой выбранный фреймворк;
  2. Можете создать приложение: от идеи до деплоя без постоянной помощи;
  3. Знаете Git: умеете работать с ветками и pull request;
  4. Имеете портфолио: 2–3 проекта на GitHub с нормальным кодом;
  5. Можете объяснить код: понимаете, почему выбрали именно такое решение;
  6. Решаете задачи: справляетесь с базовыми алгоритмическими задачами;
  7. <strong