Здравствуйте!
Друзья, хотим вас порадовать новым видео курсом - “Верстка сайта на CSS Grid”, который будет полезен каждому верстальщику, а также заинтересует многих FrontEnd разработчиков.
CSS Grid — это удобный механизм для настройки расположения элементов на странице, использующий принцип сети или таблицы со строками и столбцами. Проще говоря, это техника верстки, которая позволяет удобно располагать элементы на сайте, при этом предоставляя возможность легкой реализации адаптивности под различные разрешения экранов.
Данный курс направлен на изучение использования CSS Grid в процессе создания верстки веб-страниц. Вы познакомитесь с этой технологией, начиная с основ ее использования и базовых правил, и заканчивая рассмотрением более сложных структур. На этом курсе вы шаг за шагом узнаете о всех возможностях правил CSS Grid.
Автор курса — Сластен Максим — FrontEnd Developer, опыт разработки более 6 лет. В записанных видео уроках Максим делится эффективными и удобными техниками верстки при помощи Grid, которые с большим успехом используются в сайтостроении.
Структура курса:
- Вступление
- Знакомство с базовыми свойствами Grid
- Работа с Grid контейнером
- Создание Grid template и позиционирование контента
- Работа с дочерними элементами grid-row и columns
- Ordering элементов
- Возможности свойства auto
- FlexBox и Grid
- Адаптивность Grid и медиа-запросы
- Создание проекта
Чему вы научитесь на данном курсе:
- Использовать CSS Grid при выполнении верстки ваших веб-страниц
- Использовать Figma для построения шаблонов для дальнейшей работы
- Создавать свои стили
- Понимать особенности и уметь применять Grid columns (столбцы) и Grid rows (строки)
- Понимать и применять на практике возможности объединения ячеек и именования линий
- Применять функцию repeat
- Применять grid-template-areas и разбивать грид на grid-areas
- Выравнивать ячейки грида с помощью правил justify-items и align-items
- Выравнивать контент в ячейках
- Использовать значения max-content и min-content
- Упорядочивать элементы и управлять отображением элементов в блоке
- Ограничивать области перемещения блоков с абсолютным позиционированием
- Использовать свойства flex и grid. Уметь преобразовывать флекс блоки в грид
- Понимать автосвойства грид, и уметь контролировать построение грида
- Уметь совмещать медиа запросы и правила грид блоков
- Использовать медиа запросы для гибкой трансформации grid layout`a
- Создавать готовый сверстанный проект и деплоить его на GitHub
Предварительные требования
Курс подойдет тем, кто уже имеет базовые знания HTML и CSS, хочет познакомиться с CSS Grid и изучить основы работы этой технологии для уверенного использования ее на практике.
Смотрите первый урок курса в свободном доступе.
Также, можем вам предложить ознакомиться с бесплатным вебинаром “Адаптивная верстка с FlexBox и Grid” для лучшего понимания популярных техник гибкой верстки — FlexBox и Grid, а также выявления преимуществ каждой из них.
Видео курс “Верстка сайта на CSS Grid” позволяет совершенствовать навыки верстки веб-страниц, обучая востребованному и широко используемому подходу Grid. Если вы желаете не останавливаться на этом и хотите дальше развивать свои навыки верстальщика, вам также пригодятся ссылки на другие курсы по данному направлению:
