О курсе
CSS Grid Layout – это гибкий и мощный способ управления размещением элементов, который вместе с базовыми элементами CSS реализует полную и завершенную систему создания макетов веб-страниц.
При прохождении курса «Верстка на Grid» вы познакомитесь с основами CSS Grid и на практике узнаете, как эффективно использовать CSS Grid для создания гибких и адаптивных макетов. Вы научитесь создавать сетки с помощью grid-template-columns и grid-template-rows, задавать размеры и расположение элементов внутри сетки с использованием grid-column и grid-row, а также управлять пространством между элементами с помощью grid-gap. По окончании курса вы можете создавать сложные сетки, поймете, как управлять расположением и размерами элементов, а также научитесь использовать мощные функции, такие как позиционирование элементов, создание областей сетки и многие другие.
Данный обучающий курс предоставит вам не только теоретическое понимание лучших практик и современных трендов в области верстки, но и практические навыки создания гибких и современных веб-макетов. После прохождения курса вы сможете получить сертификат, подтверждающий ваши знания и умение использовать Grid-верстку.
Курс «Верстка на Grid» идеально подходит для веб-разработчиков, дизайнеров и всех, кто заинтересован в создании современных и адаптивных веб-страниц с помощью CSS Grid.
Этот курс входит в специальности:
Предварительные Требования
Курс подойдет тем, кто уже имеет базовые знания HTML и CSS, и хочет познакомиться с CSS Grid и изучить основы этой технологии для уверенного использования ее на практике.
Вы научитесь
- Использовать CSS Grid во время верстки веб-страниц.
- Использовать Figma для создания шаблонов и дальнейшей работы.
- Создавать свои стили.
- Создавать адаптивные макеты с помощью медиа-запросов
- Использовать Grid для создания различных макетов для разных устройств и экранов
- Понимать особенности и уметь применять Grid colums (столбцы) и Grid rows (строки
- Понимать и применять на практике возможности объединения ячеек и именования линий.
- Использовать функции repeat, minmax, fit-content и другие, позволяющие создавать сложные и гибкие сетки
- Использовать фракционные единицы (fr) и автоматические размещения (auto-fit и auto-fill).
- Применять grid-template-areas и разбивать грид на grid-areas
- Выравнивать ячейки грида с помощью правил justify-items и align-items. Выравнивать контент в ячейках.
- Использовать max-content и min-content
- Упорядочивать элементы и управлять отображением элементов в блоках.
- Ограничивать области перемещения блоков с абсолютным позиционированием.
- Использовать свойства flex и grid. Уметь превращать флекс блоки в грид.
- Понимать автосвойства грид и уметь контролировать построение грида.
- Уметь совмещать медиа-запросы и правила гридблоков.
- Создать готовый сверстанный проект и деплоить его на github.
- 3 ч 46 м
- 02.07.2023
- 10
- 02.07.2023
- украинский
Что входит в курс
×
Вы действительно хотите открыть доступ к тестированию по курсу Верстка на Grid на 40 дней?
Цель урока – познакомиться с описанием курса, узнать, что такое Grid в CSS, поработать с онлайн IDE Codeopen, настроить рабочее окружение и рассмотреть примеры работы с Grid container.
Цель урока – ознакомиться с Grid Generator, рассмотреть свойство grid-template-columns, узнать новую единицу измерения fr (fraction - судьба), на практике усвоить сочетание и смешивание различных единиц измерения, таких как гибкие и фиксированные, а также научиться задавать треки с помощью repeat.
Цель урока – понять разницу между явным и неявным Grid, узнать о Grid-клеточках, Grid-области, Gap (промежутках), изучить свойства minmax, grid-auto-rows, grid-column-start, grid-column-end, grid- row-start, grid-row-end, grid-column.
Цель урока – узнать подгриды, научиться управлять порядком отображения с помощью z-index, понять разницу между двумерным (Grid) и одномерным позиционированием (Flex), изучить свойства auto-fill и auto-fit для автозаполнения треков, узнать все о display сontents.
Ціль уроку – зрозуміти як правильно позиціонувати елементи в сітці Grid за допомогою направляючих ліній, на практиці засвоїти grid-template-columns та grid-template-rows, grid-column та grid-row, grid-area та використання span в Grid.
Ціль уроку – вивчити шаблони в Grid, навчитись позиціонувати елементи в сітці за допомогою імен (alias), перевизначати контент за допомогою медіавиразів чи додаткових класів, на практиці засвоїти такі властивості як: grid-template-areas, grid-template / grid.
Цель урока – узнать, как правильно определять названия линий в Grid, а также как работать с неявными областями сетки из именуемых линий. На практике усвоить repeat при определении линий Grid.
Цель урока – изучить, как работает автоматическое размещение элементов, какой дефолтный размер строк, когда недостаточно места для контента, узнать о заполнении пробелов и анонимных элементах сетки Grid.
Цель урока – изучить техники выравнивания блоков в CSS-разметке Grid, в частности осей Grid Layout, режимов записи в сеточных макетах, физических и логических значений в выравнивании макета сетки, выравнивание элементов на блоке или столбце по оси, выравнивание элементов на встройке, центрирование элемента в области Grid, выравнивание дорожек сетки на оси блока или столбца, выравнивание и auto margins.
Цель урока – создание собственного проекта на основе полученных знаний по курсу и деплой проекта на github pages и хостинг Netlify.
Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 14,99 USD
Купить