Адаптивная верстка с Flexbox и Grid.
Ткаченко Анастасия
Frontend Developer
01.01.1960
19:00 - 21:00
Рейтинг: 5.
Проголосовало: 40
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
811
01.01.1960
120
1044
01.01.1960
120
1075
01.01.1960
120
1039
01.01.1960
120
2155
01.01.1960
120
1100
01.01.1960
90
1470
01.01.1960
120
891
01.01.1960
120
1578
01.01.1960
120
1349
01.01.1960
120
1394
Что должен знать FrontEnd разработчик в 2024 году
13.02.2024
FrontEnd – один из самых легких направлений разработки в IT. Он выгодно отличается тем, что сочетает в себе программирование и творчество, поскольку девелопер работает над оживлением дизайнерского макета и созданием соответствующей пользовательской логики.
Как правильно заключить договор на разработку сайта: советы для фрилансеров
09.01.2023
Фрилансеры не всегда заключают договор на разработку сайта с заказчиками, полагаясь на договоренности, озвученные устно или сформулированные в переписке. Ведь сам процесс согласования и подписания документов занимает определенное время и требует усилий. Впрочем, сотрудничество на доверии достаточно рискованно для обеих сторон. Кроме того, что один из участников может безнаказанно отказаться от выполнения своих обязанностей, есть немало нюансов, которые затрудняют сотрудничество в случае отсутствия документально заверенных алгоритмов работы. Даже когда обе стороны намерены добросовестно выполнить все договоренности, их может подвести банальное недоразумение.
Что должен знать FrontEnd разработчик в 2023 году
02.01.2023
Так какими технологиями необходимо владеть, чтобы стать Intern/Junior FrontEnd разработчиком в 2023 году? Проанализировав вакансии на украинском рынке айти, мы составили список актуальных инструментов, которые обычно требуют работодатели от кандидатов. Их перечень – ниже в статье.
ТОП-10 лучших видео по FrontEnd
06.05.2021
Друзья, сегодня мы подготовили для вас подборку лучших вебинаров от ITVDN по направлению FrontEnd. В рейтинг были включены как познавательные вебинары с актуальной информацией, так и вебинары прикладного характера, которые нацелены на совершенствование ваших навыков написания кода. Давайте приступим к их рассмотрению.
Что должен знать FrontEnd разработчик в 2021 году
30.03.2021
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Кто такой Full-stack разработчик
29.07.2020
Full-stack разработчик (произносится “фулл стек”) — это некий мастер на все руки в мире веб-разработки. Ему под силу реализовать как клиентскую, так и серверную сторону приложения, которыми, обычно, занимаются FrontEnd и BackEnd разработчики раздельно друг от друга. Таким образом, Full-stack специалист способен в одиночку вести проект от начала до конца.
Что должен знать FrontEnd разработчик в 2019 году
06.11.2019
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Что такое адаптивная верстка и зачем она нужна
15.05.2019
Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.
Обзор конструкторов сайтов – критерии выбора и преимущества использования
03.05.2019
Конструкторы сайтов представляют собой сервис по самостоятельной разработке интернет страниц. В отличие от CMS они просты в управлении, а также открывают множество возможностей настройки и опций, востребованных в современном онлайн мире.
Тренды веб-разработки на 2019 год
04.01.2019
Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать!
Инструменты Vue.js разработчика
27.11.2018
Когда вы начинаете свои эксперименты с Vue и открываете инструменты разработчика в браузере, вы обнаружите предложение загрузить инструменты разработчика Vue.js по указанной ссылке.
Топ-5 лучших фреймворков для Python-разработчиков
07.11.2018
Сейчас трудно представить себе любого девелопера без использования фреймворков. Здесь вы найдёте 5 лучших и наиболее признанных фреймворков для Python-разработчиков.
комментарии и обсуждения