От идеи до работающего сайта
Сайт редко появляется сразу в интернете. Обычно проходят цепочку шагов: цель → согласованный макет → вёрстка → программирование → наполнение → проверка → публикация. В главе 5 — три технологических слоя страницы; в главе 1 — HTTP и API. Здесь — жизненный цикл проекта целиком.
Восемь этапов
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
| № | Этап | Действия | Результат |
|---|---|---|---|
| 1 | Идея | Кто пользователь, какие задачи решает сайт | краткое описание целей |
| 2 | ТЗ (техническое задание) | Список страниц, ролей, сроков, интеграций | документ для согласования |
| 3 | Макет | Wireframe, дизайн в Figma или на бумаге | утверждённый внешний вид — глава 7 |
| 4 | Вёрстка | HTML и CSS по макету | страницы открываются в браузере — глава 5 |
| 5 | Программирование | Сервер, база, формы, API | работающая логика — глава 4 |
| 6 | Контент | Тексты, фото, товары | наполненный сайт |
| 7 | Тестирование | Кнопки, браузеры, телефон | список исправлений — 1117 |
| 8 | Публикация | Доступы, передача заказчику | сайт на боевом домене |
После каждого этапа показывайте результат заказчику или себе в pet-проекте. Так проще поймать несоответствие ожиданиям до финального деплоя.
Три уровня сложности
Перед кодом выберите, сколько технологий нужно. Не каждому проекту требуются React и PostgreSQL.
Статический сайт
Подходит для визитки, портфолио, документации, лендинга без личного кабинета.
- на сервере лежат готовые файлы HTML, CSS, JavaScript;
- веб-сервер отдаёт файлы как есть, без программы, которая собирает страницу на лету;
- публикация бесплатно — GitHub Pages, Netlify, Cloudflare Pages;
- обновление — загрузить новые файлы или
git pushв CI.
Подробнее — статический сайт в главе 1.
CMS — система управления контентом
Подходит для блога, корпоративного сайта, каталога, когда заказчик сам правит тексты без программиста.
CMS (Content Management System) — готовая платформа с админкой, темами оформления и плагинами.
- WordPress — самый распространённый вариант; многие хостинги ставят его в один клик;
- страницы и записи хранятся в базе (часто MySQL);
- HTML собирается на сервере из PHP-шаблонов темы;
- нужны регулярные обновления безопасности тем и плагинов.
Для обучения HTML и CSS CMS не обязательна. Для малого бизнеса с частым изменением контента — частый практический выбор. Сравнение с полной разработкой — глава 4.
Своё веб-приложение
Подходит при личном кабинете, заказах, оплате, API для мобильного приложения, нестандартной логике.
- фронтенд (SPA или серверные шаблоны) + бэкенд + SQL или NoSQL;
- полный контроль над кодом и данными;
- больше времени на разработку и поддержку.
Карта стека — глава 4, протокол — глава 1 и HTTP в проекте.
| Критерий | Статика | CMS | Своё приложение |
|---|---|---|---|
| Срок до первой версии | дни | дни – недели | недели – месяцы |
| Личный кабинет | нет | через плагины | да |
| Хостинг | дёшево или бесплатно | shared-хостинг | VPS, облако, PaaS |
| Постоянный разработчик | обычно не нужен | иногда | да |
Инструменты на старте
Редактор кода
Пишите разметку в программе с подсветкой синтаксиса, а не в Word.
- Visual Studio Code — распространённый выбор;
- расширения Live Server (превью в браузере), Prettier (форматирование), ESLint (проверка JS);
- терминал и Git — раздел 4.13, первый PR.
Браузеры
У разных браузеров слегка отличается отрисовка CSS. Проверяйте сайт минимум в Chrome и Firefox; на Mac — ещё Safari.
В DevTools смотрите вкладки Console (ошибки JS) и режим узкого экрана (вид на телефоне). Про движки браузеров — 2.04 / движки.
Локальный просмотр
Двойной клик по index.html открывает адрес file://. Для простой вёрстки этого хватает.
Для fetch к API нужен локальный HTTP-сервер — Live Server, npx serve, Vite. Иначе браузер блокирует часть запросов из соображений безопасности.
Вёрстка по макету
Вёрстка — перенос утверждённого дизайна в HTML и CSS так, чтобы в браузере страница совпадала с макетом. В разговоре дизайнеры говорят "нарезать макет" — имеется в виду эта работа.
Порядок работы:
- Разметить структуру —
<header>,<nav>,<main>,<footer>. - Подключить шрифты и базовые стили (сброс отступов, цвет фона).
- Построить сетку — Flexbox и Grid.
- Добавить состояния — наведение (
:hover), фокус с клавиатуры, адаптив. - Подключить JavaScript для интерактива — меню, слайдер, отправка формы через
fetch.
Материалы — глава 5, HTML, CSS, дизайн.
Программирование после вёрстки
Статические HTML-страницы не сохраняют заказы и не проверяют пароль на сервере. Когда нужны учёт пользователей, оплата, поиск по базе, подключают бэкенд.
| Компонент | Назначение | Примеры |
|---|---|---|
| Серверный язык | Принимает HTTP-запрос, выполняет логику | PHP, Python, Node.js, C# |
| База данных | Хранит пользователей, заказы, статьи | PostgreSQL, MySQL |
| MVC | Разделение данных, интерфейса и логики | Model — данные, View — HTML, Controller — обработка запроса — ООП |
| JavaScript в браузере | Действия без перезагрузки, вызов API | fetch, глава 1 |
Типовые стеки (наборы технологий) — MERN и LAMP в главе 4.
Публикация в интернете
Домен и хостинг
Домен — человекочитаемое имя сайта (example.com). DNS переводит его в IP-адрес сервера — 2.04 Сайты.
Хостинг — компьютер в дата-центре, где лежат файлы или крутится ваше приложение.
| Тип хостинга | Что размещают |
|---|---|
| Статический (GitHub Pages, Netlify) | HTML, CSS, JS без своего сервера |
| Shared (общий) | PHP, WordPress, почта на домене |
| VPS / облако | Своё API, Docker, полный контроль — 8.00 инфраструктура |
| PaaS (Render, Fly.io) | Деплой из Git, ОС настраивает платформа |
Как файлы попадают на сервер
- Git push + CI/CD — коммит запускает сборку и выкладку — 8.04 DevOps, GitHub Actions;
- FTP / SFTP — загрузка папки по протоколу передачи файлов; ещё встречается на дешёвых тарифах;
- Панель хостинга — файловый менеджер или установщик WordPress.
На боевом сайте (production) включите HTTPS — шифрование TLS. Пароли и ключи API храните в переменных окружения, не в Git — 1112, .gitignore.
Staging — копия сайта для проверки перед переключением боевого домена.
Тестирование перед запуском
Минимальный чек-лист:
- Все ссылки и кнопки ведут туда, куда задумано.
- Формы отправляются; ошибки видны пользователю.
- Страница читаема на ширине ~375px (телефон).
- В Console DevTools нет красных ошибок.
- У картинок есть
alt; текст читаем по контрасту — глава 7. - На staging проверен сценарий регистрации и оплаты (если есть).
Нагрузочные тесты для небольшого проекта необязательны; для магазина — тестирование.
После запуска
Сайт живёт дальше:
- обновление статей и каталога;
- обучение заказчика работе с админкой;
- исправление багов, обновление CMS и зависимостей;
- резервные копии базы и патчи безопасности — 2.08 ИБ;
- продвижение и SEO.
Код держите в Git — при неудачном обновлении можно откатиться к прошлому коммиту.
Дальше — чек-лист, итоги, pet-проект с API.