Курс научит работать с 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