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

Профессиональная задача:

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

Зачем нужен этот навык:

Методология БЭМ (Блок, Элемент, Модификатор) — широко распространённый в веб-разработке компонентный подход к описанию структуры интерфейса. Такая структура позволяет быстро создавать предсказуемую и надёжную вёрстку интерфейсов любой сложности. Освоив этот навык, вы сможете верстать отдельные БЭМ-компоненты целиком и собирать из них вёрстку многостраничных макетов с максимальным переиспользованием без дублирования кода.

Состав навыка

Подготовительный материал

Дополняет базовые знания, полученные в интерактивных курсах, всем необходимым для начала отработки кейсов.

Углублённая теория

Углублённая теория и методики общим объёмом 30-50 страниц.

Демонстрационные кейсы

Три демонстрационных кейса, по одному для каждого уровня сложности.

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

Пошаговые разборы кейсов

Один разбор для каждого демо-кейса.

Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и примерами кода.

Тренировочный материал

Кейсы с возрастающей сложностью и эталонными решениями, на которых вы и тренируете навык.

Четыре тренировочных кейса: 2 лёгкого уровня, 1 среднего уровня и 1 сложного уровня.

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

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