Перейти к содержимому
Skip to content

База знаний → Фронтенд-разработчик

Фронтенд-разработчик

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

25 тем 5 этапов примерно 8–12 месяцев при часе в день уровень: с нуля до работы

пройдено 0 из 25
Этап 1 · Основа
Как работает браузер 3 дня

Запрос, ответ, разбор HTML, построение дерева страницы, отрисовка. Понимание этой последовательности объясняет половину будущих вопросов: почему страница мигает, почему скрипт в шапке всё тормозит, почему шрифт приезжает позже текста.

Что уметь в конце

  • Прочитать вкладку «Сеть» в панели разработчика
  • Объяснить разницу между загрузкой, отрисовкой и готовностью страницы
HTML и осмысленная разметка 2 недели

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

Что уметь в конце

  • Разметить сложную страницу без единого лишнего блока
  • Собрать форму, которая работает с клавиатуры и понятна читалке

Где учить

CSS и раскладка 1 месяц

Каскад, наследование, специфичность — три слова, из-за незнания которых пишут «!important». Дальше flexbox и grid: ими собирается почти любой макет, включая тот, что вы сейчас читаете.

Что уметь в конце

  • Повторить чужой макет без подглядывания в его код
  • Объяснить, почему правило не применилось

Где учить

Адаптивность и разные браузеры 1 неделя

Один макет должен жить на телефоне, планшете и большом мониторе. Плюс проверка, что новая возможность CSS поддерживается не только в вашем браузере.

Что уметь в конце

  • Сверстать раскладку, которая не ломается между 320 и 2560 точками
  • Проверить поддержку возможности до того, как она попала в проект

Где учить

Доступность 1 неделя

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

Что уметь в конце

  • Пройти весь сайт клавиатурой и ни разу не потерять фокус
  • Собрать раскрывающееся меню по готовому образцу доступного компонента

Где учить

Этап 2 · Язык
JavaScript — основы 2 месяца

Типы, функции, объекты и массивы, области видимости, ошибки. Самый длинный узел карты и самый важный: каркасы меняются каждые три года, язык остаётся.

Что уметь в конце

  • Решать задачи без подсказок готовых библиотек
  • Читать чужой код и понимать, что он делает

Где учить

Страница и события 2 недели

Поиск элементов, изменение содержимого, нажатия, ввод, прокрутка. Здесь же всплытие событий — механизм, который экономит сотни обработчиков.

Что уметь в конце

  • Написать модальное окно, вкладки и слайдер без библиотек
  • Повесить один обработчик на список вместо тридцати на пункты
Асинхронность и запросы 2 недели

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

Что уметь в конце

  • Получить данные с сервера и показать три состояния: ждём, есть, ошибка
  • Отменить ненужный запрос, когда человек ушёл со страницы
TypeScript 3 недели

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

Что уметь в конце

  • Описать типы данных проекта и поймать ошибку в редакторе
  • Не прятать проблемы за типом «any»

Где учить

Git и работа в команде 1 неделя

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

Что уметь в конце

  • Вести работу в отдельной ветке и предлагать её к слиянию
  • Разрешить конфликт и не потерять чужую работу

Где учить

Этап 3 · Инструменты
Терминал и пакеты 1 неделя

Командная строка, установка библиотек, файл зависимостей и блокировка версий. Здесь же понимание, почему «обновил одну библиотеку — сломалось всё».

Что уметь в конце

  • Поставить проект с нуля по чужому репозиторию и запустить его
  • Понимать разницу между зависимостями для работы и для разработки
Сборка проекта 3 дня

Сборщик превращает десятки исходных файлов в несколько готовых: собирает, сжимает, расставляет версии. Сегодня достаточно Vite — он настраивается за вечер.

Что уметь в конце

  • Собрать проект в готовый к публикации вид
  • Понимать, что попало в сборку и сколько оно весит

Где учить

Линтеры и единый стиль 2 дня

Инструменты, которые ругаются на опасный код и сами расставляют пробелы. В команде снимают половину споров на обсуждении правок.

Отладка в браузере 3 дня

