Каждой компании нужен сайт или приложение, а значит, нужны и фронтенд‑разработчики

Освоите профессию с нуля за 10 месяцев

Получите мощный набор знаний и инструментов

Мы регулярно обновляем программу и учим актуальным навыкам, которые нужны работодателям.

HTML
CSS + SCSS
Flexbox
Git
Bash
JavaScript
TypeScript
React
Redux
Grid Layout
DOM
Webpack + Vite
React Router
ООП

И прозрачный карьерный рост

Вот средние зарплаты фронтенд‑разработчиков. Вы начнёте с junior позиции.

Источник: Хабр
69 000 ₽
Junior
174 000 ₽
Middle
309 000+ ₽
Senior

Полная программа курса

Составили программу по образовательной модели 4C/ID: будете учить только то, что нужно для решения настоящих задач
12 тем・1 проект・31 час
Бесплатно
HTML, CSS, JavaScript: бесплатный модуль
Почувствуете себя в роли frontend-разработчика и поймёте, хотите ли развиваться в программировании. Изучите базовый синтаксис HTML и CSS. Попробуете размещать блоки на веб‑странице, менять шрифт и цвета. А после бесплатной части выберете подходящий формат курса: базовый или расширенный.
  • Первый код
  • HTML
  • CSS
  • CSS-свойства
  • JavaScript
  • Базовый и расширенный курс
Первый код
Задачи разработчиков, базовые элементы, HTML, CSS
Что такое HTML и CSS
Теги HTML, заголовки, абзац, ссылка, атрибуты, один тег в другом, изображения, структура HTML‑документа, правила CSS, тег style, CSS‑файл, блоки, отступы, подпись к обложке, playground
Базовые CSS-свойства
Сборка лендинга, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика, больше вёрстки
Больше CSS
Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, короткая запись свойств, границы, внешний и внутренний фокус элемента, блочные + строчные, расположение элементов по центру — margin: auto, тени, подвал сайта, центрирование по вертикали
JavaScript
Числа, строки, арифметика строк, переменные, подключение JavaScript к HTML, массивы, случайные числа, функции с аргументами, возвращаемое значение, выбор и изменение элементов страницы, Булевы величины, объекты, подключение внешних библиотек, циклы, релиз
Напишете с нуля простую программу на JavaScript и сделаете страницу интерактивной
2
16 тем・2 проекта・6 недель
HTML и CSS: лейаут, доступность и интерактив
  • Вёрстка
  • Bash и Git
  • Шрифты и типографика
  • Семантика
  • Atomic
  • Grid Layout
  • Кодстайл
  • Псевдоклассы и псевдоэлементы
  • БЭМ
Bash и Git. Основы
Установка и настройка Git, SSH-ключ, настройка аккаунта GitHub, основы командной строки Bash, основные команды для организации командной работы с Git в локальных и удалённых репозиториях
Шрифты и типографика
Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков
Семантика и глобальные атрибуты
Семантика HTML5, структура документа, оптимизация вёрстки, использование идентификаторов
Флексбокс-вёрстка
Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex-basis, flex-grow и flex-shrink
Позиционирование элементов, стилизация форм
Статическое, относительное и абсолютное позиционирование, z‑index, фиксированное и «липкое» позиционирование, outline, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, кастомные элементы ввода
Grid Layout
Гриды, терминология гридов, столбцы и строки внутри грид‑контейнера, отступы, функция repeat(), фракция, расположение элементов, грид‑области, выравнивание сетки и содержимого грид‑областей, наложение элементов
Настройка страницы, мета, встраиваемый контент
Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег <video>, тег <audio>
Псевдоклассы, псевдоэлементы, доступность
LVHA, фокусы, ::marker, ::selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности
Создадите одностраничный сайт и напишете CSS для работающего приложения
Одностраничный сайт «Оно тебе надо»
Одностраничный сайт «Оно тебе надо»
Написание CSS стилей для приложения «Посмотри в окно»
Написание CSS стилей для приложения «Посмотри в окно»
3
16 тем・2 проекта・6 недель
Дизайн, адаптивная вёрстка и декорирование
  • Кастомные переменные
  • Адаптивность
  • Препроцессоры и постпроцессоры
  • Анимации и декорирование
  • 3D-трансформации
  • Модальные окна
  • Основы дизайна
Разработка интерфейса для разных устройств
Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера
Растровая графика, единицы измерения и функции
Форматы, оптимизация изображений, плотность пикселей, адаптивный выбор изображений из набора, image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()
SVG
Экспорт SVG, использование SVG: инлайн, <img>, фон, use, fill, stroke, анимация и оптимизация SVG, SVG‑маски
2D-трансформации + транзишены
Transition, матрица трансформаций, transform, transform-origin, translate, rotate, skew, scale, применение нескольких трансформаций
Анимации
Animation (name, duration, iteration‑count, direction, timing‑function, delay, play‑state, fill‑mode), @keyframes, оптимальное использование анимации, will‑change
Декорирование
Бордер-имидж, фильтры, тени, линейный, радиальный и конический градиенты, репит-градиент, множественные градиенты, бленд-мод
3D-трансформации
Матрица 3D-преобразований, transform-style, perspective и perspective-origin, backface-visibility
Сделаете адаптивный сайт с разными цветовыми темами, а затем самостоятельно соберёте веб‑приложение
Адаптивный сайт «Сложно сосредоточиться»
Адаптивный сайт «Сложно сосредоточиться»
4
15 тем・0,5 проекта・6 недель
Базовый JavaScript
  • Введение в JavaScript
  • Примитивные типы данных
  • Объектная модель документа (DOM)
  • Условия и циклы
  • Функции, массивы и объекты
Примитивы
Примитивные типы данных, операторы typeof, undefined и null, строки, числа и специальные числовые значения
Знакомство с DOM
DOM: выбор элементов, атрибуты и их методы, манипуляции с классами CSS, свойства textContent, события, методы insertAdjacentHTML и insertAdjacentText
Дебаггинг JavaScript
Чтение ошибок, их типы, логические ошибки и console.log, поиск документации, отладка через debugger, conditional breakpoints
Методы работы с данными, условия, циклы
Let и const против var, методы поиска в строке, преобразования строк и работы с числами, явное и неявное преобразование типов, логические операторы, НЕ (!), ИЛИ (||), И (&&), XOR (^), switch-case, тернарный оператор, циклы, директивы break и continue
Создание, добавление и удаление элементов в DOM
InnerHTML, createElement и createTextNode, добавление элементов на страницу, удаление и перемещение, клонирование, template‑элементы, объект event, родственные связи в DOM
Массивы
Объединение и преобразование в строку, управление элементами на любых позициях, коллекции в DOM, методы forEach и map, функции обратного вызова и их аргументы, методы filter, some, every, find, reduce, сортировка массива
Функции
Область видимости функции, rest и spread, деструктурирование аргументов
Объекты
Создание объектов и запись свойств, прототипное наследование, дескрипторы свойств, деструктурирование массивов и объектов
Создадите интерактивную страницу с фотографиями. Сначала всё сверстаете, потом напишете логику на JavaScript
Веб-сервис «Mesto»
Веб-сервис «Mesto»
5
4 темы・0,5 проекта・3 недели
Продвинутый JavaScript
  • Webpack
  • Модули в JavaScript
  • Асинхронность
  • Работа с браузерными событиями
  • Формы и их валидация
  • Работа с API
Сборка проекта. Webpack
Библиотека пакетов NPM, подключение репозитория NPM‑пакетов, установка и настройка Webpack, настройка сборки, транспиляция JS: установка Babel, настройка обработки HTML и CSS, минификация CSS и добавление префиксов, использование PostCSS для минификации CSS и добавления префиксов
Модули в JS
IIFE, инкапсуляция и модули, директивы export, import, ES6, особенности работы модулей в браузере, локальный сервер
Продвинутый JavaScript. Асинхронность
Асинхронные операции, колбэки, асинхронные колбэки, таймеры, event loop, promise
Обработка событий
События клавиатуры, объекты event: клавиатура и мышь, снятие слушателя, отмена стандартного поведения браузера, всплытие и делегирование событий
Подключите веб-сервис к серверу, чтобы все изменения данных сохранились и сервисом смогли пользоваться другие люди
Веб-сервис «Mesto» (продолжение)
Веб-сервис «Mesto» (продолжение)
6
13 тем・1 проект・6 недель
TypeScript и ООП
  • Объектно ориентированное программирование
  • Принципы разработки ПО
  • Работа с окружением
  • TypeScript
