Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиВеб-розробка / Поглиблений HTML + CSS

Поглиблений HTML + CSS

Вигляд:

Модуль 1. Просунуті селектори

1

Комбіновані селектори

Вибір елементів за атрибутами: [attr], [attr=value], [attr^=], [attr$=], [attr*=].

2

Атрибутні селектори

Як браузер визначає пріоритет стилів. Розрахунок специфічності.

3

Специфічність селекторів

inherit, initial, unset, revert. Як працює каскад.

4

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

Функціональні псевдокласи для спрощення селекторів.

5

:is(), :where(), :has()

Революційний селектор батьківського елемента.

Модуль 2. Просунуті псевдокласи

6

Структурні псевдокласи

:valid, :invalid, :required, :optional, :checked, :disabled, :placeholder-shown.

7

Псевдокласи стану

Керування фокусом для доступності.

8

Псевдокласи форм

:nth-of-type(), :only-child, :empty, :target.

9

Псевдоелементи ::before та ::after

::first-line, ::first-letter, ::selection, ::placeholder, ::marker.

Модуль 3. CSS Custom Properties (змінні)

10

Інші псевдоелементи

Глобальні (:root) та локальні змінні. Наслідування.

11

Основи CSS змінних

Резервні значення в var(). Обробка невизначених змінних.

12

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

Створення світлої/темної теми за допомогою CSS змінних.

13

Fallback значення

Маніпуляція CSS змінними через JavaScript.

14

Динамічні теми

Реєстрація CSS змінних з типами та анімація.

Модуль 4. Просунутий Flexbox

15

Змінні та JavaScript

Детальний розбір властивостей та їх взаємодії.

16

Глибше про flex-grow, flex-shrink, flex-basis

Різні значення flex: 1, flex: auto, flex: none та їх поведінка.

17

Властивість flex shorthand

Holy Grail Layout, Sticky Footer, Card Layouts.

Модуль 5. Просунутий CSS Grid

18

order та візуальний порядок

Автоматичне створення колонок. Різниця між auto-fill та auto-fit.

19

gap у Flexbox

Гнучкі розміри з minmax(), min(), max(), clamp().

20

Практика: складні Flexbox макети

Наслідування сітки батьківського елемента.

21

Grid Template Areas

place-items, place-content, place-self.

22

Auto-fill та auto-fit

Створення Pinterest-style layout.

Модуль 6. Container Queries

23

minmax() та функції розміру

@container та container-type для компонентного дизайну.

24

Subgrid

cqw, cqh, cqi, cqb для розмірів відносно контейнера.

25

Grid та вирівнювання

Запити на основі CSS змінних контейнера.

Модуль 7. 3D Трансформації

26

Практика: Magazine Layout

rotateX(), rotateY(), rotateZ(), translate3d().

27

Основи transitions

Налаштування 3D перспективи.

28

Timing functions

Збереження 3D контексту для вкладених елементів.

29

Які властивості анімуються

Відображення зворотного боку елементів.

30

Практика: інтерактивні кнопки

Створення карток, що перевертаються.

Модуль 8. Просунуті анімації

31

@keyframes та animation

Створення власних timing functions.

32

Властивості animation

Контроль стану анімації до/після та пауза.

33

animation-play-state

Множинні анімації на одному елементі.

34

Комбінування анімацій

will-change, GPU анімації, уникнення layout thrashing.

35

Практика: Loading spinners

Створення різних індикаторів завантаження.

Модуль 9. Scroll-driven Animations

36

Практика: Animated cards

Привʼязка анімації до скролу сторінки.

37

2D трансформації

Створення анімацій на основі прогресу скролу.

38

transform-origin

Snap points для плавного скролу.

39

3D трансформації

Контроль поведінки при досягненні краю.

40

perspective та perspective-origin

Створення parallax секцій без JavaScript.

Модуль 10. Сучасні CSS функції

41

backface-visibility

Обчислення з різними одиницями виміру.

42

Практика: Flip cards

Функції порівняння для адаптивних значень.

43

Mobile-first підхід

blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate().

44

Media queries: основи

Glassmorphism ефекти для фону під елементом.

45

Сучасні media features

Режими накладання для креативних ефектів.

46

Container queries

Обрізка елементів різними формами.

47

Fluid typography

