Программа «Frontend-разработка на JavaScript (React.js)» включает 144 урока (256 академических часов).
Курс охватывает путь от верстки на HTML и CSS (адаптивность, Flexbox, Grid, SCSS, работа с SVG/иконками и темизация) до уверенного владения JavaScript (DOM, события, асинхронность, работа с API, хранение данных) и разработки современных SPA-приложений на React.
Слушатели последовательно освоят работу с формами и валидацией, верстку по макетам Figma, работу с REST API и JSON, AJAX (в том числе через jQuery), интеграцию фронтенда с сервером, архитектуру React-приложений, маршрутизацию (React Router), управление состоянием (Redux и Context API), оптимизацию рендеринга, lazy loading, тестирование компонентов, а также подключение внешних сервисов (Firebase) и реализацию realtime-взаимодействия через WebSockets (Socket.io).
Выпускники программы могут занимать позиции Frontend Developer, JavaScript Developer, React Developer, UI Developer.
Востребованность — в продуктовых компаниях, digital-агентствах, стартапах, e-commerce и медиа.
Востребованность — в продуктовых компаниях, digital-агентствах, стартапах, e-commerce и медиа.
Технологический стек программы
HTML5
CSS3 / SCSS
Flexbox / Grid
JavaScript (ES6+)
DOM / Events
REST API / JSON / AJAX
jQuery
React.js
React Router
Redux / Context API
Firebase
WebSockets (Socket.io)
Figma
Git
CSS3 / SCSS
Flexbox / Grid
JavaScript (ES6+)
DOM / Events
REST API / JSON / AJAX
jQuery
React.js
React Router
Redux / Context API
Firebase
WebSockets (Socket.io)
Figma
Git
Программа реализуется Центром прикладных технологий Центра 25-12.
Обучение проходит в групповом формате по установленному расписанию.
Обучение проходит в групповом формате по установленному расписанию.
Документ об окончании
Диплом о профессиональной переподготовке
✓
Официальный документ об окончании программы ДПО
Официальный документ об окончании программы ДПО
✓
Подтверждает квалификацию «Разработчик WEB и мультимедийных приложений»
Подтверждает квалификацию «Разработчик WEB и мультимедийных приложений»
✓
Соответствует профстандарту и требованиям ФГОС
Соответствует профстандарту и требованиям ФГОС
Качество и соответствие
Программа соответствует профстандарту 06.035 «Веб-разработчик» и требованиям ФГОС СПО 09.02.09 «Веб-разработка».
Стоимость и оплата
Оплату можно разделить на 4 этапа в течение обучения. Все платежи осуществляются напрямую в адрес образовательной организации — без процентов и скрытых комиссий.
1 этап
при старте модуля 1
36 000 ₽
2 этап
перед модулем 2
36 000 ₽
3 этап
перед модулем 3
36 000 ₽
4 этап
перед модулем 4
36 000 ₽
Общая стоимость программы — 144 000 ₽
Содержание
- 4 модуля
- 144 уроков
- 256 часов
- Модуль 1. Разработка WEB-страниц на HTML и CSS36
- 1.1Введение в веб-разработку и структура HTML-документа
- 1.2Практическая работа №1. Создание базовой HTML-страницы
- 1.3Работа с текстом в HTML
- 1.4Практическая работа №2. Разметка текста и списков на веб-странице
- 1.5Работа с изображениями, ссылками и медиа
- 1.6Практическая работа №3. Создание страницы с мультимедийным контентом
- 1.7Формы и пользовательский ввод
- 1.8Практическая работа №4. Создание формы регистрации
- 1.9Основы CSS и стилизация текста
- 1.10Практическая работа №5. Применение CSS к тексту и заголовкам
- 1.11Блочная модель и размеры элементов
- 1.12Практическая работа №6. Создание многоуровневой структуры страницы
- 1.13Расположение элементов и Flexbox
- 1.14Практическая работа №7. Создание адаптивного блока с Flexbox
- 1.15Сетка CSS Grid
- 1.16Практическая работа №8. Создание сетки для страницы
- 1.17Медиа-запросы и адаптивность
- 1.18Практическая работа №9. Адаптация страницы под мобильные устройстваПрактическая работа №9. Адаптация страницы под мобильные устройства
- 1.19CSS-анимации и переходы
- 1.20Практическая работа №10. Добавление анимации к кнопке
- 1.21Введение в SCSS и препроцессоры
- 1.22Практическая работа №11. Работа с SCSS
- 1.23Работа с иконочными шрифтами и SVG
- 1.24Практическая работа №12. Использование иконок на веб-странице
- 1.25Темизация сайтов (темная и светлая темы)
- 1.26Практическая работа №13. Создание переключателя тем
- 1.27Основы взаимодействия HTML и JavaScript
- 1.28Практическая работа №14. Изменение стиля страницы через JS
- 1.29Валидация форм с помощью JavaScript
- 1.30Практическая работа №15. Реализация валидации формы
- 1.31Основы работы с макетами Figma
- 1.32Практическая работа №16. Анализ макета Figma
- 1.33Верстка по макету Figma
- 1.34Практическая работа №17. Верстка макета из Figma
- 1.35Пространства имён и сборка проекта
- 1.36Практическая работа №18. Оптимизация готовой страницы
- Модуль 2. Программирование на языке JavaScript36
- 2.1Введение в JavaScript и настройка окружения
- 2.2Практическая работа №1. Подключение JavaScript и работа в консоли
- 2.3Переменные и типы данных в JavaScript
- 2.4Практическая работа №2. Работа с переменными и преобразование типов
- 2.5Операторы и выражения в JavaScript
- 2.6Практическая работа №3. Использование операторов и выражений
- 2.7Условные конструкции и ветвления
- 2.8Практическая работа №4. Написание условных конструкций
- 2.9Циклы в JavaScript
- 2.10Практическая работа №5. Создание циклических алгоритмов
- 2.11Функции в JavaScript
- 2.12Практическая работа №6. Написание пользовательских функций
- 2.13Работа с областями видимости и контекстом this
- 2.14Практическая работа №7. Работа с this и контекстом функций
- 2.15Массивы и их методы
- 2.16Практическая работа №8. Работа с массивами и методами обработки данных
- 2.17Объекты в JavaScript
- 2.18Практическая работа №9. Создание и работа с объектами
- 2.19Деструктуризация и spread/rest-операторы
- 2.20Практическая работа №10. Использование деструктуризации и spread/rest
- 2.21Основы работы с DOM
- 2.22Практическая работа №11. Манипуляция DOM-элементами
- 2.23Обработчики событий в JavaScript
- 2.24Практическая работа №12. Работа с обработчиками событий
- 2.25Таймеры и задержки
- 2.26Практическая работа №13. Работа с таймерами и задержками
- 2.27Промисы и работа с асинхронным кодом
- 2.28Практическая работа №14. Создание и работа с промисами
- 2.29Async/Await и обработка данных
- 2.30Практическая работа №15. Использование fetch() и async/await
- 2.31Модули в JavaScript (import/export)
- 2.32Практическая работа №16. Работа с модулями JavaScript
- 2.33Работа с localStorage и sessionStorage
- 2.34Практическая работа №17. Хранение пользовательских данных
- 2.35Работа с API и JSON
- 2.36Практическая работа №18. Запрос к API и отображение данных
- Модуль 3. JavaScript для frontend-разработки36
- 3.1Глубже в JavaScript: продвинутая работа с переменными и типами данных
- 3.2Практическая работа №1. Исследование типов данных и областей видимости
- 3.3Callback-функции и функциональное программирование
- 3.4Практическая работа №2. Работа с callback-функциями
- 3.5Работа с массивами: продвинутые методы
- 3.6Практическая работа №3. Фильтрация и сортировка данных в массиве
- 3.7Объекты, прототипное наследование и классы
- 3.8Практическая работа №4. Создание классов и работа с объектами
- 3.9DOM-дерево и его манипуляция
- 3.10Практическая работа №5. Динамическое изменение веб-страницы с помощью JS
- 3.11Работа с событиями в браузере
- 3.12Практическая работа №6. Добавление обработчиков событий на страницу
- 3.13Анимации и стилизация элементов через JavaScript
- 3.14Практическая работа №7. Создание динамической анимации на JS
- 3.15Основы jQuery: подключение и селекторы
- 3.16Практическая работа №8. Работа с селекторами jQuery
- 3.17События в jQuery
- 3.18Практическая работа №9. Работа с событиями в jQuery
- 3.19Эффекты и анимации в jQuery
- 3.20Практическая работа №10. Добавление анимаций с jQuery
- 3.21Работа с AJAX и JSON в JavaScript
- 3.22Практическая работа №11. Запрос данных с API и их отображение на странице
- 3.23AJAX-запросы в jQuery
- 3.24Практическая работа №12. Получение данных с сервера через AJAX
- 3.25Работа с localStorage и sessionStorage
- 3.26Практическая работа №13. Реализация локального хранения данных
- 3.27Работа с модулями ES6
- 3.28Практическая работа №14. Работа с модулями ES6
- 3.29Локальное хранилище: localStorage, кастомные хуки
- 3.30Практическая работа №15. Использование async/await в проекте Сохранение темы и данных формы между перезагрузками
- 3.31Ошибки и их обработка в JavaScript
- 3.32Практическая работа №16. Обработка ошибок в коде
- 3.33Оптимизация кода и рефакторинг
- 3.34Практическая работа №17. Оптимизация проекта
- 3.35Взаимодействие фронтенда и бэкенда
- 3.36Практическая работа №18. Интеграция фронтенда с сервером
- Модуль 4. Разработка на фреймворке React.js36
- 4.1Введение в React.js и создание первого проекта
- 4.2Практическая работа №1. Создание первого React-приложения
- 4.3JSX и основы работы с компонентами
- 4.4Практическая работа №2. Создание компонентов с использованием JSX
- 4.5Работа с пропсами и состоянием (props & state)
- 4.6Практическая работа №3. Работа с props и state
- 4.7Основы хуков (hooks) в React
- 4.8Практическая работа №4. Использование хуков в React
- 4.9Работа с событиями в React
- 4.10Практическая работа №5. Обработка событий в React
- 4.11Использование CSS-модулей и стилизация компонентов
- 4.12Практическая работа №6. Стилизация компонентов React
- 4.13Управление списками и рендеринг данных
- 4.14Практическая работа №7. Рендеринг списков данных
- 4.15Контролируемые и неконтролируемые компоненты
- 4.16Практическая работа №8. Работа с формами в React
- 4.17React Router: основы навигации
- 4.18Практическая работа №9. Настройка маршрутизации
- 4.19Работа с REST API в React
- 4.20Практическая работа №10. Интеграция React-приложения с API
- 4.21Управление состоянием с Redux
- 4.22Практическая работа №11. Настройка Redux в проекте
- 4.23Работа с контекстом (Context API)
- 4.24Практическая работа №12. Использование Context API
- 4.25Оптимизация рендеринга компонентов
- 4.26Практическая работа №13. Оптимизация производительности React
- 4.27Ленивая загрузка компонентов
- 4.28Практическая работа №14. Реализация lazy loading
- 4.29Тестирование React-приложений
- 4.30Практическая работа №15. Тестирование компонентов
- 4.31Работа с анимацией в React
- 4.32Практическая работа №16. Добавление анимаций
- 4.33Подключение Firebase в React-приложении
- 4.34Практическая работа №17. Интеграция Firebase
- 4.35Работа с WebSockets (Socket.io)
- 4.36Практическая работа №18. Реализация WebSocket-соединения
Да. Программа построена с нуля и идеально подходит для начинающих.
HTML, CSS, JavaScript, jQuery, React.js, взаимодействие с API, маршрутизация, стилизация, деплой, тестирование и проекты.
Официальный диплом о профессиональной переподготовке или сертификат – в зависимости от вашего образования.
Требования
- Уверенное владение компьютером – работа с браузером, файловой системой и онлайн‑сервисами
- Доступ в интернет
- Знания в программировании не требуются – всё объясняется с нуля
Особенности
- Создадите полноценную веб‑страницу с нуля – с использованием HTML5, CSS3, Flexbox, Grid и адаптивной верстки
- Овладеете JavaScript – переменные, функции, DOM, асинхронность, массивы, объекты, API и работа с JSON
- Изучите инструменты frontend‑разработки – jQuery, работа с событиями, localStorage, AJAX‑запросы, валидация форм
- Освоите React.js – создание компонентов, работа с состоянием, маршрутизация, хуки, Redux, Context API
- Разработаете и задеплоите SPA‑приложение – подключение внешних сервисов, тестирование, оптимизация и публикация проекта
Целевая аудитория
- Новички, желающие войти в frontend‑разработку
- Студенты и выпускники, осваивающие востребованную IT‑специальность
- Специалисты из других областей, переходящие в веб
- Те, кто хочет получить системное обучение и создать проект под портфолио