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 и другие свойства