Входит в специализацию «Современная фронтенд-инженерия»
CSS-in-JS — это современный подход к стилизации веб-приложений. Он расширяет возможности CSS при помощи JavaScript и позволяет преодолеть ряд ограничений и проблем традиционных методов работы со стилями.
Необходимые знания: HTML, CSS, JavaScript и React. Тема курса разбирается на примере библиотеки styled-components.
Гибкие сроки: начинайте прямо сейчас и двигайтесь в комфортном режиме.
Согласно нашей карте компетенций, работа с CSS-in-JS — важный навык
для разработчиков с опытом от 1-го до 3-х лет.
Карта компетенций показывает, какими навыками должен обладать фронтенд-разработчик на каждом этапе развития и чему необходимо учиться для карьерного роста.
Как мы собирали карту компетенций?
Исследовали рынок вакансий
Опросили тимлидов крупных продуктовых компаний
Собрали обратную связь от опытных разработчиков из числа наставников
Опросили работодателей из Центра Карьеры, которые сотрудничают с выпускниками профессий
Посмотреть карту компетенций целиком можно тут
А прочитать про то, как мы её собрали --- вот тут
Подготовка и подключение дизайн-токенов
Разработка библиотеки компонентов
Стилизация сеток
Темизация пользовательского интерфейса
Формирование стилей любой сложности при помощи JavaScript
Эффективное переиспользование стилей при помощи вспомогательных компонентов и миксинов
Осознанный выбор инструмента для работы с CSS-in-JS в зависимости от проекта и задач
Раздел 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
— Кейс:
дополнительные возможности библиотеки styled-components в проекте
— Кейс:
альтернативные подходы к стилизации в терминах CSS-in-JS
в проекте
Практика
— Задание: дополнительные
возможности библиотеки styled-components
— Кейс: дополнительные возможности
библиотеки styled-components в проекте
Итоги
— Как выбрать библиотеку
для работы с CSS-in-JS?
— Минусы CSS-in-JS
— Итоговый
тест
Дополнительные материалы
— Сравнение библиотек для
работы с CSS-in-JS
— Сборник полезных материалов по теме
Курс предполагает самостоятельное изучение материала в комфортном для вас режиме. Начать учиться можно прямо сейчас.
Программа разбита на модули, каждый из которых позволяет постепенно осваивать навык от простых основ до сложных тонкостей.
В каждом модуле будет:
Структурированная информация, необходимая для усвоения части навыка
Примеры решения типовых задач, которые помогут понять, как теория превращается в практику
Для самостоятельного закрепления полученной теории. После выполнения каждого задания вы получите пошаговое эталонное решение и сможете сравнить его со своим вариантом
Для закрепления материала. Позволят вам убедиться, что вы точно всё усвоили и можете двигаться дальше.
Cообщество авторов, опытных специалистов и студентов курса. Общайтесь с единомышленниками и обменивайтесь опытом.
Вы можете приобрести набор курсов по выгодной цене.
Навыки
на курсах, входящих в пакет, объединены общей тематикой.
Сделано для разработчиков, у которых мало времени на обучение.
Связывает теорию с типовыми задачами на рынке. У вас будет понимание того, где и как применить полученную теорию.
Комьюнити каждого курса — это авторы, опытные разработчики
и студенты, прошедшие или проходящие этот курс.
Комьюнити не только помогает в освоении материала,
но и постоянно делает курс лучше.
Хотите освоить конкретный навык, но не знаете как
Не хотите тратить время на поиск актуальной информации по теме
Вам нужна конкретная методика обучения и только необходимая информация
Хотите убедиться, что полученные знания усвоились на практике
9 лет выстраиваем связь с рынком коммерческой разработки. Обучаем
начинающих разработчиков и видим, как они становятся опытными специалистами.
Перед запуском курса убеждаемся, что он даёт востребованный
профессиональный навык.
Общаемся с сообществом веб-разработчиков и поэтому понимаем, как нужно
учить. Максимально сокращаем время от изучения теории до решения типовых задач.
«Изучая материал самостоятельно, я получил теоретические представления о вопросе. Но для решения задач необходимы именно практические знания. И в HTML Academy именно на это ставка. Что ты руками осваиваешь, как работает. Даже если что-то не дочитал».
«Если честно, мне лень искать по всему интернету какие-то статьи, учебники. А тут сразу теория, объяснение, задачи. И я знаю, что я их точно пройду, в отличие от каких-нибудь видеокурсов».
«Материал подан в том формате, в котором его лучше учить. Изучая самостоятельно, мы не всегда понимаем. В голове каша».
«Cамостоятельно всё это изучать можно, но довольно проблематично, потому что информации в интернете много. Она какая-то разрозненная, в некоторых местах противоречивая. А здесь, что мне понравилось, выжимки очень конкретные с объяснениями дают. Направляют куда нужно, дают вектор развития. И постепенно».
«Было ожидание, что будет больше разговорных видео, слушать преподавателя. По многим курсам есть такое в видео-формате. А пришлось читать учебник. Я бы не сказал, что это что-то испортило. Оказалось, что с учебником приятно работать. Думал, что будет сложнее. Оказалось --- нет, всё прекрасно».
«Когда находишь правильное решение, и оно работает, ошибок не выдаёт, ты все равно сомневаешься, а правильно ли ты сделал. [На курсе] коллективная работа, авторитетное мнение. Это как компас, ориентир».
«У меня есть мнение, что HTML Academy делает курсы прикладные для специалистов. Что студент выйдет сразу с общим представлением о вопросе, уже имея набор практических решений».
По всем вопросам пишите нам в WhatsApp или Telegram, мы ответим в течение 24 часов.
