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

B

Bot

Администратор
Команда форума
23 Янв 2020
204,843
3,141
113

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

Screenshot_1.png

Хотите изучить весь необходимый стек и набор инструментов для 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 дня,
Что Вы получите после прохождения курса?
1 Вы получите глубокое понимание современного подхода к Web-разработке
2 Вы будете знать все необходимые современные технологии и инструменты
3 Вы узнаете, как сделать качественный дизайн, используя бесплатный AI
4 Вы сможете работать по Scrum и Kanban
5 Вы узнаете, как создать правильную документацию для проекта с помощью Confluence
6 Вы научитесь правильно планировать проект с помощью Jira
7 Вы узнаете, как правильно настроить окружение: VS Code, линтеры и статические анализаторы кода
8 Вы научитесь правильно работать с Git, используя ветки, Pull Request, CI/CD
9 Вы освоите процесс адаптивной вёрстки любых сайтов
10 Вы научитесь программировать серверную часть
11 Вы узнаете, как правильно писать автоматизированные тесты
12 Вы освоите DevOps-практики
13 Вы научитесь создавать docker-образы своих проектов
14 Вы узнаете, как подбирать и настраивать VPS
15 Вы узнаете, как размещать сайт в Интернете
16 Вы сможете автоматизировать процесс размещения в Интернете с использованием пайплайна CD и docker-образов
17 Вы создадите свой собственный профессиональный Web-проект

Кому подойдёт курс?
- Новичкам в Web-разработке
Вы начнёте с самых основ и дойдете до продакшена через CI/CD.
- Фрилансерам
Вы научитесь не только правильному подходу к разработке, но и получите навык эффективной организации работы.
- Планирующим устроиться на работу
После курса Вы уже будете отличным специалистом, который знает, как происходит современная разработка в IT-компаниях. Это отличное конкурентное преимущество перед теми, кто просто умеет создавать сайты.
- IT-предпринимателям
Вы сможете создать свой проект, не привлекая сторонних людей, сэкономив сотни тысяч рублей и сделав всё так, как Вы хотите. Помните: хочешь сделать хорошо – сделай это сам.
- Тем, кто устал от фрагментарных туториалов
Здесь полный цикл — от идеи через профессиональную разработку до деплоя.

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

Спойлер: 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 вообще без Вашего участия.


Посмотреть видеопрезентацию созданного Web-проекта:
Скрытая ссылка
Ссылка на созданный Web-проект:
Скрытая ссылка

К курсу идёт 5 Бонусных курсов

Спойлер: 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
И в этом курсе Вы освоите этот язык программирования.
Список модулей по JavaScript:

  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, который Вы и освоите благодаря этому курсу.
Список модулей в курсе по 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 от А до Я
Список модулей в курсе по Laravel:
  1. Введение в Laravel
  2. Установка и настройка окружения
  3. Маршрутизация и контроллеры
  4. Eloquent ORM и модели
  5. Миграции и схема БД
  6. Blade шаблонизатор
  7. Аутентификация и авторизация
  8. Работа с API
  9. Тестирование в Laravel
  10. Развертывание приложения
Результат: Вы освоите один из самых популярных PHP фреймворков и сможете создавать профессиональные Web-приложения с использованием современных практик разработки.

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

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

Я объясню всё с нуля: от настройки среды разработки до публикации проекта.


Защита у курса есть.
Скрытая ссылка
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу
Назад