Профессиональная Web-разработка 2026. Дизайн, код и автоматизация [Михаил Русаков]

Складчина: Профессиональная Web-разработка 2026. Дизайн, код и автоматизация [Михаил Русаков]

Хотите изучить весь необходимый стек и набор инструментов для Web-разработчика:

Спойлер: Инструменты

HTML,
CSS,
SCSS,
JavaScript,
PHP,
SQL,
Laravel,
Nginx,
PostCSS,
npm,
Vite,
Vitest,
Composer,
PHPUnit,
Prettier,
Stylelint,
ESLint,
Pint,
Larastan,
Git,
Agile,
Scrum,
Docker,
Supervisord,
Figma,
Stitch AI,
Confluence,
Jira

20 000 строк кода написано,
221 урок,
78 часов,
320 упражнений,
Курс разбит на 163 дня,

Что Вы получите после прохождения курса:

• Вы получите глубокое понимание современного подхода к Web-разработке
• Вы будете знать все необходимые современные технологии и инструменты
• Вы узнаете, как сделать качественный дизайн, используя бесплатный AI
• Вы сможете работать по Scrum и Kanban
• Вы узнаете, как создать правильную документацию для проекта с помощью Confluence
• Вы научитесь правильно планировать проект с помощью Jira
• Вы узнаете, как правильно настроить окружение: VS Code, линтеры и статические анализаторы кода
• Вы научитесь правильно работать с Git, используя ветки, Pull Request, CI/CD
• Вы освоите процесс адаптивной вёрстки любых сайтов
• Вы научитесь программировать серверную часть
• Вы узнаете, как правильно писать автоматизированные тесты
• Вы освоите DevOps-практики
• Вы научитесь создавать docker-образы своих проектов
• Вы узнаете, как подбирать и настраивать VPS
• Вы узнаете, как размещать сайт в Интернете
• Вы сможете автоматизировать процесс размещения в Интернете с использованием пайплайна CD и docker-образов
• Вы создадите свой собственный профессиональный Web-проект

Кому подойдёт курс:

• Новичкам в Web-разработке
  Вы начнёте с самых основ и дойдете до продакшена через CI/CD.
  
  
• Фрилансерам
  Вы научитесь не только правильному подходу к разработке, но и получите навык эффективной организации работы.

• Планирующим устроиться на работу
  После курса Вы уже будете отличным специалистом, который знает, как происходит современная разработка в IT-компаниях. Это отличное конкурентное преимущество перед теми, кто просто умеет создавать сайты.
  
  
• IT-предпринимателям
  Вы сможете создать свой проект, не привлекая сторонних людей, сэкономив сотни тысяч рублей и сделав всё так, как Вы хотите. Помните: хочешь сделать хорошо – сделай это сам.

• Тем, кто устал от фрагментарных туториалов
  Здесь полный цикл — от идеи через профессиональную разработку до деплоя.

Программа

Основная часть курса состоит из 7 модулей и 5 подмодулей, разбитых по спринтам (терминология из Scrum)

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

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

Бонус «GitLab под ключ»
Бонус «Вёрстка сайта с нуля 2.0»
Бонус «Программирование на JavaScript с Нуля до Гуру 2.0»
Бонус «PHP и MySQL с Нуля до Гуру 3.0»
Бонус «Laravel от А до Я»

Спойлер: Подробная программа

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

1. Как проходить курс?
2. Что такое профессиональная Web-разработка: от идеи до продакшена
3. Обзор стека технологий и инструментов
4. Agile и Scrum для соло-разработчика и команды
5. Автоматизированное тестирование
6. Работа с Confluence
7. Управление задачами в Jira
8. Git. Ключевые концепции
9. Git. Практическое применение
10. GitHub Actions. Автоматизация и CI/CD
11. Docker. Ключевые принципы
12. Docker. Практическое применение
13. Дизайн. Варианты создания
14. Дизайн. Заказ дизайна на фрилансе
15. Дизайн. Генерация дизайна с помощью AI

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

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

1. Настройка проекта в Confluence
2. Обзор проекта
3. Функциональные требования
4. Технические требования
5. Дорожная карта проекта
6. Архитектура системы
7. API-документация
8. Руководство по разработке
9. Пользовательские потоки
10. Ключевые страницы интерфейса

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

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

