- Регистрация
- 8 Сен 2016
- Сообщения
- 482.607
- Реакции
- 268.126
[HTML Academy] Онлайн-курс «CSS-in-JS»
CSS-in-JS — это современный подход к стилизации веб-приложений. Он расширяет возможности CSS при помощи JavaScript и позволяет преодолеть ряд ограничений и проблем традиционных методов работы со стилями.
Спойлер: Программа курса
Раздел 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
Продажник: levelup.htmlacademy.ru/css-in-js
СКАЧАТЬ
CSS-in-JS — это современный подход к стилизации веб-приложений. Он расширяет возможности CSS при помощи JavaScript и позволяет преодолеть ряд ограничений и проблем традиционных методов работы со стилями.
Спойлер: Программа курса
Раздел 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
Продажник: levelup.htmlacademy.ru/css-in-js
СКАЧАТЬ
Для просмотра скрытого содержимого вы должны зарегистрироваться
Возможно, Вас ещё заинтересует:
- Курс ЛФК для здоровья спины, суставов и стоп [Дмитрий Норок]
- Разработчик умных чат-ботов с искусственным интеллектом pТариф разработчик умных чат-ботов с ИИ] [Step Up]
- Перезагрузка разума за 21 день [Жилсимар Таборда]
- Создавай сайты на лайте [Тариф сайты на лайте] [Step Up] [Алсу Гармаш]
- Программирование силовой тренировки [Алихан Джиоев]
- Законы успеха 2030 [Тариф PRO] [Василиса Володина]
- Фабрика контента с помощью нейросетей [Сет Фабрика контента] [Ева и Павел Кац]
- [Вышивка] Прикладная вышивка: одежда и домашний текстиль [nadin.needlework] [Надежда Фролова]