UX-WAI. Верстка адаптивных интерфейсов

Курсы, обеспечивающие достаточный начальный уровень знаний

• UX-WIB. Основы верстки веб-интерфейсов

Тема 1. Позиционирование. Свойство flex
    Свойства flex layout.
    Верстка блоков макета (навигация, галереи, колонки)  на основе flex layout.

Тема 2. Позиционирование. Свойство grid
    Свойства grid layout.
    Верстка макета на основе  grid layout

Тема 3. Адаптивный дизайн
    Медиазапросы.
    Общие принципы адаптации элементов макета. 
    Адаптивные изображения.
    Адаптивная навигация
    Верстка адаптивной веб-страницы

Тема 4. Библиотеки ui-элементов, дизайн-системы для верстки
    Библиотеки ui-элементов (ui-kit).
    Дизайн-системы.
    Состав, системы css-классов.
    Применение дизайн-систем, ui-kit
    Верстка веб-страницы на основе библиотек элементов

Тема 5. CSS фреймворки
    Возможности CSS-фреймворков.
    Версии.
    Начало работы.
    Необходимые файлы для проекта.
    Сниппеты кода.
    CSS-препроцессоры
    Верстка страницы с использованием сниппетов Bootstrap
Тема 6. Интерактивные компоненты веб-страниц
    Библиотеки интерактивных компонентов.
    Рассмотрение примеров наиболее типичных элементов библиотек интерактивных компонентов.
    Кастомизация элементов библиотек
    Верстка страницы с использованием интерактивных элементов (слайдер, карусель, галерея)

Тема 7. Адаптивная верстка с использованием css-фреймворков
    Система сеток.
    Контрольные точки.
    Mobile first 
    Свойства контейнеров для размещения основных блоков адаптивного макета.
    Подходы в кастомизации
    Верстка адаптивных карточек на основе сетки и типографики Bootstrap

Тема 8. Быстрое прототипирование
    Основные подходы в использовании CSS-фреймворков.
    Выбор способа реализации интерактивных компонетов с учетом требований адаптивного дизайна и юзабилити.
    Полезные сервисы и ресурсы для верстки.
    Создание слайдера изображений

Тема 9. Figma для верстальщика
    Требования к макетам в Figma с учетом адаптивной верстки.
    Особенности создания макетов в Figma c учетом использования для верстки css-фреймворков и библиотек элементов. 
    Экспорт ассетов
    Верстка адаптивных страниц на основе прототипов в Figma

Тема 10. Экзамен