Что такое веб-разработка
Определение
Веб-разработка — создание программ, которые работают через интернет или локальную сеть: сайты в браузере, серверные API, связь с базой данных, авторизация пользователей.
Обычно в проекте участвуют несколько технологий сразу:
- разметка страницы (HTML);
- оформление (CSS);
- логика в браузере (JavaScript);
- программа на сервере (Python, Node.js, Java, C#, Go, PHP — языки);
- хранение данных (SQL, NoSQL);
- обмен по протоколу HTTP.
Роли в команде часто делят на фронтенд (интерфейс у пользователя) и бэкенд (сервер, API, база) — 1.23 Фронтенд и бэкенд. Как адрес в строке браузера превращается в страницу — от URL до пикселей.
Клиент и сервер
Клиент — программа на стороне пользователя. Чаще всего это браузер. Клиентом может быть и мобильное приложение, которое ходит на сервер по HTTP.
Сервер — программа на удалённой машине (в дата-центре или на localhost при разработке). Сервер принимает запрос, выполняет код, читает или пишет в базу и отправляет ответ.
| Роль | Где работает | Примеры |
|---|---|---|
| Клиент | Компьютер или телефон пользователя | Браузер, мобильное приложение |
| Сервер | Дата-центр, облако, localhost | nginx + Node.js, IIS + ASP.NET |
Запрос — сообщение клиента («отдай /tasks», «сохрани задачу»). Ответ — HTML, JSON, файл или ошибка.
При локальной разработке сервер слушает localhost (127.0.0.1), браузер открывает http://localhost:3000. Запуск dev-сервера — советы новичку. DNS, HTTPS, nginx — 2.04 Сайты.
Статический сайт и веб-приложение
Статический сайт — на сервере лежат готовые HTML, CSS, JavaScript; сервер отдаёт их как есть. Визитки, документация, лендинги. Публикация — GitHub Pages.
Веб-приложение — сервер строит ответ программно или отдаёт API (JSON), браузер рисует интерфейс (React, Vue и др.). Архитектуры SPA и SSR — 2.04, выбор пути — глава 6.
HTTP — обзор
HTTP — правила обмена сообщениями между клиентом и сервером поверх TCP. Защищённый вариант — HTTPS (TLS) — HTTPS и сертификаты.
Запрос включает метод (GET, POST, PUT, PATCH, DELETE), путь, заголовки и опционально тело. Ответ — статус-код, заголовки, тело.
| Код | Смысл |
|---|---|
| 200 | Успех |
| 201 | Ресурс создан |
| 400 | Ошибка в запросе |
| 401 / 403 | Нет авторизации / нет прав |
| 404 | Не найдено |
| 500 | Ошибка сервера |
Полная шпаргалка — статус-коды. Интерактивы, curl-примеры, middleware, деплой — глава 4 — HTTP и API в проекте. Углубление по протоколу — 2.09.
JSON, CRUD и REST
JSON — текстовый формат обмена данными. Сериализация — объект в памяти → строка; десериализация — обратно. Теория — JSON.
CRUD — create, read, update, delete. В REST сопоставляется с HTTP-методами:
| CRUD | HTTP (типично) |
|---|---|
| Create | POST /tasks |
| Read | GET /tasks, GET /tasks/5 |
| Update | PUT / PATCH /tasks/5 |
| Delete | DELETE /tasks/5 |
REST — ресурсы с URI, операции HTTP-методами, по возможности stateless сервер, корректные статус-коды. API — набор endpoints для программ. Подробнее — REST, GraphQL, проектирование API.
CORS и конфигурация
CORS — ограничение браузера при запросе с одного origin на другой. curl CORS не применяет. Настройка — CORS, разбор в главе 4.
.env и переменные окружения хранят секреты локально; файл не коммитят в Git — .gitignore, безопасность .env.
Куда смотреть дальше
| Тема | Глава |
|---|---|
HTML, CSS, JavaScript, fetch | 5 |
| Этапы проекта, хостинг | 6 |
| Дизайн, wireframe, a11y | 7 |
| Стек, API в проекте, деплой | 4 |
| Справочник фреймворков | 8 |
| Термины раздела | 2 — итоги |
| Самопроверка | 3 — чек-лист |
Маршрут: три слоя → дизайн → этапы → HTTP в проекте → первый API и DevTools — 114 pet-проект.