Поглиблений навчальник

Просунуте

Урок 1

Відстань між літерами та словами в CSS

Вивчаємо властивості letter-spacing і word-spacing для керування відстанню між літерами та словами.

Урок 2

Регістр тексту в CSS

Вивчаємо властивості text-transform і font-variant для зміни регістру символів та відображення малих великих літер.

Урок 3

Останній рядок тексту в CSS

Вивчаємо властивість text-align-last, яка дозволяє окремо вирівнювати останній рядок багаторядкового тексту.

Урок 4

Перша літера в CSS

Вивчаємо псевдоелемент ::first-letter, який дозволяє оформити першу літеру тексту окремо від решти абзацу.

Урок 5

Перший рядок у CSS

Вивчаємо псевдоелемент ::first-line, який дозволяє стилізувати лише перший рядок тексту.

Урок 6

Режими відображення тексту в CSS

Вивчаємо властивість white-space та тег pre. Дізнаємося, як браузер обробляє пробіли, переноси рядків і довгий текст.

Урок 7

Розмір табуляції в CSS

Вивчаємо властивість tab-size, яка дозволяє змінювати ширину символу табуляції під час відображення тексту.

Урок 8

Переповнення блоку в CSS

Вивчаємо властивості overflow, overflow-x та overflow-y. Дізнаємося, як керувати відображенням вмісту, що виходить за межі елемента.

Урок 9

Обрізання тексту в CSS

Вивчаємо властивість text-overflow. Дізнаємося, як обрізати довгий текст, додавати трикрапку та керувати його відображенням.

Урок 10

Довгі слова в CSS

Вивчаємо властивості word-break та overflow-wrap. Дізнаємося, як переносити дуже довгі слова та чим відрізняються ці властивості.

Урок 11

Переноси в тексті в CSS

Вивчаємо властивість hyphens та тег wbr. Дізнаємося, як автоматично або вручну переносити довгі слова.

Урок 12

Оформлення тексту в CSS

Вивчаємо властивості text-decoration-line, text-decoration-style та text-decoration-color для оформлення тексту.

Урок 13

Розміщення тексту в колонках у CSS

Вивчаємо властивості column-count, column-width, columns, column-gap, column-rule та column-span для створення багатоколонкового тексту.

Урок 14

Скасування виділення тексту в CSS

Вивчаємо властивість user-select, яка дозволяє керувати можливістю виділення та копіювання тексту.

Урок 15

Відключення реакції елементів у CSS

Вивчаємо властивість pointer-events, яка дозволяє вимкнути реакцію елементів на кліки, наведення та інші дії миші.

Урок 16

Вигляд курсора в CSS

Вивчаємо властивість cursor, яка дозволяє змінювати вигляд курсора миші при наведенні на елементи.

Урок 17

Колір виділення тексту в CSS

Вивчаємо псевдоелемент ::selection, який дозволяє змінювати колір тексту та фону під час його виділення.

Урок 18

Схлопування меж таблиці в CSS

Вивчаємо властивість border-collapse, яка визначає, чи будуть межі комірок таблиці об'єднуватись в одну.

Урок 19

Відстань між комірками таблиці в CSS

Вивчаємо властивість border-spacing, яка дозволяє задавати проміжок між комірками HTML-таблиці.

Урок 20

Вигляд порожніх комірок таблиці в CSS

Вивчаємо властивість empty-cells, яка керує відображенням порожніх комірок у HTML-таблицях.

Урок 21

Вирівнювання тексту по вертикалі в комірках CSS

Вивчаємо властивість vertical-align для вертикального вирівнювання тексту всередині комірок таблиці.

Урок 22

Зміна розмірів комірок таблиці браузером у CSS

Вивчаємо властивість table-layout, яка визначає спосіб розрахунку ширини комірок HTML-таблиці браузером.

Урок 23

Вставка псевдоэлементів у CSS

Вивчаємо псевдоелементи ::before і ::after, властивість content та створення додаткових елементів через CSS.

Урок 24

Автоматична нумерація елементів у CSS

Вивчаємо CSS-лічильники counter-reset та counter-increment для автоматичної нумерації елементів сторінки.

Урок 25

Атрибути елементів CSS

Вивчаємо CSS-функцію attr(), яка дозволяє отримувати значення атрибутів HTML-елементів і використовувати їх у стилях.

Урок 26

Функція для обчислення в CSS

Вивчаємо функцію calc() у CSS для виконання математичних обчислень при створенні розмірів блоків.

Урок 27

Функції вибору одного зі значень у CSS

Вивчаємо CSS-функції max() та min(), які дозволяють вибирати більше або менше значення під час розрахунку розмірів елементів.

Форми

