Введення у верстку

Конспект лекції — основи HTML та CSS для початківців

Що таке верстка

Верстка — це процес створення веб-сторінки на основі дизайн-макета. Верстальник перетворює графічний макет у код, зрозумілий браузеру, використовуючи дві мови: HTML (структура) та CSS (зовнішній вигляд).

Загальний процес створення сайту

Бриф — замовник описує, що йому потрібно.
Аналітика — складається технічне завдання, аналізується аудиторія й ніша.
Прототипування — створюється wireframe (скелет сайту чорними прямокутниками).
Дизайн — дизайнер відмальовує кожну унікальну сторінку у повноцінний макет.
Верстка — верстальник переводить макет у HTML + CSS.
Backend-розробка — бекенд-розробник інтегрує верстку із серверною логікою.
Тестування та запуск.

Верстальник завжди отримує вихідні дані з макета. Назви шрифтів, розміри, кольори, відступи — все береться з макета, нічого не вигадується з голови.

Формати макетів

Залежить від студії та дизайнера: раніше — PSD (Photoshop), потім — Sketch. Зараз абсолютний стандарт індустрії — Figma (Adobe XD припинив розвиток у 2023 році).

Основи HTML

HTML (HyperText Markup Language) — мова опису структури веб-сторінки. HTML описує виключно скелет, ніколи — зовнішній вигляд.

HTML-тег ніколи не визначає зовнішній вигляд елемента. Структура і стилізація — це дві різні речі. Наприклад, тег <strong> — це не «зробити жирним», а акцентування тексту для пошукових систем і скрінрідерів.

Типи тегів

✅ Парні теги

Мають відкриваючу й закриваючу частину. Між ними — вміст.

<p>Текст абзацу</p>
<a href="https://example.com">Посилання</a>

Закриваючий тег містить слеш перед назвою: </p>

📎 Непарні теги

Не мають вмісту і закриваючої частини.

<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<img src="photo.jpg" alt="Фото">

Атрибути

Записуються тільки у відкриваючому тезі.
Формат: назва="значення" — без пробілів навколо =
Завжди подвійні лапки.
Атрибути відокремлюються один від одного пробілом.

Вкладеність тегів

Теги можна вкладати один в одний, як коробки. Головне правило: внутрішній тег повинен повністю міститися в зовнішньому.

✅ Правильно

<body>
  <a href="#">Посилання</a>
</body>

❌ Неправильно

<body>
  <a href="#">Посилання
</body>
</a> <!-- перетин! -->

Мінімальний шаблон HTML-сторінки

Будь-яка сторінка в інтернеті містить один і той самий набір обов'язкових тегів:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Назва сторінки</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Тут буде вміст сторінки -->
</body>
</html>