1. Создание прототипа главной страницы
2. Создание прототипа каталога
3. Создание прототипа страницы курса
4. Создание прототипа страницы прохождения курса
5. Создание прототипа страницы регистрации
6. Создание прототипа страницы с корзиной
7. Создание прототипа восстановления пароля
8. Создание прототипа страницы "Мои курсы"
9. Создание прототипа страницы "Мои отзывы"
10. Создание прототипа страницы "Мои данные"
11. Создание прототипа страницы "Безопасность"
12. Создание дизайна главной страницы
13. Создание дизайна второстепенных страниц

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

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

1. Установка и настройка локального сервера
2. Установка Composer, PHP и phpMyAdmin
3. Настройка проекта в Jira
4. Установка и настройка расширений для VS Code
5. Создание Laravel проекта
6. Настройка Vite
7. Установка необходимых зависимостей для Frontend
8. Инструменты обеспечения качества для HTML, CSS и JavaScript: Prettier, Stylelint, PostCSS
9. Тестирование Frontend: Vitest и setupTests.js
10. Автоматизация с помощью npm-скриптов
11. Установка необходимых зависимостей для Backend
12. Инструменты обеспечения качества для PHP: PHPStan и Pint
13. Тестирование Backend: phpunit.xml
14. Автоматизация с помощью composer-скриптов
15. Создание и запуск Docker-образа
16. Настройка CI
17. Создание git-репозитория
18. Настройка хука pre-commit и первый коммит

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

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

1. Планирование первого спринта
2. Базовая подготовка главной страницы
3. Подключение шрифтов и favicon
4. Подготовка к вёрстке
5. Вёрстка. Основные UI-элементы
6. Вёрстка. Шапка сайта
7. Вёрстка. Поиск со всплывающими подсказками
8. Вёрстка. Всплывающая окно с корзиной
9. Вёрстка. Всплывающее окно с курсами пользователя
10. Вёрстка. Всплывающее окно с авторизацией
11. Вёрстка. Всплывающее окно "Забыли пароль?"
12. Вёрстка. Вкладки
13. Вёрстка. Таблица с курсами
14. Вёрстка. Навигация по страницам
15. Вёрстка. Дополнительная информация
16. Вёрстка. Подвал сайта
17. JavaScript. Обработка вкладок
18. JavaScript. Обработка навигации по страницам
19. JavaScript. Создание validation.js
20. JavaScript. Создание сервиса для курсов
21. JavaScript. Вывод курсов
22. JavaScript. Всплывающее сообщение
23. JavaScript. Создание логики для корзины
24. JavaScript. Вывод содержимого корзины
25. JavaScript. Управление корзиной
26. Подведение итогов первого спринта

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

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

1. Планирование второго спринта
2. JavaScript. Создание логики авторизации
3. JavaScript. Обработка формы авторизации
4. JavaScript. Обработка формы "Забыли пароль?"
5. JavaScript. Вывод курсов пользователей
6. JavaScript. Выход из системы
7. Базовая подготовка страницы регистрации
8. Вёрстка. Хлебные крошки (breadcrumbs)
9. Вёрстка. Форма регистрации
10. Вёрстка. Форма подтверждения e-mail
11. JavaScript. Создание класса RegisterFlow
12. JavaScript. Обработка формы регистрации
13. JavaScript. Подтверждение e-mail
14. JavaScript. Повторная отправка письма с кодом подтверждения
15. JavaScript. Автоматическая авторизация после регистрации
16. JavaScript. Добавление редиректа
17. Базовая подготовка страницы восстановления пароля
18. Вёрстка. Форма восстановление пароля
19. JavaScript. Обработка формы восстановления пароля
20. JavaScript. Объединение корзин гостя и авторизованного пользователя
21. Подведение итогов второго спринта

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

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

