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

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

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

Зачем нужен этот навык:
Разнообразные интерактивные элементы обычно есть в каждом современном сайте или приложении, которые не только отображают информацию, но и позволяют пользователю взаимодействовать с интерфейсом. Сложность вёрстки таких элементов в том, что верстальщику приходится быть «немножко дизайнером», когда он «оживляет» спроектированный в макете статический интерфейс. Интерфейсные элементы должны идеально работать по отдельности и при взаимодействии друг с другом, чтобы ни одна мелочь не портила весь опыт взаимодействия пользователя с интерфейсом.

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

Минимальные требования для освоения:

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

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

Полный комплект

• Методика
• 4 кейса лёгкого уровня
• 3 кейса среднего уровня
• 3 кейса сложного уровня
• Дополнительная теория