Мини-проект CSS — Стилизованный лендинг
Итоги CSS нарисовали карту набора. Эта сессия его применяет. Вы вручную соберёте один маленький стилизованный лендинг: полоса идентичности, hero с ясным призывом к действию, несколько карточек возможностей и спокойный футер. Новых экзотических свойств нет — только соединение уже отработанных навыков (каскад, box model, Flex, Grid, адаптив, фокус).
Прямой ответ
1) Сначала набросайте секции: header + nav, hero + CTA, возможности, футер.
2) Отметьте их семантическим HTML (header, nav, main, section, footer) внутри контейнера с max-width.
3) Общие цвета, отступы и радиус положите в custom properties на :root.
4) Для верхней полосы и ряда hero — Flex; для карточек возможностей — Grid.
5) Добавьте один брейкпоинт через media query и сохраните :focus-visible на ссылках и CTA.
6) «Готово» значит: страница читаема на узком viewport и Tab по-прежнему показывает фокус — а не то, что каждый трюк CSS мелькнул по разу.
Порядок сборки этого лендинга
📊 Landing sections and CSS jobs
| Section | HTML job | CSS job |
|---|---|---|
| Header + nav | Имя сайта + якорные ссылки | Ряд Flex, gap, спокойный фон |
| Hero | Заголовок, короткий питч, основной CTA | Flex или стек; сильный контраст; ясная кнопка |
| Features | Три короткие карточки | Grid с ровными треками и gap |
| Footer | Контакт или юридическая строка | Спокойный padding; читаемый приглушённый текст |
| Shared tokens | — | Цвета, отступы, радиус в :root для всего |
| Responsive check | meta viewport уже в HTML | Один брейкпоинт, который складывает hero/карточки |
Сначала подключите структуру, потом украшения. Красивые градиенты на супе из div чинить труднее, чем простой семантический каркас со спокойным CSS.
Шаг 1 — Семантический каркас
Начните с landmarks. Классы уточняют вид; элементы называют регионы для читателей и вспомогательных технологий.
<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>
<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>
Английский текст демо держите коротким. В своём проекте можно любое имя продукта — важнее структура, а не история бренда.
Шаг 2 — Дизайн-токены на :root
Вынесите повторяющиеся значения в custom properties, чтобы палитра и отступы оставались согласованными при правках.
:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}
.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}
Токены — не декор: они останавливают дрейф от копипаста. Меняете --accent один раз — CTA, ссылки и подсказки фокуса остаются согласованными.
Шаг 3 — Flex для header и nav
Одномерный ряд — задача Flex: логотип с одной стороны, ссылки с другой, ровный gap.
.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}
.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.site-nav a {
color: var(--muted);
text-decoration: none;
}
.site-nav a:hover {
color: var(--accent);
}
flex-wrap держит полосу честной на узких экранах ещё до того, как media query сложит крупные секции.
Шаг 4 — Полоса hero
Дайте питчу место, держите контраст сильным и сделайте CTA похожим на главное действие.
.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}
.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}
.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}
.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}
.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}
.btn:hover {
filter: brightness(1.05);
}
clamp на заголовке — небольшой современный штрих из прошлых уроков: полезно, но не обязательно. CTA должен оставаться читаемым: фон accent и более тёмные чернила, а не бледное на бледном.
Шаг 5 — Grid для карточек возможностей
Две оси (ряды и колонки равных карточек) — зона Grid. Padding и border карточек держите спокойными.
.features {
padding: 2rem 0 3rem;
}
.features h2 {
margin: 0 0 1rem;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}
.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}
.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}
.card p {
margin: 0;
color: var(--muted);
}
.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}
На мобильном одна колонка нормальна. Расширяйте сетку на брейкпоинте — не изобретайте третью систему раскладки ради трёх карточек.
Шаг 6 — Брейкпоинт и видимый фокус
Один честный брейкпоинт плюс кольца фокуса завершают учебную страницу. Пользователь клавиатуры должен по-прежнему видеть, где он находится.
@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}
.hero {
padding-top: 4rem;
}
}
a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
Стили доступности вы уже изучали подробно. Здесь только применяете привычку: не отдавайте красивый CTA, который теряет подсказку фокуса.
Попробуйте сами
- Создайте
index.html+styles.cssи вставьте каркас landmarks; подключите таблицу стилей. - Добавьте токены
:rootи правила body/container; убедитесь, что страница по центру и читаема. - Стилизуйте header через Flex и карточки через Grid (одна колонка, с
640px— три). - Стилизуйте CTA; пройдите Tab по логотипу, nav и кнопке — фокус должен оставаться видимым.
- Сузьте до ширины телефона: без горизонтального скролла, карточки стопкой, удобные цели нажатия.
- Опционально: добавьте
prefers-reduced-motion, если повесите hover-transition на.btn.
Частые ошибки
- Открывать библиотеку компонентов, пока не умеете вручную стилизовать эту маленькую страницу
- Красить каждую секцию через
position: absoluteвместо потока Flex/Grid - Пропускать
max-widthу контейнера, чтобы строки тянулись от края до края на больших экранах - Снимать outline фокуса «ради дизайна» с CTA и ссылок nav
- Делать пять брейкпоинтов для трёх карточек вместо одного ясного шага расширения
- Воспринимать лабораторию как чеклист свойств — скопировать каждый трюк по разу — вместо цельной страницы
- Забывать прошлые уроки: сводка нарисовала навыки; доступность требовала видимый фокус — оба правила здесь всё ещё в силе
Итог
- Этот мини-проект соединяет навыки курса в один стилизованный лендинг
- Сначала структура (landmarks), затем токены, полоса Flex, карточки Grid, брейкпоинт, фокус
- Flex для одномерного chrome; Grid для матрицы возможностей
- «Готово» значит читаемо на мобильном и безопасно для клавиатуры — не scaffolding под фреймворк
- Дальше (опционально, advanced): CSS !important (
important), если хотите глубже края каскада; иначе практикуйте ещё маленькие страницы вручную
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху