CSS: Вёрстка на Grid

Включено в курс

Чему вы научитесь

• Базовым свойствам CSS Grid Layout.
• Создавать сетки и управлять пространством внутри них.
• Управлять расположением HTML-элементов внутри сетки.
• Адаптировать сетки для разных разрешений экрана.

Описание

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

Курс CSS Grid показывает новые возможности по позиционировании элементов на странице. Если на Flex позиционировались небольшие блоки, то Grid позволяет создавать сетки и позиционировать по ним большие блоки страницы: шапка, блоки основного контента, боковые секции и так далее.

Для прохождения курса вам понадобятся базовые знания вёрстки контента. Эти знания вы можете получить в курсе Основы верстки контента

Программа курса

• 1

  Введение

  Знакомимся с концепцией Grid, говорим о ключевых моментах и отличиях от Flex

  теория
• 2

  Терминология

  Знакомимся с понятиями сеток и их составлящими в CSS Grid Layout

  теория

  тесты

• 3

  Первая сетка

  Поговорим о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout

  теория

  тесты

  упражнение

• 4

  Расположение элементов в сетке

  Изучаем свойства, позволяющие произвольно располагать элементы внутри сетки

  теория

  тесты

  упражнение

• 5

  Работа с сеткой

  Изучаем отступы между полосами и выравнивание полос сетки

  теория

  тесты

  упражнение

• 6

  Неявная сетка

  Поговорим отличия явной и неявной сетки, изучим свойства grid-auto-rows и grid-auto-columns

  теория

  тесты

• 7

  Позиционирование и Grid

  Изучаем влияние свойств позиционирования и z-index при использовании внутри сетки

  теория

  тесты

• 8

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже