CSS: Вёрстка на Grid

все курсы

Программирование

3.8

6 часов,

начало 18 апреля

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

Записанные лекции

Трудоустройство

Отсутствует

Стоимость курса

3 900 ₽

нет рассрочки

Включено в курс

7 уроков (видео и/или текст)
8 упражнений в тренажере
23 проверочных теста
Дополнительные материалы
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы

Чему вы научитесь

Базовым свойствам CSS Grid Layout.
Создавать сетки и управлять пространством внутри них.
Управлять расположением HTML-элементов внутри сетки.
Адаптировать сетки для разных разрешений экрана.

Вы узнаете больше о создании сеток и управлении элементами внутри них. В итоге вы научитесь распределять пространство внутри ячеек, адаптировать сетки под разные размеры экрана и создавать свои собственные сетки. CSS Grid пригодится, если вы решите создавать сложные сеточные шаблоны, в которых необходимо одновременно управлять элементами по двум осям. Знания из этого курса помогают программистам быстро создавать сложные журнальные шаблоны. Этот курс подойдет всем веб-разработчикам, которые хотят использовать современные стандарты. Чтобы учиться было проще, стоит заранее изучить основы верстки текста и позиционирование.

Что вы получите после обучения

Приобретаемые навыки

CSS

HTML+CSS

Позиционирование

Flex

Адаптивность

Сетки CSS

Grid CSS

CSS Grid Layout

Образовательная организация

Хекслет

4.5

76 отзывов

Онлайн-школа программирования, за выпускниками которой охотятся компании

Первого студента мы трудоустроили в 2013 году. Тогда требования к знаниям джуниоров были выше, а трава зеленее

Это отразилось на программах обучения, на их проработке и глубине. Собеседования для студентов Хекслета проходят под девизом: «Хм, на Хекслете задачки были сложнее»

Иногда наши студенты попадают на работу без проведения технического интервью, только на основе анализа кода проектов

Сейчас все больше и больше компаний указывают курсы Хекслета как плюс при найме. А наши партнерские компании доверяют нам настолько, что собеседуют выпускников, не заглядывая в резюме

Программа курса

Введение
Познакомиться с концепцией Grid. Узнать о ключевых моментах и отличиях от Flex

Терминология
Познакомиться с понятиями сеток и их составлящими в CSS Grid Layout

Первая сетка
Узнать о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout. Создать первую 12 колоночную сетку. Познакомиться с единицами измерения fr

Расположение элементов в сетке
Изучить свойства, позволяющие произвольно располагать элементы внутри сетки. Научиться именовать линии/области и использовать их при расположении элементов.

Работа с сеткой
Изучить отступы между полосами и выравнивание полос сетки.

Неявная сетка
Узнать отличия явной и неявной сетки. Изучить свойства grid-auto-rows и grid-auto-columns

Позиционирование и Grid
Изучить влияние свойств позиционирования и z-index при использовании внутри сетки

Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса