Пошук уроків, статей та іншого контенту
Створіть односторінкову landing page зі структурою hero-секції, блоками переваг, закликом до дії та базовим стилюванням.
Landing page — це односторінковий сайт, головна мета якого — привернути увагу користувача та підштовхнути його до певної дії: залишити заявку, зареєструватися, придбати продукт або дізнатися більше.
У цьому уроці створимо сторінку для онлайн-курсу:
верхню навігацію;
hero-секцію — перший екран сторінки;
заголовок і короткий опис;
основну кнопку із закликом до дії;
блок переваг;
додатковий заклик до дії;
базове адаптивне стилювання.
Типова landing page може мати таку структуру:
header
└── логотип і навігація
main
├── hero-секція
│ ├── заголовок
│ ├── опис
│ └── кнопка
├── секція переваг
│ ├── перевага 1
│ ├── перевага 2
│ └── перевага 3
└── секція із закликом до дії
footer
└── інформація про сайтДля структурування сторінки використаємо семантичні HTML-елементи:
<header> — верхня частина сторінки;
<nav> — навігація;
<main> — основний вміст;
<section> — окремий логічний блок;
<footer> — нижня частина сторінки.
Hero-секція — це перший екран, який користувач бачить після відкриття сторінки. Вона повинна швидко пояснювати:
що пропонує сторінка;
для кого призначена пропозиція;
яку дію потрібно виконати.
Зазвичай hero-секція містить:
невеликий додатковий текст;
великий заголовок;
опис;
кнопку;
ілюстрацію або декоративний елемент.
Важливо, щоб основний заголовок був зрозумілим і конкретним. Наприклад:
<h1>Створюйте сучасні вебсайти з нуля</h1>Такий заголовок одразу пояснює, що отримає користувач.
Створіть файл index.html і додайте до нього таку розмітку:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebStart — навчання веброзробки</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<div class="container header-content">
<a class="logo" href="/">WebStart</a>
<nav class="navigation" aria-label="Головна навігація">
<a href="#benefits">Переваги</a>
<a href="#about">Про курс</a>
<a href="#contact">Контакти</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container hero-content">
<div class="hero-text">
<p class="eyebrow">Онлайн-курс для початківців</p>
<h1>Створюйте сучасні вебсайти з нуля</h1>
<p class="hero-description">
Вивчіть HTML і CSS на практиці та створіть власний перший проєкт
під час навчання.
</p>
<a class="button button-primary" href="#contact">
Почати навчання
</a>
</div>
<div class="hero-card" aria-label="Інформація про курс">
<span class="hero-card-icon"></></span>
<p class="hero-card-title">Практичний підхід</p>
<p class="hero-card-text">
Теорія, вправи та реальний проєкт у кожному модулі.
</p>
</div>
</div>
</section>
<section class="benefits" id="benefits">
<div class="container">
<div class="section-heading">
<p class="eyebrow">Чому WebStart</p>
<h2>Усе необхідне для впевненого старту</h2>
</div>
<div class="benefits-grid">
<article class="benefit">
<div class="benefit-icon">01</div>
<h3>Зрозумілі пояснення</h3>
<p>
Складні теми подані простою мовою та підкріплені прикладами.
</p>
</article>
<article class="benefit">
<div class="benefit-icon">02</div>
<h3>Практичні завдання</h3>
<p>
Закріплюйте кожну тему, створюючи частини справжніх вебсайтів.
</p>
</article>
<article class="benefit">
<div class="benefit-icon">03</div>
<h3>Перший проєкт</h3>
<p>
Наприкінці курсу у вас буде готова landing page для портфоліо.
</p>
</article>
</div>
</div>
</section>
<section class="cta-section" id="contact">
<div class="container cta-content">
<div>
<p class="eyebrow">Готові почати?</p>
<h2>Зробіть перший крок у веброзробці</h2>
</div>
<a class="button button-light" href="mailto:hello@example.com">
Зареєструватися
</a>
</div>
</section>
</main>
<footer class="site-footer" id="about">
<div class="container">
<p>© 2025 WebStart. Навчання веброзробки.</p>
</div>
</footer>
</body>
</html>Клас .container буде обмежувати ширину вмісту та вирівнювати його по центру:
<div class="container">
<!-- Вміст секції -->
</div>Це допомагає не розтягувати текст на всю ширину великих екранів.
Заклик до дії, або CTA, — це елемент, який пропонує користувачу виконати конкретну дію.
У прикладі CTA реалізований як посилання, стилізоване під кнопку:
<a class="button button-primary" href="#contact">
Почати навчання
</a>Посилання з href="#contact" прокручує сторінку до секції з атрибутом id="contact".
Кожну перевагу розміщено в окремому елементі <article>:
<article class="benefit">
<div class="benefit-icon">01</div>
<h3>Зрозумілі пояснення</h3>
<p>Складні теми подані простою мовою та підкріплені прикладами.</p>
</article><article> підходить для самостійного змістового блоку, який можна сприймати окремо від інших частин сторінки.
Створіть файл styles.css. Спочатку додамо скидання стандартних відступів і базові стилі:
:root {
--color-background: #f7f8fc;
--color-surface: #ffffff;
--color-text: #172033;
--color-muted: #667085;
--color-primary: #635bff;
--color-primary-dark: #5148d8;
--color-accent: #e9e7ff;
--color-border: #e6e8f0;
--container-width: 1120px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-background);
font-family: Arial, sans-serif;
line-height: 1.5;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(100% - 40px, var(--container-width));
margin: 0 auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}У блоці :root зберігаються CSS-змінні:
:root {
--color-primary: #635bff;
}Використати змінну можна за допомогою var():
.button {
background-color: var(--color-primary);
}Перевага такого підходу в тому, що колір можна змінити в одному місці, і він оновиться в усіх елементах, де використовується.
.site-header {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
}
.logo {
color: var(--color-primary);
font-size: 22px;
font-weight: 700;
}
.navigation {
display: flex;
gap: 28px;
}
.navigation a {
color: var(--color-muted);
font-size: 15px;
}
.navigation a:hover {
color: var(--color-primary);
}Властивість display: flex розміщує логотип і навігацію в одному рядку.
justify-content: space-between розсуває елементи до протилежних країв;
align-items: center вирівнює їх по вертикалі;
gap задає відстань між посиланнями.
.hero {
padding: 96px 0;
background:
linear-gradient(135deg, #f7f8fc 0%, #eeedff 100%);
}
.hero-content {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
align-items: center;
gap: 72px;
min-height: 480px;
}
.hero-text {
max-width: 650px;
}
.eyebrow {
margin-bottom: 16px;
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero h1 {
max-width: 680px;
margin-bottom: 24px;
font-size: clamp(42px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.04em;
}
.hero-description {
max-width: 560px;
margin-bottom: 32px;
color: var(--color-muted);
font-size: 19px;
}Функція clamp() задає мінімальне, гнучке та максимальне значення розміру:
font-size: clamp(42px, 6vw, 72px);У цьому прикладі:
42px — мінімальний розмір;
6vw — гнучкий розмір залежно від ширини вікна;
72px — максимальний розмір.
Завдяки цьому заголовок поступово змінює розмір на різних екранах.
.hero-card {
padding: 40px;
border: 1px solid rgba(99, 91, 255, 0.18);
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0 24px 60px rgba(48, 42, 120, 0.12);
}
.hero-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 28px;
border-radius: 18px;
color: var(--color-primary);
background-color: var(--color-accent);
font-size: 24px;
font-weight: 700;
}
.hero-card-title {
margin-bottom: 12px;
font-size: 24px;
font-weight: 700;
}
.hero-card-text {
margin-bottom: 0;
color: var(--color-muted);
}Для картки використано:
border-radius — заокруглення кутів;
box-shadow — тінь;
background-color з прозорістю — напівпрозорий фон;
padding — внутрішні відступи.
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 24px;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
color: #ffffff;
background-color: var(--color-primary);
}
.button-primary:hover {
background-color: var(--color-primary-dark);
}
.button-light {
color: var(--color-primary);
background-color: #ffffff;
}
.button-light:hover {
background-color: var(--color-accent);
}Одна базова кнопка .button містить спільні стилі, а модифікатори .button-primary і .button-light задають різні кольорові варіанти.
Такий підхід не дублює однакові стилі.
.benefits {
padding: 100px 0;
background-color: var(--color-surface);
}
.section-heading {
max-width: 620px;
margin-bottom: 48px;
}
.section-heading h2 {
margin-bottom: 0;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.03em;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.benefit {
padding: 32px;
border: 1px solid var(--color-border);
border-radius: 16px;
background-color: var(--color-surface);
}
.benefit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 24px;
border-radius: 12px;
color: var(--color-primary);
background-color: var(--color-accent);
font-weight: 700;
}
.benefit h3 {
margin-bottom: 12px;
font-size: 21px;
}
.benefit p {
margin-bottom: 0;
color: var(--color-muted);
}Властивість
grid-template-columns: repeat(3, 1fr);створює три колонки однакової ширини.
1fr означає одну частину доступного простору. Три значення 1fr ділять доступний простір порівну між трьома колонками.
.cta-section {
padding: 72px 0;
color: #ffffff;
background-color: var(--color-primary);
}
.cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.cta-section .eyebrow {
margin-bottom: 12px;
color: #dcd9ff;
}
.cta-section h2 {
max-width: 620px;
margin-bottom: 0;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.1;
}
.site-footer {
padding: 28px 0;
color: var(--color-muted);
background-color: var(--color-background);
}
.site-footer p {
margin-bottom: 0;
font-size: 14px;
}На вузькому екрані дві колонки hero-секції потрібно перетворити на одну. Так само блоки переваг мають розташовуватися вертикально.
Додайте в кінець styles.css медіазапит:
@media (max-width: 760px) {
.container {
width: min(100% - 32px, var(--container-width));
}
.header-content {
min-height: 64px;
}
.navigation {
gap: 14px;
}
.navigation a {
font-size: 13px;
}
.hero {
padding: 64px 0;
}
.hero-content {
grid-template-columns: 1fr;
gap: 48px;
min-height: auto;
}
.hero h1 {
font-size: 44px;
}
.benefits {
padding: 72px 0;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.cta-content {
align-items: flex-start;
flex-direction: column;
}
}Медіазапит
@media (max-width: 760px) {
/* Стилі для вузьких екранів */
}застосовує вкладені стилі, коли ширина вікна становить 760 пікселів або менше.
На мобільних пристроях:
hero-контент розміщується в одну колонку;
переваги розміщуються одна під одною;
CTA-блок переходить у вертикальну структуру;
зменшуються відступи та розміри заголовків.
Після об’єднання частин файл styles.css матиме такий вигляд:
:root {
--color-background: #f7f8fc;
--color-surface: #ffffff;
--color-text: #172033;
--color-muted: #667085;
--color-primary: #635bff;
--color-primary-dark: #5148d8;
--color-accent: #e9e7ff;
--color-border: #e6e8f0;
--container-width: 1120px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-background);
font-family: Arial, sans-serif;
line-height: 1.5;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(100% - 40px, var(--container-width));
margin: 0 auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
.site-header {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
}
.logo {
color: var(--color-primary);
font-size: 22px;
font-weight: 700;
}
.navigation {
display: flex;
gap: 28px;
}
.navigation a {
color: var(--color-muted);
font-size: 15px;
}
.navigation a:hover {
color: var(--color-primary);
}
.hero {
padding: 96px 0;
background:
linear-gradient(135deg, #f7f8fc 0%, #eeedff 100%);
}
.hero-content {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
align-items: center;
gap: 72px;
min-height: 480px;
}
.hero-text {
max-width: 650px;
}
.eyebrow {
margin-bottom: 16px;
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero h1 {
max-width: 680px;
margin-bottom: 24px;
font-size: clamp(42px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.04em;
}
.hero-description {
max-width: 560px;
margin-bottom: 32px;
color: var(--color-muted);
font-size: 19px;
}
.hero-card {
padding: 40px;
border: 1px solid rgba(99, 91, 255, 0.18);
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0 24px 60px rgba(48, 42, 120, 0.12);
}
.hero-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 28px;
border-radius: 18px;
color: var(--color-primary);
background-color: var(--color-accent);
font-size: 24px;
font-weight: 700;
}
.hero-card-title {
margin-bottom: 12px;
font-size: 24px;
font-weight: 700;
}
.hero-card-text {
margin-bottom: 0;
color: var(--color-muted);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 24px;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
color: #ffffff;
background-color: var(--color-primary);
}
.button-primary:hover {
background-color: var(--color-primary-dark);
}
.button-light {
color: var(--color-primary);
background-color: #ffffff;
}
.button-light:hover {
background-color: var(--color-accent);
}
.benefits {
padding: 100px 0;
background-color: var(--color-surface);
}
.section-heading {
max-width: 620px;
margin-bottom: 48px;
}
.section-heading h2 {
margin-bottom: 0;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.03em;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.benefit {
padding: 32px;
border: 1px solid var(--color-border);
border-radius: 16px;
background-color: var(--color-surface);
}
.benefit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 24px;
border-radius: 12px;
color: var(--color-primary);
background-color: var(--color-accent);
font-weight: 700;
}
.benefit h3 {
margin-bottom: 12px;
font-size: 21px;
}
.benefit p {
margin-bottom: 0;
color: var(--color-muted);
}
.cta-section {
padding: 72px 0;
color: #ffffff;
background-color: var(--color-primary);
}
.cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.cta-section .eyebrow {
margin-bottom: 12px;
color: #dcd9ff;
}
.cta-section h2 {
max-width: 620px;
margin-bottom: 0;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.1;
}
.site-footer {
padding: 28px 0;
color: var(--color-muted);
background-color: var(--color-background);
}
.site-footer p {
margin-bottom: 0;
font-size: 14px;
}
@media (max-width: 760px) {
.container {
width: min(100% - 32px, var(--container-width));
}
.header-content {
min-height: 64px;
}
.navigation {
gap: 14px;
}
.navigation a {
font-size: 13px;
}
.hero {
padding: 64px 0;
}
.hero-content {
grid-template-columns: 1fr;
gap: 48px;
min-height: auto;
}
.hero h1 {
font-size: 44px;
}
.benefits {
padding: 72px 0;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.cta-content {
align-items: flex-start;
flex-direction: column;
}
}Створіть окрему папку для проєкту.
Збережіть HTML-розмітку у файл index.html.
Збережіть CSS-код у файл styles.css.
Переконайтеся, що обидва файли лежать в одній папці.
Відкрийте index.html у браузері.
Зменште ширину вікна браузера та перевірте мобільну версію.
У результаті сторінка повинна містити:
логотип і навігацію у верхній частині;
великий заголовок у hero-секції;
помітну кнопку «Почати навчання»;
картку з короткою інформацією;
три переваги в одному рядку на широкому екрані;
вертикальний список переваг на мобільному екрані;
нижній CTA-блок.
viewportБез цього метатега мобільні браузери можуть неправильно масштабувати сторінку:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Якщо файл називається styles.css і лежить поруч із index.html, підключення має виглядати так:
<link rel="stylesheet" href="styles.css">Заголовок першого екрана має швидко читатися. Не варто розміщувати в ньому кілька різних повідомлень. Основну додаткову інформацію краще винести в опис під заголовком.
Текст і кнопки повинні добре відрізнятися від фону. Світло-сірий текст на білому фоні може бути важко читати.
Не задавайте основному контейнеру надто велику фіксовану ширину:
/* Невдалий варіант */
.container {
width: 1200px;
}На маленькому екрані такий елемент спричинить горизонтальну прокрутку. Краще використовувати гнучку ширину:
.container {
width: min(100% - 40px, 1120px);
margin: 0 auto;
}<div> для всьогоЯкщо елемент має конкретне призначення, використовуйте відповідний семантичний тег: <header>, <nav>, <main>, <section>, <article> або <footer>.
Змініть створену landing page:
Замініть назву WebStart на власну назву продукту.
Напишіть власний заголовок hero-секції.
Змініть текст трьох переваг.
Створіть іншу кольорову схему через CSS-змінні.
Додайте до hero-секції четверту перевагу або додатковий інформаційний рядок.
Перевірте сторінку на широкому та вузькому екранах.
У цьому уроці ви:
побудували структуру односторінкової landing page;
використали семантичні HTML-елементи;
створили hero-секцію з заголовком, описом і CTA;
додали блоки переваг;
стилізували кнопки, картки, заголовки та секції;
використали Flexbox і CSS Grid;
додали базову адаптацію для мобільних пристроїв;
застосували CSS-змінні та функцію clamp().