FLEXBOX. Примеры верстки на flex. Учимся верстать на флексах. Часть четвертая - практика

Продолжаем учить верстку на флексах и пришло время практического занятия. Я сверстаю небольшой макет демонстрируя возможности модуля flexbox применяя его в разный ситуациях. Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера.

Дополнительно, игра flexboxfroggy:

Методология БЭМ за 17 минут:

Sublime Text 3 настройка установка плагины:

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[Code.bless_you]

Этот невероятно харизматичный рыжий бородач просто покоряет сердца IT-новичков))

[Polite_person_]

Я начал изучать фронтенд "через задницу", быстро изучил основы html и css и полез в JS и провалился в нем на 7 месяцев. Изучил основы, паттерны, некоторые библиотеки включая React и понял что все это не имеет смысла, пока я не научусь правильно верстать и твой курс просто спасение, все очень доступно и ёмко . А какая Наверное это покажется странным, но в твоих видео есть особая атмосфера уюта, как будто в суровую зиму я сижу в уютном срубе перед камином с глинтвейном укрывшись пушистым пледом =) Огромное спасибо за всевозможные шпоры. Многое из это курса уже было знакомо, но я все равно начал смотреть с самого начала и в каждом видео есть какие-то полезные мелочи и чем дальше я продвигался по курсу, тем больше находил недостающих пазлов которых оказалось приличное количество. Большое Спасибо за очень годный контент.

[darveterdarveter]

Вот смотришь чьи то уроки и буквально стараешься удерживать своё внимание и концентрацию. Постоянно хочется нажать на паузу и куда нибудь свалить, пойти пожрать, попить чаю и т. д.
У вас же есть особый талант, захватить внимание слушателя и увлечь его в процесс.

[xrplhgg]

ААААА!!!! ОГОНЬ!!! Это просто БОМБА!!! Все блин, вечером сижу и практикую, аки зубрилка-очкарик-отличник! Самый кайф, что есть макет. А если, при попытке сверстать самостоятельно, будет затык, то можно подсмотреть данный видосик еще раз (жаль, что лайк повторно нельзя поставить) - это просто кайф! ЖЕКА - ТЫ ЛУЧШИЙ УЧИТЕЛЬ!

[gpt_v]

0:46 hi block
3:15 footer
4:30 стили footer и hi block
13:07 what block
14:53 стили what block
18:17 columns block
21:20 стили
columns block
26:38 vertical block
30:50 стили
vertical block

[smissxp]

Начал смотреть твои видео и обучаться верстке уже во время войны, и я не один такой, в это тяжелое время твои видео помогают людям, которые потеряли работу, обучится новой профессии. Спасибо! Через год-два жди отчет о первых плодах подвальных фрилансеров!:)

[zip]

чувак ты просто гений!!!! даже игру подложил.. столько пользы приносишь людям, желаю чтобы тебе эти поступки возвращались с троицей

[AlinaEmv]

Мозг кипит и работает, но только потому, что не возможно остановиться смотреть и учиться. Каждый раз по пазлику собираешь знания, которые уже начинают выстраиваться в какую-то понятную картинку.
Спасибо огромное! Респект и уважение!

[Marzazim]

Всё так сложно...Но одновременно и выглядит так легко, когда верстает Жека)
Наверное эта домашка займёт у меня не один вечер..)
Спасибо за труд, спасибо за помощь новичкам !!! 👏👏👏
Отдельное спасибо за ссылку на игру с лягушками! :D

[eybjzmz]

<div> </div> много <div> </div>, Флексы это круто, главное в <div> не запутаться теперь

[ffedchik]

"Ситуация у нас значительно усложняется и, собственно, нам ничего не остается делать, как это дело сверстать" (c) Жека

[ЖекаКрылов-оз]

Жека спасибо. 2022 год почти, а курсы твои все ещё лучшее что есть!

[yerassylkelsingazin]

Время 4 часа утра, а я верстаю на флексах и не хочу останавливаться. Вот это я понимаю топовый контент) С меня однозначно лайк + подписка!

[awesome]

Не понимаю тех людей, которые ставят дизлайк на такого позитивного человека, который несет знания для их же)
Спасибо Евгений)

[viya]

Великолепный выпуск, актуально даже спустя 4 года, огромное спасибо за ваш труд😊

[iliaturchin]

Жека, спасибо тебе большое за такую колосальную работу, очень эффективные и полезные уроки.
У меня есть просьба и думаю многие поддержат - сделай урок по структуре HTML страницы, ты используешь много оберток, я не видел тэгов section итд, очень интересно понять логику по которой ты строишь блоки и обертки, кажется это будет очень полезное видео.

Спасибо!

[hmxfhjq]

<div class="comment__text">
<p>отличная шпаргалка, ни дать, ни взять :) </p>

<p>И как всегда отличный урок. Ура! Flex-ы прошли, верстать стало еще интереснее, уже не пугают сложные шаблоны. </p>

<p>Спасибо, Жень) </p>
</div>

[veronikawpda]

на дворе 2023, а канала лучше все еще нет. Спасибо тебе, что создаешь такой крутой контент, даришь мотивацию и помогаешь не заблудиться в дебрях фронтенда. Cмотрю твои видеоуроки почти каждый день и каждый день благодаря тебе развиваюсь. Твой труд бесценен. С нетерпением жду осенний курс по верстке!!!

[nikolay]

Четко, понятно, емко.с первого раза не одолеть, но нет сомнений что посидев несколько часов сверстаю такой же макет.Как можно обьяснить достаточно сложную вещь таким понятным языком для меня загадка.Отличный практический урок!!!

[vlfcpvc]

Дуже Дякую Вам за Чудовий Відеоурок від Справжнього Респект Величезний!!!