Фронтенд для middle+ : JS, Node.js, архитектура, производительность

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

Составили программу по образовательной модели 4C/ID: будете учить только то, что нужно для решения настоящих задач

Почувствуете себя в роли frontend-разработчика и поймёте, хотите ли развиваться в программировании. Изучите базовый синтаксис HTML и CSS. Попробуете размещать блоки на веб‑странице, менять шрифт и цвета. А после бесплатной части выберете подходящий формат обучения: базовый или расширенный.

Задачи frontend-разработчиков, базовые элементы, HTML, CSS

Теги HTML, заголовки, абзац, ссылка, атрибуты, один тег в другом, изображения, структура HTML‑документа, правила CSS, тег style, CSS‑файл, блоки, отступы, подпись к обложке, playground

Сборка лендинга, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика, больше вёрстки

Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, короткая запись свойств, границы, внешний и внутренний фокус элемента, блочные + строчные, расположение элементов по центру — margin: auto, тени, подвал сайта, центрирование по вертикали

Числа, строки, арифметика строк, переменные, подключение JavaScript к HTML, массивы, случайные числа, функции с аргументами, возвращаемое значение, выбор и изменение элементов страницы, Булевы величины, объекты, подключение внешних библиотек, циклы, релиз

Напишете с нуля простую программу на JavaScript и сделаете страницу интерактивной

Установка и настройка Git, SSH-ключ, настройка аккаунта GitHub, основы командной строки Bash, основные команды для организации командной работы с Git в локальных и удалённых репозиториях

Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков

Семантика HTML5, структура документа, оптимизация вёрстки, использование идентификаторов

Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex-basis, flex-grow и flex-shrink

Статическое, относительное и абсолютное позиционирование, z‑index, фиксированное и «липкое» позиционирование, outline, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, кастомные элементы ввода

Гриды, терминология гридов, столбцы и строки внутри грид‑контейнера, отступы, функция repeat(), фракция, расположение элементов, грид‑области, выравнивание сетки и содержимого грид‑областей, наложение элементов

Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег

LVHA, фокусы, ::marker, ::selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности

Создадите одностраничный сайт и напишете CSS для работающего приложения

Одностраничный сайт «Оно тебе надо»

Написание CSS стилей для приложения «Посмотри в окно»

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

Форматы, оптимизация изображений, плотность пикселей, адаптивный выбор изображений из набора, image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()

Экспорт SVG, использование SVG: инлайн, , фон, use, fill, stroke, анимация и оптимизация SVG, SVG‑маски

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-преобразований, transform-style, perspective и perspective-origin, backface-visibility

Сделаете адаптивный сайт с разными цветовыми темами, а затем самостоятельно соберёте веб‑приложение

Адаптивный сайт «Сложно сосредоточиться»

Примитивные типы данных, операторы typeof, undefined и null, строки, числа и специальные числовые значения

DOM: выбор элементов, атрибуты и их методы, манипуляции с классами CSS, свойства textContent, события, методы insertAdjacentHTML и insertAdjacentText

Чтение ошибок, их типы, логические ошибки и console.log, поиск документации, отладка через debugger, conditional breakpoints

Let и const против var, методы поиска в строке, преобразования строк и работы с числами, явное и неявное преобразование типов, логические операторы, НЕ (!), ИЛИ (||), И (&&), XOR (^), switch-case, тернарный оператор, циклы, директивы break и continue

InnerHTML, createElement и createTextNode, добавление элементов на страницу, удаление и перемещение, клонирование, template‑элементы, объект event, родственные связи в DOM

Объединение и преобразование в строку, управление элементами на любых позициях, коллекции в DOM, методы forEach и map, функции обратного вызова и их аргументы, методы filter, some, every, find, reduce, сортировка массива

Область видимости функции, rest и spread, деструктурирование аргументов

Создание объектов и запись свойств, прототипное наследование, дескрипторы свойств, деструктурирование массивов и объектов

Создадите интерактивную страницу с фотографиями. Сначала всё сверстаете, потом напишете логику на JavaScript

Веб-сервис «Mesto»

Библиотека пакетов NPM, подключение репозитория NPM‑пакетов, установка и настройка Webpack, настройка сборки, транспиляция JS: установка Babel, настройка обработки HTML и CSS, минификация CSS и добавление префиксов, использование PostCSS для минификации CSS и добавления префиксов

IIFE, инкапсуляция и модули, директивы export, import, ES6, особенности работы модулей в браузере, локальный сервер

