Первая страница на HTML и CSS: пошаговая инструкция

В конце этой инструкции у вас будет файл index.html, который открывается двойным кликом в браузере и показывает страницу с шапкой, тремя карточками и подвалом. Страница перестроится в одну колонку на телефоне. Времени уйдёт 30–40 минут, если печатать код руками, и минут 15, если копировать. Ничего устанавливать не нужно: хватит текстового редактора и браузера.

Что нужно до начала

Проверьте, что у вас есть три вещи. Без них дальше идти бессмысленно.

• Текстовый редактор. Подойдёт VS Code, но сработает и «Блокнот» на Windows или TextEdit на macOS. Важно: если пишете в TextEdit, переключите его в режим простого текста (меню «Формат» → «Преобразовать в обычный текст»), иначе он сохранит файл с форматированием и браузер покажет мусор.
• Браузер. Любой современный: Chrome, Firefox, Safari, Edge. Здесь всё написано под их актуальные версии 2024 года — CSS Grid и Flexbox работают в них давно.
• Папка под проект. Создайте пустую папку, например my-first-page. Все файлы будут лежать в ней.

Код на JavaScript в этой инструкции не понадобится: страница статичная, вся раскладка держится на CSS.

Шаг 1. Создайте файл index.html

В папке my-first-page создайте файл с именем index.html. Имя важно: браузеры и хостинги по умолчанию открывают именно index.html как главную страницу. Откройте файл в редакторе и вставьте каркас документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет</h1>
</body>
</html>

Сохраните файл и откройте его двойным кликом. Проверка: в браузере должна появиться крупная строка «Привет», а во вкладке — заголовок «Моя первая страница». Если видите сам код вместо страницы — файл сохранился с расширением .txt, переименуйте его в index.html.

Зачем строки в head

charset="UTF-8" отвечает за то, чтобы русские буквы не превращались в «кракозябры». Строка с viewport говорит телефону не «ужимать» страницу, а показывать её в реальном масштабе — без неё адаптивная вёрстка на мобильном не заработает.

Шаг 2. Наполните страницу содержимым

Замените всё, что внутри <body>, на такую разметку. Здесь появляются шапка, блок с карточками и подвал.

<body>
  <header class="site-header">
    <h1>Кофейня «Утро»</h1>
    <p>Свежая обжарка каждый день</p>
  </header>

  <main class="cards">
    <article class="card">
      <h2>Эспрессо</h2>
      <p>Плотный вкус, тонкая крема. 120 рублей.</p>
    </article>
    <article class="card">
      <h2>Капучино</h2>
      <p>Молочная пена и мягкий баланс. 180 рублей.</p>
    </article>
    <article class="card">
      <h2>Раф</h2>
      <p>Сливочный, с ванилью. 220 рублей.</p>
    </article>
  </main>

  <footer class="site-footer">
    <p>© 2024 Кофейня «Утро». Ежедневно 8:00–22:00.</p>
  </footer>
</body>

Обновите страницу в браузере (клавиша F5). Проверка: вы увидите три блока с названиями напитков друг под другом, сверху шапку, снизу подвал. Оформления пока нет — это нормально, его добавит CSS на следующем шаге.

Теги header, main, article, footer называют семантическими: они не рисуют ничего особенного, но объясняют браузеру и поисковику, где на странице шапка, а где основной контент. Заменять их на голые div — распространённая ошибка новичка, которая позже мешает и SEO, и доступности.

Шаг 3. Подключите файл стилей

Стили можно писать прямо в HTML, но правильнее держать их отдельно. Создайте в той же папке файл style.css и подключите его — добавьте одну строку в <head>, сразу после строки с title:

<link rel="stylesheet" href="style.css">

Атрибут href="style.css" — это путь к файлу. Раз оба файла лежат в одной папке, достаточно имени без слэшей. Пока файл пустой, ничего не изменится — проверим на следующем шаге.

Шаг 4. Опишите базовые стили

Откройте style.css и вставьте в него следующее. Разбор — под кодом.

/* Сброс отступов, которые браузер ставит по умолчанию */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #222;
  background: #f5f5f5;
}

.site-header {
  background: #4a2c2a;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.site-footer {
  background: #333;
  color: #ccc;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}

Сохраните оба файла и обновите браузер. Проверка: шапка стала коричневой с белым текстом по центру, подвал — тёмным. Если ничего не поменялось — браузер не нашёл style.css. Проверьте, что имя файла в href совпадает с реальным именем буква в букву и оба файла в одной папке.

Что делает box-sizing

Правило box-sizing: border-box — то, что снимает большинство головной боли с размерами блоков. По умолчанию отступы и рамка добавляются к ширине элемента, и блок «раздувается» больше заданного. С border-box ширина остаётся ровно такой, какую вы указали. Это первое правило, которое опытные верстальщики пишут в любом проекте.

Шаг 5. Соберите карточки в сетку

Теперь превратим три карточки в аккуратную сетку. Добавьте в конец style.css:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.card h2 {
  margin-bottom: 8px;
  color: #4a2c2a;
}

Проверка: три карточки встали в ряд, у каждой белый фон, скругления и лёгкая тень. Весь блок отцентрован и не растягивается шире 900 пикселей.

grid-template-columns: repeat(3, 1fr) задаёт три колонки равной ширины. Единица 1fr — это доля свободного места; три доли делят пространство поровну. gap: 20px ставит отступ между карточками, не трогая внешние края. margin: 40px auto — сверху и снизу 40 пикселей, слева и справа auto, что и центрирует блок.

Шаг 6. Сделайте страницу адаптивной

Сейчас на телефоне три колонки сожмутся и станут нечитаемыми. Добавим правило, которое перестроит сетку в одну колонку на узких экранах. В конец style.css:

/* Экраны уже 600px — карточки в один столбец */
@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .site-header {
    padding: 24px 16px;
  }
}

Проверка: сузьте окно браузера мышкой до ширины меньше 600 пикселей. Как только оно станет узким, карточки выстроятся в один столбец, а отступы шапки уменьшатся. В Chrome и Firefox то же самое можно проверить точнее: нажмите F12, затем иконку с телефоном и планшетом — включится режим мобильного просмотра.

Если не получилось

Пять ошибок, на которые новички наступают чаще всего.

• В браузере виден код, а не страница. Файл сохранился как index.html.txt. В Windows включите показ расширений файлов и переименуйте. В TextEdit на macOS не забудьте перевести документ в обычный текст перед сохранением.
• Русские буквы превратились в «Ð¿Ñивеѻ. Пропала или не сработала строка <meta charset="UTF-8">, либо редактор сохранил файл в другой кодировке. В VS Code выберите кодировку UTF-8 в правом нижнем углу.
• Стили не применяются. Либо опечатка в href="style.css", либо файлы лежат в разных папках. Имена файлов чувствительны к регистру на многих хостингах: Style.css и style.css — разные файлы.
• Карточки не встают в ряд. Проверьте, что display: grid прописан классу .cards, а не .card. Одна буква меняет смысл.
• Изменения в CSS не видны. Браузер закешировал старый файл. Обновите страницу с очисткой кеша: Ctrl+F5 на Windows, Cmd+Shift+R на macOS.

Что делать дальше

У вас есть рабочая страница из двух файлов. Дальше двигайтесь по одному шагу за раз, не хватаясь за фреймворки сразу.

• Замените фиксированное число колонок на repeat(auto-fit, minmax(250px, 1fr)) — сетка сама решит, сколько карточек поместится в ряд, и вам не понадобится отдельное медиавыражение под каждый размер экрана.
• Добавьте картинки в карточки через тег <img> и разберитесь, как масштабировать их через max-width: 100%.
• Выложите страницу в интернет бесплатно через GitHub Pages или Netlify — достаточно загрузить оба файла.

Верстка меню и форм — отдельная большая тема, здесь мы её не трогали. Когда освоите Grid и Flexbox на статичных блоках, разберитесь с ними уже в контексте навигации и полей ввода.