О курсе

CSS (Cascading Style Sheets) — язык стилизации веба. Превращай скучный HTML в красивые интерфейсы.

66 уроков — самый полный курс!

Базовые концепции (10 уроков)

1. CSS Селекторы
2. Box Model
3. colors-backgrounds
4. typography
5. CSS: Flexbox - Гибкая разметка
6. grid
7. CSS: Позиционирование
8. animations-transitions
9. CSS: Медиа-запросы (адаптивность)
10. css-variables

Селекторы продвинутые (5 уроков)

11. CSS: Псевдоклассы :nth-child и :nth-of-type
12. is-where-has
13. pseudo-elements
14. CSS: Атрибутные селекторы
15. specificity-practice

Flexbox продвинутый (5 уроков)

16. flex-grow-shrink-basis
17. align-items-content
18. flex-overflow
19. flex-patterns
20. flex-vs-grid

Grid продвинутый (8 уроков)

21. CSS Grid: grid-template-areas
22. minmax-auto
23. subgrid
24. named-lines
25. grid-alignment
26. nested-grids
27. responsive-grid
28. grid-patterns

Цвета и градиенты (5 уроков)

29. color-spaces
30. color-mix
31. linear-gradients-advanced
32. radial-conic-gradients
33. CSS: Стиль. Урок: Паттерны на чистом CSS

Трансформации и 3D (5 уроков)

34. transforms-basics
35. transform-origin
36. perspective-3d
37. backface-visibility
38. CSS: 3D-карточки и кубы

Анимации продвинутые (7 уроков)

39. CSS: @keyframes детально
40. timing-functions
41. animation-modes
42. animation-performance
43. scroll-animations
44. view-transitions
45. animations

Современный CSS (8 уроков)

46. container-queries
47. CSS Layers (@layer): Контроль приоритета стилей
48. css-nesting
49. CSS: Стиль - Урок ”:has() — родительский селектор”
50. logical-properties
51. aspect-ratio
52. object-fit
53. modern-units

Фильтры и эффекты (4 урока)

54. css-filters
55. backdrop-filter
56. blend-modes
57. clip-path

Архитектура и Практика (9 уроков)

58. bem
59. smacss-oocss
60. utility-first
61. best-practices
62. responsive
63. preprocessors
64. custom-properties
65. filter-basics
66. CSS: mix-blend-mode - Смешивание цветов как в Photoshop

---

Что освоишь?

• Адаптивные макеты с Flexbox и Grid
• Плавные анимации и 3D-эффекты
• Современные фишки (Container Queries, :has())
• Масштабируемый CSS (БЭМ)
• Производительность анимаций

---

Быстрый старт: CSS Селекторы → CSS: Flexbox - Гибкая разметка → grid → animations-transitions

Интерактивный пример