Верстка на Grid
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Подписка

    Выбери свою IT специальность

    Подписка

      О курсе

      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
      • Язык: украинский

      Что входит в курс

      • 10 видео уроков
      • Домашние задания
      • Тестирование
      • Сертификат
      • Проверка ДЗ

      ×

      Вы открыли доступ к тесту! Пройти тест

      Вы действительно хотите открыть доступ к тестированию по курсу Верстка на 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.

      Читать дальше...
      ПОКАЗАТЬ ВСЕ

      Покупай подпискус доступом ко всем курсам и сервисам

      Библиотека современных IT знаний в удобном формате

      Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      59.99 $
      Оформить подписку
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      54.00 $
      89.99 $
      Оформить подписку
      Акция
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      85.00 $
      169.99 $
      Оформить подписку
      Акция
      комментарии и обсуждения
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.