О разделе
Веб-разработка — создание программ через браузер и сеть: страницы, API, базы данных, авторизация. Подраздел даёт языконезависимую карту — три слоя страницы, клиент и сервер, этапы проекта, выбор стека. Обзор HTTP — глава 1; практика API — глава 4.
Для кого этот подраздел
| Роль | Что получите |
|---|---|
| Начинающий разработчик | карта терминов до React/Django |
| Аналитик | понимание API, JSON, статус-кодов |
| Бэкендер | связь HTTP с 2.09 |
| Фронтендер | CORS, fetch, DevTools — 1116 |
Предполагается базовое знакомство с компьютером и желание писать код — 4.02 что такое код.
Чем этот подраздел отличается от 2.04 и 2.09
| Раздел | Фокус |
|---|---|
| 4.17 (здесь) | языконезависимая карта для разработчика |
| 2.04 Сайты | DNS, HTTPS, nginx, CDN, путь запроса |
| 2.09 Интеграции | контракты, очереди, SOAP, gRPC |
| 1.23 Фронт/бэк | роли в команде |
Читайте 4.17 первым, затем углубляйтесь по задаче.
С чего начать
| Шаг | Материал | Содержание | Время |
|---|---|---|---|
| 1 | HTML, CSS и JavaScript — три слоя | структура, стили, логика в браузере | 1–2 ч |
| 2 | Основы веб-дизайна | UX, макеты, типографика, адаптив | 1–2 ч |
| 3 | От идеи до сайта | этапы проекта, хостинг, статика, CMS или своё приложение | 1–2 ч |
| 4 | Что такое веб-разработка | клиент, сервер, обзор HTTP и REST | 45–60 мин |
| 5 | Как делают веб-приложения | стек, API в проекте, деплой | 2–3 ч |
| 5a | Open-source веб-фреймворки | справочник по языкам — Django, Express, Spring, Gin и др. | 30–60 мин |
| 6 | Итоги | резюме и терминология | 15 мин |
| 7 | Чек-лист | самопроверка | 20 мин |
Термины раздела — итоги. После глав 5 и 4 полезно открыть DevTools и curl / 1133.
Связанные материалы в томе 4
| Тема | Статья |
|---|---|
| Коллекции и JSON | 618 |
| Docker для локального API+БД | 104 |
| Git и PR | 4.13, 117 |
| Тесты, баги, DevTools | 1117, 1119, 1116 |
| ORM и SQL | 4.10, 3.07 SQL |
| Справочник веб-фреймворков | 8 — open-source по языкам |
Маршрут для старта
- Три слоя и дизайн — статическая страница.
- Этапы проекта — выбор пути: статика, CMS или API.
- Обзор HTTP и API в проекте — curl, CORS, стек.
- Чек-лист и итоги.
Pet-проект с API — 114.
Инфраструктура и безопасность (куда дальше)
- DNS, HTTPS, nginx — 2.04
- OpenAPI, GraphQL — 2.09 / 130
- Сессии, JWT, XSS — 2.08 ИБ
- Деплой — 8.04 DevOps
Что такое веб-разработка
Клиент и сервер, статика и веб-приложение, обзор HTTP, REST и JSON — вводная карта раздела.
Веб-разработка — итоги
Краткое резюме раздела по основам веб-разработки для самопроверки.
Веб-разработка — чек-лист
Вопросы для самопроверки по основам веб-разработки.
Как делают веб-приложения
Пошаговый процесс создания веб приложений от выбора технологического стека и проектирования архитектуры до развертывания и масштабирования.
HTML, CSS и JavaScript — три слоя веб-страницы
Разделение ответственности между HTML, CSS и JavaScript при построении веб страниц, принципы модульности и поддержки кода.
От идеи до работающего сайта
Этапы веб-проекта — ТЗ, макет, вёрстка, код, тест, публикация; статика, CMS или своё приложение.
Основы веб-дизайна для разработчика
Базовые принципы веб дизайна, работа с макетами, типографикой, цветовыми схемами, сетками и стандартами доступности для разработчиков.
Open-source веб-фреймворки
Справочник популярных open-source фреймворков для веб-разработки — по языкам, с кратким описанием назначения и типичного применения.
Веб-разработка — о разделе
HTML, CSS, JavaScript, HTTP, дизайн, этапы проекта, стеки MERN и LAMP — маршрут для разработчика веба.
Play ITЗагрузка интерактивного демо…
Отдельная версия в браузере: WebEditor — Онлайн-редактор HTML, CSS и JavaScript с живым предпросмотром — обновляется при вводе.