Описание навыка
Профессиональная задача:
Умение верстать типовые навигационные элементы: линейное и многоуровневые меню, «выпадающие» подменю, пагинацию, «хлебные крошки», сложные списки и другие.
Зачем нужен этот навык:
С вёрсткой навигационных элементов верстальщик сталкивается в работе практически над каждым сайтом. Навигация — основная часть интерфейса, с ней взаимодействуют все пользователи. Вёрстка навигации «как в макете» — это только часть работы, также важно проработать работу интерфейса «в динамике» — этого нет в статическом макете. Тут важно учесть, как задействуются теория близости, интерактивные состояния элементов, а также плавные переходы и анимация. Хорошо свёрстанная навигация не будет причинять пользователям боль, а поможет взаимодействовать с сайтом с удовольствием.
Расположение относительно других навыков:
Этот навык идёт после семантической разметки, работы с графическими редакторами и вёрстки текстового содержания страниц в дереве навыков.
Минимальные требования для освоения:

Создание семантической разметки по макету,
Экспорт параметров и графики из PSD‑макетов или Экспорт параметров и графики из Figma,
Вёрстка текстового содержания страниц.

Состав навыка
Подготовительный материал
Дополняет базовые знания, полученные в интерактивных курсах, всем необходимым для начала отработки кейсов.
Углублённая теория
Углублённая теория и методики общим объёмом 30-50 страниц.
Демонстрационные кейсы
Три демонстрационных кейса, по одному для каждого уровня сложности.
В каждом кейсе в качестве входных данных мы получаем дизайн страниц. Затем, используя предложенную методику, пошагово верстаем страницу. На выходе получаем готовую разметку и стили. Все шаги детально описаны.
Пошаговые разборы кейсов
Один разбор для каждого демо-кейса.
Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и примерами кода.
Тренировочный материал
Кейсы с возрастающей сложностью и эталонными решениями, на которых вы и тренируете навык.
Пять тренировочных кейсов: 2 лёгкого уровня, 2 среднего уровня и 1 сложного уровня.
В качестве входных данных вы получаете дизайны страниц, на выходе должна получиться разметка со стилями.
Для тренировочных кейсов нет подробных разборов, но есть эталонное решение от авторов, которое можно сравнить со своим.

[HTML Academy] Профессиональный навык. Вёрстка навигационных элементов интерфейса. Полный комплект