CSS

• 1. Введение в CSS: назначение и роль каскадных таблиц стилей
• 2. Подключение CSS к HTML: внутренние, внешние и инлайновые стили
• 3. Базовый синтаксис CSS: селекторы, свойства и значения
• 4. Структура CSS-правила: объяснение блока декларации
• 5. Работа с цветами: ключевые слова, HEX, RGB, RGBA, HSL, HSLA
• 6. Единицы измерения в CSS: px, em, rem, %, vw, vh, vmin, vmax
• 7. Комментарии в CSS: как добавлять примечания в код
• 8. Каскадность и наследование: приоритет стилей и передача свойств
• 9. Специфичность селекторов: расчёт веса и влияние на стиль
• 10. Стилизация текста: font-family, font-size, font-weight, line-height и др.
• 11. Типографика в CSS: вертикальный ритм, межстрочный интервал, размеры шрифтов
• 12. Работа с фоном: background-color, background-image, background-repeat и др.
• 13. Градиенты в CSS: линейные, радиальные и конические градиенты
• 14. Селекторы CSS: универсальный, теговый, класса, ID, атрибута, псевдоклассы и псевдоэлементы
• 15. Группирование селекторов: применение нескольких правил одним стилем
• 16. Псевдоклассы: :link, :visited, :hover, :active, :focus и другие
• 17. Псевдоэлементы: ::before, ::after, ::first-line, ::first-letter
• 18. Блочная модель CSS: margin, border, padding и content
• 19. Box-sizing: управление размерами элемента (content-box vs border-box)
• 20. Отступы и промежутки: margin-collapse, padding и их поведение
• 21. Системы позиционирования: static, relative, absolute, fixed, sticky
• 22. Z-index и контекст наложения: работа с глубиной слоёв
• 23. Стилизация ссылок: изменение вида под разные состояния
• 24. Списки в CSS: устранение стандартных отступов, маркеры, стилизация
• 25. Таблицы в CSS: оформление ячеек, границ, заголовков, зебра-стиль
• 26. Формы и элементы управления: стилизация input, button, select и других тегов
• 27. Изображения в CSS: объект-fit, object-position, responsive images
• 28. Анимации в CSS: keyframes, animation-name, duration, timing-function и др.
• 29. Перемещения и трансформации: translate, rotate, scale, skew и матрицы
• 30. Переходы (transitions): smooth change of properties on state changes
• 31. Flexbox: одномерная система компоновки — flex-direction, justify-content, align-items
• 32. Flexbox в деталях: wrap, order, grow, shrink, basis и их комбинации
• 33. Grid Layout: двумерная система компоновки — grid-template-columns/rows, areas
• 34. Grid в деталях: функции repeat(), minmax(), auto-fit/auto-fill и др.
• 35. Расположение элементов в Grid: span, line names, placement
• 36. Responsive design: медиазапросы, @media, max-width, min-width и др.
• 37. Mobile-first подход: проектирование сайтов с мобильной версии
• 38. Fluid layout: использование относительных единиц и calc()
• 39. Viewport и media queries: адаптация под экраны разных устройств
• 40. CSS-переменные: определение и использование (--var, var())
• 41. Препроцессоры CSS: SASS, LESS, Stylus — базовые понятия
• 42. BEM методология: структура классов для масштабируемого CSS
• 43. SMACSS и другие архитектурные подходы к стилям
• 44. Миксины, функции и вложенные стили в препроцессорах
• 45. Использование миксинов для vendor prefixes и повторяющихся стилей
• 46. Спрайты и оптимизация графики через препроцессоры
• 47. CSS-модульность: организация стилей в модульной структуре
• 48. PostCSS: автопрефиксеры, плагины и обработка CSS после написания
• 49. Адаптивные изображения и srcset: обеспечение отзывчивости медиа
• 50. Работа с шрифтами: @font-face, Google Fonts, переменные шрифты
• 51. Стилизация пользовательского интерфейса: кнопки, карточки, навигация
• 52. Навигационные меню: горизонтальное, вертикальное, выпадающее, адаптивное
• 53. Ховеры и эффекты: реализация hover-анимаций и взаимодействий
• 54. Аккордеоны и табы: создание без JS или с минимальным JS
• 55. Попапы и модальные окна: стилизация и анимация открытия/закрытия
• 56. Загрузка и прогресс-бары: реализация индикаторов через CSS
• 57. Адаптивные сетки: создание гибкой системы колонок и контента
• 58. Уровни доступности: обеспечение контрастности и читаемости
• 59. Скрываемые элементы: display: none, visibility: hidden, opacity
• 60. Стили для печати: @media print и минимизация лишнего вывода
• 61. Флексибельные формы: адаптация полей ввода под разные устройства
• 62. Адаптивные таблицы: перенос данных в мобильном виде
• 63. Эффекты скролла: стилизация полосы прокрутки, эффекты при скролле
• 64. Parallax scrolling: реализация простых эффектов с фиксированными фонами
• 65. Стилизация SVG: работа с векторными изображениями через CSS
• 66. Custom properties и темизация: светлая/тёмная тема через CSS-переменные
• 67. Поддержка старых браузеров: fallbacks, полифиллы, caniuse.com
• 68. Оптимизация CSS: минификация, объединение файлов, снижение нагрузки
• 69. Инструменты проверки качества CSS: linting, Stylelint, Prettier
• 70. CSS-in-JS: популярные библиотеки (styled-components, emotion) и принцип работы
• 71. Адаптивные анимации: оптимизация производительности и плавность
• 72. CSS Shapes: обтекание текста вокруг фигур
• 73. Clip-path и mask: создание нестандартных форм и масок
• 74. Filter: применение фильтров к элементам и изображениям
• 75. Backdrop-filter: применение фильтров к фону за элементом
• 76. Container Queries: новая возможность разделения контейнеров по условиям
• 77. Logical Properties: логические свойства для многоязычного дизайна
• 78. Scroll-driven animations: анимации, связанные с прокруткой (scroll-timeline)
• 79. Cascade Layers: управление каскадом через явные уровни
• 80. Объекты замещения: object-fit, object-position и их влияние на изображения
• 81. Стилизация видео и аудио: кастомизация native-плееров
• 82. Поддержка Retina и HDPI: высококачественные изображения и шрифты
• 83. Практика: создание одностраничного сайта с адаптивным дизайном
• 84. Практика: создание landing page с анимациями и адаптацией
• 85. Практика: рефакторинг существующего CSS: оптимизация и улучшение читаемости
• 86. Практика: создание дизайн-системы на основе CSS-переменных
• 87. Практика: создание UI-компонентов (кнопки, карточки, формуляр и др.)
• 88. Практика: портфолио разработчика — комплексный проект с адаптацией
• 89. Практика: интернет-магазин — каталог, карточка товара, корзина (HTML+CSS)
• 90. Тестирование вёрстки: cross-browser и cross-device проверка
• 91. Документация стилей: создание style guide и component library
• 92. Совместная работа над стилями: Git, BEM, Figma-токены, Storybook
• 93. Future CSS: новые и экспериментальные возможности (container-style, subgrid и др.)
• 94. CSS для Email-рассылок: особенности и ограничения
• 95. Паттерны оформления CSS: Atomic, ITCSS, OOCSS и др.
• 96. Performance CSS: минимизация repaint/reflow, оптимизация рендера
• 97. CSS для анимированных графиков и диаграмм
• 98. CSS для игр: базовая реализация интерфейсов и движений
• 99. CSS для AR/VR и будущих сред взаимодействия
• 100. Продвинутая типографика: ligatures, kerning, font-variant и другие свойства