1. CSS для начинающих. Введение. Подключение, базовые концепции: каскад, специфичность, наследование

2. Гайд по CSS-селекторам, расчёт специфичности в CSS. Приоритет и вес стилей

Chrome DevTools — Coverage, Paint Flashing, Console Levels

3. Блочная модель в CSS — свойства display, width, height, padding, margin, border и box-sizing

4. CSS внутренние и внешние отступы — свойства padding и margin. Схлопывание отступов

5. Обнуляющие стили в CSS. Сброс стилей, нормализация, reset, normalize. Стили браузера по умолчанию

6. CSS шрифты — способы подключения, правило font-face, свойство font и другие параметры

DevTools — Design Mode, Media Queries, эмуляция геолокации Sensors, Vision Deficiencies Mode

7. Цвета в CSS. Форматы RGB, HEX, HSL. Свойство color, ключевые слова transparent, currentColor

8. CSS фоновый цвет, изображение, градиент — свойство background, функция linear-gradient

9. CSS рамка border, обводка outline, тени box-shadow, фильтры filter

10. CSS позиционирование — свойства position, top, right, bottom, left, z-index. Контекст наложения

11. Единицы измерения в CSS — px, %, em, rem, vw, vh. Относительные и абсолютные величины

12. CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс

13. CSS псевдоэлементы — before, after, placeholder, selection, marker, file-selector-button и др.

14. CSS псевдоклассы — child, not. Состояния hover, focus и focus-visible, active, disabled, checked

15. CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS

Фишки DevTools — Dual Screen Mode, Element Properties, Font Editor, Conditional Breakpoints

16. CSS переполнение overflow, видимость opacity и visibility, обрезка clip-path

17. CSS свойства взаимодействия — cursor, user-select, pointer-events, scroll-behavior и resize

18. CSS переходы состояний transition, трансформации transform. Свойства translate, scale и rotate

19. Анимации в CSS. Правило @keyframes. Свойство animation. Настройка анимаций

20. Адаптивная верстка в CSS. Desktop и mobile first. Медиазапросы @media. Свойства min-max размеров

21. CSS свойства — устаревшие и новые. Вендорные префиксы. Директива @supports. Сервис caniuse

CSS Переменные | CSS Variables | функция var()

CSS Функции calc(), min(), max(), clamp()

#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

#2 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция banner

#3 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция motivation

#4 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция training-types и др.

#5 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секции location и family

#6 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | ФИНАЛ

Frontend Roadmap 2024 | Что должен учить фронтенд-разработчик в 2024 году

Имена классов в верстке | Как лучше называть элементы в разметке

БЭМ методология за 10 минут | Основы для начинающих

Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)

Frontend Accessibility 2024 • Проблемы цифровой доступности во фронтенд-разработке

Тестируем фронтенд на доступность в DevTools — Lighthouse, AOM Tree. Скрытая панель Rendering.

Пишем ДОСТУПНЫЙ компонент табов. Атрибуты WAI-ARIA • Frontend Accessibility 2024

Чеклист ВСЕХ проблем цифровой доступности для фронтенд-разработчиков • Frontend Accessibility 2024