[HTML Academy] Построение сеток на флексах по макету. Тариф «Полный комплект»

[Moderator]

Вы получите: профессиональный навык - "Построение сеток на флексах по макету" Углублённая теория, общий объём 60 страниц 10 кейсов: 4 лёгкого, 3 среднего и 3 сложного уровня Эталонные решения кейсов, в том числе детальные разборы демонстрационных кейсов Что будет: Подготовительный материал. Дополняет базовые знания, полученные в интерактивных курсах, всем необходимым для начала отработки кейсов. Углублённая теория. 6 разделов углублённой теории общим объёмом 39 страниц. Включает следующую информацию: - Алгоритм расчёта размеров флекс-элементов и распределения этих элементов внутри односточных и многострочных флекс-контейнерах, вложенные флексы. - Свойство display и управление потоком документа. - Использование свойства flex-grow для создания «адаптивности от контейнера». Инструкция построения сеток на флексах по макету. Методика семантической разметки, общим объёмом 21 страница. Включает пошаговый алгоритм создания сетки по принципу «от крупных блоков к мелким» и подробное описание каждого шага с примерами макетов, рекомендациями по разметке и примерами кода. Демонстрационные кейсы. Четыре демонстрационных кейса: 2 лёгкого уровня, 1 среднего уровня и 1 сложного уровня. Показывают как применять описанную выше инструкцию для создания сетки реальных проектов. В каждом кейсе в качестве входных данных мы получаем дизайн и разметку страниц. Затем, используя предложенную методику, пошагово создаём сетку. На выходе получаем готовую разметку с базовым оформлением и сеткой. Все шаги детально описаны. Интерактивные пошаговые разборы кейсов. Один или несколько разборов для каждого демо-кейса. Разборы кейсов выполнены в виде специальных интерактивных демонстраций. В них вы видите каждое изменение кода, результат его работы и пояснение к этому изменению. Для кейсов мы подготовили специальное оформление, которое «подсвечивает» важные части сетки. Тренировочный материал. Кейсы с возрастающей сложностью и эталонными решениями, на которых вы и тренируете навык. Шесть тренировочных кейсов, по два для каждого уровня сложности. В качестве входных данных вы получаете дизайны страниц, на выходе должна получиться разметка с базовой стилизацией и сеткой. Для тренировочных кейсов нет подробных разборов, но есть эталонное решение от авторов, которое можно сравнить со своим. Продолжение описания Зачем нужен этот навык Грамотно построенная сетка не просто выстраивает элементы как на макете, но и делает свёрстанную страницу «пуленепробиваемой»: все элементы будут вести себя предсказуемо, не рассыпятся при изменении контента и не потребуют постоянных доработок из-за поломки в непредсказуемом месте. Флексбокс — универсальный инструмент для построения устойчивых сеток. Он работает во всех современных браузерах и гибко настраивается в коде. Профессиональная задача Опираясь на графический макет, нужно построить сетку крупных блоков страницы с использованием флексбокса. Сетка должна быть спроектирована с учётом разных вариантов переполнения (переполнению контентом, изменению количества колонок) и должна визуально соответствовать макету.