Урок 28

Основні елементи HTML-форми

Вивчаємо базові елементи HTML-форм: form, input та button для створення полів введення і кнопок.

Урок 29

Текст input в HTML

Вивчаємо атрибут value для встановлення початкового тексту в HTML-полях input.

Урок 30

Мітка для елементів форми в HTML

Вивчаємо тег label для створення підписів до елементів HTML-форми та покращення зручності користування.

Урок 31

Чекбокси в HTML

Вивчаємо елемент checkbox для створення перемикачів вибору в HTML-формах.

Урок 32

Радіо перемикачі в HTML

Вивчаємо елемент input type="radio" для створення вибору одного варіанта зі списку.

Урок 33

Многострочные поля ввода в HTML

Вивчаємо тег textarea для створення багаторядкових полів введення у HTML-формах.

Урок 34

Зміна розміру textarea в CSS

Вивчаємо властивість resize для керування можливістю зміни розміру textarea користувачем.

Урок 35

Підказка placeholder в HTML

Вивчаємо атрибут placeholder для створення підказок у полях введення HTML-форм.

Урок 36

Псевдоелемент placeholder в CSS

Вивчаємо псевдоелемент ::placeholder для стилізації тексту підказки в HTML-полях введення.

Урок 37

Випадаючі списки в HTML

Вивчаємо створення випадаючих списків за допомогою HTML-тега select та елемента option.

Урок 38

Блокування елементів форми в HTML

Вивчаємо атрибут disabled для блокування елементів HTML-форми: input, button, select та textarea.

Урок 39

Підпис форми в HTML

Вивчаємо тег legend для створення підпису групи полів форми за допомогою fieldset.

Урок 40

Інпут у вигляді кнопки в HTML

Вивчаємо кнопки форми через input submit та reset для відправлення і очищення даних.

Урок 41

Поле для введення пароля в HTML

Вивчаємо тип input password для створення прихованого поля введення пароля у HTML-формах.

Урок 42

Тип інпута для завантаження файлу в HTML

Вивчаємо тип input file для створення поля вибору та завантаження файлів у HTML-формах.

Урок 43

Інші типи input в HTML

Вивчаємо додаткові типи HTML input: email, number, url, tel, search, color, date, month, week, datetime-local та range.

Урок 44

Фокус для елементів форм в HTML

Вивчаємо CSS-псевдоклас :focus для стилізації активного елемента форми.

Урок 45

Зміна фокуса Tab в HTML

Вивчаємо атрибут tabindex для керування порядком переходу між елементами форми за допомогою клавіші Tab.

Урок 46

Автофокус для елементів форм в HTML

Вивчаємо атрибут autofocus, який автоматично встановлює фокус на елемент форми після відкриття сторінки.

Урок 47

Гарячі клавіші в HTML

Вивчаємо атрибут accesskey для створення швидкого доступу до елементів форми за допомогою клавіатури.

Урок 48

Псевдоклас для відмічених елементів форм в HTML

Вивчаємо CSS-псевдоклас :checked для стилізації вибраних checkbox та radio елементів.

Урок 49

Псевдоклас для неактивних елементів форм в HTML

Вивчаємо CSS-псевдоклас :disabled для стилізації заблокованих елементів форми.

Урок 50

Автозаповнення інпутів в HTML

Вивчаємо HTML-тег datalist для створення списку підказок під час введення тексту в input.

Урок 51

Відміна автозаповнення полів в HTML

Вивчаємо атрибут autocomplete для керування автоматичним заповненням полів форми браузером.

Графіка

Урок 52

Задання кольору через rgb у CSS

Вивчаємо RGB-модель кольорів у CSS та створюємо різні відтінки за допомогою red, green і blue.

Урок 53

Задання кольору через # у CSS

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

Урок 54

Задання кольору через rgba у CSS

Вивчаємо функцію rgba() у CSS та використовуємо альфа-канал для створення прозорих і напівпрозорих кольорів.

Урок 55

Напівпрозорість через властивість opacity у CSS

Вивчаємо властивість opacity та порівнюємо її з rgba() для створення прозорих і напівпрозорих елементів.

Урок 56

Тінь тексту в CSS

Вивчаємо властивість text-shadow та створюємо тіні тексту з різними кольорами, зміщеннями й рівнем розмиття.

Урок 57

Тінь блоку в CSS

Вивчаємо властивість box-shadow та створюємо зовнішні й внутрішні тіні блоків із різними зміщеннями, розмиттям і напрямками.

Урок 58

Лінійний градієнт у CSS

Вивчаємо функцію linear-gradient() та створюємо плавні переходи між кольорами в різних напрямках.

Урок 59

Радіальний градієнт у CSS

