курс
«продвинутые техники и инструменты вёрстки»

Научитесь верстать сложные компоненты и эффекты

Начать курс бесплатно

Курс построен на базе тренажёров

Это самый эффективный способ обучения, так как с самого начала мы учим вас работать с живым кодом и самостоятельно решать задачи, приближенные к реальным.

  • Обучение на тренажёре — это постоянная практика

    20% времени вы изучаете теорию и 80% времени пишете код. Только такой подход позволяет получить знания и набить руку до автоматизма. То, что нужно для старта.

  • Тренажёры позволяют учиться в комфортном ритме

    Вы можете учиться в комфортном ритме и наглядно отслеживать свой прогресс.

  • Подходит ли вам курс

    Этот курс предназначен для тех, кто может верстать лёгкие и средние проекты на уровне фрилансера и хочет расти в сторону сложной продуктовой разработки.

  • Ваш уровень после курса

    После прохождения курса ваш арсенал умений достигнет такого же объёма, как у верстальщика, который стартует путь в продуктовой разработке интерфейсов.

  • Чему вы научитесь:

    В курсе мы разберём ряд продвинутых задач и технологий, которые встречаются при разработке и оптимизации интерфейсов:

    • техники оптимизации производительности интерфейсов, создания сложной CSS-графики и декоративных эффектов,
    • техники улучшения UX-форм с помощью нативных возможностей CSS,
    • тонкости работы с табличными раскладками, которые необходимы для работы с табличными компонентами в адаптивной вёрстке, а именно для «разрушения» и «пересборки» таблиц в разных версиях макетов,
    • техники создания интерфейсных анимаций и микроанимаций с помощью нативных инструментов CSS,
    • препроцессор — главный инструмент для ускорения работы верстальщика и организации эффективной командной разработки над библиотеками компонентов,
    • внутреннее устройство формата SVG, которое критично для оформления сложных интерактивных элементов, оптимизации интерфейсов и создания некоторых декоративных эффектов,

