Программа «Разработка веб-приложений полного цикла» включает 144 урока (256 академических часов). Курс охватывает полный цикл создания веб-приложения — от разработки структуры веб-страниц на HTML, оформления интерфейса средствами CSS, адаптивной вёрстки, работы с Flexbox и CSS Grid до разработки клиентской логики на JavaScript и TypeScript, создания пользовательского интерфейса на React, разработки серверной части приложения, подключения базы данных и запуска итогового веб-приложения.
Слушатели последовательно освоят создание многостраничных сайтов, работу с формами и пользовательским вводом, обработку событий, проверку данных на стороне клиента, работу с локальным хранилищем браузера, выполнение асинхронных операций, получение данных через сетевые запросы, использование программных интерфейсов, разработку компонентов React, маршрутизацию, управление состоянием компонентов, создание страниц входа и регистрации, проектирование базы данных, выполнение SQL-запросов, разработку серверной логики на Node.js и Express, работу с PostgreSQL, регистрацию и авторизацию пользователей, защиту маршрутов, интеграцию клиентской и серверной частей приложения, обработку ошибок, логирование, контейнеризацию и запуск приложения.
Выпускники программы могут осуществлять профессиональную деятельность в области разработки веб-приложений, создания пользовательских интерфейсов, разработки клиентской и серверной частей программных решений, проектирования баз данных и интеграции приложений с программными интерфейсами. Полученные компетенции могут быть применены на должностях младшего веб-разработчика, разработчика клиентской части веб-приложений, разработчика серверной части веб-приложений, разработчика веб-приложений полного цикла, младшего специалиста по разработке пользовательских интерфейсов, а также специалиста, выполняющего задачи создания, доработки и сопровождения веб-приложений.
Технологический стек программы
HTML5 для создания структуры веб-страниц
CSS3 для оформления страниц
Flexbox для построения гибкого расположения элементов интерфейса
CSS Grid для создания сложных макетов
JavaScript для разработки клиентской логики
TypeScript для строгой типизации данных
DOM для поиска, изменения и управления элементами HTML-страницы
REST API для организации обмена данными между клиентской и серверной частями приложения
JSON для передачи и хранения структурированных данных
React для разработки компонентного пользовательского интерфейса
Node.js для разработки серверной части веб-приложения
PostgreSQL для создания базы данных
Git для контроля версий, фиксации изменений и работы с историей проекта
Docker для контейнеризации клиентской части, серверной части и базы данных
CSS3 для оформления страниц
Flexbox для построения гибкого расположения элементов интерфейса
CSS Grid для создания сложных макетов
JavaScript для разработки клиентской логики
TypeScript для строгой типизации данных
DOM для поиска, изменения и управления элементами HTML-страницы
REST API для организации обмена данными между клиентской и серверной частями приложения
JSON для передачи и хранения структурированных данных
React для разработки компонентного пользовательского интерфейса
Node.js для разработки серверной части веб-приложения
PostgreSQL для создания базы данных
Git для контроля версий, фиксации изменений и работы с историей проекта
Docker для контейнеризации клиентской части, серверной части и базы данных
Программа реализуется Центром индивидуального обучения Центра 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. Основы разработки веб-страниц, HTML, CSS и адаптивная вёрстка36
- 1.1Назначение веб-приложений и структура разработки полного цикла.
- 1.2Практическая работа №1. Подготовка рабочей среды, установка редактора кода и создание первой HTML-страницы.
- 1.3Структура HTML-документа и базовые теги разметки.
- 1.4Практическая работа №2. Создание страницы с заголовками, абзацами, списками и ссылками.
- 1.5Семантическая разметка HTML-страницы.
- 1.6Практическая работа №3. Разработка структуры страницы с использованием тегов header, main, section, article и footer.
- 1.7Работа с изображениями, ссылками и мультимедийными элементами.
- 1.8Практическая работа №4. Добавление изображений, внешних ссылок и встроенного видео на страницу.
- 1.9HTML-формы и элементы пользовательского ввода.
- 1.10Практическая работа №5. Создание формы регистрации с полями ввода, списками и кнопками.
- 1.11Основы CSS и подключение стилей к странице.
- 1.12Практическая работа №6. Подключение CSS и оформление базовых элементов страницы.
- 1.13Селекторы, каскадность и наследование стилей.
- 1.14Практическая работа №7. Настройка стилей через классы, идентификаторы и вложенные селекторы.
- 1.15Цвет, фон, шрифты и оформление текста.
- 1.16Практическая работа №8. Оформление текстовых блоков, фона, цветовой схемы и шрифтов.
- 1.17Блочная модель CSS.
- 1.18Практическая работа №9. Настройка размеров, внутренних и внешних отступов, границ и фона блоков.
- 1.19Позиционирование элементов на странице.
- 1.20Практическая работа №10. Размещение элементов с использованием position, z-index и фиксированных блоков.
- 1.21Гибкое расположение элементов средствами Flexbox.
- 1.22Практическая работа №11. Создание горизонтального меню, карточек и блоков с помощью Flexbox.
- 1.23Сеточная структура страницы средствами CSS Grid.
- 1.24Практическая работа №12. Разработка макета страницы с шапкой, боковой панелью, основным содержимым и подвалом.
- 1.25Адаптивная вёрстка и медиазапросы
- 1.26Практическая работа №13. Настройка отображения страницы для компьютера, планшета и телефона.
- 1.27Навигация и структура многостраничного сайта.
- 1.28Практическая работа №14. Создание многостраничного сайта с единой навигацией.
- 1.29Таблицы, карточки и типовые элементы пользовательского интерфейса.
- 1.30Практическая работа №15. Разработка таблицы данных и набора карточек товаров или услуг.
- 1.31Доступность и удобство пользовательского интерфейса.
- 1.32Практическая работа №16. Проверка читаемости, контрастности, подписей полей и логики навигации.
- 1.33Основы работы с системой контроля версий Git.
- 1.34Практическая работа №17. Создание репозитория, фиксация изменений и работа с историей проекта.
- 1.35Итоговая структура макета клиентской части приложения.
- 1.36Практическая работа №18. Разработка адаптивного макета сайта для дальнейшего подключения клиентской логики.
- Модуль 2. JavaScript, TypeScript и разработка клиентской логики.36
- 2.1Назначение JavaScript в разработке веб-приложений.
- 2.2Практическая работа №1. Подключение JavaScript к HTML-странице и вывод первого результата.
- 2.3Переменные, типы данных и преобразование значений.
- 2.4Практическая работа №2. Работа со строками, числами, логическими значениями и преобразованием типов.
- 2.5Операторы, выражения и логика вычислений.
- 2.6Практическая работа №3. Выполнение арифметических, логических и сравнительных операций.
- 2.7Условные конструкции и ветвление сценариев.
- 2.8Практическая работа №4. Разработка сценариев с условиями if, else и switch.
- 2.9Циклы и повторяющиеся действия.
- 2.10Практическая работа №5. Обработка повторяющихся операций с использованием for, while и for…of.
- 2.11Массивы и методы обработки списков данных.
- 2.12Практическая работа №6. Фильтрация, сортировка и преобразование массивов данных.
- 2.13Объекты и хранение структурированных данных.
- 2.14Практическая работа №7. Создание объектов, чтение свойств и изменение данных объекта.
- 2.15Функции и повторно используемая логика.
- 2.16Практическая работа №8. Создание функций для проверки, расчёта и преобразования данных.
- 2.17Области видимости, замыкания и структура кода.
- 2.18Практическая работа №9. Разделение клиентского сценария на логические функции.
- 2.19Работа с деревом элементов HTML-страницы.
- 2.20Практическая работа №10. Поиск элементов страницы и изменение их содержимого средствами JavaScript.
- 2.21Обработка действий пользователя.
- 2.22Практическая работа №11. Реализация реакции интерфейса на клики, ввод данных и отправку формы.
- 2.23Проверка данных формы на стороне клиента.
- 2.24Практическая работа №12. Разработка проверки обязательных полей, длины текста, формата электронной почты и пароля.
- 2.25Работа с локальным хранилищем браузера.
- 2.26Практическая работа №13. Сохранение и чтение пользовательских данных через localStorage.
- 2.27Асинхронные операции и промисы.
- 2.28Практическая работа №14. Выполнение асинхронных операций с использованием Promise и async/await.
- 2.29Получение данных через сетевые запросы.
- 2.30Практическая работа №15. Загрузка данных из внешнего программного интерфейса приложения с использованием fetch.
- 2.31Обработка ошибок в клиентском коде.
- 2.32Практическая работа №16. Проверка ошибок загрузки данных, неверного ввода и отсутствующих значений.
- 2.33Основы TypeScript и строгая типизация данных.
- 2.34Практическая работа №17. Описание типов переменных, объектов, массивов и функций средствами TypeScript.
- 2.35Клиентская логика веб-приложения.
- 2.36Практическая работа №18. Реализация интерактивной страницы с формой, списком данных, фильтрацией и сохранением состояния.
- Модуль 3. React и разработка пользовательского интерфейса36
- 3.1Назначение React в разработке пользовательских интерфейсов.
- 3.2Практическая работа №1. Создание первого React-проекта и запуск приложения.
- 3.3Структура React-проекта и основные файлы приложения.
- 3.4Практическая работа №2. Изучение структуры проекта и настройка стартовой страницы.
- 3.5Компонентный подход к разработке интерфейса.
- 3.6Практическая работа №3. Создание простых компонентов для шапки, меню, основного блока и подвала.
- 3.7JSX-разметка и вывод данных на страницу.
- 3.8Практическая работа №4. Формирование интерфейса с использованием JSX и встроенных выражений.
- 3.9Передача данных в компоненты через свойства.
- 3.10Практическая работа №5. Создание карточек элементов с передачей данных через props.
- 3.11Состояние компонента и изменение интерфейса.
- 3.12Практическая работа №6. Использование useState для изменения данных на странице.
- 3.13Обработка действий пользователя в React.
- 3.14Практическая работа №7. Реализация кнопок, переключателей и действий пользователя.
- 3.15Работа со списками и ключами элементов.
- 3.16Практическая работа №8. Вывод массива данных в виде списка, таблицы или набора карточек.
- 3.17Условный вывод элементов интерфейса.
- 3.18Практическая работа №9. Отображение разных блоков интерфейса в зависимости от состояния приложения.
- 3.19Формы в React и управляемые поля ввода.
- 3.20Практическая работа №10. Создание формы добавления, редактирования и удаления записи.
- 3.21Проверка данных формы в React-приложении.
- 3.22Практическая работа №11. Реализация проверки полей и отображения сообщений об ошибках.
- 3.23Побочные эффекты и загрузка данных.
- 3.24Практическая работа №12. Использование useEffect для загрузки и обновления данных.
- 3.25Взаимодействие React-приложения с программным интерфейсом.
- 3.26Практическая работа №13. Получение, вывод и обновление данных через HTTP-запросы.
- 3.27Маршрутизация в React-приложении.
- 3.28Практическая работа №14. Создание страниц приложения и переходов между ними с использованием маршрутов.
- 3.29Общие состояния и передача данных между компонентами.
- 3.30Практическая работа №15. Организация передачи состояния между родительскими и дочерними компонентами.
- 3.31Компоненты авторизации и разграничение доступа.
- 3.32Практическая работа №16. Создание страниц входа, регистрации и защищённого раздела интерфейса.
- 3.33Сборка клиентского приложения.
- 3.34Практическая работа №17. Подготовка React-приложения к публикации и проверка итоговой сборки.
- 3.35Итоговый пользовательский интерфейс веб-приложения.
- 3.36Практическая работа №18. Разработка клиентской части приложения с несколькими страницами, формами и подключением к программному интерфейсу.
- Модуль 4. Серверная разработка, базы данных, программные интерфейсы и запуск приложения.36
- 4.1Назначение серверной части в веб-приложении полного цикла.
- 4.2Практическая работа №1. Подготовка серверного проекта на Node.js.
- 4.3Основы работы с Node.js и пакетным менеджером npm.
- 4.4Практическая работа №2. Инициализация проекта, установка зависимостей и запуск серверного сценария.
- 4.5Создание сервера средствами Express.
- 4.6Практическая работа №3. Разработка простого сервера и обработка первого HTTP-запроса.
- 4.7Маршруты и обработка запросов клиента.
- 4.8Практическая работа №4. Создание маршрутов для получения, добавления, изменения и удаления данных.
- 4.9Программный интерфейс REST и структура обмена данными.
- 4.10Практическая работа №5. Проектирование программного интерфейса REST для сущностей будущего приложения.
- 4.11Работа с телом запроса и параметрами маршрута.
- 4.12Практическая работа №6. Получение данных из body, params и query при обработке запросов.
- 4.13Основы проектирования базы данных.
- 4.14Практическая работа №7. Определение таблиц, полей, первичных и внешних ключей для приложения.
- 4.15Работа с системой управления базами данных PostgreSQL.
- 4.16Практическая работа №8. Создание базы данных, таблиц и связей между таблицами.
- 4.17SQL-запросы для работы с данными.
- 4.18Практическая работа №9. Выполнение SELECT, INSERT, UPDATE и DELETE-запросов.
- 4.19Подключение серверного приложения к базе данных.
- 4.20Практическая работа №10. Настройка подключения Node.js-приложения к PostgreSQL.
- 4.21Операции создания, чтения, обновления и удаления данных на сервере.
- 4.22Практическая работа №11. Разработка серверной логики создания, чтения, обновления и удаления записей.
- 4.23Регистрация и авторизация пользователей.
- 4.24Практическая работа №12. Создание регистрации, входа пользователя и проверки учётных данных.
- 4.25Хранение паролей и защита пользовательских данных.
- 4.26Практическая работа №13. Хеширование паролей и безопасная обработка данных пользователя.
- 4.27Токены доступа и защищённые маршруты.
- 4.28Практическая работа №14. Реализация JWT-авторизации и ограничения доступа к отдельным маршрутам.
- 4.29Интеграция клиентской и серверной частей приложения.
- 4.30Практическая работа №15. Подключение React-приложения к серверному программному интерфейсу и базе данных.
- 4.31Обработка ошибок, логирование и проверка устойчивости приложения.
- 4.32Практическая работа №16. Настройка обработки ошибок сервера и проверка некорректных запросов.
- 4.33Контейнеризация приложения.
- 4.34Практическая работа №17. Подготовка Docker-файлов для клиентской части, серверной части и базы данных.
- 4.35Запуск итогового веб-приложения полного цикла.
- 4.36Практическая работа №18. Сборка, запуск и проверка полного приложения с клиентской частью, серверной частью и базой данных.
Занятия проходят онлайн, в формате один на один.
График занятий согласуется индивидуально.
Весь софт устанавливается и настраивается вместе с преподавателем.
В конце курса выполняется итоговая практическая работа: сборка, запуск и проверка веб-приложения полного цикла с клиентской частью, серверной частью и базой данных.
Документ о прохождении курса выдаётся после сдачи проекта.
Требования
- Установленная среда разработки (рекомендации по установке даются в начале курса)
- Навыки базовой работы с ПК и браузером
- Образование не ниже среднего (для получения диплома)
Особенности
- Изучение полного цикла разработки веб-приложения: от вёрстки страниц до серверной логики и базы данных
- Персональные занятия с опытным фронтенд‑разработчиком
- Поддержка в изучении, настройке среды, исправлении ошибок
- Работа на практических задачах, создание финального проекта
- Получение официального документа об обучении
Целевая аудитория
- Начинающие программисты и слушатели, планирующие перейти в область разработки веб-приложений
- Специалисты смежных направлений, желающие освоить клиентскую и серверную разработку
- Студенты и выпускники технических и гуманитарных вузов
- Все, кто хочет уверенно войти в профессию и собрать портфолио