Курс научит работать с CSS-in-JS — новым подходом к стилизации веб-приложений, нацеленным на преодоление ряда ограничений и проблем традиционных методов работы с CSS.
Программа курса
Раздел 1. Введение
Узнаем, что такое CSS-in-JS и почему он появился. Ознакомимся с основными идеями на практике по ходу стилизации небольшого компонента.
- Что такое CSS-in-JS и почему он появился
Практика
- Кейс: пошаговая демонстрация — разработка компонента кнопки
- Задание: разработка компонента кнопки
- Кейс: эталонное решение — разработка компонента кнопки
- Тест по первому разделу
- Дополнительные материалы
Раздел 2. Глобальные стили
Начнем работу над проектами курса и подготовим базовые стили.
- Обзор демо-проекта
- Формирование глобальных стилей при помощи CSS-in-JS
- Кейс: подключение дизайн-токенов и ресетов стилей в проекте
Практика
- Обзор учебного проекта
- Задание: подключение дизайн-токенов и ресетов стилей
- Кейс: эталонная реализация подключения дизайн-токенов и ресетов стилей в проекте
- Тест по второму разделу
Раздел 3. Компоненты
Продолжим работу над проектами курса и разработаем различные компоненты — простые и посложнее.
- Разработка компонентов в терминах CSS-in-JS
Типографика и иконки
- Кейс: пошаговая демонстрация — реализация компонентов для работы с типографикой и иконками
- Задание: разработка компонентов для работы с типографикой и иконками
- Кейс: эталонное решение — разработка компонентов для работы с типографикой и иконками
Кнопки
- Кейс: реализация «кнопочных» компонентов
- Задание: разработка «кнопочных» компонентов
- Кейс: эталонное решение — разработка «кнопочных» компонентов в проекте
Чекбокс и тоггл
- Кейс: реализация компонента чекбокса
- Задание: разработка компонента переключателя
- Кейс: эталонное решение — разработка компонента тоггла в проекте
Фильтр и поля форм
- Кейс: реализация компонента фильтра
- Задание: разработка полей форм
- Кейс: эталонное решение — разработка полей форм в проекте
Карточки
- Кейс: реализация «карточных» компонентов в проекте
- Задание: разработка «карточных» компонентов
- Кейс: эталонное решение — разработка «карточных» компонентов в проекте
- Тест по третьему разделу
Раздел 4. Крупные разделы и страницы
Реализуем страницы для проектов курса.
- Стилизация крупных разделов и целых страниц при помощи CSS-in-JS
Хедер, футер и базовый лейаут
- Кейс: реализация компонентов хедера, футера и базового лейаута
- Задание: разработка компонентов шапки, подвала и базового лейаута
- Кейс: разработка компонентов хедера, футера и базового лейаута в проекте
Главная страница
- Кейс: реализация главной страницы
- Задание: разработка главной страницы
- Кейс: разработка главной страницы в проекте
Страница каталога товаров
- Кейс: реализация страницы каталога товаров в проекте
- Задание: разработка страницы каталога товаров
- Кейс: разработка страницы каталога товаров в проекте
- Тест по четвёртому разделу
Раздел 5. Темизация
Реализуем альтернативные темы для проектов курса.
- Темизация приложения при помощи CSS-in-JS
- Кейс: пошаговая демонстрация — темизация в проекте
Практика
- Задание: темизация приложения
- Кейс: темизация в проекте, эталонное решение
- Обзор применяемых на курсе инструментов СSS-in-JS.
- Тест по пятому разделу
Раздел 6. Альтернативные реализации идей CSS-in-JS
Ознакомимся с новыми библиотеками для работы с CSS-in-JS и научимся выбирать наиболее подходящее под задачу решение, а также подведём итоги курса.
- Дополнительные возможности и альтернативные реализации CSS-in-JS
- Кейс: дополнительные возможности библиотеки styled-components в проекте
- Кейс: альтернативные подходы к стилизации в терминах CSS-in-JS в проекте
Практика
- Задание: дополнительные возможности библиотеки styled-components
- Кейс: дополнительные возможности библиотеки styled-components в проекте
Итоги
- Как выбрать библиотеку для работы с CSS-in-JS?
- Минусы CSS-in-JS
- Итоговый тест
Дополнительные материалы
- Сравнение библиотек для работы с CSS-in-JS
- Сборник полезных материалов по теме CSS-in-JS
