25 Модуль 5 Живой современный сайт 18 мин урок 25 из 25

Финальный проект: лендинг с нуля

От макета к коду: порядок работы, структура файлов, именование классов, проверка по чек-листу и публикация на GitHub Pages.

Что ты научишься делать

Разложишь любой макет на блоки и поймёшь, с чего начинать
Соберёшь лендинг по чек-листу из двадцати пунктов
Выложишь свой сайт в интернет и получишь на него ссылку

#С чего начинается вёрстка

Открыть макет и начать писать первый тег — плохая идея. Сначала пять минут на разбор, потом код: так получается быстрее.

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

#Структура файлов

HTMLДостаточно для лендинга

1my-landing/2  index.html3  styles/4    style.css5  images/6    logo.svg7    hero.webp8  favicon.svg9  README.md

Один файл стилей на лендинг — нормально. Внутри держи порядок и разделяй секции комментариями: переменные, сброс, типографика, компоненты, секции, медиазапросы.

CSSСкелет файла стилей

1/* ===== Переменные ===== */2:root {3  --accent: #6544e0;4  --text: #16181d;5  --bg: #ffffff;6  --radius: 14px;7  --gap: 1.5rem;8}910/* ===== Сброс и база ===== */11*, *::before, *::after { box-sizing: border-box; }12body { margin: 0; font-family: …; line-height: 1.7; }1314/* ===== Компоненты ===== */15.btn { … }16.card { … }1718/* ===== Секции ===== */19.hero { … }20.features { … }2122/* ===== Адаптив ===== */23@media (min-width: 700px) { … }

#Именование классов

Мы говорили про BEM в девятом уроке. На практике достаточно трёх правил.

Блок — самостоятельная штука: card, hero, btn.
Элемент — часть блока, через два подчёркивания: card__title.
Модификатор — вариант, через два дефиса: btn--ghost.

Главное — не вкладывать элементы друг в друга в именах. card__body__title — плохо, достаточно card__title: блок один, а на какой глубине лежит элемент, знает разметка.

#Что должно быть в лендинге

Каркас лендинга — начни отсюда

<header class="header">  <a class="header__logo" href="#">Полка</a>  <nav class="header__nav">    <a href="#about">О нас</a>    <a href="#menu">Меню</a>  </nav>  <a class="btn" href="#form">Забронировать</a></header><main>  <section class="hero">    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>    <p class="hero__lead">Свежая обжарка каждую неделю. Тихо, светло, есть розетки.</p>    <a class="btn btn--big" href="#form">Забронировать столик</a>  </section>  <section class="features" id="about">    <h2>Почему к нам возвращаются</h2>    <div class="features__grid">      <article class="card"><h3>Своя обжарка</h3><p>Зерно едет к нам напрямую с ферм.</p></article>      <article class="card"><h3>Тихо</h3><p>Ни телевизора, ни громкой музыки.</p></article>      <article class="card"><h3>До полуночи</h3><p>Работаем, когда всё остальное закрыто.</p></article>    </div>  </section></main><footer class="footer">  <p>ул. Гоголя, 12 · <a href="tel:+79000000000">+7 900 000-00-00</a></p></footer>

<header class="header">
  <a class="header__logo" href="#">Полка</a>
  <nav class="header__nav">
    <a href="#about">О нас</a>
    <a href="#menu">Меню</a>
  </nav>
  <a class="btn" href="#form">Забронировать</a>
</header>

<main>
  <section class="hero">
    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>
    <p class="hero__lead">Свежая обжарка каждую неделю. Тихо, светло, есть розетки.</p>
    <a class="btn btn--big" href="#form">Забронировать столик</a>
  </section>

<section class="features" id="about">
    <h2>Почему к нам возвращаются</h2>
    <div class="features__grid">
      <article class="card"><h3>Своя обжарка</h3><p>Зерно едет к нам напрямую с ферм.</p></article>
      <article class="card"><h3>Тихо</h3><p>Ни телевизора, ни громкой музыки.</p></article>
      <article class="card"><h3>До полуночи</h3><p>Работаем, когда всё остальное закрыто.</p></article>
    </div>
  </section>
</main>

<footer class="footer">
  <p>ул. Гоголя, 12 · <a href="tel:+79000000000">+7 900 000-00-00</a></p>
</footer>

:root {  --accent: #6544e0;  --text: #16181d;  --muted: #5b6070;  --bg: #fff;  --radius: 14px;}*, *::before, *::after { box-sizing: border-box; }body {  margin: 0;  font-family: system-ui, sans-serif;  line-height: 1.7;  color: var(--text);  background: var(--bg);}.header {  display: flex;  align-items: center;  gap: 20px;  padding: 14px 20px;  border-bottom: 1px solid #eee;}.header__logo { font-weight: 700; color: var(--text); text-decoration: none; }.header__nav {  display: flex;  gap: 16px;  margin-left: auto;  font-size: 14px;}.header__nav a { color: var(--muted); text-decoration: none; }.btn {  display: inline-block;  padding: 10px 20px;  font-size: 14px;  color: #fff;  background: var(--accent);  border-radius: 999px;  text-decoration: none;  transition: transform 180ms ease-out;}.btn:hover { transform: translateY(-2px); }.btn--big { padding: 14px 28px; font-size: 16px; }.hero {  padding: 48px 20px;  text-align: center;}.hero__title {  max-width: 16ch;  margin: 0 auto 12px;  font-size: clamp(1.6rem, 1.2rem + 3vw, 2.8rem);  line-height: 1.15;}.hero__lead {  max-width: 44ch;  margin: 0 auto 24px;  color: var(--muted);}.features { padding: 20px; }.features h2 { font-size: 1.4rem; }.features__grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  gap: 14px;}.card {  padding: 18px;  background: #f5f5fa;  border-radius: var(--radius);}.card h3 { margin: 0 0 6px; font-size: 16px; }.card p { margin: 0; font-size: 14px; color: var(--muted); }.footer {  padding: 20px;  font-size: 14px;  color: var(--muted);  border-top: 1px solid #eee;}.footer a { color: var(--accent); }

:root {
  --accent: #6544e0;
  --text: #16181d;
  --muted: #5b6070;
  --bg: #fff;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

.header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid #eee;
}

.header__logo { font-weight: 700; color: var(--text); text-decoration: none; }

.header__nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
  font-size: 14px;
}

.header__nav a { color: var(--muted); text-decoration: none; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease-out;
}

.btn:hover { transform: translateY(-2px); }
.btn--big { padding: 14px 28px; font-size: 16px; }

.hero {
  padding: 48px 20px;
  text-align: center;
}

.hero__title {
  max-width: 16ch;
  margin: 0 auto 12px;
  font-size: clamp(1.6rem, 1.2rem + 3vw, 2.8rem);
  line-height: 1.15;
}

.hero__lead {
  max-width: 44ch;
  margin: 0 auto 24px;
  color: var(--muted);
}

.features { padding: 20px; }
.features h2 { font-size: 1.4rem; }

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.card {
  padding: 18px;
  background: #f5f5fa;
  border-radius: var(--radius);
}

.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; font-size: 14px; color: var(--muted); }

