Профессиональные навыки

Наборы кейсов с эталонными решениями для освоения типовых профессиональных задач.
Что такое навык?

Список профессиональных навыков

Создание семантической разметки по макету

Создание семантической разметки по макету

Описание профессиональной задачи

Опираясь на графический макет, нужно спроектировать информационную архитектуру страниц и написать корректную, семантичную и выразительную HTML-разметку.

Материалы комплекта

  • Углублённая теория, общий объём 54 страницы.
  • 9 кейсов: 3 лёгкого, 3 среднего и 3 сложного уровня.
  • 3 дополнительных кейса каждого уровня сложности.
  • Эталонные решения кейсов, в том числе 4 интерактивных пошаговых демонстрации.
12 кейсов
Экспорт параметров и графики из PSD‑макетов

Экспорт параметров и графики из PSD‑макетов

Описание профессиональной задачи

Нужно получить из макета всё необходимое для стилизации: параметры шрифтов, размеры и отступы, параметры теней и скруглений и так далее. Также нужно экспортировать всю графику, в оптимальном формате и оптимальном соотношении качество/вес.

Материалы комплекта

  • Углублённая теория, общий объём 56 страниц. В том числе инструкция по работе с последней версией Adobe Photoshop 2020.
  • 8 кейсов: 3 лёгкого, 3 среднего и 2 сложного уровня. Включают макеты в формате PSD.
  • Эталонные решения кейсов, в том числе 2 детальных пошаговых разбора демонстрационных кейсов.
8 кейсов
Построение сеток на флексах по макету

Построение сеток на флексах по макету

Построение сеток на флексах по макету Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория, общий объём 60 страниц.
  • 10 кейсов: 4 лёгкого, 3 среднего и 3 сложного уровня.
  • Эталонные решения кейсов, в том числе детальные разборы демонстрационных кейсов.
10 кейсов
Экспорт параметров и графики из Figma

Экспорт параметров и графики из Figma

Описание профессиональной задачи

Нужно получить из макета всё необходимое для стилизации: параметры шрифтов, размеры и отступы, параметры теней и скруглений и так далее. Также нужно экспортировать всю графику, в оптимальном формате и оптимальном соотношении качество/вес.

Материалы комплекта

  • Углублённая теория, ожидаемый объём 30-50 страниц.
    В том числе инструкция по работе с последней версией Figma.
  • 6 кейсов: 2 лёгкого, 2 среднего и 2 сложного уровня. Включают макеты в формате Figma.
  • Эталонные решения кейсов, в том числе 2 детальных пошаговых разбора демонстрационных кейсов.
6 кейсов
Вёрстка текстового содержимого страниц

Вёрстка текстового содержимого страниц

Описание профессиональной задачи

Пул задач, включающий профессиональное оформление текстовых сайтов, подключение сторонних шрифтов, подготовку страниц для работы с CMS, вёрстку обтекаемых элементов (изображений, буквиц, врезок), тонкую настройку типографики (переносы слов, неразрывные пробелы, интерлиньяж, трекинг).

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
9 кейсов
Построение сеток на гридах по макету

Построение сеток на гридах по макету

Описание профессиональной задачи

Опираясь на графический макет, нужно построить сетку крупных блоков страницы с использованием технологии CSS Grid Layout. Сетка должна быть спроектирована с учётом разных вариантов переполнения (переполнения контентом, изменения количества колонок) и должна визуально соответствовать макету.

Материалы комплекта

  • Углублённая теория.
  • Методики.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
10 кейсов
Вёрстка навигационных элементов интерфейса

Вёрстка навигационных элементов интерфейса

Описание профессиональной задачи

Умение верстать типовые навигационные элементы: линейное и многоуровневые меню, «выпадающие» подменю, пагинацию, «хлебные крошки», сложные списки и другие.

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
8 кейсов
Вёрстка многослойных элементов интерфейса

Вёрстка многослойных элементов интерфейса

Описание профессиональной задачи

Нужно сверстать типовые многослойные элементы: слайдеры, «всплывающие» попапы, модальные окна, тултипы-подсказки, прокручивающиеся вместе со всем сайтом «липкие» меню, выпадающие элементы интерфеса, «прелоадеры» и подобные элементы.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
10 кейсов
Вёрстка карточных элементов интерфейса

Вёрстка карточных элементов интерфейса

Описание профессиональной задачи

Список карточек и карточки товаров — очень распространённый интерфейсный паттерн. Он применяется в интернет-магазинах, лендингах и даже простых текстовых сайтах. Верстальщику при реализации таких элементов нужно учитывать неочевидные с первого взгляда вещи: переполнение контентом и замену графики при наполнении интерфейса из CMS, управление контролами карточек с клавиатуры, интеграцию с JavaScript. И именно эти умения вы получите при освоении навыка.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов.
  • Эталонные решения кейсов.
10 кейсов
Разметка по БЭМ

Разметка по БЭМ

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
8 кейсов
Работа с DOM в JavaScript

Работа с DOM в JavaScript

Описание профессиональной задачи

Для «оживления» страницы нужно создавать, удалять, перемещать, управлять элементами HTML-страницы и отображать данные в шаблонах с помощью JavaScript.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов.
10 кейсов
Компонентная вёрстка по БЭМ

Компонентная вёрстка по БЭМ

Описание профессиональной задачи

По спроектированной БЭМ-структуре макета нужно сверстать отдельные компоненты и собрать из них интерфейс целиком.

Материалы комплекта

  • Углублённая теория.
  • 7 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
7 кейсов
Использование анимации в интерфейсе

Использование анимации в интерфейсе

Описание профессиональной задачи

Нужно применять CSS-, SVG- и JS-анимации для создания динамических визуальных эффектов и улучшения работы статичных интерфейсов.

Материалы комплекта

  • Углублённая теория.
  • 12 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
12 кейсов