Программа «Frontend-разработка на JavaScript (React.js)» включает 144 уроков (256 академических часов). Курс охватывает всё — от основ HTML и CSS, через глубокий разбор JavaScript, до разработки современных SPA на React, управлению состоянием и публикации приложений.
Выпускники программы могут занимать позиции Frontend Developer, JavaScript Developer, React Developer, UI Developer.
Востребованность — в продуктовых компаниях, digital-агентствах, стартапах, e-commerce и медиа.
Востребованность — в продуктовых компаниях, digital-агентствах, стартапах, e-commerce и медиа.
Технологический стек программы
HTML5
CSS3 / SCSS
JavaScript (ES6+)
React.js
Redux / Context API
Vite
REST API / JSON
Git
Figma
CSS3 / SCSS
JavaScript (ES6+)
React.js
Redux / Context API
Vite
REST API / JSON
Git
Figma
Программа реализуется Центром индивидуального обучения Центра 25-12.
Обучение проходит в формате 1-на-1 с преподавателем по согласованному расписанию.
Обучение проходит в формате 1-на-1 с преподавателем по согласованному расписанию.
Документ об окончании
Диплом о профессиональной переподготовке
✓
Официальный документ об окончании программы ДПО
Официальный документ об окончании программы ДПО
✓
Подтверждает квалификацию «Разработчик WEB и мультимедийных приложений»
Подтверждает квалификацию «Разработчик WEB и мультимедийных приложений»
✓
Соответствует профстандарту и требованиям ФГОС
Соответствует профстандарту и требованиям ФГОС
Качество и соответствие
Программа соответствует профстандарту 06.035 «Разработчик WEB и мультимедийных приложений» и требованиям ФГОС СПО 09.02.09 «Веб-разработка».
Стоимость и оплата
Оплату можно разделить на 4 этапа в течение обучения. Все платежи осуществляются напрямую в адрес образовательной организации — без процентов и скрытых комиссий.
1 этап
при старте модуля 1
72 000 ₽
2 этап
перед модулем 2
72 000 ₽
3 этап
перед модулем 3
72 000 ₽
4 этап
перед модулем 4
72 000 ₽
Общая стоимость программы — 288 000 ₽
Содержание
- 4 модуля
- 144 уроков
- 256 часов
- Модуль 1. Основы веба и базовый JavaScript36
- 1.1Введение в веб-разработку: клиент-сервер, роль frontend
- 1.2Практическая работа №1. Анализ структуры веб-страницы в DevTools
- 1.3Основы HTML5: теги, атрибуты, семантика
- 1.4Практическая работа №2. Создание многосекционной HTML-страницы
- 1.5Основы CSS3: селекторы, свойства, каскад
- 1.6Практическая работа №3. Стилизация страницы с использованием внешних стилей
- 1.7Типы данных и переменные в JavaScript
- 1.8Практическая работа №4. Работа с примитивами и объектами в консоли браузера
- 1.9Операторы и логические выражения
- 1.10Практическая работа №5. Валидация пользовательского ввода через prompt
- 1.11Условные конструкции: if, else, switch
- 1.12Практическая работа №6. Изменение стиля элемента в зависимости от условия
- 1.13Циклы: for, while, for…of
- 1.14Практическая работа №7. Динамическое создание списка элементов в DOM
- 1.15Функции: объявление, параметры, возврат
- 1.16Практическая работа №8. Создание интерактивных обработчиков событий
- 1.17Область видимости и замыкания
- 1.18Практическая работа №9. Реализация счётчика с приватным состоянием
- 1.19Работа с массивами: методы map, filter, reduce
- 1.20Практическая работа №10. Фильтрация и отображение данных из массива
- 1.21Работа с объектами: деструктуризация, spread
- 1.22Практическая работа №11. Обновление UI на основе объектных данных
- 1.23Модули ES6+: import/export
- 1.24Практическая работа №12. Разделение логики на модули в Vite-проекте
- 1.25Асинхронность: Promise, async/await
- 1.26Практическая работа №13. Загрузка данных с JSONPlaceholder и отображение
- 1.27Работа с DOM: выбор, создание, изменение элементов
- 1.28Практическая работа №14. Построение динамического интерфейса без фреймворков
- 1.29Обработка событий: click, input, submit
- 1.30Практическая работа №15. Создание интерактивной формы с валидацией
- 1.31Работа с локальным хранилищем: localStorage
- 1.32Практическая работа №16. Сохранение состояния приложения между перезагрузками
- 1.33Отладка и инструменты разработчика
- 1.34Практическая работа №17. Диагностика ошибок и профилирование производительности
- 1.35Интеграция HTML, CSS и JavaScript в единое приложение
- 1.36Практическая работа №18. Реализация одностраничного интерфейса для управления списком задач
- Модуль 2. Современная вёрстка: HTML5, CSS3, адаптивность и инструменты36
- 2.1Структура HTML5: семантические теги и доступность
- 2.2Практическая работа №1. Создание семантической страницы с поддержкой a11y
- 2.3CSS3: селекторы, box model, позиционирование
- 2.4Практическая работа №2. Стилизация страницы с использованием CSS-переменных
- 2.5Адаптивный дизайн: медиа-запросы, mobile-first
- 2.6Практическая работа №3. Верстка макета для трёх точек останова
- 2.7Flexbox и CSS Grid: продвинутые макеты
- 2.8Практическая работа №4. Создание сложного Grid-макета с областями
- 2.9Препроцессоры: SCSS (вложенность, миксины, функции)
- 2.10Практическая работа №5. Конвертация CSS в SCSS с переменными и циклами
- 2.11Анимации и переходы: keyframes, transform, opacity
- 2.12Практическая работа №6. Реализация интерактивных эффектов при наведении
- 2.13Оптимизация изображений: форматы, lazy loading, SVG
- 2.14Практическая работа №7. Интеграция SVG-иконок и оптимизация загрузки фото
- 2.15CSS-архитектура: БЭМ, компонентный подход
- 2.16Практическая работа №8. Рефакторинг стилей по методологии БЭМ
- 2.17Кроссбраузерная вёрстка: особенности Firefox/Chrome/Safari
- 2.18Практическая работа №9. Исправление браузерных особенностей в макете
- 2.19Инструменты сборки: Vite для статических сайтов
- 2.20Практическая работа №10. Настройка проекта с поддержкой SCSS и автоперезагрузки
- 2.21Работа с Figma: экспорт стилей, спейсов, изображений
- 2.22Практическая работа №11. Верстка pixel-perfect секции по макету из Figma
- 2.23CSS-фреймворки: Tailwind CSS (основы и кастомизация)
- 2.24Практическая работа №12. Прототипирование интерфейса с использованием Tailwind
- 2.25Тестирование верстки: DevTools, Lighthouse, axe
- 2.26Практическая работа №13. Анализ производительности и доступности страницы
- 2.27Версия контроля: Git для верстки (ветки, коммиты, GitHub Pages)
- 2.28Практическая работа №14. Настройка деплоя на GitHub Pages (ручная сборка)
- 2.29Оптимизация скорости: критический CSS, шрифты, кэширование
- 2.30Практическая работа №15. Улучшение показателей Lighthouse до 90+
- 2.31Методологии: Agile в верстке, оценка задач в story points
- 2.32Практическая работа №16. Разбиение макета на задачи в AnyType или локальном Kanban-инструменте (WeKan)
- 2.33Документирование компонентов: Styleguidist для верстки
- 2.34Практическая работа №17. Создание living style guide для UI-библиотеки
- 2.35Создание портфолио: структура, хостинг, домен
- 2.36Практическая работа №18. Публикация портфолио на VK Cloud Pages
- Модуль 3. React.js: компоненты, состояние и маршрутизация36
- 3.1Введение в React: JSX, Virtual DOM, компоненты
- 3.2Практическая работа №1. Создание первого приложения на Vite + React
- 3.3Функциональные компоненты и props
- 3.4Практическая работа №2. Разработка переиспользуемых компонентов из Figma-макета
- 3.5Состояние: useState, управление формой
- 3.6Практическая работа №3. Реализация интерактивного списка задач
- 3.7Побочные эффекты: useEffect, загрузка данных
- 3.8Практическая работа №4. Интеграция с JSONPlaceholder API для отображения постов
- 3.9Условный рендеринг и списки
- 3.10Практическая работа №5. Отображение статуса загрузки и ошибок при работе с API
- 3.11Стилизация компонентов: CSS Modules, styled-components
- 3.12Практическая работа №6. Создание темной/светлой темы с CSS Modules
- 3.13Контекст: Context API для глобального состояния
- 3.14Практическая работа №7. Настройка темы и языка через провайдеры
- 3.15Маршрутизация: React Router v6 (роуты, навигация)
- 3.16Практическая работа №8. Создание многостраничного приложения с хедера и активными ссылками
- 3.17Формы: управление состоянием, валидация
- 3.18Практическая работа №9. Реализация формы регистрации с мгновенной валидацией
- 3.19Хуки: useCallback, useMemo, useRef
- 3.20Практическая работа №10. Оптимизация ререндеров в компоненте с графиком
- 3.21Тестирование: Jest + React Testing Library
- 3.22Практическая работа №11. Написание тестов для компонента списка и хуков
- 3.23Типизация: TypeScript в React (базовый уровень)
- 3.24Практическая работа №12. Добавление типов к компонентам и API-запросам
- 3.25Анимации: Framer Motion для переходов
- 3.26Практическая работа №13. Анимация появления модального окна и маршрутов
- 3.27Работа с медиа: изображения, видео, адаптивные форматы
- 3.28Практическая работа №14. Создание галереи с ленивой загрузкой и адаптивными изображениями
- 3.29Локальное хранилище: localStorage, кастомные хуки
- 3.30Практическая работа №15. Сохранение темы и данных формы между перезагрузками
- 3.31Отладка: React DevTools, логирование, мониторинг ошибок
- 3.32Практическая работа №16. Диагностика ошибки в сложном компоненте через DevTools
- 3.33Интеграция с библиотеками: Chart.js для визуализации
- 3.34Практическая работа №17. Отображение динамических данных в виде графика
- 3.35Производительность: React.memo, code splitting
- 3.36Практическая работа №18. Оптимизация приложения с использованием useMemo и lazy/Suspense
- Модуль 4. Продвинутый React: архитектура, интеграции и карьера36
- 4.1Управление состоянием: Redux Toolkit (createSlice, createAsyncThunk)
- 4.2Практическая работа №1. Настройка Redux store для приложения с аутентификацией
- 4.3REST API: интеграция с backend, аутентификация по JWT
- 4.4Практическая работа №2. Отправка запросов с авторизацией и обработкой ошибок
- 4.5Архитектура приложения: feature-sliced design
- 4.6Практическая работа №3. Рефакторинг кода под модульную структуру
- 4.7Продвинутая маршрутизация: lazy loading, защищённые роуты
- 4.8Практическая работа №4. Настройка асинхронной загрузки страниц и редиректов
- 4.9Формы: React Hook Form + Zod для валидации
- 4.10Практическая работа №5. Создание многошаговой формы с валидацией и сохранением промежуточного состояния
- 4.11Тестирование: end-to-end с Playwright
- 4.12Практическая работа №6. Написание сценариев тестирования пользовательских потоков
- 4.13Документирование: Storybook для UI-компонентов
- 4.14Практическая работа №7. Создание документации для кастомных кнопок и инпутов
- 4.15Мониторинг: интеграция с Sentry
- 4.16Практическая работа №8. Настройка отслеживания ошибок в продакшене
- 4.17CI/CD: GitHub Actions для тестирования и деплоя
- 4.18Практическая работа №9. Автоматизация деплоя на Vercel при пуше в main
- 4.19Деплой: Vercel/Netlify, настройка домена и HTTPS
- 4.20Практическая работа №10. Публикация приложения с кастомным доменом и редиректами
- 4.21PWA: сервис-воркеры, оффлайн-режим
- 4.22Практическая работа №11. Добавление поддержки оффлайн-режима и уведомлений
- 4.23Оптимизация: анализ бандла, tree shaking
- 4.24Практическая работа №12. Снижение размера бандла на 40% через code splitting
- 4.25Безопасность: защита от XSS, CSP
- 4.26Практическая работа №13. Санитизация HTML-контента и настройка Content Security Policy
- 4.27Микрофронтенды: модульная архитектура
- 4.28Практическая работа №14. Создание двух независимых React-модулей с общей библиотекой
- 4.29Стандарты кода: ESLint, Prettier, Husky
- 4.30Практическая работа №15. Настройка pre-commit хуков для проверки кода
- 4.31Подготовка к собеседованиям: алгоритмы, архитектурные паттерны
- 4.32Практическая работа №16. Решение задач на LeetCode и обсуждение паттернов (контекст, редьюсер)
- 4.33Карьерные практики: резюме, LinkedIn, технические собеседования
- 4.34Практическая работа №17. Составление технического резюме и подготовка к интервью
- 4.35Поддержка и эволюция: рефакторинг, технический долг
- 4.36Практическая работа №18. Анализ технического долга и составление плана рефакторинга
Занятия проходят онлайн, в формате один на один.
График занятий согласуется индивидуально.
Весь софт устанавливается и настраивается вместе с преподавателем.
Финальный проект — полноценное SPA на React.
Документ о прохождении курса выдаётся после сдачи проекта.
Требования
- Установленная среда разработки (рекомендации по установке даются в начале курса)
- Навыки базовой работы с ПК и браузером
- Образование не ниже среднего (для получения диплома)
Особенности
- Только актуальные технологии: HTML, CSS, JavaScript, React
- Персональные занятия с опытным фронтенд‑разработчиком
- Поддержка в изучении, настройке среды, исправлении ошибок
- Работа на практических задачах, создание финального проекта
- Получение официального документа об обучении
Целевая аудитория
- Начинающие программисты и те, кто хочет сменить профессию
- Специалисты смежных направлений, желающие перейти во frontend
- Студенты и выпускники технических и гуманитарных вузов
- Все, кто хочет уверенно войти в профессию и собрать портфолио