Пошук уроків, статей та іншого контенту
Зберіть персональне портфоліо з секціями про себе, навички, проєкти та контакти, використовуючи семантичну HTML-розмітку.
У цій практичній роботі створимо персональну сторінку розробника з такими секціями:
коротка інформація про себе;
список навичок;
приклади проєктів;
контактна інформація.
Для структури використаємо семантичні HTML-елементи:
<header> — верхня частина сторінки;
<nav> — навігація;
<main> — основний вміст;
<section> — окремі тематичні секції;
<article> — самостійний блок проєкту;
<footer> — нижня частина сторінки.
Створіть файл index.html і додайте базову структуру документа:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Портфоліо Олени Коваль</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Вміст сторінки буде тут -->
</body>
</html>Атрибут lang="uk" повідомляє браузеру, що вміст сторінки українською мовою.
Елемент <meta name="viewport"> допомагає сторінці коректно відображатися на мобільних пристроях.
У <header> розмістимо ім’я розробниці та навігацію:
<header class="site-header">
<div class="container">
<p class="logo">Олена Коваль</p>
<nav aria-label="Основна навігація">
<ul class="navigation">
<li><a href="#about">Про мене</a></li>
<li><a href="#skills">Навички</a></li>
<li><a href="#projects">Проєкти</a></li>
<li><a href="#contacts">Контакти</a></li>
</ul>
</nav>
</div>
</header>Посилання навігації ведуть до секцій цієї ж сторінки. Наприклад, href="#about" прокручує сторінку до елемента, який має id="about".
Для назви сторінки можна використати <h1>, але на сторінці має бути лише один головний заголовок. Тому розмістимо його в основному вступному блоці.
Основний вміст розташовують усередині <main>:
<main>
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<p class="eyebrow">Frontend-розробниця</p>
<h1 id="hero-title">Створюю зрозумілі та зручні вебінтерфейси</h1>
<p class="hero-text">
Мене звати Олена. Я навчаюся веброзробки та створюю сайти
за допомогою HTML і CSS.
</p>
</div>
</section>
<section id="about" class="section" aria-labelledby="about-title">
<div class="container">
<h2 id="about-title">Про мене</h2>
<p>
Я початківець у frontend-розробці. Мені подобається перетворювати
ідеї на акуратні, доступні та адаптивні вебсторінки.
</p>
<p>
Зараз я працюю над власними навчальними проєктами та вдосконалюю
навички семантичної HTML-розмітки й стилізації за допомогою CSS.
</p>
</div>
</section>
</main><main> містить унікальний основний вміст сторінки.
<section> об’єднує інформацію на одну тему.
<h1> — головний заголовок усієї сторінки.
<h2> — заголовки окремих секцій.
<p> — звичайні текстові абзаци.
Атрибут aria-labelledby пов’язує секцію з її заголовком. Це допомагає користувачам, які використовують допоміжні технології.
Навички зручно представити маркованим списком:
<section id="skills" class="section section-light" aria-labelledby="skills-title">
<div class="container">
<h2 id="skills-title">Навички</h2>
<ul class="skills-list">
<li>Семантична HTML-розмітка</li>
<li>CSS Flexbox</li>
<li>Адаптивна верстка</li>
<li>Основи доступності</li>
<li>Робота з Git</li>
</ul>
</div>
</section>Елемент <ul> підходить для списку, у якому порядок пунктів не має значення.
Не варто створювати список за допомогою звичайних абзаців або <div>, якщо елементи є саме списком.
Кожен проєкт можна оформити як окремий <article>:
<section id="projects" class="section" aria-labelledby="projects-title">
<div class="container">
<h2 id="projects-title">Мої проєкти</h2>
<div class="projects-grid">
<article class="project-card">
<h3>Сторінка кав’ярні</h3>
<p>
Односторінковий сайт із меню, описом закладу та контактною інформацією.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS
</p>
</article>
<article class="project-card">
<h3>Список завдань</h3>
<p>
Навчальний макет для організації щоденних справ і планування роботи.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS, JavaScript
</p>
</article>
<article class="project-card">
<h3>Сторінка рецепта</h3>
<p>
Адаптивна сторінка з інгредієнтами та покроковим описом приготування.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS
</p>
</article>
</div>
</div>
</section><article> підходить для самостійного вмісту. Кожну картку проєкту можна було б перенести в інше місце, і вона все одно залишилася б зрозумілою.
Для назви проєкту використовуємо <h3>, оскільки це заголовок усередині секції з <h2>.
Контактну інформацію можна розмістити в окремій секції:
<section id="contacts" class="section section-light" aria-labelledby="contacts-title">
<div class="container">
<h2 id="contacts-title">Контакти</h2>
<p>
Якщо ви хочете обговорити навчальний проєкт або співпрацю,
зв’яжіться зі мною:
</p>
<address class="contacts">
<p>Email: olena.koval@example.com</p>
<p>Телефон: +380 67 123 45 67</p>
<p>Місто: Львів, Україна</p>
</address>
</div>
</section>Елемент <address> призначений для контактної інформації, пов’язаної з автором або власником сторінки.
У <footer> додамо інформацію про авторські права:
<footer class="site-footer">
<div class="container">
<p>© 2025 Олена Коваль. Створено під час навчання веброзробки.</p>
</div>
</footer>Створіть файл styles.css. Спочатку додамо базові стилі:
:root {
--color-text: #243044;
--color-muted: #5f6b7a;
--color-primary: #3157d5;
--color-primary-dark: #2443a8;
--color-background: #ffffff;
--color-light: #f2f5fb;
--color-border: #dce2ee;
--color-footer: #182235;
}
* {
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.6;
}
.container {
width: min(100% - 32px, 1100px);
margin: 0 auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
line-height: 1.2;
}.site-header {
background-color: var(--color-background);
border-bottom: 1px solid var(--color-border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 72px;
}
.logo {
margin-bottom: 0;
color: var(--color-primary);
font-size: 1.25rem;
font-weight: 700;
}
.navigation {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation a {
color: var(--color-text);
font-weight: 600;
text-decoration: none;
}
.navigation a:hover,
.navigation a:focus {
color: var(--color-primary);
}Властивість display: flex розташовує логотип і навігацію в одному рядку.
flex-wrap: wrap дозволяє навігації перейти на новий рядок, якщо для всіх пунктів не вистачає ширини.
.hero {
padding: 96px 0;
background-color: #eaf0ff;
}
.eyebrow {
margin-bottom: 12px;
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero h1 {
max-width: 700px;
margin-bottom: 24px;
font-size: clamp(2.25rem, 5vw, 4rem);
}
.hero-text {
max-width: 650px;
margin-bottom: 0;
color: var(--color-muted);
font-size: 1.15rem;
}clamp() задає мінімальний, бажаний і максимальний розмір шрифту:
font-size: clamp(2.25rem, 5vw, 4rem);Завдяки цьому головний заголовок поступово змінює розмір залежно від ширини екрана.
.section {
padding: 72px 0;
}
.section-light {
background-color: var(--color-light);
}
.section h2 {
margin-bottom: 24px;
font-size: 2rem;
}
.section p {
max-width: 720px;
color: var(--color-muted);
}.skills-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
max-width: 720px;
margin: 0;
padding-left: 20px;
}
.skills-list li {
padding: 8px 0;
}grid-template-columns створює дві колонки для списку навичок.
.projects-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.project-card {
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 12px;
background-color: var(--color-background);
box-shadow: 0 8px 20px rgb(36 48 68 / 8%);
}
.project-card h3 {
margin-bottom: 12px;
font-size: 1.25rem;
}
.project-card p {
margin-bottom: 16px;
}
.project-card .project-technologies {
margin-bottom: 0;
font-size: 0.95rem;
}Властивість grid-template-columns розміщує три картки в одному рядку на широкому екрані.
.contacts {
font-style: normal;
}
.contacts p {
margin-bottom: 8px;
}
.site-footer {
padding: 28px 0;
color: #ffffff;
background-color: var(--color-footer);
}
.site-footer p {
margin-bottom: 0;
color: #dce2ee;
}За замовчуванням браузер відображає <address> курсивом. Властивість font-style: normal повертає звичайне накреслення.
На вузьких екранах навігація, список навичок і картки проєктів мають розташовуватися вертикально:
@media (max-width: 700px) {
.site-header .container {
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding-top: 16px;
padding-bottom: 16px;
}
.navigation {
gap: 10px 16px;
}
.hero {
padding: 64px 0;
}
.section {
padding: 52px 0;
}
.skills-list,
.projects-grid {
grid-template-columns: 1fr;
}
}Медіазапит @media (max-width: 700px) застосовує ці стилі лише тоді, коли ширина вікна браузера не перевищує 700 пікселів.
index.html<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Портфоліо Олени Коваль</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<div class="container">
<p class="logo">Олена Коваль</p>
<nav aria-label="Основна навігація">
<ul class="navigation">
<li><a href="#about">Про мене</a></li>
<li><a href="#skills">Навички</a></li>
<li><a href="#projects">Проєкти</a></li>
<li><a href="#contacts">Контакти</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<p class="eyebrow">Frontend-розробниця</p>
<h1 id="hero-title">Створюю зрозумілі та зручні вебінтерфейси</h1>
<p class="hero-text">
Мене звати Олена. Я навчаюся веброзробки та створюю сайти
за допомогою HTML і CSS.
</p>
</div>
</section>
<section id="about" class="section" aria-labelledby="about-title">
<div class="container">
<h2 id="about-title">Про мене</h2>
<p>
Я початківець у frontend-розробці. Мені подобається перетворювати
ідеї на акуратні, доступні та адаптивні вебсторінки.
</p>
<p>
Зараз я працюю над власними навчальними проєктами та вдосконалюю
навички семантичної HTML-розмітки й стилізації за допомогою CSS.
</p>
</div>
</section>
<section id="skills" class="section section-light" aria-labelledby="skills-title">
<div class="container">
<h2 id="skills-title">Навички</h2>
<ul class="skills-list">
<li>Семантична HTML-розмітка</li>
<li>CSS Flexbox</li>
<li>Адаптивна верстка</li>
<li>Основи доступності</li>
<li>Робота з Git</li>
</ul>
</div>
</section>
<section id="projects" class="section" aria-labelledby="projects-title">
<div class="container">
<h2 id="projects-title">Мої проєкти</h2>
<div class="projects-grid">
<article class="project-card">
<h3>Сторінка кав’ярні</h3>
<p>
Односторінковий сайт із меню, описом закладу та контактною інформацією.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS
</p>
</article>
<article class="project-card">
<h3>Список завдань</h3>
<p>
Навчальний макет для організації щоденних справ і планування роботи.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS, JavaScript
</p>
</article>
<article class="project-card">
<h3>Сторінка рецепта</h3>
<p>
Адаптивна сторінка з інгредієнтами та покроковим описом приготування.
</p>
<p class="project-technologies">
<strong>Технології:</strong> HTML, CSS
</p>
</article>
</div>
</div>
</section>
<section id="contacts" class="section section-light" aria-labelledby="contacts-title">
<div class="container">
<h2 id="contacts-title">Контакти</h2>
<p>
Якщо ви хочете обговорити навчальний проєкт або співпрацю,
зв’яжіться зі мною:
</p>
<address class="contacts">
<p>Email: olena.koval@example.com</p>
<p>Телефон: +380 67 123 45 67</p>
<p>Місто: Львів, Україна</p>
</address>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2025 Олена Коваль. Створено під час навчання веброзробки.</p>
</div>
</footer>
</body>
</html>styles.css:root {
--color-text: #243044;
--color-muted: #5f6b7a;
--color-primary: #3157d5;
--color-background: #ffffff;
--color-light: #f2f5fb;
--color-border: #dce2ee;
--color-footer: #182235;
}
* {
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.6;
}
.container {
width: min(100% - 32px, 1100px);
margin: 0 auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
line-height: 1.2;
}
.site-header {
background-color: var(--color-background);
border-bottom: 1px solid var(--color-border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 72px;
}
.logo {
margin-bottom: 0;
color: var(--color-primary);
font-size: 1.25rem;
font-weight: 700;
}
.navigation {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation a {
color: var(--color-text);
font-weight: 600;
text-decoration: none;
}
.navigation a:hover,
.navigation a:focus {
color: var(--color-primary);
}
.hero {
padding: 96px 0;
background-color: #eaf0ff;
}
.eyebrow {
margin-bottom: 12px;
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero h1 {
max-width: 700px;
margin-bottom: 24px;
font-size: clamp(2.25rem, 5vw, 4rem);
}
.hero-text {
max-width: 650px;
margin-bottom: 0;
color: var(--color-muted);
font-size: 1.15rem;
}
.section {
padding: 72px 0;
}
.section-light {
background-color: var(--color-light);
}
.section h2 {
margin-bottom: 24px;
font-size: 2rem;
}
.section p {
max-width: 720px;
color: var(--color-muted);
}
.skills-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
max-width: 720px;
margin: 0;
padding-left: 20px;
}
.skills-list li {
padding: 8px 0;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.project-card {
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 12px;
background-color: var(--color-background);
box-shadow: 0 8px 20px rgb(36 48 68 / 8%);
}
.project-card h3 {
margin-bottom: 12px;
font-size: 1.25rem;
}
.project-card p {
margin-bottom: 16px;
}
.project-card .project-technologies {
margin-bottom: 0;
font-size: 0.95rem;
}
.contacts {
font-style: normal;
}
.contacts p {
margin-bottom: 8px;
}
.site-footer {
padding: 28px 0;
color: #ffffff;
background-color: var(--color-footer);
}
.site-footer p {
margin-bottom: 0;
color: #dce2ee;
}
@media (max-width: 700px) {
.site-header .container {
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding-top: 16px;
padding-bottom: 16px;
}
.navigation {
gap: 10px 16px;
}
.hero {
padding: 64px 0;
}
.section {
padding: 52px 0;
}
.skills-list,
.projects-grid {
grid-template-columns: 1fr;
}
}Змініть приклад під себе:
Замініть ім’я та опис у вступній секції.
Додайте власні навички.
Замініть навчальні проєкти на свої.
Для кожного проєкту вкажіть короткий опис і використані технології.
Додайте власну контактну інформацію.
Перевірте сторінку на широкому та вузькому екранах.
Переконайтеся, що всі пункти навігації прокручують сторінку до відповідних секцій.
<div>Не варто будувати всю сторінку з однакових <div>. Семантичні елементи передають призначення вмісту:
<header></header>
<main></main>
<section></section>
<footer></footer>Це покращує структуру документа та доступність сторінки.
Кожна тематична секція повинна мати заголовок. Структура заголовків має бути послідовною:
<h1>Портфоліо розробника</h1>
<h2>Про мене</h2>
<h2>Навички</h2>
<h2>Проєкти</h2>
<h3>Назва проєкту</h3>Не використовуйте заголовки лише для того, щоб зробити текст більшим. Їхній рівень має відповідати структурі документа.
href і idЯкщо в навігації є:
<a href="#projects">Проєкти</a>то на сторінці має бути елемент із таким ідентифікатором:
<section id="projects">Значення href і id повинні збігатися.
Фіксована ширина карток або контейнера може спричинити горизонтальну прокрутку на мобільних пристроях. Використовуйте гнучкі одиниці, CSS Grid і медіазапити.
<br>Не використовуйте <br> для створення відступів між блоками. Відступи потрібно задавати за допомогою margin і padding у CSS.
У цій роботі ви:
створили персональну сторінку портфоліо;
використали <header>, <nav>, <main>, <section>, <article>, <address> і <footer>;
організували інформацію про себе, навички, проєкти та контакти;
додали внутрішню навігацію між секціями;
використали CSS Grid і Flexbox для розташування елементів;
зробили сторінку адаптивною для мобільних пристроїв;
дотрималися ієрархії заголовків і базових правил семантичної розмітки.