Введение в TypeScript
Динамическая и статическая типизация, документация JSDoc, проверка типов во время исполнения, настройка и инструментарий TS, массивы и объекты, специальные типы, создание собственных типов
Объектно ориентированное программирование
Источники контекста, this, способы привязки, синтаксис классов в JS, добавление и типизация полей и методов классов, интерфейсы классов, принципы в ООП, инкапсуляция, наследование, полиморфизм
Основы TypeScript
Приведение типов, типизация DOM‑элементов и их событий, типизация стандартных объектов JS, файлы деклараций .d.ts, создание и использование библиотек
Продвинутый TypeScript и ООП
Статические поля и методы, имплементация интерфейсов, дженерики, условные типы
Принципы разработки ПО
Композиция классов, паттерны singleton, adapter/facade/proxy, observer, builder
Работа с окружением
IntersectionObserver, ResizeObserver, FileReader, локальные хранилища
ООП в интерфейсах
Дропдаун, табы, аккордеон, слайдер, галерея, уведомления, календарь, игра морской бой
Спроектируете ООП‑архитектуру интернет‑магазина с каталогом товаров и корзиной, задокументируете в UML. Реализуете с помощью TS с подключением к серверу
Одностраничное приложение интернет-магазина «Web-ларёк»
Одностраничное приложение интернет-магазина «Web-ларёк»
7
5 тем・0,5 проекта・3 недели
Основы разработки с помощью React
  • Концепция SPA
  • CRA: настройка и сборка проекта
  • Синтаксис JSX
  • UseState
  • UseEffect
  • React DevTools
CRA
Подготовка окружения, сборка проектов Vite или Webpack, установка ESLint c набором правил Airbnb, Prettier, использование SCSS, Stylelint, Husky
Синтаксис JSX
React и JSX, синтаксис JSX: основы, списки и события, функциональные компоненты
Компоненты и их жизненный цикл
Классовые компоненты, жизненный цикл классовых компонентов, virtual DOM
Состояния и эффекты
Хуки, рефы, useState, useEffect, useLayoutEffect, useRef, кастомные хуки
React DevTools
Установка и использование расширения React DevTools, сборка проекта
Импорт модулей, CSS‑модули
Импорт модулей и изображений, работа с CSS, шрифты, CSS-модули, использование clsx
Библиотеки компонентов
Storybook, реализация компонента в изоляции, разработка через тестирование, сборка проекта как библиотеки для переиспользования
Реализуете страницу блога с настраиваемым через CSS-переменные дизайном
Страница блога
Страница блога
8
5 тем・0,5 проекта・3 недели
Роутинг и авторизация
  • Библиотека Redux
  • React Router
Роутинг в приложениях
Маршрутизация на стороне сервера и клиента, клиентский роутинг и History API, установка и подключение React Router, создание маршрутов, навигация и ссылки, динамические маршруты, фильтрация и сортировка значений
Авторизация и роутинг в веб‑приложениях
Идентификация, аутентификация и авторизация, токены, авторизация доступа с помощью сессий, сохранение данных о пользователе, cookie в веб‑приложениях, защита маршрутов на фронтенде, выход из системы
Взаимодействие в режиме реального времени: WebSockets
Открытие и закрытие соединения, события WebSocket, получение и отправка данных, отладка и тестирование WebSocket в консоли разработчика
Глобальное состояние для Redux
Redux Toolkit, RTK Query, redux-thunk, redux-saga, кастомные middleware и enhancer, интеграция с API, Redux DevTools
Реализуете глобальное состояние, роутинг и авторизацию в космической бургерной
Приложение «Stellar Burger»
Приложение «Stellar Burger»
9
4 темы・1 проект・3 недели
Тестирование React-приложений
Научитесь выстраивать удобную для тестирования структуру компонентов, оптимизировать приложения, проводить юнит- и интеграционное тестирование, подготавливать и публиковать в продакшен, деплоить на собственный сервер.
10
1 месяц
Проектный модуль
Работа в команде с менеджерами проектов, тимлидами, системными аналитиками, дизайнерами и разработчиками над реальным крупным проектом заказчика. Опыт, ничем не отличающийся от реального. Agile‑методология с применением всего, что изучали ранее, — и даже больше. Под присмотром опытных наставников и тимлидов студенты работают над CRM- и ERP‑системами, реализуют чаты и микросервисные архитектуры, строят сложные приложения из отдельных микрофронтендов, применяют Docker и CI для деплоя приложения на серверы.
11
Параллельный модуль・60 часов
Софтскилы для разработчиков
Узнаете, как организовать учебный процесс, адаптироваться в новой среде и взаимодействовать в команде. Теория и практические задания помогут сделать учёбу и будущую работу легче и осознаннее.
Карьерный центр・1 месяц
Карьерный трек: подготовка к трудоустройству
Составите резюме, которое привлечёт внимание рекрутеров, и напишете сопроводительное письмо для откликов на вакансии. Узнаете, как правильно оформлять портфолио, и построите стратегию поиска работы.

