Обязательный для прохождения материал, теория, задания и испытания.
5 частей, 129 заданий, 15 испытаний
20 заданий3 испытания
Научимся управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
29 заданий3 испытания
Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.
28 заданий3 испытания
Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.
25 заданий3 испытания
Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.
Этот навык посвящён созданию произвольных сеток на чистом CSS, без использования готовых сеточных систем.
Опираясь на графический макет, нужно построить сетку крупных блоков страницы с использованием флексбокса. Сетка должна быть спроектирована с учётом разных вариантов переполнения (переполнению контентом, изменению количества колонок) и должна визуально соответствовать макету.
27 заданий3 испытания
В этой части мы начнём изучать технологию гридов: разберём, как разными способами создавать грид-раскладки, как управлять расположением грид-элементов в грид-контейнере. Затем мы применим полученные знания на практике и сверстаем с помощью гридов пару небольших интерфейсов.