Программа курса

  1. Раздел 1. Продвинутые декоративные эффекты
    • Двумерные трансформации, цепочки трансформаций.
    • Типы трансформаций: смещение по горизонтали и вертикали, поворот, наклон, масштабирование.
    • Зеркальное отражение по горизонтали и по вертикали.
    • Управление начальной точкой трансформаций.
    • Интерфейсные приёмы с использованием трансформаций: центровка, вертикальный текст, скошенные кнопки, нестандартные тени, круговое меню.
    • CSS-фильтры для изменения яркости, контраста, обесцвечивания.
    • CSS-фильтры для управления насыщенностью цвета, инвертирования цветов и «поворота» цветов.
    • CSS-фильтры для добавления размытия, изменения прозрачности и добавления теней.
    • Отличия box-shadow и drop-shadow.
    • Анимирование CSS-фильтров.
  2. Раздел 2. Продвинутая работа с фонами и рамками
    • Управление размерами фоновых изображение. Особые режимы cover и contain.
    • Управление областями отображения и обрезки фона: background-origin и background-clip.
    • Работа с множественными фоновыми изображениями.
    • Позиция фона относительно разных сторон контейнера.
    • Режимы «кратного» повторения фона: round и space.
    • Свойство для создания обводок outline и его особенности.
    • Скругление углов. Разные радиусы скругления для разных углов, управление горизонтальными и вертикальными радиусам скругления.
    • Работа с рамками-изображениями Области рамки-изображения, «нарезка изображения» и распределение фрагментов по областям рамки.
    • Симметричная и ассиметричная «нарезка».
    • Управление повторением, размерами и расположениме изображений в рамке.
    • Интерфейсные приёмы с использованием рамок и фонов: создание треугольников, круглых элементов интерфейса, декоративных рамок, стрелок.
  3. Раздел 3. Продвинутые селекторы атрибутов и состояний
    • Селекторы для выбора элементов по значению атрибутов.
    • Продвинутые возможности для поиска по атрибутам: поиск по подстрокам в значении атрибута, поиск по префиксам в значении атрибута.
    • Селекторы, реагирующие на «настройки» элементов форм: :enabled и :disabled, :required и :optional, :read-only и :read-write.
    • Селекторы, реагирущие на текущее состояние элементов форм: :checked, :invalid и :valid, :in-range и :out-of-range.
    • Комбинирование ~ и :сhecked.
  4. Раздел 4. Табличные раскладки
    • «Табличный» бокс display: table и его особенности.
    • Ряды и ячейки CSS-таблиц (аналоги <th> и <td>).
    • Заголовок таблицы, «тело» таблицы, шапка и подвал в CSS-таблицах (аналоги <caption>, <tbody>, <thead> и <tfoot>).
    • Создание колонок CSS-таблицы, их группировка, управление размерами.
    • Инлайновые CSS-таблицы.
    • Горизонтальное и вертикальное выравнивание с помощью CSS-таблиц.
    • Управление отступами и схлопыванием рамок между ячейками CSS-таблиц.
    • Пример создания «Holy Grail» раскладки на CSS-таблицах.
  5. Раздел 5. Интерфейсные анимации
    • Плавные переходы между значениями CSS-свойств. Управление длительностью перехода.
    • Управление перечнем свойств с плавными переходами.
    • Управление задержкой и временной функцией перехода.
    • Предопределённые временные функции: ease, linear, ease-in, ease-out, ease-in-out. Произвольная временные функция cubic-bezier. Дискретная временная функция steps.
    • Примеры микроанимаций в интерфейсах с использованием плавных переходов: кнопки с плавным переключением, трансформирующиеся чекбоксы, радиокнопки и иконки, «скользящие» переключатели, динамический плейсхолдер в поле ввода.
    • Сложные анимации с ключевыми кадрами.
    • Описание ключевых кадров. Начальный, конечный и промежуточные ключевые кадры. Группировка кадров.
    • Множественные анимации.
    • Общие параметры анимации: длительность, количество проигрываний, направление анимации, задержка начала.
    • Управление состоянием до и после начала проигрывания. Ставим анимацию «на паузу».
    • Временные функции анимаций с ключевыми кадрами: предопределённые, произвольная и дискретная.
    • Примеры создания сложных анимированных сцен с помощью покадровой анимации.
  6. Раздел 6. Инструменты автоматизации: препроцессор
    • Препроцессор Less.
    • Переменные в препроцессоре, области видимости переменных.
    • Цветовые функции: spin, lighten, darken, saturate, desaturate. Комбинирование цветовых функций.
    • Вложенные CSS-правила, использование амперсанда &.
    • Математические операции в Less.
    • Примеси. Примеси с параметрами. Значения параметров по умолчанию.
    • Шаблоны примесей. Универсальный шаблон. Примеси с условиями.
    • Интерполяция переменных в Less. Механизм экранирования.
    • Имитация циклов в Less с помощью рекурсивного вызова примесей.
    • Прикладные примеры использования примесей: центровка, генерация треугольников, создание вертикального ритма, библиотека блоков-оповещений.
  7. Раздел 7. Внутреннее устройство SVG
    • Формат SVG. Отличия вектора от растра.
    • Базовые SVG-фигуры: прямоугольник, окружность, эллипс, многоугольник, линия, ломаная линия.
    • Управление размерами и координатами SVG-фигур. Размеры и координаты в процентах.
    • Прямоугольник со скруглёнными углами.
    • Управление заливкой SVG-фигур с помощью атрибутов и CSS. Прозрачность заливки.
    • Управление обводками SVG-фигур с помощью атрибутов и CSS. Прозрачность, толщина и смещение обводок.
    • Управление формой концов линий и формой сгибов.
    • Работа с пунктирными линиями. Создание пунктира со сложным ритмом.
    • Управление размерами SVG-элемента и размерами вьюбокса. Атрибут viewBox.
    • Управление пропорциями и выравниванием вьюбокса. Атрибут preserveAspectRatio.
    • Резиновый фон с preserveAspectRatio.
    • Единицы измерения и системы координат в SVG. Система координат вьюпорта и система координат пользователя.
    • Системы координат и трансформации.
    • Примеры рисования изображений на SVG.

Загружаем…