Вивчаємо функцію radial-gradient() та створюємо плавні переходи кольорів, що розходяться від центральної точки.

Урок 60

Повторюваний лінійний градієнт у CSS

Вивчаємо функцію repeating-linear-gradient() та створюємо повторювані градієнти й кольорові смуги в CSS.

Урок 61

Повторюваний радіальний градієнт у CSS

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

Ефекти

Урок 62

Плавні переходи в CSS

Вивчаємо CSS-переходи за допомогою властивостей transition-property, transition-duration, transition-timing-function, transition-delay та скороченої властивості transition.

Урок 63

Робота з анімацією в CSS

Вивчаємо CSS-анімації за допомогою властивостей animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode та animation-direction.

Урок 64

Скорочена властивість для анімації в CSS

Вивчаємо скорочений запис властивості animation, яка дозволяє записати основні параметри CSS-анімації в одному рядку.

Урок 65

Стан анімації в CSS

Вивчаємо властивість animation-play-state, яка дозволяє запускати, зупиняти та продовжувати CSS-анімацію.

Урок 66

Поворот элемента в CSS

Вивчаємо функцію rotate(), яка дозволяє повертати HTML-елементи навколо своєї точки трансформації.

Урок 67

Масштабування елемента в CSS

Вивчаємо функції scaleX(), scaleY() та scale(), які дозволяють змінювати масштаб елемента по горизонталі, вертикалі або одночасно в обох напрямках.

Урок 68

Скіс елемента по осі в CSS

Вивчаємо функції skewX(), skewY() та skew(), які дозволяють нахиляти елемент по горизонтальній та вертикальній осях.

Урок 69

Зсув елемента в CSS

Вивчаємо функції translateX(), translateY() та translate(), які дозволяють зміщувати елемент по горизонталі, вертикалі або одночасно по обох осях.

Урок 70

Точка трансформації в CSS

Вивчаємо властивість transform-origin, яка визначає точку, відносно якої виконується поворот, масштабування та інші CSS-трансформації.

Урок 71

Застосування ефектів у CSS

Вивчаємо, як поєднувати CSS-трансформації, переходи та інші властивості для створення візуальних ефектів при наведенні та зміні стану елементів.

Сумісність із різними браузерами

Урок 72

Вступ у сумісність із різними браузерами

Розбираємося, що таке кросбраузерна сумісність, які браузери та рушії використовуються сьогодні та чому один сайт може виглядати по-різному в різних браузерах.

Урок 73

Вендорні префікси в CSS

Розбираємося, що таке вендорні префікси, навіщо вони використовувалися в CSS та чому сьогодні їх застосовують значно рідше.

Урок 74

Перевірка підтримки CSS-властивостей

Вчимося перевіряти підтримку CSS-властивостей різними браузерами за допомогою Can I Use та визначати, чи можна безпечно використовувати певну можливість у проєкті.

Урок 75

Скидання та нормалізація стилів у CSS

Розбираємося, чому браузери додають стандартні стилі HTML-елементам і навіщо розробники використовують скидання та нормалізацію CSS-стилів.

Урок 76

Скидання стилів через універсальний селектор у CSS

Вчимося скасовувати стандартні відступи браузера за допомогою універсального селектора та підключати окремий файл reset.css до HTML-сторінки.

Урок 77

Готові бібліотеки для скидання стилів у CSS

Розглядаємо готові CSS-рішення для скидання стандартних стилів браузера та знайомимося з класичним reset.css від Еріка Мейєра.

Урок 78

Нормалізація стилів у CSS

Нормалізація стилів — це підхід, за якого стандартні стилі браузера не скидаються повністю, а узгоджуються між різними браузерами. Для цього можна використовувати готову бібліотеку normalize.css.

Одиниці вимірювання

Урок 79

Введення в одиниці em у CSS

Вивчаємо одиницю em у CSS та визначаємо розмір шрифту відносно розміру шрифту батьківського елемента.

Урок 80

Наслідування та одиниці em у CSS

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

Урок 81

Відступи та одиниці em у CSS

Вивчаємо використання одиниці em для відступів та визначаємо розмір шрифту й margin у пікселях для вкладених елементів.

Урок 82

Практики використання em у CSS

Практичне застосування одиниці em у вкладених елементах та переведення значень з px в em.

Урок 83

Одиниці rem у CSS

Одиниця rem дозволяє задавати розміри відносно розміру шрифту елемента html, незалежно від вкладеності елементів.

Урок 84

Одиниці vw і vh у CSS

Одиниці vw і vh дозволяють задавати розміри елементів відносно ширини та висоти області перегляду браузера.

Розширені можливості роботи з Flexbox

Урок 85