Обратите внимание: если курс оплачивает ваш работодатель, у вас не будет подготовки к трудоустройству.
Карьерный центр・До 6 месяцев
Акселерация: активный поиск работы с поддержкой HR-экспертов
Будете откликаться на вакансии, делать тестовые и ходить на собеседования, а мы вас поддержим. Например, расскажем о типичных ошибках в общении с работодателями и как их избежать. Акселерация может продолжаться до 6 месяцев — обычно этого достаточно, чтобы получить первую работу в IT.
Дополнительно・В любое время
Нейросети для разработчиков
Научитесь с помощью YandexGPT:
  • Генерировать код для создания функций, классов, обработки данных.
  • Искать ошибки в коде.
  • Искать информацию о синтаксисе, функциях, библиотеках и других аспектах языка.
  • Вести документацию.
  • YandexGPT
+1 модуль・+4 проекта・+3 месяца
Расширенный курс «Фронтенд-разработчик»
Этот формат стоит дороже, но включает в себя больше тем и проектов — чтобы усилить портфолио и повысить шансы на быстрое трудоустройство.
  • Дополнительные темы
  • Кейсы для портфолио
  • Командная работа
Ещё 1 модуль
Основы визуальной коммуникации
Ещё 4 проекта
Чтобы усилить портфолио
Проект от настоящего заказчика
Чтобы поработать в команде и получить реальный кейс в портфолио
Больше навыков, которые помогут найти работу и быстрее вырасти до middle

Выдадим диплом о профессиональной переподготовке

Это официальный документ установленного образца, который принимают работодатели. Образовательная лицензия № Л035‑01298‑77/00185314 от 24 марта 2015 года.

Очень много практики

Ещё 7 месяцев после выпуска бесплатно помогаем с поиском работы — для этого у нас целый карьерный центр

10 000+ выпускников Практикума уже нашли новую работу

Это подтверждено исследованием, которое мы провели вместе с Высшей школой экономики. Вот в каких компаниях они работают:

Как устроена учёба

В курсе есть модуль по YandexGPT

Работодатели ценят специалистов, которые умеют работать с нейросетями

Увидите возможности нейросетей, научитесь использовать их в работе, поймёте, когда это безопасно и этично, а когда нет

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

Эти выпускники уже стали фронтенд‑разработчиками. Большинство — без опыта в IT

4,7
TutorTop
4,5
IRecommend
4,3
Отзовик

Попробуйте любой формат курса бесплатно — выбрать один-единственный можно позже

  •                                        

На этом курсе вы освоите профессию с нуля

А если вы уже знаете HTML, CSS, JS и имеете опыт коммерческой разработки, вам подойдёт курс «Мидл фронтенд-разработчик»

Изучите продвинутый JavaScript и TypeScript, научитесь использовать API браузера, освоите DevOps и прототипирование

Отвечаем на вопросы

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

Подробнее о профессии вы можете узнать из нашей статьи.
Каким требованиям нужно соответствовать?
Вам не понадобятся специальные навыки или опыт — мы обучим всему с нуля. Главное — иметь компьютер и достаточно времени для занятий. Выше можно посмотреть программу, чтобы оценить количество учебного материала и свои возможности.
Какой компьютер нужен для обучения на курсе?
Минимальные системные требования, которым должен соответствовать ваш компьютер или ноутбук:

Операционная система:
• Windows 10 × 64 Home или новее;
• Linux (актуальные LTS-версии Ubuntu, Debian и другие);
• macOS 11 Catalina или новее.

Оперативная память: от 4 ГБ.

Процессор: Intel Core i3 начиная с 3 поколения. Лучше — i5 8 поколения или аналогичный от AMD.

Интернет: скорость от 5 Мбит, лучше — от 20 Мбит.

