🌐

HTML & CSS — курс для початківців

19 лекцій від основ пошуку інформації до адаптивної верстки. Конспекти зібрані з найкращих джерел та перевірені практикою.

19 лекцій · 🕐 ≈ 141 хв

Зміст курсу

Як правильно шукати інформацію Конспект лекції для початківців у веб-розробці 🕐 6 хв

Введення у верстку Конспект лекції — основи HTML та CSS для початківців 🕐 13 хв

Контентні теги Теги для розмітки текстового вмісту сторінки: заголовки, абзаци, списки, зображення. CSS-властивості блочної моделі та нові типи селекторів. 🕐 9 хв

Теги для верстки структури контенту Конспект лекції: семантичні теги, блочна модель, рядкові та блочні елементи 🕐 7 хв

Позиціювання блочних елементів Конспект лекції: Flexbox, CSS Grid, семантичні теги header/nav/footer, схлопування margin, псевдокласи 🕐 9 хв

Верстка форм Конспект лекції: елементи форм, стилізація полів, валідація, label, outline, стани :focus та :hover 🕐 7 хв

Нестандартні елементи форм Конспект лекції: display: inline-block, випадаючий список <select>, background-властивості, радіокнопки, чекбокси, кастомна стилізація, псевдоелементи, селектори + і ~ 🕐 10 хв

Спливаючі елементи Конспект лекції: контентні та декоративні зображення, float, clearfix, обтікання та позиціювання елементів 🕐 9 хв

Позиціювання flex-елементів Конспект лекції: align-items, align-self, flex-wrap, order, flex-grow та інші властивості Flexbox 🕐 14 хв

Верстка гумового макета Конспект лекції: фіксована, гумова та адаптивна верстка, відносні одиниці, відсоткові розміри 🕐 7 хв

Гумові зображення Конспект лекції: функція calc(), адаптивні картинки, max-width, object-fit та гумові відео 🕐 5 хв

Вступ до медіазапитів Конспект лекції: навіщо потрібна адаптивність, синтаксис @media, медіатипи та логічні оператори 🕐 5 хв

Медіафункції Конспект лекції: чек-лист мобільного дизайну, медіафункції width, height, resolution, hover та pointer 🕐 8 хв

Особливості верстки для мобільних пристроїв Конспект лекції: Retina-дисплеї, Device Pixel Ratio, viewport мета-тег, мобільні браузери 🕐 7 хв

Верстка адаптивного макета Конспект лекції: кросбраузерність, caniuse.com, вендорні префікси, стратегії адаптивної верстки 🕐 12 хв

Breakpoints Конспект лекції: що таке breakpoints, як їх обирати, популярні значення для телефонів, планшетів та десктопів 🕐 2 хв

Адаптивна типографіка Конспект лекції: viewport-одиниці, rem-підхід, адаптивні розміри шрифтів та доступність 🕐 5 хв

Адаптивні зображення Конспект лекції: тег picture, атрибут srcset та оптимізація графіки для різних пристроїв 🕐 2 хв

Сучасний CSS: нові можливості Бонус-лекція: corner-shape, сучасні кольори (oklch, relative colors) та анімація підкреслення через градієнт 🕐 4 хв

🔍

Почніть вводити назву лекції або тему