Узнать подробности и записаться на сайте школы на пробный бесплатный урокСайт школы

Курс CSS grid layout

Школа Moscow Coding School

В лихие 90-е мы верстали как могли — на флоатах, таблицах и на стиральной машинке. Голь была хитра на разные хаки, триксы и прочие «воркараунды», превращавшие верстку тривиального макета в лазерную капоэйру.

  • Сайт
  • Цена
    от 9000 рублей за весь курс
  • Срок обучения
    1 месяц
  • Количество занятий
    35 уроков

В лихие 90-е мы верстали как могли — на флоатах, таблицах и на стиральной машинке. Голь была хитра на разные хаки, триксы и прочие «воркараунды», превращавшие верстку тривиального макета в лазерную капоэйру. Когда появились гриды это сперва выглядело как пранк Николая Соболева — непохожий ни на что синтаксис, новый юнит измерения, адаптивность «из коробки» и подкупающе простая реализация большинства классических лэйаутов.

Что включает курс:

  • 2 практических проекта
  • Тесты на закрепление теории
  • 35 видео-уроков
  • Разбор и решение домашнего задания
  • Сертификат об окончании курса

Чему я научусь:

  • Понимать основные способы и приемы верстки
  • Понимать принципы работы сетки
  • Точно позиционировать элементы на странице
  • Внедрять респонсивность
  • Комбинировать сетку CSS с другими технологиями
  • Поддерживать устаревшие браузеры

Целевая аудитория:

  • Новички, желающие продолжить углублённое изучение CSS
  • Менеджеры, верстающие промо-материалы
  • Верстальщики, желающие освоить свежую технологию grid
  • Блоггеры, самостоятельно настраивающие шаблоны своего сайта

Программа обучения

Сетка CSS:

  • Как работает CSS Grid
  • Основные понятия
  • Поддержка браузерами
  • Сетка CSS на примере

Cтруктура сайта:

  • Планирование сетки
  • Единица измерения fr
  • Разбиение на области
  • Выравнивание контента

Функции и свойства:

  • Автоматическое размещение
  • repeat, minmax, auto-fit, auto-fill

Респонсивная вёрстка:

  • Планирование сетки
  • Сетка CSS и media-запросы

Обратная совместимость:

  • Статистика использования браузеров
  • Метод supports
  • Отступы и flexbox

Поддержка устаревших браузеров:

  • Проблемы поддержки сетки в Internet Explorer
  • Внедрение поддержки устаревших браузеров