Жёсткий диск: свободное место на HDD или SSD — от 20 ГБ.
Кто будет меня учить?
Все наставники — практикующие специалисты: сотрудники Яндекса и других крупных компаний. Программу составляют опытные преподаватели и методисты, а ещё действующие специалисты Яндекса, Школы анализа данных и других лидеров технологической и образовательной индустрий.
Смогу ли я найти работу после обучения?
Гарантий нет, но мы верим, что сможете. Работодателям важно, чтобы вы справлялись с реальными задачами, а не просто обладали набором знаний. Мы учим применять знания на практике, а также предлагаем помощь HR-специалистов из нашего карьерного центра. Но вам точно придётся приложить усилия, чтобы найти работу: активно откликаться на вакансии, проходить собеседования, показывать свои проекты и делать тестовые задания.

По данным исследования Высшей школы экономики, 69% наших выпускников среди тех, кто хотел сменить профессию, начинают новую карьеру после обучения. Больше половины из них — во время учёбы и в первые 2 месяца после выпуска. Эти цифры подкреплены публичным отчётом о трудоустройстве студентов Практикума.
А если я хочу работать в Яндексе?
Некоторые наши студенты работают в сервисах Яндекса, в том числе и в Практикуме. Но с нашей стороны было бы нечестно что-либо гарантировать и завышать ваши ожидания.

Без опыта попасть в крупную IT-компанию возможно, хотя и сложно. Программа составлена так, чтобы вы могли начать карьеру после выпуска и набраться первого опыта. С ним вам будет значительно проще претендовать на позицию в крупных компаниях.
Хорошо, а вы можете помочь с поиском работы?
Да. Вы сможете пройти подготовку к трудоустройству, которая состоит из 2 частей:

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

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

Если случилось непредвиденное или понадобилось больше времени на закрепление материала, напишите своему куратору. Он поможет перенести дедлайн сдачи проекта или перевестись в более поздний поток. На общую стоимость курса это не повлияет.
Если не понравится, я могу вернуть деньги?
Конечно. Если поток ещё не стартовал, вернём всю сумму. Если учёба уже началась, придётся оплатить прошедшие дни со старта вашего первого потока — но мы вернём деньги за остаток курса. Более подробно рассказываем об этом в 7 пункте оферты.
Получу ли я какой-то документ после курса?
Если у вас есть среднее профессиональное или высшее образование, после курса вы получите диплом о профессиональной переподготовке.

Если нет, выдадим сертификат о прохождении курса и справку об обучении в электронном виде.
Как можно оплатить?
Банковской картой: внести всю сумму сразу или платить ежемесячно.

Ежемесячные платежи работают так: вы вносите первую оплату, и в этот момент привязывается карта. С этой карты автоматически будут списываться следующие платежи каждые 30 календарных дней. Например, оплатили 25 марта — следующий платёж пройдёт 24 апреля. Обучение будет стоить меньше, если оплатить весь курс сразу.

Через компанию: юридические лица — резиденты РФ также могут оплатить обучение в Практикуме. Условия предоставления услуг для юридических лиц могут отличаться — чтобы узнать подробнее, оставьте заявку или уточните у вашего менеджера.
Можно ли оплатить курс за счёт работодателя?
Да, работодатель может оплатить учёбу полностью или разделить оплату с вами: например, поделить сумму 50/50 или 75/25.

Такая оплата пройдёт по счёту или двустороннему договору, а ИП могут оплатить с бизнес-счёта. Если работодатель купит обучение сразу 10 сотрудникам или больше, сделаем скидку 10%.

Условия предоставления услуг для юридических лиц могут отличаться — чтобы узнать подробнее, оставьте заявку или уточните у вашего менеджера.
Что такое налоговый вычет на обучение и как его получить?
Налоговый вычет может оформить тот, кто работает по трудовому договору и является налоговым резидентом Российской Федерации, то есть 183 дня в году находится на территории страны.

Заявление на налоговый вычет нужно подать через личный кабинет на сайте nalog.ru (в него можно войти через аккаунт на Госуслугах).

К заявлению нужно приложить:
  • Справку 2-НДФЛ от работодателя.
  • Договор на обучение, в вашем случае это оферта Практикума.
  • Лицензию на образовательную деятельность. Вот наша.
  • Чек об оплате обучения. Мы отправляем его на электронную почту. Если не найдёте чек у себя в почте, напишите в чат службы поддержки — вышлем копию.
  • Справку о получении образовательных услуг — её тоже нужно запросить в чате поддержки.
Подробнее о налоговом вычете — на сайте Федеральной налоговой службы.

Давайте поможем

Мы перезваниваем в течение 30 минут каждый день с 10:00 до 19:00. Если оставите заявку сейчас, то перезвоним уже в рабочее время.

Как планируете учиться?