Адаптивна верстка з Flexbox та Grid.
-
TypeScript
-
Розробка Windows Store додатків с JavaScript и HTML5
-
Angular Базовий
-
Roadmap для вивчення FrontEnd
-
Підкорюємо React Context: секрети, приклади та найкращі практики
-
Що має знати веброзробник у 2023-2024 роках?
-
Як стати програмістом? Python, Java, FrontEnd чи .NET – що обрати?
-
Огляд Front-end фреймворків та їх актуальність у 2023 році
-
FrontEnd для новачків. Створюємо лендінг з нуля
-
Яка різниця між Frontend і Backend розробкою?
-
Як стати Frontend-розробником у 2023 році
-
Як скласти резюме, щоб вас запросили на співбесіду
-
Як правильно скласти резюме для пошуку роботи в міжнародній IT-компанії
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.