О курсе
CSS Grid - это удобный механизм для настройки расположения элементов на странице, использующий принцип сети или таблицы со строками и столбцами. Навыки использования CSS Grid важны для любого современного фронтенд разработчика.
Данный курс направлен на изучение использования CSS Grid в процессе создания верстки веб страниц. Вы познакомитесь с этой технологией, начиная с основ ее использования и базовых правил, и заканчивая рассмотрением более сложных структур. На этом курсе вы шаг за шагом узнаете о всех возможностях правил CSS Grid.
Этот курс входит в специальности:
Предварительные Требования
Курс подойдет тем, кто уже имеет базовые знания HTML и CSS, хочет познакомиться с CSS Grid и изучить основы работы этой технологии для уверенного использования ее на практике.
Вы научитесь
- Использовать CSS Grid при выполнении верстки ваших веб страниц.
- Использовать Figma для построения шаблонов для дальнейшей работы.
- Создавать свои стили.
- Понимать особенности и уметь применять Grid colums (столбцы) и Grid rows (строки).
- Понимать и применять на практике возможности объединения ячеек и именования линий.
- Применять функцию repeat.
- Применять grid-template-areas и разбивать грид на grid-areas.
- Выравнивать ячейки грида с помощью правил justify-items и align-items. Выравнивать контент в ячейках.
- Использовать значения max-content и min-content.
- Упорядочивать элементы и управлять отображением элементов в блоке.
- Ограничивать области перемещения блоков с абсолютным позиционированием.
- Использовать свойства flex и grid. Уметь преобразовывать флекс блоки в грид.
- Понимать автосвойства грид, и уметь контролировать построение грида.
- Уметь совмещать медиа запросы и правила грид блоков.
- Использовать медиа запросы для гибкой трансформации грид лейаута.
- Создавать готовый сверстанный проект и деплоить его на github.
- 6 ч 15 м
- 22.01.2021
- 10
- 05.02.2021
- русский
Что входит в курс
×
Вы действительно хотите открыть доступ к тестированию по курсу Верстка сайта на CSS Grid на 40 дней?
Цель урока - познакомиться с особенностями курса, настроить рабочее окружение, создать набор стилей для дальнейшей работы в курсе и рассмотреть примеры работы грид.
Цель урока - познакомиться с основными свойствами и базовыми возможностями display grid. Узнать о единицах измерения в display grid и рассмотреть разницу.
Цель урока - познакомиться с функцией repeat, изучить работу грид линий, закрепить на практике возможности объединения ячеек и именования линий.
Цель урока познакомиться с grid-template-areas и научиться разбивать грид на grid-areas. Научится выравнивать ячейки грида с помощью правил justify-items и align-items.
Цель урока - познакомиться с выравниванием контента и ячеек грида. Научиться использовать значения max-content и min-content.
Цель урока - познакомиться с ордерингом элементов и научиться управлять отображением элементов в блоке. Научиться ограничивать области перемещения блоков с абсолютным позиционированием.
Цель урока - познакомиться с автосвойствами грид, научиться контролировать построение грида. Рассмотреть практические примеры minmax функции.
Цель урока - познакомиться c разными вариантами использования свойств flex и grid. Рассмотреть примеры преобразования флекс блоков в грид.
Цель урока - познакомиться с возможностями совмещения медиа запросов и правил грид блоков. Использовать медиа запросы для гибкой трансформации грид лейаута.
Цель урока - познакомиться с гит и гитхаб, создать проект и задеплоить созданный проект на github page.
Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 19,99 USD
Купить