Построение сеток

  • 5 глав,
  • 129  заданий
  • 15 испытаний
«Сетка» или «раскладка» — это расположение крупных блоков страницы. Проще говоря, учимся строить колонки.
Курс «Построение сеток»

Теория

Обязательный для прохождения материал, теория, задания и испытания.

5 глав129 заданий15 испытаний

0/23

20 заданий3 испытания

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

Пройти платную главу
0/32

29 заданий3 испытания

Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.

Пройти платную главу
0/31

28 заданий3 испытания

Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.

Пройти платную главу
0/28

25 заданий3 испытания

Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.

Пройти платную главу

Навык: Построение сеток на флексах по макету

Этот навык посвящён созданию произвольных сеток на чистом CSS, без использования готовых сеточных систем.

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

Ознакомиться с навыком
0/30

27 заданий3 испытания

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

Пройти платную главу

Скоро будут итоговые испытания!