Точки останова, просмотр значений, вкладка сети, профиль отрисовки. Умение отлаживать отличает того, кто чинит, от того, кто переписывает наугад.

Что уметь в конце

  • Остановить выполнение на нужной строке и посмотреть значения
  • Найти, какой стиль перебивает ваш
Этап 4 · Каркасы
React 2 месяца

Самый востребованный каркас: интерфейс собирается из компонентов, данные текут сверху вниз. Берите его первым — по нему больше всего работы и материалов.

Что уметь в конце

  • Разложить страницу на компоненты и связать их данными
  • Понимать, почему компонент перерисовался лишний раз

Где учить

Состояние приложения 2 недели

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

Работа с данными и кеш 1 неделя

Запросы, повторные попытки, кеширование, обновление в фоне. Готовые библиотеки делают это лучше самописного кода — важно понимать, что именно они берут на себя.

Маршруты и отрисовка на сервере 2 недели

Адреса страниц внутри приложения и подготовка готового HTML на сервере. Для сайтов, которые должны находиться в поиске, это обязательный шаг.

Что уметь в конце

  • Объяснить, чем отрисовка на сервере отличается от отрисовки в браузере
  • Понимать, когда она нужна, а когда только усложняет
Vue или Angular необязательно

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

Этап 5 · Взрослая работа
Тесты 2 недели

Проверки, которые запускаются сами и ловят поломку до того, как её увидит клиент. Начинать с проверки отдельных функций, потом добавлять сценарии «человек нажал и получил».

Что уметь в конце

  • Покрыть тестами кусок логики и увидеть падение при поломке
  • Написать один сквозной сценарий: вход, действие, результат
Скорость 1 неделя

Три показателя, которые измеряет Google, и понятные способы их улучшить: вес картинок, порядок загрузки, лишние библиотеки, шрифты. Медленный сайт теряет посетителей и позиции в поиске.

Что уметь в конце

  • Снять замер и назвать три главные причины медленной загрузки
  • Уменьшить вес страницы вдвое без потери вида

Где учить

Безопасность на стороне браузера 3 дня

Чужой скрипт на вашей странице, подделанные запросы, утечка токенов в чужие руки. Фронтендер обязан знать хотя бы эти три беды и меры против них.

Где учить

Автоматическая сборка и выкладка 1 неделя

Правка попала в основную ветку — тесты прогнались, сборка собралась, сайт обновился сам. Настраивается один раз и экономит время каждый день.

Где учить

Портфолио и первые заказы постоянно

Три доведённых до конца работы убеждают лучше десяти начатых. Выкладывайте код открыто, пишите, какую задачу решали и почему выбрали такое решение.

Что уметь в конце

  • Показать три работы со ссылкой на код и живую страницу
  • Рассказать про каждую за две минуты без «ну, я просто сверстал»
Сверка с зарубежной картой необязательно

Наша карта короче намеренно: в ней только то, что действительно спрашивают на работе. Если хотите увидеть полную картину профессии со всеми ответвлениями — посмотрите англоязычную карту roadmap.sh.

Куда смотреть

Дальше: бэкенд-разработчик Нужен сайт, а не учёба

Knowledge base → Frontend developer

Frontend developer

Everything a person sees and touches in the browser. From a first page to working in a team: the language, the tools, the frameworks and the things that separate a finished product from a student exercise. Dashed topics can be skipped safely.

25 topics 5 stages about 8–12 months at an hour a day level: zero to hired

0 of 25 done
Stage 1 · Foundations
How a browser works 3 days

Request, response, parsing, building the page tree, painting. Knowing this order answers half of the questions to come: why a page flashes, why a script in the head slows everything down, why the font arrives after the text.

What you should be able to do

  • Read the Network tab in developer tools
  • Explain the difference between loaded, painted and interactive
HTML with meaning 2 weeks

Not just tags, but choosing the right tag for the meaning: a button as a button, a link as a link, headings in order. Search engines, screen readers and keyboard navigation all rest on this.

What you should be able to do

  • Mark up a complex page without a single pointless box
  • Build a form that works from the keyboard and reads well aloud

Where to learn

CSS and layout 1 month

Cascade, inheritance, specificity — three words whose absence leads to "!important". Then flexbox and grid, which build almost any layout, including the one you are reading.

What you should be able to do

  • Reproduce someone's design without looking at their code
  • Explain why a rule did not apply

Where to learn

Different screens and browsers 1 week

One design has to live on a phone, a tablet and a large monitor. Plus checking that a new CSS feature works outside your own browser.

Where to learn

Accessibility 1 week

People use sites with a keyboard, with a screen reader, with weak eyesight and in bright sun. Contrast, a visible focus ring, labelled fields and correct roles are not charity — large clients require them.

What you should be able to do

  • Move through the whole site by keyboard without losing focus
  • Build a dropdown from a published accessible pattern

Where to learn

Stage 2 · The language
JavaScript basics 2 months

Types, functions, objects and arrays, scope, errors. The longest topic on the map and the most valuable: frameworks change every few years, the language stays.

Where to learn

The page and events 2 weeks

Finding elements, changing content, clicks, typing, scrolling. Event bubbling belongs here — it saves hundreds of handlers.

What you should be able to do

  • Write a modal, tabs and a slider with no libraries
  • Use one handler on a list instead of thirty on its items
Async work and requests 2 weeks

Promises, async/await, server requests, error and loading states. A real interface is always waiting for something — and should say so.

What you should be able to do

  • Fetch data and show three states: loading, loaded, failed
  • Cancel a request nobody needs any more
TypeScript 3 weeks

JavaScript with type checking. It appears in job ads more often than plain JavaScript: on a large project it catches mistakes before they run.

Where to learn

Git and teamwork 1 week

Branches, merges, conflicts, reviewing changes. Without it you will not be hired, however good the code is.

Where to learn

Stage 3 · Tools
Terminal and packages 1 week

The command line, installing libraries, the dependency file and version locking. This is where "I updated one library and everything broke" becomes understandable.

Build tools 3 days

A bundler turns dozens of source files into a few ready ones: combined, minified, versioned. Vite is enough today and is set up in an evening.

Where to learn

Linters and one style 2 days

Tools that complain about risky code and format it for you. In a team they remove half the arguments in code review.

Debugging in the browser 3 days

Breakpoints, watching values, the network tab, the paint profile. Debugging separates people who fix things from people who rewrite at random.

Stage 4 · Frameworks
React 2 months

The most requested framework: the interface is made of components and data flows down. Take it first — it has the most jobs and the most material.

Where to learn

Application state 2 weeks

Where to keep data every screen needs: the cart, the profile, the settings. Start with what the framework gives you; add an external store when it gets tight.

Data fetching and caching 1 week

Requests, retries, caching, background refresh. Ready libraries do this better than hand-written code — the point is knowing what they take care of.

Routing and server rendering 2 weeks

Addresses inside an application and ready HTML prepared on the server. For sites that must be found in search this step is not optional.

Vue or Angular optional

A second framework makes sense once the first is solid and a job asks for it. Moving across takes weeks, not months: the ideas are the same.

Stage 5 · Professional work
Tests 2 weeks

Checks that run themselves and catch breakage before a client sees it. Start with single functions, then add "a person clicked and got" scenarios.

Speed 1 week

The three numbers Google measures and the plain ways to improve them: image weight, loading order, extra libraries, fonts. A slow site loses visitors and search positions.

Where to learn

Browser-side security 3 days

Someone else's script on your page, forged requests, tokens leaking into the wrong hands. A frontend developer must know at least these three and the defences against them.

Where to learn

Automatic build and deploy 1 week

A change lands in the main branch — tests run, the build is made, the site updates itself. Set up once, saves time every day.

Where to learn

Portfolio and first clients ongoing

Three finished projects convince more than ten started ones. Publish the code, and say which problem you solved and why you chose that solution.

Compare with the full map optional

Our map is deliberately shorter: it holds what is actually asked for at work. For the complete picture of the profession, see roadmap.sh.

Where to look

Next: backend developer I need a website, not a course