Профессиональная Web-разработка. Дизайн, код и автоматизация

9 участников

О чём курс

Этот комплексный курс представляет собой глубокое погружение в современную Web-разработку, охватывающее полный цикл создания профессионального продукта: от формирования идеи и проектирования дизайна до написания кода, тестирования и автоматизированного деплоя на сервер. Программа разработана для тех, кто хочет выйти за рамки фрагментарных туториалов и освоить реальные процессы, принятые в ведущих IT-компаниях. В ходе обучения вы пройдете путь в 163 дня, в течение которых напишете более 20 000 строк кода, выполните 320 упражнений и изучите 221 урок, суммарно составляющие 78 часов интенсивного контента.

Курс идеально подходит новичкам, желающим с нуля освоить профессию и дойти до уровня продакшена, фрилансерам, стремящимся к эффективной организации рабочего процесса, а также IT-предпринимателям, которые хотят самостоятельно создавать свои проекты, экономя бюджет и контролируя качество на каждом этапе. Вы научитесь работать с актуальным стеком технологий, включая HTML, CSS, SCSS, JavaScript, PHP, SQL, Laravel, Nginx, Docker, а также освоите инструменты для обеспечения качества кода, такие как Prettier, Stylelint, ESLint, PHPStan и Pint. Особое внимание уделяется методологиям управления проектами: вы научитесь работать по Scrum и Kanban, планировать задачи в Jira и создавать профессиональную документацию в Confluence.

На выходе вы получите не просто теоретические знания, а готовый профессиональный Web-проект, созданный собственными руками. Вы освоите процесс адаптивной вёрстки, научитесь программировать серверную часть, писать автоматизированные тесты (Vitest, PHPUnit) и внедрять DevOps-практики. Вы узнаете, как использовать возможности искусственного интеллекта для генерации качественного дизайна, как настраивать окружение разработки, работать с Git (ветки, Pull Request, CI/CD) и размещать сайты на VPS с полной автоматизацией процесса через пайплайны. Этот курс дает мощное конкурентное преимущество, превращая вас из простого верстальщика в полноценного специалиста, понимающего архитектуру современных веб-приложений и умеющего доводить их до финального релиза в интернете.

Программа обучения

  1. Введение в профессиональную Web-разработку
  2. Подготовка документации проекта
  3. Создание дизайна с помощью AI
  4. Базовая подготовка проекта 5.1 Frontend-разработка. 1-й спринт 5.2 Frontend-разработка. 2-й спринт 5.3. Frontend-разработка. 3-й спринт 5.4 Frontend-разработка. 4-й спринт 6.1 Backend-разработка. 5-й спринт 6.2 Backend-разработка. 6-й спринт 6.3 Backend-разработка. 7-й спринт
  5. Размещение Web-проекта в Интернете

Бонусные курсы

  • Бонус «GitLab под ключ»
  • Бонус «Вёрстка сайта с нуля 2.0»
  • Бонус «Программирование на JavaScript с Нуля до Гуру 2.0»
  • Бонус «PHP и MySQL с Нуля до Гуру 3.0»
  • Бонус «Laravel от А до Я»
  1. Введение в профессиональную Web-разработку
  • Как проходить курс?
  • Что такое профессиональная Web-разработка: от идеи до продакшена
  • Обзор стека технологий и инструментов
  • Agile и Scrum для соло-разработчика и команды
  • Автоматизированное тестирование
  • Работа с Confluence
  • Управление задачами в Jira
  • Git. Ключевые концепции Git. Практическое применение
  • GitHub Actions. Автоматизация и CI/CD
  • Docker. Ключевые принципы Docker. Практическое применение
  • Дизайн. Варианты создания
  • Дизайн. Заказ дизайна на фрилансе
  • Дизайн. Генерация дизайна с помощью AI
  1. Подготовка документации проекта
  • Настройка проекта в Confluence
  • Обзор проекта
  • Функциональные требования
  • Технические требования
  • Дорожная карта проекта
  • Архитектура системы
  • API-документация
  • Руководство по разработке
  • Пользовательские потоки
  • Ключевые страницы интерфейса
  1. Создание дизайна с помощью AI
  • Создание прототипа главной страницы
  • Создание прототипа каталога
  • Создание прототипа страницы курса
  • Создание прототипа страницы прохождения курса
  • Создание прототипа страницы регистрации
  • Создание прототипа страницы с корзиной
  • Создание прототипа восстановления пароля
  • Создание прототипа страницы "Мои курсы"
  • Создание прототипа страницы "Мои отзывы"
  • Создание прототипа страницы "Мои данные"
  • Создание прототипа страницы "Безопасность"
  • Создание дизайна главной страницы
  • Создание дизайна второстепенных страниц
  1. Базовая подготовка проекта
  • Установка и настройка локального сервера
  • Установка Composer, PHP и phpMyAdmin
  • Настройка проекта в Jira
  • Установка и настройка расширений для VS Code
  • Создание Laravel проекта
  • Настройка Vite
  • Установка необходимых зависимостей для Frontend
  • Инструменты обеспечения качества для HTML, CSS и JavaScript: Prettier, Stylelint, PostCSS
  • Тестирование Frontend: Vitest и setupTests.js
  • Автоматизация с помощью npm-скриптов
  • Установка необходимых зависимостей для Backend
  • Инструменты обеспечения качества для PHP: PHPStan и Pint
  • Тестирование Backend: phpunit.xml
  • Автоматизация с помощью composer-скриптов
  • Создание и запуск Docker-образа
  • Настройка CI
  • Создание git-репозитория
  • Настройка хука pre-commit и первый коммит

5.1 Frontend-разработка. 1-й спринт

  • Планирование первого спринта
  • Базовая подготовка главной страницы
  • Подключение шрифтов и favicon
  • Подготовка к вёрстке
  • Вёрстка. Основные UI-элементы
  • Вёрстка. Шапка сайта
  • Вёрстка. Поиск со всплывающими подсказками
  • Вёрстка. Всплывающая окно с корзиной
  • Вёрстка. Всплывающее окно с курсами пользователя
  • Вёрстка. Всплывающее окно с авторизацией
  • Вёрстка. Всплывающее окно "Забыли пароль?"
  • Вёрстка. Вкладки
  • Вёрстка. Таблица с курсами
  • Вёрстка. Навигация по страницам
  • Вёрстка. Дополнительная информация
  • Вёрстка. Подвал сайта
  • JavaScript. Обработка вкладок
  • JavaScript. Обработка навигации по страницам
  • JavaScript. Создание validation.js
  • JavaScript. Создание сервиса для курсов
  • JavaScript. Вывод курсов
  • JavaScript. Всплывающее сообщение
  • JavaScript. Создание логики для корзины
  • JavaScript. Вывод содержимого корзины
  • JavaScript. Управление корзиной
  • Подведение итогов первого спринта

5.2 Frontend-разработка. 2-й спринт

  • Планирование второго спринта
  • JavaScript. Создание логики авторизации
  • JavaScript. Обработка формы авторизации
  • JavaScript. Обработка формы "Забыли пароль?"
  • JavaScript. Вывод курсов пользователей
  • JavaScript. Выход из системы
  • Базовая подготовка страницы регистрации
  • Вёрстка. Хлебные крошки (breadcrumbs)
  • Вёрстка. Форма регистрации
  • Вёрстка. Форма подтверждения e-mail
  • JavaScript. Создание класса RegisterFlow
  • JavaScript. Обработка формы регистрации
  • JavaScript. Подтверждение e-mail
  • JavaScript. Повторная отправка письма с кодом подтверждения
  • JavaScript. Автоматическая авторизация после регистрации
  • JavaScript. Добавление редиректа
  • Базовая подготовка страницы восстановления пароля
  • Вёрстка. Форма восстановление пароля
  • JavaScript. Обработка формы восстановления пароля
  • JavaScript. Объединение корзин гостя и авторизованного пользователя
  • Подведение итогов второго спринта

5.3 Frontend-разработка. 3-й спринт

  • Планирование третьего спринта
  • Базовая подготовка страницы каталога
  • Вёрстка. Фильтр
  • Вёрстка. Результаты фильтрации
  • JavaScript. Обработка фильтра
  • JavaScript. Обработка поискового запроса
  • Вёрстка. Базовая подготовка страницы курса
  • Вёрстка. Информация о курсе
  • Вёрстка. Презентация и описание курса
  • Вёрстка. Программа курса
  • Вёрстка. Отзывы о курсе
  • Вёрстка. Заказывают вместе с этим курсом
  • JavaScript. Сворачивающие блоки (accordion)
  • JavaScript. Загрузка дополнительных отзывов
  • JavaScript. Вывод дополнительных курсов
  • Базовая подготовка страницы корзины
  • Вёрстка. Содержимое корзины
  • Вёрстка. Форма с данными пользователя
  • Вёрстка. Форма подтверждения e-mail
  • Вёрстка. Форма выбора способа оплаты
  • JavaScript. Вывод корзины
  • JavaScript. Создание класса OrderFlow
  • JavaScript. Обработка формы с данными пользователя
  • JavaScript. Обработка формы выбора способа оплаты
  • Подведение итогов третьего спринта

