Автор статьи: Горбунов Данил Кириллович

HTML и CSS для начинающих: создаём первую веб-страницу

Вы хотите создать свой первый сайт, но не знаете, с чего начать? Эта статья — для вас. Мы разберём, как устроена любая веб-страница, что делают HTML и CSS, и шаг за шагом создадим настоящий лендинг книжного магазина BookNest. Никаких сложных терминов без объяснений — только практика и понятный язык.

HTML

CSS

FLEXBOX

Что такое HTML и CSS: в чём разница

Любой сайт в интернете состоит из двух слоёв: структуры и оформления. Именно за это отвечают HTML и CSS.

HTML (HyperText Markup Language) — это язык разметки. Он задаёт структуру страницы: где заголовок, где текст, где картинка, где кнопка. Думайте об HTML как о скелете или каркасе здания.

CSS (Cascading Style Sheets) — это таблицы стилей. CSS отвечает за внешний вид: цвета, шрифты, отступы, расположение блоков. Если HTML — скелет, то CSS — это одежда и дизайн.

Без HTML страница не будет иметь содержимого. Без CSS она будет выглядеть как голый текст. Вместе они создают то, что мы видим в браузере каждый день.

Что нужно для начала работы

Для создания веб-страницы вам понадобится минимум инструментов — всё бесплатное:

Редактор кода VS Code — скачайте бесплатно на официальном сайте.
Расширение Live Server для VS Code — позволяет видеть изменения в браузере мгновенно.
Любой современный браузер: Chrome, Firefox, Edge.
Папка для проекта с файлом index.html и папкой images.

Структура HTML-документа: с чего начинается каждая страница

Каждая HTML-страница начинается с одинакового каркаса. Вот базовая структура, которую мы использовали при создании лендинга BookNest:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BookNest — книжный магазин</title>
</head>
<body>
  <!-- содержимое страницы -->
</body>
</html>

Что означает каждая строка

<!DOCTYPE html> — сообщает браузеру, что перед ним современный HTML5.
lang="ru" — указывает язык страницы, это важно для поисковиков и программ чтения с экрана.
charset=UTF-8 — поддержка кириллицы и спецсимволов.
viewport — критически важная строка для мобильных устройств. Без неё смартфон сожмёт вашу страницу в маленький экран.
<title> — текст на вкладке браузера. Это также учитывается поисковыми системами.

Семантические теги: структура, понятная браузеру и поисковику

Современный HTML использует семантические теги — элементы, которые описывают смысл содержимого, а не только его отображение. Вместо одних лишь безликих <div> мы используем:
<header> — шапка страницы с логотипом и навигацией.
<nav> — блок навигации со ссылками.
<main> — основное содержимое страницы.
<section> — смысловая секция внутри страницы.
<footer> — подвал с контактами и копирайтом.

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

CSS: как сделать страницу красивой

CSS подключается внутри тега <style> в разделе <head> или в отдельном файле. Для учебных проектов удобнее держать стили прямо в HTML-файле.
Первое, что мы задаём — базовые стили для всей страницы:

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #faf8f5;
}

Здесь мы выбрали современный шрифт, убрали стандартные отступы браузера (они обычно мешают дизайну), задали тёмно-серый цвет текста и тёплый фоновый оттенок — это создаёт уютную книжную атмосферу для BookNest.

Flexbox: управляем расположением блоков

Одна из самых важных технологий CSS — Flexbox. Это способ управлять расположением элементов внутри контейнера: выстраивать их в ряд, выравнивать, задавать расстояния.
В нашем лендинге Flexbox используется сразу в нескольких местах:
Шапка сайтаЧтобы логотип и навигация оказались на одной строке по краям:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Сетка книг
Чтобы карточки книг выстраивались в ряд и переносились на следующую строку при нехватке места:

.book-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

flex-wrap: wrap — ключевое свойство. Без него все карточки встанут в одну строку и уедут за край экрана. С ним — красиво переносятся.

Адаптивность: сайт должен выглядеть хорошо на телефоне

По статистике, больше половины пользователей заходят на сайты со смартфонов. Поэтому адаптивность — не роскошь, а обязательное требование.
Для адаптивности в CSS используют медиазапросы — условия, которые применяют стили только при определённой ширине экрана:

@media (max-width: 600px) {
  header {
    flex-direction: column;
  }
  .book-card {
    width: 80%;
  }
}

Что происходит на экранах уже 600 пикселей и меньше:

Шапка перестраивается: логотип и меню встают друг под другом.
Карточки книг расширяются на 80% экрана.
Поле для email в форме подписки становится шире.
Заголовок герой уменьшается, чтобы не выглядеть громоздко.

Проверить результат легко: откройте инструменты разработчика в браузере (клавиша F12), включите режим мобильного просмотра и меняйте ширину экрана. Страница должна перестраиваться.

Заключение

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

Обучение не заканчивается внутри статьи

В сообществе LUXCODE студенты обмениваются опытом, получают эксклюзивные материалы и строят карьеру вместе.

Получают дополнительные материалы
Участвуют в конкурсах
Публикуют свои проекты
Общаются с другими участниками
Получают новости и обновления

Получить доступ к сообществу