Пошаговое руководство
Как создать сайт с нуля на HTML и CSS — полный путь от пустого файла до опубликованной страницы
Без фреймворков. Без генераторов. Только чистый код, понятные объяснения и проверенный порядок действий
94%
веб-страниц в мире построены на связке HTML + CSS
5–7
дней нужно, чтобы освоить базовую вёрстку с нуля
0 ₽
стоят инструменты: браузер и редактор кода бесплатны
3
файла нужно для первого сайта: index.html, style.css, favicon

Зачем учиться вёрстке руками, когда есть конструкторы

Конструкторы сайтов обещают результат за один вечер, но скрывают главное: как устроена страница на самом деле. Понимание HTML и CSS даёт полный контроль над внешним видом, скоростью загрузки и поведением сайта на любых устройствах. Это разница между арендующим и владельцем: первый зависит от чужих ограничений, второй способен изменить всё, что пожелает.

Руководство построено как последовательный маршрут. Каждый раздел опирается на предыдущий, а встроенная инфографика помогает увидеть логику целиком, не теряясь в деталях.

Чем отличаются HTML и CSS — разбираемся по ролям

Частая путаница у новичков — непонимание, где заканчивается один язык и начинается другой. Ниже — интерактивное сравнение: переключатель показывает обе роли.

<h2>Наши услуги</h2>
<p>Разрабатываем сайты под ключ</p>
<ul>
  <li>Визитки</li>
  <li>Магазины</li>
</ul>

HTML отвечает за скелет страницы: заголовки, абзацы, списки, изображения, таблицы. Браузер читает теги и строит дерево документа. Без HTML страницы просто не существует.

Критерий HTML CSS
Роль Структура и смысл контента Внешний вид и расположение
Строительная аналогия Каркас и стены дома Отделка и интерьер
Основные элементы Теги: <div>, <p>, <img> Свойства: color, margin, display
Может ли работать отдельно Да, страница будет, но серой Нет, стилям не к чему примениться

Дорожная карта: 7 шагов до готового сайта

Проверенная последовательность, которая экономит недели хаотичных действий. Каждый шаг закрывает одну задачу — и открывает следующую.

1
Установить инструменты
Браузер (Chrome или Firefox) и редактор Visual Studio Code — оба бесплатны. Пять минут на установку, и рабочее место готово.
2
Нарисовать схему страницы
На бумаге набросать блоки: шапка, меню, основной контент, подвал. Этот набросок станет планом HTML-разметки.
3
Написать HTML-каркас
Семантические теги <header>, <nav>, <main>, <section>, <footer> превращают набросок в живую структуру.
4
Подключить CSS и задать базу
Файл style.css, сброс отступов, выбор шрифта и цветовой палитры. Одна таблица стилей на все страницы.
5
Построить сетку на Flexbox
Свойство display: flex с выравниваниями решает 90% задач позиционирования — от колонок до центрирования.
6
Добавить адаптивность
Медиазапросы @media меняют раскладку под телефон: колонки складываются в столбец, текст остаётся читаемым.
7
Проверить и опубликовать
Просмотреть страницу на телефоне и компьютере, затем загрузить файлы на бесплатный хостинг — сайт виден всему миру.

Живой пример: как CSS меняет одну и ту же разметку

Ниже блок «До» и «После» — идентичный HTML, разница только в CSS. Нажатие на переключатель показывает силу стилей нагляднее любых слов.

Курс по вёрстке
Один и тот же текст. Ни один символ разметки не изменён — работает только CSS: цвета, отступы, рамки и тени.

Три типа селекторов, которые закрывают всю вёрстку

СЕЛЕКТОР ТЕГА
p { ... }
Применяется ко всем элементам страницы разом. Идеален для базовой типографики.
СЕЛЕКТОР КЛАССА
.button { ... }
Рабочая лошадка вёрстки: один класс — множество элементов, гибко и переиспользуемо.
СЕЛЕКТОР ID
#contact { ... }
Уникальный блок на странице. Используется редко — для якорей и единичных секций.

Пять ошибок, которые останавливают новичков

Каждый пункт раскрывается кликом — как в браузере любого устройства.

Стили пишутся прямо внутри тегов ▾
Картинки тянутся за размером экрана ▾
Проверка только на компьютере ▾
Кириллица в именах файлов ▾
Забытый метатег viewport ▾

Реалистичный план на неделю

По 1,5–2 часа практики в день — и первая страница опубликована через семь вечеров.

День 1–2 — базовые теги и структура документа30%
День 3–4 — CSS: цвета, шрифты, отступы, блочная модель60%
День 5–6 — Flexbox, медиазапросы, адаптивная вёрстка85%
День 7 — финальная проверка и публикация сайта100%
Главный секрет первой страницы — она должна быть написана, а не выдумана идеальной

Ни один разработчик в мире не помнит весь HTML и CSS наизусть. Разница между тем, кто умеет верстать, и тем, кто «когда-нибудь попробует», — первый открыл редактор и написал первые пять строк кода. Семь шагов из этого руководства превращают эти пять строк в работающий сайт, который открывается с любого устройства на планете.