HTML & CSS — курс для початківців
19 лекцій від основ пошуку інформації до адаптивної верстки. Конспекти зібрані з найкращих джерел та перевірені практикою.
Зміст курсу
- 01 Як правильно шукати інформацію Конспект лекції для початківців у веб-розробці 6 хв
- 02 Введення у верстку Конспект лекції — основи HTML та CSS для початківців 14 хв
- 03 Контентні теги Теги для розмітки текстового вмісту сторінки: заголовки, абзаци, списки, зображення. CSS-властивості блочної моделі та нові типи селекторів. 10 хв
- 04 Теги для верстки структури контенту Конспект лекції: семантичні теги, блочна модель, рядкові та блочні елементи 9 хв
- 05 Позиціювання блочних елементів Конспект лекції: Flexbox, CSS Grid, семантичні теги header/nav/footer, схлопування margin, псевдокласи 9 хв
- 06 Верстка форм Конспект лекції: елементи форм, стилізація полів, валідація, label, outline, стани :focus та :hover 8 хв
- 07 Нестандартні елементи форм Конспект лекції: display: inline-block, випадаючий список <select>, background-властивості, радіокнопки, чекбокси, кастомна стилізація, псевдоелементи, селектори + і ~ 10 хв
- 08 Спливаючі елементи Конспект лекції: контентні та декоративні зображення, float, clearfix, обтікання та позиціювання елементів 9 хв
- 09 Позиціювання flex-елементів Конспект лекції: align-items, align-self, flex-wrap, order, flex-grow та інші властивості Flexbox 14 хв
- 10 Верстка гумового макета Конспект лекції: фіксована, гумова та адаптивна верстка, відносні одиниці, відсоткові розміри 7 хв
- 11 Гумові зображення Конспект лекції: функція calc(), адаптивні картинки, max-width, object-fit та гумові відео 5 хв
- 12 Вступ до медіазапитів Конспект лекції: навіщо потрібна адаптивність, синтаксис @media, медіатипи та логічні оператори 5 хв
- 13 Медіафункції Конспект лекції: чек-лист мобільного дизайну, медіафункції width, height, resolution, hover та pointer 8 хв
- 14 Особливості верстки для мобільних пристроїв Конспект лекції: Retina-дисплеї, Device Pixel Ratio, viewport мета-тег, мобільні браузери 7 хв
- 15 Верстка адаптивного макета Конспект лекції: кросбраузерність, caniuse.com, вендорні префікси, стратегії адаптивної верстки 13 хв
- 16 Breakpoints Конспект лекції: що таке breakpoints, як їх обирати, популярні значення для телефонів, планшетів та десктопів 2 хв
- 17 Адаптивна типографіка Конспект лекції: viewport-одиниці, rem-підхід, адаптивні розміри шрифтів та доступність 5 хв
- 18 Адаптивні зображення Конспект лекції: тег picture, атрибут srcset та оптимізація графіки для різних пристроїв 2 хв
- 19 Сучасний CSS: нові можливості Бонус-лекція: corner-shape, сучасні кольори (oklch, relative colors) та анімація підкреслення через градієнт 4 хв
Обговоримо Ваш проект?
Безкоштовна консультація + розрахунок вартості
Більше цікавих статей