Перейти до контенту

fullstack.org.ua

Навчання Статті Практика Інструменти Roadmaps

Пошук

Пошук уроків, статей та іншого контенту

fullstack.org.ua

Українська освітня платформа для розробників: курси, статті, практика та інструменти.

Навчання Статті Практика Інструменти Roadmaps

© 2026 fullstack.org.ua

Політика конфіденційності Умови використання

Навчання / HTML & CSS

HTML & CSS

Початковий

Основи розмітки та стилізації веб-сторінок: семантичний HTML, CSS Box Model, Flexbox і Grid.

135 уроків · ~26 год

Вступ до HTML та CSS

Що таке HTML та CSS10 хв
Як працює веб11 хв
Структура веб-сторінки7 хв
Встановлення VS Code11 хв
Перша HTML-сторінка7 хв
Підключення CSS8 хв
Chrome DevTools11 хв
Структура проєкту9 хв

Основи HTML

Структура HTML-документа10 хв
Метадані: head, title і meta9 хв
Заголовки8 хв
Абзаци7 хв
Форматування тексту9 хв
Списки6 хв
Посилання12 хв
Зображення9 хв
SVG13 хв
Таблиці11 хв
Коментарі6 хв

Семантичний HTML

Що таке Semantic HTML13 хв
Елемент header: вступна частина сторінки7 хв
Елемент nav: семантична навігація9 хв
Елемент main: головний вміст документа9 хв
Елемент section: тематичні розділи7 хв
Елемент article: самодостатній матеріал9 хв
Елемент aside: додатковий вміст8 хв
Елемент footer: завершальна інформація7 хв
Елемент figure: ілюстрації з підписами11 хв
Елементи details і summary: розгортний вміст11 хв
Елемент time: дати й час12 хв
Елемент address: контактна інформація9 хв
SEO та семантика HTML16 хв
Основи доступності в Semantic HTML18 хв

HTML Форми

Елемент form і надсилання даних9 хв
Типи елемента input15 хв
Підписи полів за допомогою label9 хв
Випадаючі списки select8 хв
Багаторядкове поле textarea7 хв
Прапорці checkbox11 хв
Перемикачі radio8 хв
Завантаження файлів10 хв
Валідація HTML-форм13 хв
Практика: створення HTML-форми15 хв

Основи CSS

Синтаксис CSS13 хв
Селектори CSS16 хв
Специфічність CSS12 хв
Блокова модель CSS12 хв
Властивості Width та Height11 хв
Зовнішні відступи Margin10 хв
Внутрішні відступи Padding11 хв
Межі елементів Border10 хв
Властивість Box Sizing13 хв
Властивість Display14 хв
Властивість Overflow13 хв

Робота з текстом та кольорами

Колір тексту, фону та меж9 хв
Формати кольорів: HEX, RGB та HSL13 хв
Сімейства, розмір і стиль шрифту9 хв
Підключення шрифтів із Google Fonts7 хв
Товщина шрифту через font-weight7 хв
Міжрядковий інтервал і line-height9 хв
Відстань між символами5 хв
Вирівнювання тексту6 хв
Декоративні лінії тексту9 хв
Пробіли та перенесення рядків із white-space12 хв
CSS-змінні для кольорів і типографіки12 хв
Комплексне оформлення текстового блоку14 хв

Flexbox

Увімкнення Flexbox через display: flex8 хв
Головна вісь Flexbox8 хв
Поперечна вісь Flexbox9 хв
Вирівнювання по головній осі: justify-content10 хв
Вирівнювання по поперечній осі: align-items8 хв
Перенесення елементів через flex-wrap8 хв
Проміжки між елементами: gap7 хв
Розширення елементів через flex-grow9 хв
Стискання елементів через flex-shrink11 хв
Початковий розмір елемента: flex-basis13 хв
Зміна порядку елементів через order10 хв
Індивідуальне вирівнювання: align-self10 хв
Практичні макети з Flexbox20 хв

CSS Grid

Увімкнення CSS Grid через display: grid8 хв
Колонки сітки через grid-template-columns8 хв
Рядки сітки через grid-template-rows9 хв
Проміжки між елементами через gap8 хв
Розміщення елементів за лініями сітки13 хв
Об’єднання колонок і рядків через span10 хв
Повторення треків за допомогою repeat()9 хв
Адаптивні розміри через minmax()11 хв
Автоматичні колонки через auto-fit10 хв
Різниця між auto-fill і auto-fit10 хв
Іменовані області через Grid Areas14 хв
Вирівнювання елементів у CSS Grid12 хв
Практичний макет: адаптивна сітка карток17 хв
Практичний макет: сторінка з Grid Areas21 хв
Практичний макет: адаптивна галерея20 хв

Позиціонування та Responsive Design

Властивість position і система координат8 хв
Відносне позиціонування: relative8 хв
Абсолютне позиціонування: absolute12 хв
Фіксоване позиціонування: fixed13 хв
Липке позиціонування: sticky11 хв
Порядок накладання елементів: z-index14 хв
Обтікання та очищення потоку: float12 хв
Viewport і відносні одиниці вимірювання9 хв
Медіазапити: media queries17 хв
Підхід Mobile First14 хв
Адаптивні зображення13 хв
Запити контейнера: container queries20 хв
Плавні розміри за допомогою clamp()15 хв

Advanced CSS

Псевдокласи стану та структури16 хв
Псевдоелементи ::before, ::after та інші12 хв
Селектори атрибутів13 хв
Трансформації елементів9 хв
Плавні переходи12 хв
Ключові кадри анімації15 хв
CSS-анімації13 хв
Фільтри13 хв
Фільтр фону12 хв
Вміщення об’єктів за допомогою object-fit12 хв
Фіксовані пропорції через aspect-ratio11 хв
Динамічні обчислення з calc()12 хв

Практика та сучасний CSS

CSS Reset: базове вирівнювання стилів11 хв
Normalize.css: нормалізація стилів браузера11 хв
БЕМ: блоки, елементи та модифікатори9 хв
CSS Architecture: принципи масштабованої структури21 хв
Організація структури CSS у проєкті17 хв
CSS Best Practices: практики якісного коду15 хв
Chrome DevTools для налагодження CSS19 хв
Типові помилки у CSS та способи їх виправлення18 хв
Оптимізація CSS для продуктивності13 хв
Lighthouse: аудит продуктивності та якості CSS22 хв

Практичні проєкти

Landing Page: структура та перший екран22 хв
Portfolio: персональна сторінка розробника20 хв
Blog Layout: сітка статей і навігація21 хв
Dashboard Layout: панель керування20 хв
Responsive Website: адаптивний інтерфейс22 хв
Фінальний проєкт: повноцінний адаптивний сайт26 хв

Пов'язані технології