1. Планирование третьего спринта
2. Базовая подготовка страницы каталога
3. Вёрстка. Фильтр
4. Вёрстка. Результаты фильтрации
5. JavaScript. Обработка фильтра
6. JavaScript. Обработка поискового запроса
7. Вёрстка. Базовая подготовка страницы курса
8. Вёрстка. Информация о курсе
9. Вёрстка. Презентация и описание курса
10. Вёрстка. Программа курса
11. Вёрстка. Отзывы о курсе
12. Вёрстка. Заказывают вместе с этим курсом
13. JavaScript. Сворачивающие блоки (accordion)
14. JavaScript. Загрузка дополнительных отзывов
15. JavaScript. Вывод дополнительных курсов
16. Базовая подготовка страницы корзины
17. Вёрстка. Содержимое корзины
18. Вёрстка. Форма с данными пользователя
19. Вёрстка. Форма подтверждения e-mail
20. Вёрстка. Форма выбора способа оплаты
21. JavaScript. Вывод корзины
22. JavaScript. Создание класса OrderFlow
23. JavaScript. Обработка формы с данными пользователя
24. JavaScript. Обработка формы выбора способа оплаты
25. Подведение итогов третьего спринта

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

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

1. Планирование четвёртого спринта
2. Базовая подготовка страницы прохождения курса
3. Вёрстка. Информация о курсе
4. Вёрстка. Содержимое курса
5. Вёрстка. Упражнения и дополнительные материалы к уроку
6. Вёрстка. Форма добавления отзыва
7. Вёрстка. Дополнительные курсы
8. JavaScript. Подгрузка данных текущего урока
9. JavaScript. Отметка пройденного урока
10. JavaScript. Автоматическая отметка пройденного урока
11. JavaScript. Автовыбор текущего урока
12. JavaScript. Обработка формы добавления отзыва
13. JavaScript. Вывод дополнительных курсов
14. Базовая подготовка страницы профиля
15. Вёрстка. Меню
16. Вёрстка. Мои курсы
17. Вёрстка. Мои отзывы
18. Вёрстка. Форма редактирования отзыва
19. Вёрстка. Мои данные.
20. Вёрстка. Безопасность.
21. JavaScript. Обработка меню
22. JavaScript. Вывод курсов пользователя
23. JavaScript. Вывод отзывов пользователя
24. JavaScript. Обработка формы редактирования отзыва
25. JavaScript. Удаление отзыва
26. JavaScript. Обработка формы с данными пользователя
27. JavaScript. Обработка формы изменения пароля
28. Подведение итогов четвёртого спринта

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

6.1 Backend-разработка. 5-й спринт
Начнём создавать серверную часть.

1. Планирование пятого спринта
2. Пользователи: миграция, модель, сидер и фабрика
3. Категории: миграция, модель и сидер
4. Курсы: миграция, модель, сидер и фабрика
5. Модули: миграция, модель, сидер и фабрика
6. Уроки: миграция, модель, сидер и фабрика
7. Дополнительные материалы: миграция, модель, сидер и фабрика
8. Упражнения: миграция, модель, сидер и фабрика
9. Отзывы: миграция, модель, сидер и фабрика
10. Корзины: миграция, модель, сидер и фабрика
11. Заказы: миграция, модель, сидер и фабрика
12. Рендеринг главной страницы
13. Вывод курсов на главной странице
14. Вывод всплывающих подсказок при поиске
15. Авторизация пользователя
16. Обработка формы "Забыли пароль?"
17. Вывод курсов пользователя
18. Выход из системы
19. Управление корзиной
20. Подведение итогов пятого спринта

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

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

1. Планирование шестого спринта
2. Регистрация пользователя
3. Подтверждение e-mail
4. Восстановление пароля
5. Рендер страницы каталога
6. Механизм фильтрации курсов
7. Рендер страницы курса
8. Вывод дополнительных отзывов
9. Подключение платёжной системы
10. Механизм оформления заказа
11. Создание счёта на оплату
12. Автоматическое подтверждение оплаты
13. Проверка статуса счёта
14. Подведение итогов шестого спринта

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

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

1. Планирование седьмого спринта
2. Рендер страницы обучения
3. Подгрузка данных для урока
4. Генерация временной ссылки на урок
5. Автовыбор текущего урока
6. Отметка пройденного урока
7. Механизм добавления отзыва
8. Вывод курсов пользователя в профиле
9. Редактирование отзыва
10. Удаление отзыва
11. Изменение данных пользователя
12. Изменение пароля пользователя
13. Добавление капчи
14. Подведение итогов седьмого спринта

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

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

1. Покупка домена
2. Настройка DNS
3. Подключение почтового сервиса
4. Аренда VPS
5. Настройка VPS
6. Публикация Web-проекта
7. Автоматизация размещения Web-проекта (CD)
8. Заключение

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

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

