Курс Tailwind CSS
Освойте Tailwind CSS и собирайте интерфейсы из утилитарных классов без длинных таблиц стилей.
О курсе
Tailwind CSS позволяет собирать интерфейс из небольших классов и сохранять единые правила оформления. Вы разберёте утилиты на макете, затем организуете повторяющиеся элементы в компоненты.
Чему научитесь
- Подключение Tailwind и организация файлов.
- Отступы, цвета, типографика и компоновка элементов.
- Варианты для экранов, hover, focus и другие состояния.
- Компоненты, настройка темы и работа с готовым макетом.
Программа обучения
Для каждого раздела указан ориентировочный объём в парах. Одна пара — два академических часа. Состав и темп занятий можно уточнить под вашу цель и подготовку.
Старт проекта1 пара
- Подключение Tailwind и организация файлов.
- Подключение Tailwind к проекту и сборка стилей
- Чтение конфигурации и поиск классов в документации
- Организация разметки без повторяющихся случайных значений
Стили через утилиты2 пары
- Отступы, цвета, типографика и компоновка элементов.
- Отступы, размеры и выравнивание элементов
- Типографика, цвет и визуальная иерархия
- Flex и Grid через утилитарные классы
Адаптивность и состояния2 пары
- Варианты для экранов, hover, focus и другие состояния.
- Адаптивные варианты для разных размеров экрана
- Состояния hover и focus для кнопок и ссылок
- Оформление ошибок и отключённых элементов формы
Повторное использование2 пары
- Компоненты, настройка темы и работа с готовым макетом.
- Общие токены цвета и расстояний в теме
- Выделение повторяющейся карточки в компонент
- Сверка собранного интерфейса с исходным макетом
Практическая работа и результат
Верстаете адаптивный интерфейс по макету и выделяете повторяющиеся элементы.
В процессе вы применяете темы программы к одной задаче, проверяете результат и исправляете ошибки вместе с преподавателем. Так после занятий у вас остаётся законченная учебная работа, а не только записи с объяснениями.
С чего начать
Нужны основы HTML и CSS. Если часть тем уже знакома, программу можно сместить в сторону более сложной практики.
Продолжить обучение
Эта тема входит в программу «Frontend-разработчик». Если вам нужно освоить направление целиком, обсудите с менеджером полную программу или отдельные занятия по этой теме.
Как проходят занятия
Аудитории, оборудование и практика — как это выглядит изнутри.