.footer {
  padding: 20px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid #eee;
}

.footer a { color: var(--accent); }

В песочницу

#Чек-лист из двадцати пунктов

#Публикация на GitHub Pages

Бесплатно, за десять минут, с настоящим адресом вида имя.github.io/название. Ничего устанавливать не нужно — всё делается в браузере.

Заведи аккаунт на github.com
Бесплатный. Имя пользователя попадёт в адрес сайта — выбери что-то приличное.
Создай репозиторий
Кнопка New repository. Назови, например, my-landing, поставь галочку Public.
Загрузи файлы
На странице репозитория: Add file → Upload files. Перетащи index.html, папку со стилями и картинками. Нажми Commit changes.
Включи Pages
Settings → Pages. В разделе Branch выбери main и папку / (root), нажми Save.
Подожди минуту
Обнови страницу настроек — вверху появится ссылка на твой сайт. Первая сборка занимает до пары минут.
Проверь на телефоне
Открой ссылку с телефона. Это и есть настоящая проверка: на реальном устройстве, а не в эмуляторе.

#Что учить дальше

HTML и CSS ты знаешь. Этого достаточно, чтобы верстать настоящие сайты — и уже брать за это деньги. Дальше есть три направления.

JavaScript. Всё, что должно реагировать: меню-гамбургер, слайдер, отправка формы без перезагрузки, поиск по странице. Курс появится здесь же, отдельным разделом, и прогресс будет считаться так же.
Инструменты. Git для хранения истории проекта, препроцессоры и сборщики, готовые системы вёрстки.
Глубина в CSS. Анимации по прокрутке, вложенность, слои каскада, современные функции цвета. Спецификация растёт каждый год.

Где спотыкаются почти все

Вёрстка начинается со стилей

Почему Пока структура не готова, стили приходится переписывать при каждом изменении разметки.

Как надо Сначала весь HTML целиком, потом CSS сверху вниз.

