Открыто

CSS Grid. Полный практикум: от основ до тонкостей [HTML Academy]

Тема в разделе "Курсы по программированию", создана пользователем Топикстартер, 20 авг 2020.

Цена: 11900р.-93%
Взнос: 746р.

Основной список: 18 участников

Резервный список: 9 участников

  1. 20 авг 2020
    #1
    Топикстартер
    Топикстартер ЧКЧлен клуба

    Складчина: CSS Grid. Полный практикум: от основ до тонкостей [HTML Academy]

    [​IMG]
    Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени

    Раздел 1
    Технология
    • Текущее состояние технологии
    • История развития и версии спецификаций
      • 1 версия спецификации
      • 2 версия спецификации
    • Принцип использования технологии, отличия одномерных и двумерных сеток
      • «Grid не замена Flexbox»
      • Grid for layout, Flexbox for components
    • Основная и важная терминология при использовании гридов
      • grid контейнер
      • grid элемент
      • grid линия
      • grid ячейка
      • grid полоса
      • grid область
      • grid поток
    • Использование инструментов отладки
      • Chrome dev tools
      • Firefox Nightly
    Раздел 2
    Отрисовка сетки в Grid контейнере
    • grid-template-columns и grid-template-rows
      • Назначения свойств
      • Принцип организации строк и колонок
      • Явные и неявные grid-column и grid-row, а также влияние потока на их построение
    • Единицы измерения
      • px, %
      • fr и принцип его вычисления
      • Комбинирование свойств в рамках одного grid контейнера
    • Расположения элементов внутри сетки по вертикали и по горизонтали
    • Grid линий
      • Именованные линии
        • имена по умолчанию
        • ручное именование
      • Числовые значения линий по вертикали и по горизонтали
        • различие отрицательных и положительных номеров линий
      • Комбинированное обращение к линиям
    • Расстояние между ячейками
      • column-gap и row-gap
      • Размеры в разных единицах измерения
      • Сокращенное название gap
      • Устаревшие свойства: grid-column-gap, grid-row-gap, grid-gap
      • Использование gap с flexbox
    Раздел 3
    Базовое расположение Grid элементов внутри контейнера и их расстановка через линии
    • Базовый принцип расположения элементов внутри сетки по вертикали и по горизонтали
    • Правила использования базовых свойств и их поведение
      • Grid-column-start и grid-column-end
      • Grid-row-start и grid-row-end
      • Возможные значения свойств
        • Имя линии
        • Номер линии
        • Ключевое свойство span
        • Свойство auto
      • Позиционирование Grid элементов по вертикали и по горизонтали
        • Фиксированная позиция элемента
        • Позиционирование элемента относительно других элементов
        • Поведение других элементов при фиксировании одного из элемента
      • Частые ошибки и поведение гриды при неверном использовании свойств
        • Широкие элементы и minmax(0, 1fr)
    • Grid-column и grid-row для элементов
      • Правила использования коротких свойств для позиционирования элементов
    Раздел 4
    Расположение элементов используя шаблоны областей
    • grid-template-areas
      • Правила именований областей grid-area-name и отрисовки шаблонов
      • Значение .(точка) для пустой ячейки
      • Значение none
      • Примеры полного перестраивания сетки в медиа запросах
      • Частые ошибки и их последствия
    • grid-area для элемента
      • Правила установки имени
      • Использование свойств row-start, column-start, row-end, column-end для отрисовки области
      • Использование эмоджи как имен областей, и почему их не стоит использовать
    • grid-template для контейнера
      • Правила использования сокращенной записи
      • grid-template-rows, grid-template-columns, grid-template-areas одним свойством
    Раздел 5
    Выравнивание элементов внутри Grid и выравнивание отдельных элементов
    • justify-items для выравнивания внутри сетки по горизонтали
    • align-items для выравнивания внутри сетки по вертикали
    • place-items как короткое свойство для выравнивая внутри сетки по вертикали и горизонтали
    • justify-content для выравнивая всей сетки по горизонтали
    • align-content для выравнивая всей сетки по вертикали
    • place-content как короткое свойство для выравнивая всей сетки по вертикали и горизонтали
    • justify-self для горизонтального выравнивания элемента внутри ячейки
    • align-self для вертикального выравнивания элемента внутри
    • place-self как короткое свойство для выравнивания элемента внутри ячейки
    Раздел 6
    Продвинутые техники построения и заполнения Grid
    • Построение автоматических колонок
      • Единицы измерения:
        • auto и его значения для вертикали и горизонтали
        • min-content, max-content, fit-content
        • auto-fill, auto-fit
      • Функция repeat() для генерации большого количества линий и строк
        • нюансы работы с auto-fill и auto-fit
        • отсутствие вложенности
      • Ключевые особенности при построении сетки используя auto-fill и auto-fit
      • Адаптивные сетки без медиа выражений
    • Использование именованных линий для упрощения интеграции с CMS/JS
    • Автоматическое распределение элементов по ячейкам с нарушением порядка
      • Проблема с «дырами», которая может возникать в сетках с элементами разных размеров
      • Проблемы с изменением позиции элементов в потоке
      • Ячейки с измененным z-index + position: absolute
    • Гриды одним свойством grid для контейнера
    • Анимированные сетки Grid
      • Свойства, поддающиеся анимациям
      • Поддержка браузерами
    • Свойства, которые не влияют на сетку
      • float & clear
      • margin ( расстояние между ячейками)
      • vertical-align
      • ::first-line & ::first-letter
      • Если контейнеру задан float или position: absolute
    • Проблемы кроссбраузерности (Safari vs Chrome)
      • grid-auto-row и -webkit-min-content
    Раздел 7
    Гриды и IE11
    • Особенности поддержки старой версии спецификации
      • Поддерживаемые и неподдерживаемые свойства
      • Особенность поддержки частей спецификации
    • Использование Autoprefixer
      • Использование grid-areas для генерации совместимого синтаксиса на колонках\строках
      • Генерация флекс-фолбэка для неизвестного количества блоков
    Раздел 8
    Grid Layout 2 уровня
    • Проблемы первого уровня
    • display: contents и subgrid для создания вложенных сеток
    • Состояние 2 уровня спецификации
    • Математические принципы расчета размера вложенных сеток
    • Отладка вложенных сеток
    Раздел 9
    Grid Layout 3 уровня
    • Masonry (Pinterest) Layout
      • Вычисление колонок с помощью Javascript
      • Flexbox — необходимо ограничить высоту контейнера
      • CSS columns — неправильный (вертикальный) порядок tabindex
      • Grid — выравнивание блоков по горизонтальным линиям, которых не должно быть в Masonry
      • Экспериментальная версия Masonry в FF Nightly
     

    Вложения:

    3 пользователям это понравилось.
  2. Последние события

    1. sliding
      sliding не участвует.
      26 ноя 2024
    2. Corfus
      Corfus не участвует.
      20 ноя 2024
    3. skladchik.com
      В складчине участвует 20 человек(а).
      13 ноя 2024
    4. Natt1
      Natt1 не участвует.
      6 ноя 2024
  3. Обсуждение
  4. 30 мар 2021
    #2
    IC1101
    IC1101 ЧКЧлен клуба
    Здравствуйте, курс уже вроде вышел по этой ссылке - Скрытая ссылка. Стоит ли ожидать?