Онлайн-курс «CSS-in-JS». НТМL Academy

Описание Онлайн-курс «CSS-in-JS». НТМL Academy

Курс научит работать с CSS-in-JS — новым подходом к стилизации веб-приложений, нацеленным на преодоление ряда ограничений и проблем традиционных методов работы с CSS.
Раздел 1

Введение

Узнаем, что такое CSS-in-JS и почему он появился. Ознакомимся с основными идеями на практике по ходу стилизации небольшого компонента.
‍
— Что такое CSS-in-JS и почему он появился
‍
Практика
— Кейс: пошаговая демонстрация — разработка компонента кнопки
— Задание: разработка компонента кнопки
— Кейс: эталонное решение — разработка компонента кнопки
‍
— Тест по первому разделу

— Дополнительные материалы

Раздел 2

Глобальные стили

Начнем работу над проектами курса и подготовим базовые стили.

— Обзор демо-проекта
— Формирование глобальных стилей при помощи CSS-in-JS
— Кейс: подключение дизайн-токенов и ресетов стилей в проекте
‍
Практика
— Обзор учебного проекта
— Задание: подключение дизайн-токенов и ресетов стилей
— Кейс: эталонная реализация подключения дизайн-токенов и ресетов стилей в проекте

— Тест по второму разделу

Раздел 3

Компоненты

Продолжим работу над проектами курса и разработаем различные компоненты - простые и посложнее.

— Разработка компонентов в терминах CSS-in-JS

Типографика и иконки
— Кейс: пошаговая демонстрация — реализация компонентов для работы с типографикой и иконками
— Задание: разработка компонентов для работы с типографикой и иконками
— Кейс: эталонное решение — разработка компонентов для работы с типографикой и иконками

Кнопки
— Кейс: реализация «кнопочных» компонентов
— Задание: разработка «кнопочных» компонентов
— Кейс: эталонное решение — разработка «кнопочных» компонентов в проекте

Чекбокс и тоггл
— Кейс: реализация компонента чекбокса
— Задание: разработка компонента переключателя
— Кейс: эталонное решение — разработка компонента тоггла в проекте

Фильтр и поля форм
— Кейс: реализация компонента фильтра
— Задание: разработка полей форм
— Кейс: эталонное решение — разработка полей форм в проекте

Карточки
— Кейс: реализация «карточных» компонентов в проекте
— Задание: разработка «карточных» компонентов
— Кейс: эталонное решение — разработка «карточных» компонентов в проекте
‍
— Тест по третьему разделу

Раздел 4

Крупные разделы и страницы

Реализуем страницы для проектов курса.

— Стилизация крупных разделов и целых страниц при помощи CSS-in-JS

Хедер, футер и базовый лейаут