Обучение на Фронтенд‑разработчика с нуля включает в себя 5 модулей с лекциями, практикой и итоговыми проектами (от новичка до уровня Middle‑разработчика), а также финальный проект.
HTML и CSS
- ИТ-индустрия, основы веб-разработки и настройка окружения.
- Основы HTML: структура, теги, текст, списки и таблицы.
- Мультимедиа в HTML: изображения, аудио, видео и их оптимизация.
- HTML-формы: создание, элементы, валидация и типы ввода.
- Семантические теги HTML5, микроразметка и SEO-оптимизация.
- Основы CSS: подключение, синтаксис, базовые селекторы, цвета, переменные.
- Продвинутые CSS-селекторы: комбинированные, атрибутные, псевдоклассы и псевдоэлементы.
- Оформление текста и шрифты в CSS: свойства, подключение, выравнивание.
- Блочная модель CSS: отступы, размеры. Flexbox для создания макетов.
- Фон и декоративные элементы в CSS: цвета, изображения, градиенты, тени, рамки.
- Позиционирование элементов в CSS: типы (relative, absolute, fixed, sticky), плавающие элементы, центрирование.
- CSS Трансформации: 2D/3D. Переходы и анимации: основы, свойства, циклы.
- Отзывчивая верстка: медиа-запросы, адаптивные сетки, графика и шрифты, mobile-first.
- CSS Grid Layout: создание контейнеров, определение строк и столбцов, размещение и выравнивание элементов.
- CSS-функции: calc(), min(), max(), clamp(), препроцессоры.
- Работа с системой контроля версий Git и GitHub. Практическое освоение GUI в PyCharm: создание веток (Branch), фиксация изменений (Commit) и отправка на сервер (Push). Настройка файла .gitignore.
Итоговый проект
- Создание адаптивной главной страницы для сайта по бронированию билетов. Цель блока HTML/CSS — заложить прочный визуальный фундамент проекта.
Введение в JavaScript
- Введение в JavaScript: роль в веб-разработке и вывод информации (console.log).
- Переменные и основные типы данных: var, let, const, числа, строки, булевы, специальные значения (null, undefined, NaN) и преобразование типов.
- Операторы и условные конструкции: математические, сравнения, логические, if-else и тернарный оператор.
- Массивы и циклы: создание, методы, итерирование (for, while), управление циклами (break, continue).
- Функции: объявление, параметры, return, стрелочные функции и контекст this.
- Объекты: создание, свойства, методы, работа с данными.
- Основы DOM: структура, объект document, поиск элементов (querySelector, querySelectorAll).
- Работа с коллекциями элементов: HTMLCollection, NodeList, их особенности и перебор.
- Манипуляции с атрибутами: getAttribute, setAttribute, прямой доступ к свойствам элементов.
- Изменение стилей: element.style, управление CSS-классами через classList.
- Модификация содержимого: textContent, innerHTML и вопросы безопасности.
- События в JavaScript: основные типы, навешивание (addEventListener) и снятие обработчиков (removeEventListener), объект event (target, preventDefault).
- Таймеры: setTimeout и setInterval для задержек и повторений.
- Динамическое создание/удаление элементов и Fetch API.
Итоговый проект
- С помощью JavaScript — оживить статический интерфейс и сделать его интерактивным и функциональным. JavaScript будет выступать мозгом проекта, отвечая за динамическое поведение элементов, таких как открытие/закрытие меню, автодополнение полей ввода, управление календарём и обработка пользовательских действий.
Работа с сетью
- Основы устройства сети: модель OSI, принципы работы подсетей, DNS, NAT и VPN.
- Изучение протокола HTTP: клиент-серверная архитектура, структура URL, HTTP-методы, коды ответов, заголовки и введение в REST.
Продвинутый JavaScript
- Расширенные функции и объекты: преобразование типов, специальные типы (null, undefined), функции (параметры, области видимости), объекты (методы, деструктуризация, rest/spread операторы), обработка исключений.
- Продвинутая работа с данными и отладка: форматирование дат (Date), шаблонные литералы, таймеры, функции высшего порядка, замыкания, основные и перебирающие методы массивов, отладка в IDE.
- Прототипы, Классы и ООП: основы ООП, прототипы и наследование через них, синтаксис классов (конструкторы, методы, наследование, статические методы), инкапсуляция, полиморфизм, миксины.
- DOM, События и Canvas: введение и навигация по DOM, создание/удаление элементов, работа с атрибутами и стилями, события (объект события, всплытие/перехват, пользовательские события, оптимизация), Canvas API.
- Асинхронность, Промисы и Бэкенд: концепции асинхронности, Promise (цепочки), async/await, Fetch API и Axios, CRUD-операции, обработка ошибок, методы call, bind, apply.
- Новые структуры данных и объекты браузера: итераторы и генераторы, Map, Set, веб-хранилища (localStorage, sessionStorage), работа с Cookies, введение в WebSocket и Web APIs.
Фундамент бэкенда: от Node.js до Express.js
- Введение в Node.js: философия, установка, запуск скриптов, package.json, управление зависимостями npm и модули (CommonJS, ES Modules).
- Асинхронное программирование: Event Loop, Callbacks и Promises (then, catch), async/await, обработка ошибок и аргументов (process.argv).
- Работа с файловой системой (fs, fs.promises) для чтения, записи, удаления файлов и директорий. Модуль path и JSON-файлы.
- Создание нативного HTTP-сервера: модуль http, объекты request/response, ручная маршрутизация, парсинг URL, отправка ответов и установка статусов.
- Основы Express.js: установка, создание первого приложения, роутинг (параметры, query), парсинг тела запроса, реализация CRUD-операций.
- Расширенный Express.js: Middleware (пользовательские, статика), обработка ошибок и структурирование проекта (маршруты, контроллеры, сервисы).
Основы TypeScript
- Введение в TypeScript: установка, настройка, сравнение с JavaScript и обзор типов данных.
- Основы типизации: примитивные типы, массивы, кортежи, объекты, интерфейсы, типизация функций (опциональные параметры, стрелочные), Union и Intersection, any, unknown, readonly, const.
- Интерфейсы и классы: введение в интерфейсы (расширение, для функций), основы классов (свойства, методы, модификаторы доступа), наследование, абстрактные классы, связь интерфейсов и классов.
- Продвинутые типы и функции: перечисления (Enums), дженерики (Generics) и их ограничения, оператор keyof, типы индексирования, утилитарные типы, тип guards, перегрузка функций.
- Работа с модулями и пространствами имен: введение, продвинутое использование модулей, пространства имен, отличия, системы сборки проектов, работа с внешними библиотеками, публикация модулей, отладка.
Итоговый проект
- Работа с бэкендом
Мастерство фронтенда: React
- Основы React с TypeScript: введение, настройка проекта, JSX, компоненты, пропсы, состояние (useState, useEffect) и его типизация.
- Продвинутое управление состоянием: useReducer и useContext для сложного и глобального состояния, их типизация.
- Оптимизация компонентов: React.memo, useCallback, useMemo для мемоизации и предотвращения ререндеров. Профилирование с React DevTools.
- Компоненты высшего порядка (HOC) и рендер-пропсы: добавление логики, аутентификации, типизация и сравнение подходов.
- Работа с формами и валидация: Formik для форм, Yup для валидации данных, асинхронная валидация, многошаговые формы.
- Глобальное состояние с Redux и Redux Toolkit: основы Redux, Store, slices, типизация, useSelector, useDispatch, createAsyncThunk для асинхронных действий.
- Redux Middleware: Redux Thunk и Redux Saga для асинхронных операций, их типизация и применение.
- Кэширование данных с React Query: установка, запросы, мутации, типизация, управление кэшем, оптимизация.
- Маршрутизация с react-router-dom: базовые, динамические и защищённые маршруты, навигация, параметры.
- Оптимизация производительности React: профилирование, React.lazy/Suspense (lazy loading), React.memo.
- Интеграция с REST API: fetch и Axios для запросов (GET/POST/PUT/DELETE), типизация, обработка ошибок, хуки.
- Введение в GraphQL: концепции, Apollo Client для запросов/мутаций, типизация, кэширование, аутентификация.
- Аутентификация с JWT: основы, хранение в localStorage, AuthService, логин/регистрация, защищённые маршруты.
- Продвинутая аутентификация: MFA, защита маршрутов с AuthGuard, уровни доступа, OAuth/SSO.
- Тестирование компонентов: Jest и React Testing Library для рендеринга, событий, пропсов, состояния, мокирование API.
- Интеграционное тестирование: Cypress для тестирования маршрутов, форм, API-запросов и асинхронных операций.
Итоговый проект
- Создание современного веб-сервиса для бронирования билетов, разработанный с использованием React, TypeScript и React Router.
- Проект акцентируется на проработке клиентской части, работа с React-компонентами, управлением состоянием (Context или Redux) и маршрутизацией. Пользовательский опыт, динамическое формирование форм и автоматический пересчет стоимости заказа станут ключевыми элементами реализации.
Full-stack-приложения: Next.js 15, маршрутизация, API и аутентификаци
- Введение в Next.js 15: цели, возможности, Page Router vs App Router, структура проекта (app/), layout.tsx, page.tsx, template.tsx, Server Components и Client Components.
- Маршрутизация в App Router: File-based routing, статические и динамические сегменты ([id], [...slug]), группы и параллельные маршруты, вложенность, Layout-система (layout.tsx vs template.tsx), навигация.
- Загрузка данных и кеширование в Server Components: fetch() с кешированием (cache, revalidate), обработка состояний загрузки (loading.tsx), ошибок (error.tsx), ISR с revalidate, tags, Metadata API для SEO.
- Server Actions: основы, создание async функций с use server, формы в Next.js, передача данных, useFormState для управления статусом, useOptimistic для оптимистичного UI.
- Аутентификация с next-auth: установка, настройка провайдеров (GitHub, Google), управление сессиями (auth(), getServerSession()), middleware.ts для защиты маршрутов и редиректов.
- Route Handlers (API): структура app/api/route.ts, поддержка HTTP-методов (GET, POST, PUT, DELETE), работа с Request/Response, NextResponse.json(), валидация данных (zod), обработка ошибок, связь с Server Actions.
Проект
- Интернет-магазин на Next.js
Полный цикл разработки на Angular 19
- Введение в Angular 19: структура проекта, Standalone Components, шаблоны (интерполяция, Property Binding, Event Binding, Two-way Data Binding [(ngModel)]).
- Встроенные директивы: структурные (*ngIf, *ngFor), атрибутивные (ngClass, ngStyle). Вложенные компоненты: @Input() для передачи данных вниз, @Output() и EventEmitter для передачи событий вверх, хуки жизненного цикла (ngOnInit, ngOnChanges).
- Сервисы и Внедрение Зависимостей (DI): зачем нужны сервисы, @Injectable(), создание и внедрение сервисов, providedIn: root, иерархия инжекторов, управление состоянием через сервис. Введение в Signals.
- Работа с формами: отличие Template-driven и Reactive Forms. Подключение FormsModule (для Template-driven) и ReactiveFormsModule. FormGroup, FormControl, FormArray. Встроенная и пользовательская валидация. Отображение ошибок.
- HTTP-клиент и Observables (RxJS): концепция RxJS и Observables, подключение HttpClientModule, выполнение HTTP-запросов (GET, POST, PUT, DELETE), подписка на Observable (subscribe()), обработка ошибок (catchError), async pipe, операторы RxJS (map, filter, tap), HTTP Interceptors.
- Маршрутизация (Routing): настройка маршрутов (RouterModule.forRoot, forChild), определение маршрутов (path, component),
, декларативная навигация (routerLink), динамические параметры (ActivatedRoute), Query-параметры, Guard-ы (CanActivate), ленивая загрузка модулей.
Проект
- Интернет-магазин на Angular
Введение в React Native
- Введение в React Native: основы, отличия от React Web, установка окружения (Node.js, Android Studio, Xcode), создание и структура проекта.
- Основные компоненты и стилизация: View, Text, Image, ScrollView, типизация компонентов с TypeScript, работа с StyleSheet и Flexbox для адаптивного интерфейса.
- Навигация с React Navigation: Stack, Bottom Tab и Drawer Navigation, типизация параметров и экранов, передача данных между экранами.
- Управление состоянием с Redux: установка Redux и Redux Toolkit, создание Store и slices, типизация состояния и действий, useSelector, useDispatch, createAsyncThunk для асинхронных операций, Redux Persist.
- Подключение к API и локальное хранение: работа с fetch и Axios для HTTP-запросов, типизация запросов/ответов, обработка ошибок, использование AsyncStorage для локальных данных.
- Оптимизация и тестирование: принципы оптимизации производительности (React.memo, useCallback, useMemo), профилирование (React DevTools), оптимизация изображений и списков (FlatList), тестирование с Jest и React Native Testing Library.
Проект:
- Приложение на React Native
Паттерны проектирования
- Порождающие паттерны
- Структурные паттерны
- Поведенческие паттерны
- Антипаттерны
Основы SQL и PostgreSQL
- Изучение реляционной модели данных и синтаксиса SELECT. Фильтрация данных с помощью WHERE, сортировка с ORDER BY, ограничение вывода через LIMIT и OFFSET для пагинации, а также извлечение уникальных значений с DISTINCT.
- Агрегирование и группировка данных. Применение агрегатных функций (COUNT, SUM, AVG, MIN, MAX), группировка результатов с GROUP BY и фильтрация групп с HAVING. Обзор основных числовых и временных типов данных.
- Понимание и обработка NULL значений с помощью IS NULL, COALESCE и CASE WHEN. Использование подзапросов для сложной фильтрации данных с операторами IN и EXISTS.
- Объединение таблиц: освоение INNER JOIN и LEFT JOIN для связывания данных из нескольких таблиц. Изучение концепции внешних ключей и моделирование связей ONE-TO-MANY и MANY-TO-MANY.
- Создание и изменение таблиц с помощью CREATE и ALTER TABLE с использованием ограничений. Вставка, обновление и удаление данных командами INSERT, UPDATE, DELETE.
Docker
- Основы Linux. Изучение командной строки, навигация по файловой системе, работа с файлами и директориями.
- Администрирование Linux. Управление пользователями и группами, настройка прав доступа к файлам, мониторинг и управление системными процессами.
- Введение в Docker. Сравнение контейнеров и виртуальных машин. Установка, основные команды и знакомство с Docker Hub.
- Основы работы с Docker. Создание и управление контейнерами, работа с логами, перенаправление портов и монтирование томов для постоянного хранения данных.
- Работа с Docker-образами. Создание образов с помощью Dockerfile, изучение основных инструкций, управление образами, их оптимизация и публикация в Docker Hub.
- Docker Compose. Введение в оркестровку контейнеров. Создание docker-compose.yml для управления многоконтейнерными приложениями, настройка сетей, томов и масштабирование сервисов.
Итоговый проект
- Настройка Environment для разработки




