CSS Grids and Flexbox in Responsive Web Design
Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и рассмотрим сходства и различия с сеткой построенной на флоатах.
Затем мы воспользуемся превосходным выравниванием Flexbox и функциями позицинирования, чтобы увидеть преимущества над сетками, которые мы делали флоатами. Наконец, мы завершим наш первый день рассмотрев общую проблему. У вас есть несколько элементов, которые вы должны выкладывать в столбцах и / или строках на веб-странице, но вы не представляете, сколько там эелементов. (Элементом может быть изображение, карта, медиа-объект или что-то еще, что будет считаться единицей контента.)
Во второй день мы погрузимся в CSS Grid, совершенно новую спецификацию, доступную в последних браузерах. Мы рассмотрим базовый синтаксис Grid, работая над макетом картины Мондриана в качестве примера, который мы создадим с помощью Grid. Затем мы перейдем к некоторым альтернативным синтаксисам Grid, рассмотрим вложенные и смещенные макеты сетки. Конечно, мы также рассмотрим проблемы совместимости - как мы можем сделать работу Grid в разных браузерах.
Наконец, при понимании и освоении Flexbox и Grid мы попытаемся объединить эти элементы для лучшего решения проблемы макета веб-страницы. К концу этого курса вы сможете сформулировать сильные и слабые стороны макета на основе float, Flexbox и Grid, и вы сможете создавать адаптивные макеты на каждой из этих технологий.
Ваш инструктор - Джен Крамер, уже более семнадцати лет Джен Крамер воспитывает клиентов, коллег, друзей и аспирантов о значении «качественного сайта». С 2000 года она создала веб-сайты, которые поддерживают бизнес и маркетинговые цели в независимом качестве, а также часть агентства. Джен является преподавателем в Гарвардской школе в области магистра искусств в области цифрового медиа-дизайна, преподавая не менее пяти курсов в год, консультируя студентов и помогая в разработке учебных программ.
Она также доступна для индивидуального частного обучения, индивидуального обучения в классе и случайных внештатных работ по веб-дизайну.
https://github.com/jen4web/fem-layout/
Видео в формате .webm - Работает в Google Chrome
