В данном премиум курсе мы познакомимся с очень популярным модулем под названием CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы.
Основная терминология и первая раскладка
В этом видеоуроке мы разберем основные термины, которые необходимо понимать для дальнейшей работы с CSS Grid, а также создадим свою первую раскладку.
Свойства grid-template-columns и grid-temaplate-rows
В этом уроке мы более подробно поговорим о возможностях создания колонок и рядов в сетке, рассмотрим использование возможных единиц измерения, а также ключевых слов и функций.
Управление Grid-элементами
В этом видео мы продолжаем изучение CSS Grid и перейдем к рассмотрению управления grid-элементами в сетке.
Именования
В данном видеоуроке мы рассмотрим различные примеры построения сеток, используя именованные колонки и ряды.
Расположение элементов
В этом уроке мы рассмотрим еще один, довольно классный, способ расположения элементов в сетке при помощи именования.
Выравнивание сетки и элементов CSS Grid
В этом уроке мы рассмотрим возможности выравнивания сетки и элементов CSS Grid.
Алгоритм авторазмещения
В данном видеоуроке мы поговорим об алгоритме авторазмещения, направлении элементов, а также о порядке их вывода, и напоследок рассмотрим ключевые слова, позволяющие анализировать свободное пространство в grid-контейнере.
Обзор макета и создание HTML-структуры
В данном уроке мы начинаем практическую часть, а именно верстку макета при помощи технологии CSS Grid.
Стилизация шапки и блока с изображениями
В этом уроке мы начнем стилизовать блок шапки и следующий за ним блок изображений. В уроке создается сетка для шапки сайта и ее верстка, а также, с помощью технологии CSS Grid строится сетка для блока изображений.
Адаптация шапки и блока изображений
В данном видеоуроке продолжается работа над шапкой и блоком изображений. В данном видео, используя медиа запросы, будет перестроена сетка и будут адаптируемы блоки под необходимые разрешения.
Реализация блока с пользователем
В данном видео Вы увидите реализацию блока с пользователем. В видео создается сетка для блока юзера и профиля, а также полностью стилизуются и адаптируются все необходимые элементы.
Стилизация блока галереи
В текущем видео реализуется блок галереи. Вы увидите стилизацию блока галереи. Создается сетка без использования медиа запросов, при этом данный блок будет полностью адаптивным.
Реализация подвала и подведение итогов
В этом уроке завершается верстка макета и курс по CSS Grid в целом. В видео реализуется подвал, создается сетка для него. Подведение итогов.
Автор: webformyself