Каждая секция верстается по-своему

Почему Получается пять разных кнопок и три вида карточек. Файл разрастается, правки становятся дорогими.

Как надо Выдели компоненты заранее и переиспользуй классы.

Адаптив оставлен на потом

Почему Переделывать готовую десктопную вёрстку под мобильную дольше, чем сразу писать mobile-first.

Как надо Проверяй узкий экран с самого начала, а не в конце.

Проект не выложен в интернет

Почему Сайт на диске нельзя показать, а без ссылки нет ни обратной связи, ни портфолио.

Как надо Публикуй сразу, ещё не доделав. GitHub Pages обновляется при каждой загрузке файлов.

Лендинг landing page: Одностраничный сайт, ведущий человека к одному действию.
Компонент component: Повторяющийся кусок интерфейса со своими стилями: карточка, кнопка, поле.
Репозиторий repository: Хранилище файлов проекта с историей изменений.
GitHub Pages GitHub Pages: Бесплатный хостинг статических сайтов прямо из репозитория.
Прогрессивное улучшение progressive enhancement: Подход, при котором базовая версия работает везде, а современные возможности добавляются сверху.

Задание

Первый экран лендинга

Собери первый экран по требованиям:

семантичная разметка: header с nav, main, внутри section с классом hero;
ровно один h1;
кнопка-ссылка с классом btn, у неё есть переход и состояние :hover;
палитра вынесена в переменные :root;
включён box-sizing: border-box;
размер заголовка задан через clamp();
ни одного !important.

<header>  <nav>    <a href="#">О нас</a>  </nav></header><main></main>

/* Начни с переменных и сброса */

Открыть в песочнице

Подсказка 1

Начни с разметки: <main><section class="hero"><h1>…</h1><p>…</p><a class="btn" href="#">…</a></section></main>

Подсказка 2

Переменные: :root { --accent: #6544e0; --text: #16181d; --muted: #5b6070; }

Подсказка 3

Заголовок: h1 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.8rem); line-height: 1.15; }

Показать решение

HTMLindex.html

1<header class="header">2  <a class="header__logo" href="#">Полка</a>3  <nav class="header__nav">4    <a href="#about">О нас</a>5    <a href="#menu">Меню</a>6  </nav>7</header>89<main>10  <section class="hero">11    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>12    <p class="hero__lead">Свежая обжарка каждую неделю. Тихо, светло, есть розетки.</p>13    <a class="btn" href="#form">Забронировать столик</a>14  </section>15</main>

CSSstyle.css

1:root {2  --accent: #6544e0;3  --text: #16181d;4  --muted: #5b6070;5  --radius: 14px;6}78*, *::before, *::after { box-sizing: border-box; }910body {11  margin: 0;12  font-family: system-ui, sans-serif;13  line-height: 1.7;14  color: var(--text);15}1617.header {18  display: flex;19  align-items: center;20  gap: 20px;21  padding: 14px 20px;22  border-bottom: 1px solid #eee;23}2425.header__logo { font-weight: 700; color: var(--text); text-decoration: none; }26.header__nav { display: flex; gap: 16px; margin-left: auto; font-size: 14px; }27.header__nav a { color: var(--muted); text-decoration: none; }2829.hero {30  padding: 48px 20px;31  text-align: center;32}3334.hero__title {35  max-width: 16ch;36  margin: 0 auto 12px;37  font-size: clamp(1.6rem, 1.2rem + 3vw, 2.8rem);38  line-height: 1.15;39}4041.hero__lead {42  max-width: 44ch;43  margin: 0 auto 24px;44  color: var(--muted);45}4647.btn {48  display: inline-block;49  padding: 14px 28px;50  color: #fff;51  background: var(--accent);52  border-radius: 999px;53  text-decoration: none;54  transition: transform 180ms ease-out, box-shadow 180ms ease-out;55}5657.btn:hover {58  transform: translateY(-2px);59  box-shadow: 0 12px 24px -12px var(--accent);60}

Финальный проект: лендинг с нуля

Что ты научишься делать

#С чего начинается вёрстка

Раздели страницу на секции

Найди повторяющиеся элементы

Определи, где какая раскладка

Собери палитру и шрифты

Напиши разметку целиком, без стилей

Стилизуй сверху вниз

#Структура файлов

#Именование классов

#Что должно быть в лендинге

#Чек-лист из двадцати пунктов

Проверка перед публикацией

#Публикация на GitHub Pages

Заведи аккаунт на github.com

Создай репозиторий

Загрузи файлы

Включи Pages

Подожди минуту

Проверь на телефоне