Веб-проекты — от макета до сопровождения
У сайта есть несколько сторон: интерфейс, данные, права пользователей, выпуск новой версии и повседневное сопровождение. Эта подборка объединяет 100 уроков в шести сериях. Каждая серия развивает собственный учебный проект: вы можете выбрать одну задачу или пройти несколько связанных направлений.
Курсы дополняют практические серии по React, Docker и n8n. Здесь мы переходим от отдельных инструментов к устройству приложения, работе с макетом и организации его сопровождения. Примеры разных курсов остаются самостоятельными: проект из одной серии не требуется скачивать для начала другой.
Выберите результат
| Серия | Уроков | Учебный результат | Предпосылки |
|---|---|---|---|
| Figma: макет учебного портала | 16 | Система экранов, компонентов и состояний, которую можно передать разработчику | Представление о страницах сайта; опыт работы в Figma не требуется |
| Next.js: полноценное веб-приложение | 20 | Приложение с серверными страницами, данными, формами и разграничением доступа | JavaScript, основы React и HTTP |
| Node.js и PostgreSQL: API приложения | 20 | Серверный API с проверкой данных, SQL-хранилищем и правилами доступа | JavaScript, терминал, основы HTTP и SQL |
| Django: редакционная библиотека | 16 | Приложение для авторов и редакторов с моделями, админкой, формами и публикациями | Основы Python, HTML и работа с файлами |
| Linux и Bash: сопровождение веб-приложения | 16 | Последовательная диагностика сервисов и понятные сценарии сопровождения | Терминал и представление о серверном приложении |
| GitLab CI/CD: сборка и выпуск сайта | 12 | Управляемая сборка, передача артефактов и работа с окружениями | Основы Git, YAML и устройства статического сайта |
От интерфейса к приложению
Начните с HTML и CSS, если ещё не уверенно читаете разметку и стили. Затем пройдите JavaScript и TypeScript. Каталог на React поможет связать компоненты, состояние и запросы. После него можно переходить к Next.js: в этой серии отдельно рассматриваются серверная работа и поведение браузера.
Курс Figma можно проходить параллельно с этой последовательностью. Он даёт язык для обсуждения сетки, компонентов, состояний и адаптивных экранов. Для оценки готового интерфейса полезны доступность, производительность и проверка веб-приложений.
Два пути к серверной части
Node.js и PostgreSQL подойдут, если вы хотите продолжить работу на JavaScript. Django — отдельный путь для читателя, которому ближе Python и редакционные приложения. Проходить оба курса подряд необязательно: сначала выберите язык и задачу, а затем сравнивайте решения на конкретных механизмах.
Общая основа для обоих направлений — HTTP и API, PostgreSQL для веба и безопасность приложений. Эти серии объясняют контракты запросов, работу с данными и границы доступа независимо от выбранного фреймворка.
От готовых файлов к сопровождению
Если приложение уже знакомо, начните с Docker, затем переходите к GitLab CI/CD и Linux с Bash. Первые две серии помогают понять, как организованы окружение и выпуск. Третья объясняет, как разбирать наблюдаемые проблемы сервиса и сохранять сведения для дальнейшей диагностики.
Деплоймент и сопровождение сайта остаётся базовым маршрутом для домена, HTTPS, хостинга и отката. Новые серии углубляют отдельные части этой работы. Учебные команды и конфигурации относятся к указанным в уроках лабораториям; публикация основного сайта ProfessorWeb не является частью выполнения читателем этих примеров.
Как работать с примерами
В оглавлении каждой серии указан результат урока и состояние проекта, на которое он опирается. Переходы внизу страниц ведут по учебной последовательности. Архив серии содержит исходные файлы и пояснения к их использованию; перед самостоятельной работой прочитайте описание выбранного профиля инструментов.
Материалы опубликованы. Запуски учебных приложений и тестов автором не выполнялись: приведённые ответы и состояния описывают ожидаемый результат читателя. Сборка страниц для чтения не подтверждает выполнение команд из урока.
Продолжение практического маршрута — 100 уроков прикладных веб-проектов: чат, Redis, Strapi, WooCommerce, FastAPI, расширение браузера и карты.