shape-outside для обтікання тексту.

Модуль 11. Сучасні кольори в CSS

48

Responsive images

Перцептивно рівномірні колірні простори.

49

Методологія BEM

Змішування кольорів у CSS.

50

SMACSS

Створення варіацій кольорів від базового.

51

ITCSS

Стилізація системних елементів.

Модуль 12. CSS Logical Properties

52

CSS Modules підхід

margin-inline, padding-block замість left/right/top/bottom.

53

Utility-first (Tailwind підхід)

inset-inline, inset-block, border-inline.

54

calc() та математика в CSS

Підтримка RTL та вертикального тексту.

Модуль 13. Просунута типографіка

55

clamp(), min(), max()

Змінні шрифти та font-variation-settings.

56

CSS Filters

clamp() для адаптивних шрифтів без media queries.

57

backdrop-filter

Покращення переносів тексту.

58

mix-blend-mode та isolation

Автоматична нумерація через counter-reset та counter-increment.

Модуль 14. SVG та CSS

59

clip-path

Inline SVG, img, background-image, object.

60

CSS Shapes

fill, stroke, stroke-width, stroke-dasharray.

61

scroll-behavior та scroll-snap

Анімація stroke-dasharray та stroke-dashoffset для line drawing.

62

overscroll-behavior

Оптимізація іконок через SVG спрайти та use.

Модуль 15. CSS Architecture

63

Scroll-driven animations

Block, Element, Modifier. Правила найменування.

64

position: sticky

Inverted Triangle CSS. Структурування стилів.

65

Практика: Parallax ефекти

Концепція атомарних класів.

66

Web Fonts та @font-face

Ізоляція стилів на рівні компонентів.

Модуль 16. CSS Layers та Nesting

67

Variable fonts

Керування пріоритетом через шари каскаду.

68

font-display

Вкладені селектори в нативному CSS.

69

text-overflow та word-break

Обмеження області дії стилів.

Модуль 17. Accessibility (a11y)

70

writing-mode та text-orientation

role, aria-label, aria-hidden, aria-describedby.

71

SVG в HTML

Focus styles, focus trap, skip links.

72

Стилізація SVG через CSS

Вимоги до контрасту. Перевірка доступності.

73

CSS анімації для SVG

Зменшення анімацій для користувачів з особливими потребами.

74

SVG Sprites

Автоматичне визначення теми системи.

Модуль 18. CSS Performance

75

Практика: Animated icons

Вбудовування критичних стилів для швидкого рендерингу.

76

Семантична розмітка для a11y

Ізоляція елементів для оптимізації рендерингу.

77

ARIA атрибути

Ледаче рендеринг за межами viewport.

78

Focus management

Інструменти для аналізу та оптимізації CSS.

Модуль 19. View Transitions API

79

Контрастність та кольори

document.startViewTransition() та CSS анімації переходів.

80

prefers-reduced-motion

Іменування елементів для плавних переходів.

81

Critical CSS

Стилізація анімацій переходу.

Модуль 20. CSS Anchor Positioning

82

will-change та GPU анімації

Позиціонування елементів відносно якоря.

83

contain property

Привʼязка поповерів та тултіпів.

84

content-visibility

Нативні поповери з CSS стилізацією.

Модуль 21. Сучасні CSS властивості

85

Аудит CSS

Збереження пропорцій елементів.

86

@layer

Контроль розміщення медіа в контейнері.

87

CSS Nesting

gap для Flexbox, Grid та Multi-column.

88

@scope

Скорочений запис для top/right/bottom/left.

Модуль 22. Практичний проект: Portfolio

89

Планування проекту

CSS змінні, токени, компоненти.

90

Header та навігація

Анімований header з плавними переходами.

91

Hero секція

Привабливий перший екран з анімаціями скролу.

92

Секція проектів

Masonry layout з hover-ефектами.

93

Секція про мене

Стилі :valid/:invalid та красиві повідомлення.

94

Контактна форма

prefers-color-scheme та перемикач тем.

95

Footer

Адаптивні компоненти без media queries.

96

Темна тема

Critical CSS, content-visibility, аудит.

97

Адаптивність

Mobile first підхід, брейкпоінти, адаптивна навігація.

98

Фінальна оптимізація

Продуктивність, доступність, SEO оптимізація.

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів