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

МОДУЛЬ №1. ВВЕДЕНИЕ В ПРОФЕССИОНАЛЬНУЮ WEB-РАЗРАБОТКУ

В этом модуле мы изучим большое количество технологий, инструментов и практик, которые нам понадобятся в дальнейшем.

Список уроков:

• Как проходить курс?
• Что такое профессиональная Web-разработка: от идеи до продакшена
• Обзор стека технологий и инструментов
• Agile и Scrum для соло-разработчика и команды
• Автоматизированное тестирование
• Работа с Confluence
• Управление задачами в Jira
• Ключевые концепции
• Практическое применение
• GitHub Actions. Автоматизация и CI/CD
• Ключевые принципы
• Практическое применение
• Дизайн. Варианты создания
• Дизайн. Заказ дизайна на фрилансе
• Дизайн. Генерация дизайна с помощью AI

Результат: Вы поймёте весь процесс разработки: от Git и Docker до AI-дизайна, включая Scrum и автоматизированное тестирование.

МОДУЛЬ №2. ПОДГОТОВКА ДОКУМЕНТАЦИИ ПРОЕКТА

Здесь Вы научитесь создавать профессиональную документацию, чтобы проект был понятен Вам, команде и заказчикам. И с этого модуля мы начинаем создавать наш Web-проект.

Список уроков:

• Настройка проекта в Confluence
• Обзор проекта
• Функциональные требования
• Технические требования
• Дорожная карта проекта
• Архитектура системы
• API-документация
• Руководство по разработке
• Пользовательские потоки
• Ключевые страницы интерфейса

Результат: Вы создадите документацию, которая является основой для любого профессионального проекта.

МОДУЛЬ №3. СОЗДАНИЕ ДИЗАЙНА С ПОМОЩЬЮ AI

В этом модуле мы создадим весь дизайн с использованием AI. В конечном итоге он окажется уже в Figma и будет полностью готов к вёрстке.

Список уроков:

• Создание прототипа главной страницы
• Создание прототипа каталога
• Создание прототипа страницы курса
• Создание прототипа страницы прохождения курса
• Создание прототипа страницы регистрации
• Создание прототипа страницы с корзиной
• Создание прототипа восстановления пароля
• Создание прототипа страницы "Мои курсы"
• Создание прототипа страницы "Мои отзывы"
• Создание прототипа страницы "Мои данные"
• Создание прототипа страницы "Безопасность"
• Создание дизайна главной страницы
• Создание дизайна второстепенных страниц

Результат: Вы научитесь делать прототипы страниц сайта и писать правильные запросы для AI, чтобы он сгенерировал необходимый Вам дизайн. Это сэкономит Вам, как минимум, несколько десятков тысяч рублей на дизайнере и несколько недель его ожидания.

МОДУЛЬ №4. БАЗОВАЯ ПОДГОТОВКА ПРОЕКТА

Подготовим среду разработки, настроим инструменты для frontend и backend.

Список уроков:

• Установка и настройка локального сервера
• Установка Composer, PHP и phpMyAdmin
• Настройка проекта в Jira
• Установка и настройка расширений для VS Code
• Создание Laravel проекта
• Настройка Vite
• Установка необходимых зависимостей для Frontend
• Инструменты обеспечения качества для HTML, CSS и JavaScript: Prettier, Stylelint, PostCSS
• Тестирование Frontend: Vitest иjs
• Автоматизация с помощью npm-скриптов
• Установка необходимых зависимостей для Backend
• Инструменты обеспечения качества для PHP: PHPStan и Pint
• Тестирование Backend: phpunit.xml
• Автоматизация с помощью composer-скриптов
• Создание и запуск Docker-образа
• Настройка CI
• Создание git-репозитория
• Настройка хука pre-commit и первый коммит

Результат: у нас будет полностью готово всё необходимое для начала разработки. Примерно то же самое необходимо будет делать для каждого проекта, поэтому этот модуль – это из разряда "скопируй и вставь". А это сэкономит Вам очень много времени и сил.

