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

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

Подробное описание навыка

Описание навыка

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

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

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

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

Расположение относительно других навыков:

Этот навык идёт после семантической разметки и работы с графическими редакторами в дереве навыков.

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

Пройдены пять глав курса Построение сеток:

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

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

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

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

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

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

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

Показывают как применять описанную выше инструкцию для создания сетки реальных проектов.

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

Интерактивные пошаговые разборы кейсов

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

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

Для кейсов мы подготовили специальное оформление, которое «подсвечивает» важные части сетки.

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

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

Шесть тренировочных кейсов, по два для каждого уровня сложности.

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

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

Зарегистрироваться и оплатить навык
«Построение сеток на гридах по макету»

Старт в мае 2020

Зарегистрироваться и оплатить навык
«Построение сеток на гридах по макету»

Старт в мае 2020

790

Нажимая «Оплатить», вы подтверждаете своё согласие с условиями предоставления услуг.