Набір учасників [HTML Academy] CSS-в-JS

[Gadzhi]

Переглянути вкладення 73174
​

Курс навчить працювати з 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
• Кейс: покрокова демонстрація-темізація в проекті

Практика

• Завдання: темизация додатки
• Кейс: темізація в проекті, еталонне рішення

- Огляд застосовуваних на курсі інструментів СЅЅ-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

Продажник:
https://privatelink.de/?https://levelup.htmlacademy.ru/css-in-js