Введите название курса, технологии, коллекции или преподавателя.

Видеокурс

Современная верстка на CSS Grid

уровень beginner

Этот курс создан для тех, кто уже знаком с основами HTML и CSS и хочет уверенно верстать сложные макеты на CSS Grid — от базовых сеток и шаблонов областей до Subgrid, адаптива и реального проекта.

Курс охватывает все возможности CSS Grid: grid tracks и единицы измерения, gap и функцию repeat(), размещение элементов в сетке, явную и неявную сетку с алгоритмом auto-placement (grid-auto-flow), подсетку (subgrid), z-index, auto-fill/auto-fit и функцию minmax(), шаблоны grid-областей, нейминг линий и выравнивание (justify, align, place). Каждое из десяти занятий состоит из видео, конспекта, квиза и практического задания, а завершается курс отдельной практической работой, где вы применяете grid на реальном макете.

После прохождения курса вы сможете верстать сложные адаптивные макеты без лишних обёрток и хаков, осознанно выбирать между Grid и Flexbox, строить гибкие сетки, которые сами подстраиваются под контент, и уверенно читать и поддерживать чужой grid-код в команде.

Grid — стандарт современной вёрстки, который ждут от Front-end разработчика уже на уровне Junior, поэтому эти навыки сразу дают преимущество на технических собеседованиях и в реальных проектах.

-20%1 600 ₴
1 280 ₴
12
12
24
12
12
12
4 часа видео
10 занятий
8 тестов
язык курса украинский
Твой AI-ассистент
  • Ольга Маслова
    Ольга Маслова Front-end developer

Изучается на курсе

  • 1

    Знайомство з Grid

    Бесплатно
    • Видео19 мин • смотреть видео
    • Конспект
  • 2

    Grid tracks. Одиниці вимірювання. Gap. Repeat()

    • Видео31 мин • смотреть видео
    • Конспект
    • Тест
  • 3

    Розміщення елементів в сітці

    • Видео23 мин • смотреть видео
    • Конспект
    • Тест
  • 4

    Явна та неявна сітка. Алгоритм auto-placement (grid-auto-flow)

    • Видео16 мин • смотреть видео
    • Конспект
    • Тест
  • 5

    Підгрід (Subgrid)

    • Видео19 мин • смотреть видео
    • Конспект
    • Тест
  • 6

    z-index, auto-fill/auto-fit, функція minmax()

    • Видео27 мин • смотреть видео
    • Конспект
    • Тест
  • 7

    Шаблони Grid-областей

    • Видео24 мин • смотреть видео
    • Конспект
    • Тест
  • 8

    Неймінг ліній в Grid

    • Видео16 мин • смотреть видео
    • Конспект
    • Тест
  • 9

    Вирівнювання в Grid (justify, align, place)

    • Видео18 мин • смотреть видео
    • Конспект
    • Тест
  • 10

    Застосування grid на практиці

    • Видео25 мин • смотреть видео
Доступ к умному AI-помощнику, который умеет:
  • Объяснять сложные темы и мгновенно отвечать на вопросы по курсу или уроку.
  • Быть наставником и помогать понять логику решения: для этого я задаю интересные и уместные вопросы.
  • За несколько секунд находить нужные уроки и материалы курса вместе с ответом.
  • Понимать тебя с полуслова и отвечать на голосовые вопросы так же быстро, как и на текстовые.
  • Бонус: первые 50 звёзд для использования помощника уже включены!

После прохождения курса вы получите сертификат

-20%1 600 ₴
1 280 ₴
12
12
24
12
12
12

Можешь попробовать курс, прежде чем платить

Каждый урок в Hillel Max – это чёткий и простой план. Удобный и понятный путь к знаниям. Сначала ты смотришь короткое видео, потом работаешь с примерами и теорией, рабочими материалами. Чтобы закрепить знания, ты проходишь тест или выполняешь практическое задание. И на финал – можешь проверить себя и усвоенное, просмотрев готовый видеоразбор этой практики от наших экспертов.

Смотри видеоуроки, когда удобно