5.4 Frontend-разработка. 4-й спринт

  • Планирование четвёртого спринта
  • Базовая подготовка страницы прохождения курса
  • Вёрстка. Информация о курсе
  • Вёрстка. Содержимое курса
  • Вёрстка. Упражнения и дополнительные материалы к уроку
  • Вёрстка. Форма добавления отзыва
  • Вёрстка. Дополнительные курсы
  • JavaScript. Подгрузка данных текущего урока
  • JavaScript. Отметка пройденного урока
  • JavaScript. Автоматическая отметка пройденного урока
  • JavaScript. Автовыбор текущего урока
  • JavaScript. Обработка формы добавления отзыва
  • JavaScript. Вывод дополнительных курсов
  • Базовая подготовка страницы профиля
  • Вёрстка. Меню
  • Вёрстка. Мои курсы
  • Вёрстка. Мои отзывы
  • Вёрстка. Форма редактирования отзыва
  • Вёрстка. Мои данные.
  • Вёрстка. Безопасность.
  • JavaScript. Обработка меню
  • JavaScript. Вывод курсов пользователя
  • JavaScript. Вывод отзывов пользователя
  • JavaScript. Обработка формы редактирования отзыва
  • JavaScript. Удаление отзыва
  • JavaScript. Обработка формы с данными пользователя
  • JavaScript. Обработка формы изменения пароля
  • Подведение итогов четвёртого спринта

6.1 Backend-разработка. 5-й спринт

  • Планирование пятого спринта
  • Пользователи: миграция, модель, сидер и фабрика
  • Категории: миграция, модель и сидер
  • Курсы: миграция, модель, сидер и фабрика
  • Модули: миграция, модель, сидер и фабрика
  • Уроки: миграция, модель, сидер и фабрика
  • Дополнительные материалы: миграция, модель, сидер и фабрика
  • Упражнения: миграция, модель, сидер и фабрика
  • Отзывы: миграция, модель, сидер и фабрика
  • Корзины: миграция, модель, сидер и фабрика
  • Заказы: миграция, модель, сидер и фабрика
  • Рендеринг главной страницы
  • Вывод курсов на главной странице
  • Вывод всплывающих подсказок при поиске
  • Авторизация пользователя
  • Обработка формы "Забыли пароль?"
  • Вывод курсов пользователя
  • Выход из системы
  • Управление корзиной
  • Подведение итогов пятого спринта

6.2 Backend-разработка. 6-й спринт

  • Планирование шестого спринта
  • Регистрация пользователя
  • Подтверждение e-mail
  • Восстановление пароля
  • Рендер страницы каталога
  • Механизм фильтрации курсов
  • Рендер страницы курса
  • Вывод дополнительных отзывов
  • Подключение платёжной системы
  • Механизм оформления заказа
  • Создание счёта на оплату
  • Автоматическое подтверждение оплаты
  • Проверка статуса счёта
  • Подведение итогов шестого спринта

6.3 Backend-разработка. 7-й спринт

  • Планирование седьмого спринта
  • Рендер страницы обучения
  • Подгрузка данных для урока
  • Генерация временной ссылки на урок
  • Автовыбор текущего урока
  • Отметка пройденного урока
  • Механизм добавления отзыва
  • Вывод курсов пользователя в профиле
  • Редактирование отзыва
  • Удаление отзыва
  • Изменение данных пользователя
  • Изменение пароля пользователя
  • Добавление капчи
  • Подведение итогов седьмого спринта
  1. Размещение Web-проекта в Интернете
  • Покупка домена
  • Настройка DNS
  • Подключение почтового сервиса
  • Аренда VPS
  • Настройка VPS
  • Публикация Web-проекта
  • Автоматизация размещения Web-проекта (CD)
  1. GitLab под ключ: локальный сервер, автоматизация на Python и CI/CD
  • Создание docker-compose и запуск GitLab
  • Регистрация Runner
  • Автоматизация. Запуск/Остановка/Статус сервиса GitLab
  • Автоматизация. Регистрация Runner
  • Автоматизация. Бэкап GitLab
  • Автоматизация. Восстановление из бэкапа GitLab
  • Настройка CI/CD на GitLab
Складчина создана 25 марта 2026 г. · описание обновлено 23 апреля 2026 г.

Теги курса

Инструменты

Другие материалы автора 12

МР Михаил Русаков Все материалы
4 401 ₽ 29 700 ₽