МОДУЛЬ №5.1. FRONTEND-РАЗРАБОТКА. 1-Й СПРИНТ

Поскольку этот модуль очень большой, он был разбит на подмодули: по одному на каждый спринт. И целью этого модуля и спринта будет адаптивная вёрстка главной страницы сайта и её JavaScript-обработка.

Список уроков:

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

Результат: Вы увидите процесс создания главной страницы сайта, а также освоите работу по методологии Scrum. Помимо этого, поскольку мы будем использовать REST API, а серверной части пока нет, Вы увидите, как использовать mock-данные вместо fetch и как сделать так, чтобы потом на реальное общение с сервером мы переключились очень быстро. Не забывайте так же, что здесь и дальше, весь написанный функционал будет покрываться юнит и интеграционными тестами. Наконец, Вы увидите правильную работу с Git.

МОДУЛЬ №5.2. FRONTEND-РАЗРАБОТКА. 2-Й СПРИНТ

Целью этого спринта является создание всего необходимого для регистрации и авторизации пользователя.

Список уроков:

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

Результат: Вы узнаете, как правильно сделать регистрацию и авторизацию пользователей. И работать это всё будет без перезагрузки страницы.

МОДУЛЬ №5.3. FRONTEND-РАЗРАБОТКА. 3-Й СПРИНТ

Целью этого спринта является реализация полного потока оформления заказа: от выбора курсов до оплаты.

Список уроков:

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

Результат: у нас практически будет полностью готова клиентская часть для гостей.

МОДУЛЬ №5.4. FRONTEND-РАЗРАБОТКА. 4-Й СПРИНТ

Цель у этого модуля доделать клиентскую часть уже для авторизованных пользователей.

Список уроков:

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

Результат: полностью готова страница прохождения курса, профиль пользователя, управление отзывами.

МОДУЛЬ №6.1. BACKEND-РАЗРАБОТКА. 5-Й СПРИНТ

Начнём создавать серверную часть.

Список уроков:

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

Результат: готова главная страница сайта уже с реальными данными, получаемыми от сервера.

МОДУЛЬ №6.2. BACKEND-РАЗРАБОТКА. 6-Й СПРИНТ

Наша цель на этот спринт – сделать серверную работу с пользователями, а также полностью закончить обработку их заказов.

Список уроков:

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

Результат: помимо реализации самого функционала мы подключим ЮKassa для приёма платежей, полностью её настроим и добьёмся автоматического подтверждения оплаты.

МОДУЛЬ №6.3. BACKEND-РАЗРАБОТКА. 7-Й СПРИНТ

В этом модуле мы доделаем серверную часть для авторизованных пользователей.

Список уроков:

• Планирование седьмого спринта
• Рендер страницы обучения
• Подгрузка данных для урока
• Генерация временной ссылки на урок
• Автовыбор текущего урока
• Отметка пройденного урока
• Механизм добавления отзыва
• Вывод курсов пользователя в профиле
• Редактирование отзыва
• Удаление отзыва
• Изменение данных пользователя
• Изменение пароля пользователя
• Добавление капчи
• Подведение итогов седьмого спринта

Результат: наш Web-проект полностью готов!

МОДУЛЬ №7. РАЗМЕЩЕНИЕ WEB-ПРОЕКТА В ИНТЕРНЕТЕ

Здесь мы купим домен, арендуем и настроим VPS, опубликуем наш Web-проект. А также настроим Continuous Delivery для автоматического деплоя при изменениях.

Список уроков:

• Покупка домена
• Настройка DNS
• Подключение почтового сервиса
• Аренда VPS
• Настройка VPS
• Публикация Web-проекта
• Автоматизация размещения Web-проекта (CD)
• Заключение

Результат: Вы научитесь профессионально размещать сайты в Интернете, благодаря чему при отправке изменений в репозиторий кода, у Вас автоматически соберётся docker-образ, который автоматически запустится на VPS вообще без Вашего участия.