1. GitLab под ключ: локальный сервер, автоматизация на Python и CI/CD
И в этом Бонусе Вы увидите не просто развёртывание, Вы увидите, как это сделать, по сути, одной кнопкой благодаря Python. Второй кнопкой Вы зарегистрируете Runner, который необходим для пайплайна CI/CD.

1. Зачем это нужно?
2. Создание docker-compose и запуск GitLab
3. Регистрация Runner
4. Автоматизация. Запуск/Остановка/Статус сервиса GitLab
5. Автоматизация. Регистрация Runner
6. Автоматизация. Бэкап GitLab
7. Автоматизация. Восстановление из бэкапа GitLab
8. Настройка CI/CD на GitLab

Результат: мы не только перенесём на GitLab весь проект из курса, настроим CI/CD, но и всё максимально автоматизируем на Python, включая бэкап и восстановление из бэкапа.

2. Вёрстка сайта с нуля 2.0
Вы освоите HTML5 и CSS3, а также научитесь верстать сайты. Другими словами, Вы сможете превращать картинку сайта во всем привычную Web-страницу. Например, такую, на которой Вы сейчас находитесь.
Также Вы сможете верстать страницы так, чтобы они смотрелись хорошо и на мобильных устройствах тоже. Для этого Вы освоите адаптивную вёрстку.

1. Введение (3 урока)
2. Изучаем HTML (15 уроков)
3. Изучаем CSS (15 уроков)
4. Вёрстка страниц (6 уроков)
5. Пример сложной вёрстки (8 уроков)
6. Адаптивная вёрстка (7 уроков)

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

3. Программирование на JavaScript с Нуля до Гуру 2.0
И в этом курсе Вы освоите этот язык программирования.

1. Введение (3 урока)
2. Основы программирования на JavaScript (20 уроков)
3. Объектно-ориентированное программирование в JavaScript (13 уроков)
4. Стандартные функции и объекты в JavaScript (11 уроков)
5. Работа с HTML-документом (7 уроков)
6. События в JavaScript (7 уроков)
7. Асинхронность в JavaScript (4 урока)
8. Сетевые запросы (7 уроков)
9. Защита JavaScript-кода от копирования (2 урока)
10. Решение упражнений из курса (9 уроков)

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

4. PHP и MySQL с Нуля до Гуру 3.0
Backend – это то, что выполняется на стороне сервера. В большинстве случаев для этого используется PHP, который Вы и освоите благодаря этому курсу.

1. Введение (6 уроков)
2. Основы программирования на PHP (25 уроков)
3. Стандартные функции в PHP (11 уроков)
4. Обработка форм и получение данных (6 уроков)
5. Объектно-ориентированное программирование в PHP (16 уроков)
6. Обработка ошибок и исключений (5 уроков)
7. Сетевые функции в PHP (6 уроков)
8. Работа с базой данных и СУБД MySQL (12 уроков)
9. Компоненты (5 уроков)
10. Создание сайта для библиотеки (18 уроков)

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

5. Laravel от А до Я

1. Введение в Laravel
2. Установка и настройка окружения
3. Маршрутизация и контроллеры
4. Eloquent ORM и модели
5. Миграции и схема БД
6. Blade шаблонизатор
7. Аутентификация и авторизация
8. Работа с API
9. Тестирование в Laravel
10. Развертывание приложения

Результат: Вы освоите один из самых популярных PHP фреймворков и сможете создавать профессиональные Web-приложения с использованием современных практик разработки.

Видеопрезентация созданного Web-проекта:
Скрытая ссылка

Репозиторий проекта:
Скрытая ссылка

Что нужно знать для успешного прохождения курса
Вам не нужны глубокие знания программирования или сложной математики. Курс построен так, чтобы даже новичок с минимальной компьютерной грамотностью (умение устанавливать программы, работать с файлами) смог освоить материал.

Важно!
Обратите внимание, что если Вы вообще не знаете HTML, CSS, JavaScript, PHP, Laravel, то начните своё обучение с соответствующих Бонусных курсов. Их более чем достаточно для освоения всего материала курса «Профессиональная Web-разработка. Дизайн, код и автоматизация».
Я объясню всё с нуля: от настройки среды разработки до публикации проекта.

Цена 29700 руб.
Скрытая ссылка