- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный формат обучения
Включено в курс
Чему вы научитесь
- Базовым свойствам CSS Grid Layout.
- Создавать сетки и управлять пространством внутри них.
- Управлять расположением HTML-элементов внутри сетки.
- Адаптировать сетки для разных разрешений экрана.
Описание
Курс посвящён модулю CSS Grid Layout — технологичному инструменту для создания сеток в CSS. После прихода модуля Flex появилась потребность в контролировании элементов по двум осям одновременно. Разработчики хотели взять систему сеток, которая используется в печатной продукции сотню лет. Для этого использовали табличную вёрстку, вёрстку с помощью Float и Flex. Каждый из этих способов имел ограничения и сложности при разработке. CSS Grid Layout появился в 2011 году и за много лет приобрёл множество свойств и подходов, которые упрощают создание макетов с помощью CSS.
Программа курса
-
3
Первая сетка
Узнать о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout. Создать первую 12 колоночную сетку. Познакомиться с единицами измерения fr -
4
Расположение элементов в сетке
Изучить свойства, позволяющие произвольно располагать элементы внутри сетки. Научиться именовать линии/области и использовать их при расположении элементов. -
5
Работа с сеткой
Изучить отступы между полосами и выравнивание полос сетки. -
6
Неявная сетка
Узнать отличия явной и неявной сетки. Изучить свойства grid-auto-rows и grid-auto-columns -
7
Позиционирование и Grid
Изучить влияние свойств позиционирования и z-index при использовании внутри сетки -
8
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
