[НТМL Academy] Профессиональный навык. Вёрстка карточных элементов интерфейса

[Аноним]

Ссылка на картинку

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

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

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

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