Играйте в телеграм-игру «Код сурка»

Шесть дней, шесть ночей, тысячи участников и шикарные призы

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

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

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

Оформить подписку

Боксовая модельЗадание

ПотокЗадание

Сетка и макет страницыЗадание

Свойство display, тип боксаЗадание

Свойство grid-template-columns, шаблон грид-контейнераЗадание

Свойство padding, внутренний отступЗадание

Свойство margin, внешний отступЗадание

fr, доля доступного пространстваЗадание

Свойство gap, отступ между грид-элементамиЗадание

Завершаем первую страницуЗадание

Конспект «Сетки». Раздел 1Конспект

Испытание: Программа тураИспытание

Используем flexЗадание

Свойство width, ширина элементаЗадание

Свойство justify-content, выравнивание по главной осиЗадание

Автоматические внешние отступыЗадание

Добавляем обёрткуЗадание

Разбиваем подвал на колонкиЗадание

Выстраиваем колонки в подвалеЗадание

Выравниваем элемент по вертикалиЗадание

Конспект «Сетки». Раздел 2Конспект

Испытание: «Волшебная дверь»Испытание