Верстка макета на CSS Grid

🔥Промокод на скидку 15% на все курсы ITVDN- 4YOUTUBE
Материалы вебинара - https://itvdn.com/ru/webinars/descrip...

В данном вебинаре вас ожидает верстка макета на CSS Grid. Вы узнаете о современной технологии верстки CSS Grid Layout (сокращенно Grid). Познакомимся с историей Grid, узнаем почему появилась эта технология в CSS. Разберем преимущества и недостатки данной технологии. А самое главное, на практике будет реализована CSS Grid верстка (верстка на гридах). Вас ожидает CSS Grid гайд, а в конце вебинара — советы, подборка полезных ресурсов по Grid и ответы на вопросы от спикера.

Спикер: Владислав Ермолаев, Front-End Developer в Voxloud

План вебинара “Верстка макета на CSS Grid”:

Знакомство.
История создания CSS Grid Layout.
Основы работы с технологией Grid.
Терминология.
Grid container (грид-контейнер).
Grid line (грид-линия).
Именованные грид-линии.
Grid item (грид-элемент).
Многослойность в Grid.
Grid area (грид-область).
Grid gutter (грид-интервал).
Размеры в Grid.
Повторы в Grid.
Преимущества использования Grid.
Недостатки.
CSS Grid практика. Использование Grid на практике.
Делаем проект по PSD макету. Верстка CSS Grid
Подборка полезных ресурсов и статей по верстке на гридах.
Ответы на вопросы.

00:00 Вступление. Знакомство с автором
1:37 План вебинара
4:03 Обзор макета
6:42 Основы верстки на ITVDN
8:05 Специальность верстальщика на ITVDN
8:38 Что такое CSS Grid
11:53 Варианты сетки на Grid
13:12 Основы работы с Grid
13:56 Терминология
16:34 Grid-контейнер, grid-линии, grid-item
24:32 Многослойность в Grid, grid-область
29:25 Пример
34:55 Грид-интервал, размеры в Grid
38:57 Пример с адаптивностью и ответы на вопросы
51:46 Повторы в Grid
52:36 Преимущества Grid
54:19 Поддержка браузерами Flex и Grid
1:00:23 Недостатки Grid
1:01:20 Практика. Делаем проект по PSD макету
1:04:27 Макет в Photopea.com
1:06:31 Ссылка на среду разработки, настройка проекта
1:11:23 Экспорт шрифтов, работа с базовыми стилями
1:28:25 Структура body, верстка шапки (header)
2:01:10 Верстка main секции (блок hero)
2:30:20 Полезные ресурсы

Если вас интересует Grid CSS, CSS Grid верстка сайта, верстка на гридах, адаптивная верстка, CSS Grid уроки, CSS Grid практика — полноценные курсы по Grid вы сможете найти на нашем ресурсе ITVDN.

#css #grid