Адаптивная верстка на Flexbox и Grid

Промокод на скидку 15% на все курсы ITVDN- H94BCAB

Flexbox и Grid – технологии, которые широко используются в верстке сайтов и существенно упрощают задачи обеспечения адаптивности.

О технологиях:

CSS Flexbox (Flexible Box Layout Module) — модель макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
CSS Grid Layout - система двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля.
В ходе вебинара будут продемонстрированы возможности этих технологий и преимущества их комбинации на практике (в каком случае какую технологию нам необходимо использовать) для верстки адаптивных страниц с Flexbox и Grid.

План вебинара:

1) Знакомство с технологиями Flexbox и Grid.
2) Создание desktop версии web-страницы.
3) Добавление медиа запросов на страницу для адаптивности.

[ITVDN]

🔥Промокод на скидку 15% на все курсы ITVDN - 4YOUTUBE
Запишись на бесплатный пробный урок!

[Aoll]

Понятно, подробно, но и без лишних затягиваний. Ещё и очень приятным голосом )
Хорошо и полностью рассмотрен достаточно сложный пример.
Нужно больше обучающих видео такого качества )))

[gwgukcu]

Огромная благодарность Вам!!! Так все понятно, свойство написали, сразу результат показываете! Без лишних слов. Вам бы методички писать!

[lljwyjb]

Долго не мог понять grid, хотя flex дался легко. Лучший курс для понимания двух инструментов. Спасибо!

[zbmcapital]

Огромное вам спасибо за проделанную работу, очень рад что есть такие преподаватели и каналы;)

[DevMagazineChannel]

Классный обзор, все лаконично. Спасибо

[Nostradamus]

На словах здесь стилей кот наплакал, я заплакал)))

[Nostradamus]

Очень классное видео, актуальное, только удивился, помоему актуальная семантика предполагает заворачивать ссылки меню в <ul><li><a>

[KimarTV]

novalidate разве не в форме указывается?

[MyNameIsRishat]

Правильно ли меню в хедере писать просто через тег a, а не через списки? Где-то я читал, что так делать нежелательно, в смысле для правильной семантики.

[mfugkdt]

Видео отличное, жаль пропустила он-лайн трасляцию. Вопрос: Если мы в медиа запросах для 800 указали .blog-desc-container {
font-size: 14px; margin-top: 70px;} зачем мы в медиа запросах для 600 пишем такие же свойства для этого контейнера?

[lyqjweu]

кто нить может подсказать, вот как она поняла, почему в хедере взяла 1 фракцию потом 3 потом опять одну???

[javascript]

30:34 Начало верстки html структура headera
36:08 Начало css
38:08 Стили для header контейнера Grid
41:09 Flex
42:50 в верхнем регистре
44:50 flex для иконок
48:21 Media запросы для адаптивности
51:19 добавления иконки бургер меню
57:00 Верстка основной секции

[javascript]

1:33 = выравнивание по вертикали и горизонтали

[smillims]

тег hr уже давно как устарел в html 5. можно было через псевдоэлементы линии сделать

[Nostradamus]

И думаю, проще всего обнулять все стили одним файлом ресет

[MyNameIsRishat]

И вы тоже используете медиазапросы для адаптива, а кто-нибудь вообще пишет адаптив чисто на гридах?

[_splash]

Ага, когда про существование pixel perfect узнаете или, что ссылки в нав обарачиваются в список, а может еще и увидите область клика на логотипе которая больше него, то можете некст видос снять, но реклама как для продажника бездарных курсов норм

[alexlisouski]

с названиями классов совсем пИчаль. по бэму можно было проще все назвать