Получите бесплатный доступ к тренажерам Академии Участвуйте в акции «Майские каникулы»

Часть 1: Сетки

18 заданий, 2 испытания, 2 конспекта

Познакомимся с боксовой моделью и потоком. Научимся верстать сетки, ориентируясь на макет страницы. Узнаем, как управлять отступами, центровать элементы и делать колонки с помощью гридов и флексбоксов.

Оформить подписку
Боксовая модельЗадание
ПотокЗадание
Сетка и макет страницыЗадание
Свойство display, тип боксаЗадание
Свойство grid-template-columns, шаблон грид-контейнераЗадание
Свойство padding, внутренний отступЗадание
Свойство margin, внешний отступЗадание
fr, доля доступного пространстваЗадание
Свойство gap, отступ между грид-элементамиЗадание
Завершаем первую страницуЗадание
Конспект «Сетки». Раздел 1Конспект
Испытание: Программа тураИспытание
Используем flexЗадание
Свойство width, ширина элементаЗадание
Свойство justify-content, выравнивание по главной осиЗадание
Автоматические внешние отступыЗадание
Добавляем обёрткуЗадание
Разбиваем подвал на колонкиЗадание
Выстраиваем колонки в подвалеЗадание
Выравниваем элемент по вертикалиЗадание
Конспект «Сетки». Раздел 2Конспект
Испытание: «Волшебная дверь»Испытание