Асинхронные операции, колбэки, асинхронные колбэки, таймеры, event loop, promise

События клавиатуры, объекты event: клавиатура и мышь, снятие слушателя, отмена стандартного поведения браузера, всплытие и делегирование событий

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

Веб-сервис «Mesto» (продолжение)

Динамическая и статическая типизация, документация JSDoc, проверка типов во время исполнения, настройка и инструментарий TS, массивы и объекты, специальные типы, создание собственных типов

Источники контекста, this, способы привязки, синтаксис классов в JS, добавление и типизация полей и методов классов, интерфейсы классов, принципы в ООП, инкапсуляция, наследование, полиморфизм

Приведение типов, типизация DOM‑элементов и их событий, типизация стандартных объектов JS, файлы деклараций .d.ts, создание и использование библиотек

Статические поля и методы, имплементация интерфейсов, дженерики, условные типы

Композиция классов, паттерны singleton, adapter/facade/proxy, observer, builder

IntersectionObserver, ResizeObserver, FileReader, локальные хранилища

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

Спроектируете ООП‑архитектуру интернет‑магазина с каталогом товаров и корзиной, задокументируете в UML. Реализуете с помощью TS с подключением к серверу

Одностраничное приложение интернет-магазина «Web-ларёк»

Подготовка окружения, сборка проектов Vite или Webpack, установка ESLint c набором правил Airbnb, Prettier, использование SCSS, Stylelint, Husky

React и JSX, синтаксис JSX: основы, списки и события, функциональные компоненты

Классовые компоненты, жизненный цикл классовых компонентов, virtual DOM

Хуки, рефы, useState, useEffect, useLayoutEffect, useRef, кастомные хуки

Установка и использование расширения React DevTools, сборка проекта

Импорт модулей и изображений, работа с CSS, шрифты, CSS-модули, использование clsx

Storybook, реализация компонента в изоляции, разработка через тестирование, сборка проекта как библиотеки для переиспользования

Реализуете страницу блога с настраиваемым через CSS-переменные дизайном

Страница блога

Маршрутизация на стороне сервера и клиента, клиентский роутинг и History API, установка и подключение React Router, создание маршрутов, навигация и ссылки, динамические маршруты, фильтрация и сортировка значений

Идентификация, аутентификация и авторизация, токены, авторизация доступа с помощью сессий, сохранение данных о пользователе, cookie в веб‑приложениях, защита маршрутов на фронтенде, выход из системы

Открытие и закрытие соединения, события WebSocket, получение и отправка данных, отладка и тестирование WebSocket в консоли разработчика

Redux Toolkit, RTK Query, redux-thunk, redux-saga, кастомные middleware и enhancer, интеграция с API, Redux DevTools

Реализуете глобальное состояние, роутинг и авторизацию в космической бургерной

Приложение «Stellar Burger»

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

Работа в команде с менеджерами проектов, тимлидами, системными аналитиками, дизайнерами и разработчиками над крупным проектом. Опыт, ничем не отличающийся от реального. Agile‑методология с применением всего, что изучали ранее, — и даже больше. Под присмотром опытных наставников и тимлидов студенты работают над CRM- и ERP‑системами, реализуют чаты и микросервисные архитектуры, строят сложные приложения из отдельных микрофронтендов, применяют Docker и CI для деплоя приложения на серверы.

Узнаете, как организовать учебный процесс, адаптироваться в новой среде и взаимодействовать в команде. Теория и практические задания помогут сделать онлайн-обучение и будущую работу легче и осознаннее.

Составите резюме, которое привлечёт внимание рекрутеров, и напишете сопроводительное письмо для откликов на вакансии. Узнаете, как правильно оформлять портфолио, и построите стратегию поиска работы. Обратите внимание: если курс оплачивает ваш работодатель, у вас не будет карьерного трека.

Акселерация — активный поиск работы с поддержкой HR‑экспертов. Будете откликаться на вакансии, делать тестовые и ходить на собеседования, а мы вас дистанционно поддержим. Например, расскажем, какие ошибки бывают в общении с работодателем и как их избежать. Акселерация может продолжаться до 6 месяцев — обычно этого достаточно, чтобы получить первую работу в IT.

Научитесь с помощью YandexGPT:

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

Основы визуальной коммуникации

Чтобы усилить портфолио

Чтобы поработать в команде и получить реальный кейс в портфолио

Больше навыков, которые помогут найти работу и быстрее вырасти до middle