Адаптивная верстка с Flexbox и Grid.
Flexbox и Grid – технологии, которые широко используются в верстке сайтов и существенно упрощают задачи обеспечения адаптивности.
О технологиях:
- CSS Flexbox (Flexible Box Layout Module) — модель макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
- CSS Grid Layout - система двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля.
В ходе вебинара будут продемонстрированы возможности этих технологий и преимущества их комбинации на практике (в каком случае какую технологию нам необходимо использовать) для создания адаптивных страниц
План вебинара:
1) Знакомство с технологиями Flexbox и Grid.
2) Создание desktop версии web-страницы.
3) Добавление медиа запросов на страницу для адаптивности.
Целевая аудитория:
Данный вебинар будет интересен начинающим Frontend разработчикам и верстальщикам, которые уже знакомы с основами HTML5 & CSS3.
01.01.1960
120
949
01.01.1960
60
2235
01.01.1960
120
1707
01.01.1960
60
607
01.01.1960
120
690
01.01.1960
90
2815
01.01.1960
120
796
01.01.1960
120
1202
01.01.1960
120
1918
01.01.1960
120
1451
01.01.1960
120
1246
01.01.1960
120
2676