Тег	Призначення
`<!DOCTYPE html>`	Вказує браузеру на версію HTML (п'ята, сучасна)
`<html lang="uk">`	Кореневий тег. Атрибут `lang` — мова сторінки (для SEO та скрінрідерів)
`<head>`	Метаінформація: кодування, заголовок вкладки, підключення стилів
`<meta charset="UTF-8">`	Кодування сторінки. Завжди UTF-8
`<title>`	Текст у вкладці браузера
`<link>`	Підключення файлу стилів CSS
`<body>`	Увесь видимий вміст сторінки

Головний HTML-файл проєкту прийнято називати index.html — саме його браузер шукає за замовчуванням при відкритті папки на сервері.

Інспектор браузера (DevTools)

Інспектор — один з основних інструментів верстальника. Відкривається:

F12 (Windows/Linux) або Fn + F12 (Mac з TouchBar)
Ctrl + Shift + I / Cmd + Option + I
Правий клік → «Переглянути код»

Що можна робити в інспекторі

Вкладка Elements — перегляд і взаємодія з HTML-деревом сторінки.
Вкладка Styles — перегляд CSS-стилів обраного елемента. Можна тимчасово вимикати або змінювати властивості.
Вкладка Computed — усі фактично застосовані стилі, включно з успадкованими та стандартними браузерними.

Зміни в інспекторі — тимчасові. Після оновлення сторінки все повертається до вихідного стану. Редагуйте код у редакторі, а інспектор використовуйте для відлагодження.

Основи CSS

CSS (Cascading Style Sheets) — мова опису зовнішнього вигляду. Спочатку будуємо скелет в HTML, потім навішуємо стилі в CSS, щоб сторінка виглядала відповідно до макета.

Синтаксис CSS

body {
  background-color: purple;
  font-family: Arial, sans-serif;
  color: white;
}

Селектор (body) — вказує, до якого елемента застосовуються стилі.
Властивість (background-color) — що саме стилізуємо.
Значення (purple) — яке значення присвоюємо.
Кожне правило закінчується крапкою з комою ;
Фігурна дужка { — на тому ж рядку, що й селектор, через пробіл.
Кожна властивість — з нового рядка, з відступом у 2 пробіли.

Основні CSS-властивості тексту

Властивість	Що робить	Приклади значень
`font-family`	Назва шрифту	`Arial, Tahoma, sans-serif`
`font-size`	Розмір шрифту	`16px`, `50px`
`font-weight`	Товщина шрифту	`normal` (400), `bold` (700), `100`–`900`
`font-style`	Накреслення	`normal`, `italic`, `oblique`
`color`	Колір тексту	`white`, `#ffffff`, `#333`
`background-color`	Колір фону	`purple`, `#800080`
`text-decoration`	Декорування тексту	`none`, `underline`, `line-through`

Колір тексту — це color, а не font-color. Це частий камінь спотикання для новачків.

font-family: запасні шрифти

Завжди вказуйте кілька шрифтів через кому і в кінці — сімейство:

font-family: Arial, Tahoma, sans-serif;

Браузер спробує перший шрифт. Якщо не знайде — другий, і так далі.
sans-serif — шрифт без засічок (Arial, Helvetica).
serif — шрифт із засічками (Times New Roman, Georgia).
monospace — моноширинний шрифт (Courier, Consolas).

Кольори в CSS

Кольори задаються кількома способами:

Ключове слово: white, black, purple
HEX-формат: #ff0000 — по два символи на кожен компонент (R, G, B)
#ffffff — білий (максимум усіх компонентів)
#000000 — чорний (мінімум усіх)

Коди кольорів завжди беруться з макета за допомогою піпетки. Запам'ятовувати їх не потрібно.

Каскадність і спадкування

CSS — каскадні таблиці стилів. Це означає, що стилі можуть перекривати одне одного за правилами пріоритетності.

Три джерела стилів (від менш до більш пріоритетного)

Успадковані стилі — елемент наслідує деякі властивості від батьківського (наприклад, шрифт від body).
Вбудовані браузерні стилі — кожен тег має стандартні стилі від розробників браузера (наприклад, посилання — сині з підкресленням).
Ваші власні стилі — завжди мають найвищий пріоритет.

Посилання <a> успадковує color: white від body. Але браузерний стиль перебиває це на синій. Щоб зробити посилання білим, потрібно явно задати

a {
color: white; }

— і ваш стиль переможе.

Скидання стандартних стилів

Браузерні стилі (відступи, шрифти, розміри) часто заважають при верстці — в різних браузерах вони можуть відрізнятися. Тому перед початком роботи стилі скидають. Є кілька підходів:

Підхід 1: Універсальний селектор *

Найпростіший спосіб — скинути відступи для всіх елементів одразу:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Селектор * (зірочка) — універсальний, застосовується до всіх елементів на сторінці. Додавання box-sizing: border-box робить так, що width і height включають padding і border (детальніше — у лекції про блочну модель).

Це мінімальний варіант, який підходить для навчання і невеликих проєктів. На практиці використовують більш ґрунтовні рішення.

Підхід 2: CSS Reset (Ерік Мейєр)

Reset CSS — це файл стилів, який повністю обнулює всі браузерні стилі. Після підключення reset кожен елемент виглядає однаково — як звичайний текст без відступів, рамок та розмірів.

/* Фрагмент reset.css */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li, form, label, table,
caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Перевага: повна передбачуваність — ви починаєте з чистого аркуша. Недолік: потрібно заново прописувати стилі для списків, заголовків, таблиць тощо.

Підхід 3: Normalize.css

Normalize.css діє інакше — він не скидає стилі повністю, а вирівнює їх між браузерами. Корисні стилі (відступи заголовків, маркери списків) зберігаються, але стають однаковими у Chrome, Firefox, Safari та інших.

Переваги:

Зберігає корисні браузерні стилі замість того, щоб знищувати все
Виправляє відомі баги та неконсистентності між браузерами
Менше роботи після підключення — базові елементи вже виглядають нормально

Порівняння підходів

Reset CSS

Обнулює все
Заголовки = звичайний текст
Списки без маркерів
Потрібно все стилізувати з нуля

Normalize.css

Вирівнює між браузерами
Заголовки залишаються більшими
Списки з маркерами
Менше ручної роботи

Як підключити

Reset або Normalize підключають першим CSS-файлом — до ваших стилів:

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">

Порядок важливий: спочатку скидаємо/вирівнюємо, потім пишемо свої стилі поверх.

На практиці більшість сучасних проєктів використовують Normalize.css або його модифікації. Повний reset використовують рідше, бо після нього доводиться заново стилізувати навіть базові елементи. Для навчання достатньо скидання через *.

Посилання (тег <a>)

Тег <a> створює посилання. Обов'язковий атрибут — href, який вказує, куди веде посилання.

<a href="https://example.com">Перейти на сайт</a>

Без href текст не буде клікабельним і курсор не зміниться на «руку».
За замовчуванням посилання — сині з підкресленням (браузерні стилі).
Щоб прибрати підкреслення: text-decoration: none;

Протоколи посилань: tel: і mailto:

У атрибуті href можна використовувати спеціальні протоколи для дзвінків та електронної пошти:

<!-- Дзвінок -->
<a href="tel:+380991234567">+38 (099) 123-45-67</a>

<!-- Електронна пошта -->
<a href="mailto:info@example.com?subject=Запит">Написати нам</a>

tel: — протокол для дзвінків

Добре працює на мобільних пристроях: натискання відкриває набирач номера. На десктопі поведінка залежить від ОС та встановлених програм.

mailto: — протокол для пошти

Недоліки mailto:

Email-адреса відкрита для спам-ботів
Користувач покидає сайт (переходить у поштовий клієнт)
Неможливо відстежити ефективність (UTM-мітки, аналітика)
Не всі мають налаштований поштовий клієнт

Краща альтернатива — форма зворотного зв'язку на сайті.

Data-атрибути

HTML5 дозволяє створювати довільні атрибути з префіксом data-:

<div data-category="news"
     data-user-id="42">...</div>

Можна додати до будь-якого тегу
Браузер їх ігнорує — вони не впливають на відображення
Використовуються для зберігання додаткових даних для JavaScript

Виведення data-атрибута через CSS

<!-- HTML -->
<span data-tooltip="Підказка">Наведіть курсор</span>

/* CSS — виведення значення data-атрибута */
span::before {
    content: attr(data-tooltip);
}

Функція attr() працює лише у властивості content псевдоелементів.

CSS-змінні (custom properties)

CSS-змінні (кастомні властивості) дозволяють зберігати значення і використовувати їх по всій сторінці. Це одна з найкорисніших можливостей сучасного CSS.

Оголошення і використання

:root {
    --header-height: 50px;
    --footer-height: 4rem;
    --primary-color: #3498db;
}

.header {
    height: var(--header-height);
}

.footer {
    height: var(--footer-height);
}

.content {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

Синтаксис

Оголошення: починається з двох дефісів — --назва: значення
Використання: функція var(--назва)
Назва чутлива до регістру: --Color і --color — це різні змінні

Область видимості

:root — змінні доступні скрізь на сторінці (глобальні)
Якщо оголосити в конкретному селекторі — змінні доступні лише всередині цього елемента та його нащадків

Використання зі style guide

Style guide від дизайнера визначає всі кольори, розміри шрифтів, відступи. Мінімальний padding (наприклад, 10px) означає, що всі відступи кратні цьому числу: 10, 20, 30px. CSS-змінні ідеально підходять для зберігання таких значень:

:root {
    --spacing-unit: 10px;
    --font-heading: 24px;
    --font-body: 16px;
    --color-primary: #2c3e50;
    --color-accent: #e74c3c;
}

CSS-змінні працюють у рантаймі — їхні значення можна змінювати через JavaScript або медіа-запити. Це відрізняє їх від змінних препроцесорів ($color у SCSS), які існують лише на етапі компіляції.

@supports — перевірка підтримки CSS

Правило @supports перевіряє, чи підтримує браузер певну CSS-властивість, і застосовує стилі тільки якщо підтримує.

Синтаксис

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

Логічні оператори

/* АБО */
@supports (display: grid) or (display: flex) { ... }

/* І */
@supports (display: grid) and (gap: 10px) { ... }

/* НЕ — використовувати обережно */
@supports not (display: grid) { ... }

Увага щодо not: якщо браузер не підтримує сам @supports, він проігнорує весь блок, включно з not-варіантом. Тому @supports not (...) — ненадійний варіант для старих браузерів.

Практичне застосування

Використовуйте @supports, коли хочете застосувати нову CSS-властивість, але не впевнені в підтримці. Базові стилі пишете без @supports, а покращені — всередині:

/* Базовий варіант */
.layout {
    display: flex;
    flex-wrap: wrap;
}

/* Покращений варіант для браузерів із підтримкою grid */
@supports (display: grid) {
    .layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
}

Редактори коду

Безкоштовні редактори, які не потребують складного налаштування:

Visual Studio Code — найпопулярніший, з величезною екосистемою плагінів. Стандарт індустрії.
Zed — сучасний, надшвидкий (написаний на Rust), безкоштовний і з відкритим кодом. Створений колишніми розробниками Atom.
Sublime Text — легкий і швидкий, але платний ($99).

AI-редактори

Окрема категорія редакторів з глибокою інтеграцією штучного інтелекту. AI допомагає писати код, знаходити помилки та пропонувати рішення прямо в редакторі:

Cursor — форк VS Code з глибокою AI-інтеграцією. Один з перших AI-редакторів, що здобув масову популярність. Є безкоштовний тариф.
Windsurf — AI-редактор на базі VS Code (раніше називався Codeium). Є безкоштовний тариф з необмеженим автодоповненням.
Antigravity — новий AI-редактор, орієнтований на швидку розробку з допомогою AI-агентів.

Професійні IDE

IDE (Integrated Development Environment) — це повноцінне середовище розробки з вбудованим дебагером, рефакторингом, підтримкою фреймворків та іншими інструментами:

WebStorm (JetBrains) — потужне середовище для JavaScript/TypeScript та фронтенд-розробки.
PhpStorm (JetBrains) — середовище для PHP-розробки. Включає всі можливості WebStorm + підтримку PHP, баз даних, фреймворків (Laravel, Symfony тощо).

Усі IDE від JetBrains безкоштовні для навчання та особистих проєктів (non-commercial license з 2024 року).

Найкращий редактор — той, у якому ви найефективніші. Для проходження курсу достатньо безкоштовного VS Code.

Пісочниці (онлайн-редактори)

Пісочниця — веб-сайт для швидкого написання та перегляду HTML/CSS без створення файлів.

Чим пісочниця відрізняється від редактора

Не потрібен мінімальний шаблон — ви одразу працюєте всередині <body>.
CSS-файл автоматично підключений.
Результат оновлюється миттєво без ручного оновлення сторінки.
Генерується унікальне посилання — зручно ділитися результатом.

Про препроцесори та інші технології

Браузер працює рівно з трьома технологіями: HTML, CSS та JavaScript. Все інше (SASS, SCSS, LESS, React, TypeScript тощо) — це надбудови та інструменти, що прискорюють розробку. Файли препроцесорів не можна підключити до HTML напряму — їх потрібно скомпілювати у звичайний CSS.

Навіщо потрібні препроцесори

Чистий CSS — потужний, але при великих проєктах стає громіздким. Препроцесори додають можливості, яких немає (або раніше не було) у стандартному CSS:

Змінні — зберігають кольори, розміри, шрифти в одному місці
Вкладеність (nesting) — записуєте селектори всередині батьківських, як HTML-структуру
Міксіни (mixins) — повторювані блоки стилів, які можна викликати одним рядком
Математика — арифметичні операції над значеннями
Імпорти — розбивка стилів на окремі файли без додаткових HTTP-запитів

SASS / SCSS

SASS (Syntactically Awesome Stylesheets) — найпопулярніший CSS-препроцесор. Має два синтаксиси:

.sass — старий синтаксис без фігурних дужок і крапок з комою (відступи замість дужок)
.scss — новий синтаксис, повністю сумісний зі звичайним CSS. Будь-який CSS-файл — це вже валідний SCSS

Приклад SCSS з використанням змінних та вкладеності:

// Змінні
$primary-color: #3498db;
$font-main: Arial, sans-serif;

// Вкладеність
.header {
    background: $primary-color;
    font-family: $font-main;

    .nav {
        display: flex;

        a {
            color: white;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

Після компіляції цей код перетвориться на звичайний CSS:

.header {
    background: #3498db;
    font-family: Arial, sans-serif;
}
.header .nav {
    display: flex;
}
.header .nav a {
    color: white;
}
.header .nav a:hover {
    opacity: 0.8;
}

LESS

LESS (Leaner Style Sheets) — ще один препроцесор, схожий на SCSS. Основна відмінність — змінні починаються з @ замість $:

@primary-color: #3498db;

.button {
    background: @primary-color;
}

LESS був популярний раніше (його використовував Bootstrap 3), але зараз більшість проєктів перейшли на SCSS.

PostCSS

PostCSS — це не препроцесор у класичному розумінні, а інструмент для трансформації CSS за допомогою плагінів. Найвідоміші плагіни:

Autoprefixer — автоматично додає вендорні префікси (-webkit-, -moz-) для підтримки старіших браузерів
cssnano — мініфікує CSS для продакшену

PostCSS часто використовується разом із SCSS: спочатку SCSS компілюється в CSS, а потім PostCSS додає префікси та мініфікує.

Як працює компіляція

Файл .scss або .less компілюється у звичайний .css за допомогою спеціальних інструментів. У HTML підключається вже скомпільований CSS:

<!-- В HTML підключаємо тільки CSS, ніколи SCSS -->
<link rel="stylesheet" href="style.css">

Компіляція відбувається автоматично під час розробки — при збереженні .scss файлу інструмент генерує оновлений .css.

Сучасний CSS наздоганяє препроцесори

Багато можливостей, заради яких раніше обирали препроцесори, тепер є у стандартному CSS:

Можливість	Препроцесор	Нативний CSS
Змінні	`$color: red` (SCSS)	`--color: red` (CSS Custom Properties)
Вкладеність	Підтримується давно	`CSS Nesting` — підтримується з 2023 року
Математика	`$width / 2`	`calc(100% / 2)`

CSS Custom Properties (--color) працюють у рантаймі — їхні значення можна змінювати через JavaScript або медіа-запити. Змінні препроцесорів ($color) існують лише на етапі компіляції і зникають у фінальному CSS. Це різні інструменти для різних задач.

Якщо ви добре знаєте базовий CSS, будь-який препроцесор (SASS, LESS) вивчається за кілька днів. Спочатку — база, потім — інструменти. На цьому курсі ми працюємо з чистим CSS — цього достатньо для розуміння всіх концепцій.

Поради початківцям

Вивчайте англійську — уся верстка базується на англійській мові. Що грамотніше ви нею володієте, тим легше буде.
Будьте уважні — кожна пропущена крапка чи лапка може зламати сторінку.
Не зупиняйтесь на верстці — чистий верстальник без JavaScript зараз мало затребуваний. Вивчайте JS, фреймворки, ставайте фронтенд-розробником.
Набирайте досвід — після курсів потрібна практика. Верстайте для себе, для знайомих, беріть маленькі фріланс-проєкти.
Гугліть правильно — головне не скопіювати готове рішення, а розібратися, чому воно працює саме так.

Введення у верстку

Що таке верстка

Загальний процес створення сайту

Формати макетів

Основи HTML

Типи тегів

✅ Парні теги

📎 Непарні теги

Атрибути

Вкладеність тегів

✅ Правильно

❌ Неправильно

Мінімальний шаблон HTML-сторінки

Інспектор браузера (DevTools)

Що можна робити в інспекторі

Основи CSS

Синтаксис CSS

Основні CSS-властивості тексту

font-family: запасні шрифти

Кольори в CSS

Каскадність і спадкування

Три джерела стилів (від менш до більш пріоритетного)

Скидання стандартних стилів

Підхід 1: Універсальний селектор *

Підхід 2: CSS Reset (Ерік Мейєр)

Підхід 3: Normalize.css

Порівняння підходів

Як підключити

Посилання (тег <a>)

Протоколи посилань: tel: і mailto:

tel: — протокол для дзвінків

mailto: — протокол для пошти

Data-атрибути

Виведення data-атрибута через CSS

CSS-змінні (custom properties)

Оголошення і використання

Синтаксис

Область видимості

Використання зі style guide

@supports — перевірка підтримки CSS

Синтаксис

Логічні оператори

Практичне застосування

Редактори коду

AI-редактори

Професійні IDE

Пісочниці (онлайн-редактори)

Популярні пісочниці

Чим пісочниця відрізняється від редактора

Про препроцесори та інші технології

Навіщо потрібні препроцесори

SASS / SCSS

LESS

PostCSS

Як працює компіляція

Сучасний CSS наздоганяє препроцесори

Поради початківцям