курс

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

2406 студентов 281 сообщение
Последнее обновление: 22 июля 2024
Курс CSS: Вёрстка на Grid
3 900 ₽ в месяц
за все курсы Хекслета
Зарегистрироваться
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат
    обучения

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

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

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

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

Описание

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

Курс CSS Grid показывает новые возможности по позиционировании элементов на странице. Если на Flex позиционировались небольшие блоки, то Grid позволяет создавать сетки и позиционировать по ним большие блоки страницы: шапка, блоки основного контента, боковые секции и так далее.

Для прохождения курса вам понадобятся базовые знания вёрстки контента. Эти знания вы можете получить в курсе Основы верстки контента

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

Продолжительность 6 часов
  • 1

    Введение

    Знакомимся с концепцией Grid, говорим о ключевых моментах и отличиях от Flex
  • 2

    Терминология

    Знакомимся с понятиями сеток и их составлящими в CSS Grid Layout

    тесты

  • 3

    Первая сетка

    Поговорим о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout

    тесты

    упражнение

  • 4

    Расположение элементов в сетке

    Изучаем свойства, позволяющие произвольно располагать элементы внутри сетки

    тесты

    упражнение

  • 5

    Работа с сеткой

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

    тесты

    упражнение

  • 6

    Неявная сетка

    Поговорим отличия явной и неявной сетки, изучим свойства grid-auto-rows и grid-auto-columns

    тесты

  • 7

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

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

    тесты

  • 8

    Дополнительные материалы

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

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

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

#
Задание
% завершений
5
64%

Рекомендуемые программы

профессия
от 6 300 ₽ в месяц
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 25 июля
профессия
от 9 900 ₽ в месяц
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 6 183 ₽ в месяц
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 025 ₽ в месяц
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 25 июля
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
в разработке
Старт 25 июля