Учись в своём темпе — без давления и дедлайнов. Перематывай, останавливай, возвращайся к сложным темам или пропускай уже знакомые и выбирай именно ту тему, которая тебе нужна здесь и сейчас.

Имей крепкую теорию под рукой

Чёткие и понятные объяснение помогут систематизировать знания. Каждую тему мы разбили на удобные блоки с примерами и ключевыми моментами для лучшего усвоения.

Практикуйся на реальных задачах и тестах

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

Выбрать курс
Возможностей
Обучения
Знаний
Практики
Возможностей
Обучения
Знаний
Практики
Bonuses block background image

Получи бонусы
за обучение

Получи XP за обучение
Выполняй ежедневные задания
Закрывай недельные отрезки
Собирай награды
Качай уровень
Получай бонусы, на которые можно купить следующий курс
Gift

Вопросы и ответы

  • Сколько времени нужно уделять обучению каждую неделю?

    В этом и заключается преимущество наших курсов — ты сам выбираешь темп обучения. Если тебе нужно быстро освоить технологию, ты можешь пройти курс в интенсивном режиме всего за несколько дней. Предпочитаешь учиться спокойнее? Распланируйте занятия в удобном для себя ритме.

    Кроме того, ежедневное обучение не только помогает лучше усваивать материал, но и приносит бонусные вознаграждения — выполняй ежедневные задания и зарабатывай, бонусные деньги для оплаты следующих курсов.

  • Будет ли доступ к материалам после окончания курса?

    Да, все учебные материалы останутся с тобой навсегда. Ты сможешь возвращаться к ним в любое время — чтобы повторить, попрактиковаться или освежить знания. Кроме того, ты будешь автоматически получать обновления курса, которые преподаватели добавляют в процессе улучшения и поддержки программы.

  • Что получает студент после завершения курса (сертификат, оценку, отзыв и т.д.)?

    После завершения курса студент получает именной сертификат, подтверждающий прохождение обучения. Сертификат можно добавить в резюме или профиль LinkedIn как доказательство вашего профессионального роста.

  • Можно ли проходить курс с телефона или планшета?

    Да, ты можешь проходить курс с любого удобного устройства — смартфона или планшета. Для большего удобства ты можешь скачать наше мобильное приложение Hillel LMS, где доступны все функции платформы: просмотр видеоуроков, квизы, конспекты и практические задания. Учись там, где тебе комфортно — дома, в дороге или даже в кофейне.

  • Можно ли попробовать курс без оплаты?

    Да, каждый курс предполагает бесплатный ознакомительный режим. Ты получишь доступ к нескольким урокам с разным типом контента — видео, конспектами, квизами и практическими заданиями. Это поможет тебе оценить качество преподавания, удобство платформы и формат подачи материала.

  • Могу ли я получать бонусные деньги за обучение?

    Да! Во время обучения у тебя есть возможность получать бонусные деньги просто за то, что ты учишься.

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

    Это отличный способ инвестировать в себя и при этом зарабатывать, двигаясь к цели с удовольствием.

  • Кто преподает на курсах?

    Мы всегда очень ответственно стараемся подходить к вопросу подбора Преподавателей в нашей Школе.

    Наши преподаватели — эксперты-практики из ведущих IT-компаний Украины и мира. Они имеют как опыт преподавания в нашей Школе, так и опыт менторства по месту их профессиональной деятельности.

    В своей манере обучения они делают упор на последние тенденции IT-рынка и исключительно на свой личный опыт для того, чтобы наши Выпускники имели наиболее востребованные знания и опыт работы с конкретными кейсами.

  • Могу ли я посмотреть профиль или видео с преподавателем до начала обучения?

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

    На ней указана вся необходимая информация: опыт, специализация и ссылки на профиль в LinkedIn или другие профессиональные ресурсы.

    Чтобы увидеть преподавателя вживую, обрати внимание на вводное видео курса — оно поможет тебе оценить его подачу, стиль объяснения и общий формат. Также ты можесь включить демо-режим курса, чтобы понять, насколько этот преподаватель тебе подходит.