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

Продолжаем учить верстку на флексах и пришло время практического занятия. Я сверстаю небольшой макет демонстрируя возможности модуля flexbox применяя его в разный ситуациях. Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера.
🔴 Файлы урока: fls.guru/files...
🔴 Макет fls.guru/files...
🔴 Шпаргалка по Flexbox: fls.guru/flexb...
🔴 Весь плейлист по FlexBox: • FLEXBOX. Учимся верста...
Дополнительно, игра flexboxfroggy:
flexboxfroggy....
Методология БЭМ за 17 минут:
• Методология БЭМ за 17 ...
Sublime Text 3 настройка установка плагины:
• Sublime Text 3 настрой...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

[@_SoNicos]

Женя, просьба. Во время вёрстки ты создаёшь много (на взгляд дилетанта) блоков: wrapper -> content -> hi -> container -> hi__row -> hi__body -> и только здесь первый флекс-элемент. Можешь как-то складно объяснить, почему их так много? Например, почему нельзя "остановиться" на блоке "container", присвоить ему дисплей: флекс, и в нём сформировать уже два элемента. Почему так много? Уверен, это правильно, но хотелось бы уложить в голове, чтобы не тупо списывать с экрана, а с пониманием создавать их? Буду благодарен.

[@_SoNicos]

Всё. Разобрался сам ))

[@NoName-lt5fu]

Нужна помощь! Всю голову сломал. flex: 1 1 auto; не применяется к .content. Другие свойства применяются а это нет. В остальном коде все верно

[@alexandreev2752]

@@NoName-lt5fu Аналогично, я сам не понимаю, почему футер не отодвигается вниз. Делаю все как в видео, два раза пересматривал и внимательно искал проблему, но все делаю верно. Пробовал даже через длинную запись, но все равно не пашет. Есть те, у кого такая же проблема? Можете помочь, пожалуйста? Буду благодарен!

[@over1679]

Обещал не выкладывать код урока, а в итоге выложил) привычка?

[@Code.bless_you]

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

[@FreelancerLifeStyle]

хех) Спасибо

[@luxarmiger5729]

Несомненно. Харизма налицо. Хотелось бы быть с ним знакомым в реальной жизни.

[@Code.bless_you]

@@luxarmiger5729 я недавно прочёл один комент под его видео. Там человек очень чётко выразил мысль. "посмотрел видео - будто с другом поговорил"

[@ГосподинАлексеев]

И не только сердца

[@АхмедХутиев-н4ч]

Истину глаголишь

[@Polite_person_]

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

[@FreelancerLifeStyle]

Спасибо большое! Очень ценю!

[@denyliu]

прям моя история

[@qAntBcn]

Ты не прав, верстальшик это отдельная профессия, основ html и css более чем достаточно, тк обычно верстка уже есть, а програмировать изучать придется все время... с версткой в разы проще, глянул вот такой видось и поправил верстку если приходится что то делать самому. Научится быть хорошим верстальщиком не сложно, в разы сложнее научится програмировать, тем более на javascript. Так что освоив слишком хорошо css тебе будет сложно переступить через порог комфорта, тк на css у тебя будет все получатся легко... а в програмировании совсем другие скилы решают.

[@igorchudin2541]

@@FreelancerLifeStyle Вам спасибо - выручаете очень!

[@АртемШермазанян-в2б]

@@qAntBcn ну это наверно зависит от того, с какой целью JS изучается (могу быть не прав), та и в общем выйти из зоны комфорта сложно, но нужно)

[@darveterdarveter4511]

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

[@abos4633]

не поспорю именно так

[@gpt_v22]

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

[@andrewkhar4615]

Вот молодец!

[@ДмитрийЯ-з2д]

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

[@FreelancerLifeStyle]

Спасибо большое! Стараюсь👍

[@ВиталийКабаков-ф5э]

Согласен. Я тоже в восторге. А ты не проверял верстку в IE? У меня в IE не корректно отражается блок columns. Ширины не хватает, чтобы поместились 2 колонки, хотя сверстано все по Жекиному уроку....

[@pervevgeniy]

@@ВиталийКабаков-ф5э Жека же в видео об этом говорил, что это лечится но лишь отчасти. Мне вот все интересно, IE какого хрена "динозавр" настолько проблематичен? Это же Microsoft, в чем проблема сделать пригодный для жизни браузер...первым делом при установке винды, устанавливается другой браузер.

[@ntbgaming5630]

@@pervevgeniy Они же заменили его на Edge )) Вместо того, чтобы лечить старый сделали новый))

[@ВладиславТкаченко-х3ж]

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

[@БузургмехрАзизов-э1г]

Как успехи спустя месяц?

[@yonameinoname2021]

Это правда.

[@АндрейСереда-н8х]

Podderjivayu. Ya toje na4al mesyats nazad!

[@bebroy254]

как успехи?

[@Gamer-bg7rb]

@@bebroy254 я начал год назад, сейчас живу на Кипре, жена модель, особняк 4 этажа. Надеюсь, замотивировал вас

[@ffedchik]

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

[@FreelancerLifeStyle]

Ахах)) Прикольно))

[@ffedchik]

@@FreelancerLifeStyle Действительно, удачный экспромт вышел :)

[@johnnyrocketkite4738]

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

[@relaxing_sounds_zen_meditation]

Всё сверстаем!!!

[@BohdanVR666]

@@johnnyrocketkite4738 сверстать бандитов пополам)

[@user-zip356]

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

[@AlinaEmv]

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

[@Денис-ч1ц5ч]

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

[@Dim_on67]

Дело не во флексах, это методалогия Бэм требует такой структуры

[@Marzazim]

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

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

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

[@andeveloper]

Август 2022 - все еще актуально и лучше нет не где ! Спасибо, Жека !

[@ДарьяДарья-ж9к]

+август 2022 - отдельное спасибо за шпаргалку!!!!

[@Roky2k2009]

Уж 2023 год почти, а курс всё еще в топе!!! Спасибо Женя!

[@denzor8]

@@Roky2k2009 да кстати

[@Mc-295-v3q]

март 2023, сижу в Нью-Йорке в шелторе - 4-х звездочный отель в 10 минутах от тайм сквер, кормят, поят денег на детей дают. Учусь))) Приезжайте! ♡♡♡

[@yerassylkelsingazin2408]

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

[@FreelancerLifeStyle]

Супер, спасибо!

[@luxarmiger5729]

А я в час ночи встаю, чтобы заниматься, изучать и жить, а работаю в свободное время (днем).

[@user-hm7xf9hj6q]

отличная шпаргалка, ни дать, ни взять :) И как всегда отличный урок. Ура! Flex-ы прошли, верстать стало еще интереснее, уже не пугают сложные шаблоны. Спасибо, Жень)

[@FreelancerLifeStyle]

Ахах, пожалуйста!

[@awesome5708]

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

[@АлёнаГусарова-о5й]

это завистники)

[@dovuret]

@@АлёнаГусарова-о5й нет... это те кто посмотрели за 2 недели и пошли устраиваться на работу с зарплатой 100500милионов долларов. НО ИХНЕЕ ОЖИДАНИЕ ОБЛАМАЛИСЬ.

[@ДианаГришенкова-ч9у]

Я проходила несколько разных курсов по верстке, но никак не могла понять, как пользоваться свойством flex: 1 1 auto, и всегда его боялась.... и только сейчас, посмотрев Ваш плейлист по флексам, я наконец осознала, что к чему. Спасибо большое за такие понятные уроки, я больше не боюсь))

[@SrAmigo-qp9uf]

Всё класс, писал код с тобой, больше 400 строк, запутался 10 раз, распутался примерно столько же )) Пока что сложно не запутаться и всё понять, но надеюсь со временем всё дойдет. Спасибо за уроки!

[@viya98]

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

[@Дмитрий-д8о6м]

​@@da-cg1rwпривет, я сейчас его верстаю, что-то не понятно?)

[@zzzzzzzvvvvvvvv]

Макет не работает. Где его взял?

[@ДанилаШиянов]

@@zzzzzzzvvvvvvvv работает макет

[@nikolay7618]

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

[@FreelancerLifeStyle]

Супер! Я рад что полезно!

[@alexeybelous938]

Я чувствую как становлюсь умнее, знания буквально в моей крови, спасибо вам Евгений за такой чудесный курс👍

[@FreelancerLifeStyle]

Я рад! Пожалуйста!

[@mykolanychyporuk9530]

ну шо, и как?

[@and_Fenix]

37:37 просто в голос)) я понимаю как это все тяжело, но вот такие моменты...они бесценны, спасибо, Евгений. Оплату первого своего заказа на фрилансе однозначно переведу вам, такой труд рано или поздно должен вознаграждаться!

[@iliaturchin133]

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

[@FreelancerLifeStyle]

Отдельный урок о семантике будет позже. По структуре что-то придумаю

[@bukanaka]

Полностью поддерживаю! Было бы очень полезно!

[@mishkaus1799]

@@FreelancerLifeStyle видео называется «Методология БЭМ»?

[@dionis6805]

@@mishkaus1799 такой же вопрос

[@euejcgjaiehdjwus6886]

блин, так и не сделал

[@Александр-б6н2в]

Да прибудет с тобой сила!

[@FreelancerLifeStyle]

Спасибо! 💪

[@jannyWelter]

боже, дивлюсь твої відео і постійно надихаюсь. Видно що рука набита годинами практики і мені теж треба лише практикуватись і дивитись твої відео щоб навчитись так само. Помітила, що після того як вже чомусь навчилась, поробила домашки та просто сама поверстала, відео сприймається зовсім по іншому (особливо коли передивляєшся через якийсь час) - Ти вже розумієш де б це я могла використати, щоб я зробила по іншому. Це я до того що будь які твої відео корисні на всіх етапах. Так я і нагадую собі що забула, і препеосмислюю свої роботи. згадую як при перших відосах думала: що? куди то все сувати? нічого не запам'ятовувалось тому що сприймала це все як просто набір слів. Але чим більше дивилась і чим більше намагалась практикуватись тим краще і краще. Окремо хочу подякувати про середній час відео. Дуже допомагає мотивувати себе: просто меленьке відео і все, але дивишся одне, а потім така ,ну ще одне, таке ж коротке. І не помітив як вже знаєш так багато того що можна використати

[@FreelancerLifeStyle]

Я радий що корисно!

[@ВикторКузьмичев-о4ы]

Я понимаю что html и css не сложно выучить, и собственно выбрал твой канал для этой цели. Но как ты это легко делаешь, меня прял разрывает. Очень хочу так же легко и быстро верстать!!!!! ОГРОМНОЕ СПАСИБО ЗА ТВОИ УРОКИ!!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@qAntBcn]

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

[@lukasmog777]

это бомба,а не уроки!максимально все разжевано. После таких уроков действительно хочется садиться и писать код.Спасибо тебе!!

[@FreelancerLifeStyle]

Я рад! Пожалуйста!

[@veronikawpda7870]

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

[@dnevnikdevstvennika_]

у меня не плохой

[@СергійК-з5т]

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

[@valentyndubin5441]

Продал бы душу за такой мануал, когда их учил😂!) Очень годно вышло👍👍👍👍. За фишку с отрицательным отступом контейнера, большое спасибо!) Как всегла лайк👍)

[@FreelancerLifeStyle]

😅Ахах, да уж, есть такое) Фишка с отступами реально выручает! 🤘

[@efremandre]

@@FreelancerLifeStyle а как лечить в ie 11? Отрицательный паддинг там не работает, из-за этого врап переносит каждый блок на новую строку, а не оставляет по два. ((

[@ssidorchik]

эта фишка придумана давным давно, бутстраповская сетка на таких отступах и существует

[@_ArMoRi]

@@efremandre солидарен, как раз прохожу. Не вкурил этот момент

[@evgenfleysher]

Смотрю твои уроки почти конце 2022 года. Я думаю ты уже набрал аудиторию и кучу лайков, но всё ровно спасибо тебе за твоё время и знания.

[@russiatraveladvisor1168]

Нереальное огромное большущее спасибо! Полностью сверстала макет от начала до конца, видео расставило почти все по полочкам, очень помогли Ваши советы видео про БЭМ технологию, а так же плагины. На говно-курсах от SkillBox даже и близко о таких крутых вещах не рассказывают. Просто бомба! Как стану полноценным фронтендером, буду помнить кто дал толчок к движению! Огромнейшего Вам счастья за столь крутой канал и работу!

[@FreelancerLifeStyle]

Пожалуйста! Я рад что полезно!

[@portrail1854]

Avgusta, как успехи? мм

[@ИгорьЧернов-п7я]

Как твои успехи?

[@Евгений-м3у4ц]

пожалуй и я спрошу) как успехи?)

[@indexscript2518]

Ты прям вдохновляешь честное слово! Respect за такой high level!

[@FreelancerLifeStyle]

Спасибо!

[@user-zw7pq2pf5k]

Дуже дякую за домашнє завдання. На перший погляд воно є складне. Але, щоб зрозуміти флекси, саме то, що треба!

[@user-uc9od3ns1m]

Пересматриваю 4-й раз весь курс, и каждый раз нахожу что то для себя новое, фронт не лезет никак(после бек-енда учить фронт кажется труднее(( ), но сейчас благодаря твоим усилиям, я его всё таки выучу, спасибо огромное за твои труды)

[@andrew-1]

Привет. Ты сначала выучил бэк-енд и перешел на фронт?

[@user-uc9od3ns1m]

@@andrew-1 не, хотел фул стеком стать, было интересно))

[@justfisher2920]

Спасибо Жека, у тебя классный подход к контенту, ты по истине талантливый человек, всё очень доступно и понятно объясняешь, дай бог тебе здоровья и твоим близким, на твоих роликах освоил почти все основы html и css, полноценно верстаю уверенно макеты набивая руку и постепенно перехожу на JS, зная как это работает из внутри легче осваивается каждая ступень программирования, не важно какой мы национальности и на каком языке говорим по мне хоть на английском или на китайском, в любом случае талантливых людей не выбирают по цвету волос и глаз. А ты именно тот персонаж, кто достоин огромного внимания и аудитории, "Обучайся, развивайся, и помни - живи, а работай в свободное время!" всегда проговариваю у себя в голове этот девиз. Жму руку!

[@Wieterok]

шпоргалка топчик, завжди є куди підглянути), та завжди корисно. Дякую за Вашу роботу!!!!

[@bohdandaskaluk647]

Привіт сен-сей Женя) скажу так купив курс на сайті не буду рекламувати на якому думаю сам догадуєшся) начав дивитися і вобщє нудно ну ніяко( і тут нечайно попав на одне із твоїх відео , подивився його і поняв що викинув гроші в повітря. Коротко кажучи дякуючи тобі і твоїй ювелірній роботі вже знаю на багато краще. ДЯКУЮ тобі за це! щоб ти і твоя сімя були здорові і щясливі!!!! мирного тобі неба над головою і Слава Україні!!

[@loralinda4398]

Гениально, как всегда. Хочу у тебя учиться. Ведь учиться нужно у лучших. Вот закончу свое обучение и пойду к тебе, если возьмешь.

[@FreelancerLifeStyle]

Спасибо! Буду рад помочь!

[@trace4526]

Дуже дякую Вам за контент. Ваші слова та уроки надихають! Все так розбірливо та зрозуміло. Дякую Вам за можливості розвиватись!)

[@yuliaradevich4703]

Когда контент настолько годный, что заходишь с телефона поставить лайк, тк на компе не авторизован) Ты очень крут, спасибо за твои видео!

[@FreelancerLifeStyle]

Спасибо! Я рад!

[@ivangusev8752]

Спасибо большое Евгений, за ваш контент, мы с женой учимся на фронтенд разработчиков и ваши видео очень помогают нам! Здоровья и благополучия вам и вашей семье!!!

[@ЕленаКозлова-э1ж]

Спасибо, огромнейшее! Евгений, Вы единственный человек кто смог мне объяснить что такое flex. Как им правильно пользоваться и где можно применять. Аж легче на душе стало. Как гора с плеч. Не люблю, когда что то не понятно. Очень нравится подача материала, четко без "воды", все по существу. И главное Ваши показы кода. Я хоть теперь стала понимать что верстать можно и нужно не боясь. Еще раз, большое спасибо!

[@Chih-op7pt]

Супер уроки для начинающих практиков! Понятно всё, что происходит на видео!) Было бы отлично понаблюдать уроки в таком же формате по JavaScript =)

[@FreelancerLifeStyle]

Спасибо! Все будет!

[@МихаилРазуваев-ь6л]

Женя, видос как всегда на уровне. Спасибо за структурированную, полезную каждый день инфу!

[@FreelancerLifeStyle]

Спасибо! 👍💪

[@ViktoriiaFesyk]

Перед тим, як я знайшла цей канал, передивилась десятки каналів та відео. І хочу сказати, що не бачила крутішої людини, яка б так доступно пояснювала. Дякую Женя за твою роботу, ти допомагаєш і надихаєш😊🔝

[@ВолодимирМельниченко-л1й]

Тооооп, Жека, твои видео самые лучшие не останавливайся, как минимум я в тебя верю!!!!

[@FreelancerLifeStyle]

Спасибо)

[@kosflight]

Жека, как и все твои уроки это оазис среди большой кучи информации. Спасибо большое за урок!

[@FreelancerLifeStyle]

Я рад!

[@МихМихыч-в7е]

Если быть честным, то информация полученная здесь мне очень сильно помогла. Если бы не Женя со своими понятными объяснениями, сидел бы я еще наверное на HTML и вникал кто такое теги:-) Огромное спасибо тебе! Продолжай!

[@ghouldeadinside12posnoroll32]

Спасибо большое!! Наконец разобрался с флексами на все сто!

[@FreelancerLifeStyle]

Я рад!

[@АлександрЛанцов-д7о]

Спасибо большое вам за всё, что вы делаете! Ваши уроки просто огонь!

[@FreelancerLifeStyle]

Спасибо большое! 👍

[@VintonivCutePatterns]

ВАУ! У Ваc все так легко і просто виходить, а головне так швидко. Я дивилась відео в повному захваті і мрію теж це все "як сємки щолкати". Відео подивилась, буду повторювати!!!! Дякую вам за мега корисні відосікі!

[@user-dc9tf7cw6s]

Спасибо, Жека, это контент который мы заслуживаем! Начал обучаться по твоим урокам и это лучшее мое решение в 2022 году. Большое спасибо!

[@ЕвгенийВоронкович]

и как успехи?

[@islam8561]

Привет. Спасибо тебе за видео что ты сделал 4 года назад! Сейчас для меня а 2024 году когда начал изучать программирование оно бесценно! ОГРОМНЫХ ТЕБЕ УСПЕХОВ! подписка! лайк! комментарий!

[@bagafree]

Спасибо тебе большое друг, очень помогаешь своим контентом, скорейших успехов тебе в развитии!

[@FreelancerLifeStyle]

Спасибо! Рад что полезно!

[@АлександрСтадник-к6к]

Евгений ты делаешь огромный вклад в развитие IT сферы, больше чем многие копании и всё наше правительство вместе взятые. Спасибо !!!

[@volodymyrserhiienko401]

Женя - Бог викладання. Був би в мене такий викладач у школі, а ще й після в універі - я б тоді ніколи не подумав, що в айтішці складно взагалі. Дякую!!!

[@atastar9823]

Большое спасибо за пример, буду пробовать применять фишки разные 😌

[@dopahhhi3596]

"Можно приступать к флексу.." ©

[@FreelancerLifeStyle]

Нужно

[@parkant403]

Дякую тобі за твої відео, максимально детально розповідаєш... дитина з 2х років вже може починати навчання по твоїм відео. Супер пупер, палець до гори!!!

[@евгенийгорбунов-ы7щ]

И никто в количестве дивов открывающих и закрывающих не запутался?) У меня желание самому лечь в див и закрыться...)

[@vmekza]

Да, есть такое😂😂😂

[@andreiBylkin]

да, именно так, с головой залезть и руками глаза прикрыть )))) это же безумие какое-то )))

[@Евгений-м3у4ц]

тоже самое я из за такого количества совсем запутался((

[@vb8723]

@@Евгений-м3у4ц ? просто нужно разобрать для чего каждый див нужен. Я разобрался, записал и так намного легче. Но каждый раз думаю, что можно их написать меньше. Но лучше делать так как дает Жека, все разложено по полочкам и аккуратно сложено

[@Евгений-м3у4ц]

@@vb8723 и я уже разобрался)

[@АннаЗубенко-в4т]

Самое простое и понятное объяснение по flex😍 Некоторые вещи, которые не понимала после чтения документации и просмотра других роликов, разложились по полочкам. Спасибо Женя

[@cryptoneophyte]

Твои видео на века! Еще много лет пройдет, а люди будут учиться по твоим курсам! Дякую!

[@selleniya999]

Знаешь, мне иногда лень учиться, так я прихожу сюда набраться позитива. Ага. Твоих вибраций.

[@FreelancerLifeStyle]

Рад!)

[@СергейТемников-м8с]

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

[@FreelancerLifeStyle]

Спасибо! Рад что полезно!

[@wvvwersus]

И лайк, и подписка, и комментарий оставлены =) Верхушку и низ делала с тобой, потом стопнула видео и с помощью примера, конспекта и шпаргалки сделала всё остальное. Сейчас досматриваю видео, сравниваю своё с мастером. Пока из моих ошибок: 1) Картинки по ширине не ограничивала 2) Заголовкам отдельный класс не дала 3) Отступы между четырьмя блоками делала мерджинов, в видео вообще волшебство показано =)

[@ksuit_ru_girl6660]

вот почему все то, что я не понимаю из других видео, у тебя становится сразу ясно?)))просто гениальная подача

[@ЕленаУглицких-и3ъ]

Супер-полезная и ценная информация!! Спасибо за уроки! Очень рада, что нашла такой замечательный канал. Очень понятное объяснение даже для новичков. Отдельное спасибо за шпаргалки!!

[@Alibaba0192]

дякую за те, що ви робите! це дуже крутий та корисний контент! шкода, що не знала про вас раніше! щиро дякую!

[@paljm345]

Жеееесть, див в диве и дивом погоняет))))) Да, первое время надо будет ВСЕ комментировать))

[@jNilsOnn]

Жека, респект тебе! Очень добротный контент. Отдельное спасибо за шпаргалки и файлы к урокам. Делаешь с душой!

[@RomanKrets]

я это сделал! наконец-то сверстал макет, и даже что-то получилось Жэка, спасибо за твой труд!

[@ОлегСустов]

это просто бомба, нет это БОМБИЩААА!!!!настолько все круто! доступно и понятно!!спасибо тебе, за твои старания. Это бесценно)))

[@zelenyigor6919]

Классная шпаргалка. спасибо !

[@FreelancerLifeStyle]

Спасибо, рад что понравилась!

[@lmurlemurych4908]

Уже 2023 год, но видео по вёрстке до сих пор такие актуальные и интересные. Такая крутая подача материала и ещё с таким позитивным и заряжающим настроением, просто класс!) Хочется слушать и слушать и обучаться всему) Огромное спасибо за эти обучающие видео!!!

[@TmzMr]

Спасибо за контент! Очень полезный! Теперь могу претендовать на Full stack программиста)

[@FreelancerLifeStyle]

Пожалуйста!

[@vohidka]

Как всегда на высоте, посмотрел на одном дыхании! Пойду перекурю и вперед пытаться повторять)

[@Aletous]

Прикольні уроки, дуже доступно пояснюєте, але поки в методології БЕМ путаюся, дякую за вашу роботу!

[@alexey6525]

Мужик, все круто, посмотрел почти все твои видео, но есть одна проблема, меняй фоновую музыку, особенно в таких долгих видео, а то начинает немного напрягать) Если интересно, могу посоветовать ставить что-то вроде lofi hip hop - легкий, расслабляющий и главное ненапряжный саунд, часто встречал в различного рода обучалках.

[@FreelancerLifeStyle]

Спасибо за совет!

[@egorkas8166]

37:38 пересматривал раз 8 )) очень смешно! ты очень крут! спасибо тебе большое за все!)

[@ЕгорМельник-п4в]

Жека, все супер! Дуже дякую за видео по FLEXBOX. Дякую за зрозумілі пояснення властивостей FLEX - контейнера: display, flex-wrap, flex-direction; FLEX - елементів: flex-basis, flex-grow, flex-shrink та іншого. Продовжуй, будь ласка, робити такий же суперовий контент й надалі і такі суперові методи)

[@DashaG182]

Игра в описании супер! ;))

[@FreelancerLifeStyle]

Ага)

[@НикитаРыженко-р6т]

Жень, привет! У меня возникла трудность. Как пользоваться Flex я понял. Но трудность в записи HTML т.е "див в диве" Можешь как-то подробнее объяснить как это всё записывать, а то я теряюсь и не понимаю как это всё заворачивать. Или посоветуй литературу которую можно почитать. Заранее спасибо за ответ

[@tormentorigor]

я тоже не понимаю , зачем такая вложенность , просто пишу код и делаю в два раза меньше вложений

[@egorsychev9575]

@@tormentorigor Это и есть БЭМ, о котором говорил Женя в предыдущих видео. Вложенность позволят задать более конкретно CSS свойства для определенных DIVов. Более подробная запись тебе же пойдет на пользу + корректнее будет работать сайт, как по мне. По крайней мере, у меня так.

[@xvii5753]

Практика самый лучший способ. С практикой будешь понимать, что так проще

[@ЕвгенийЧерник-н5э]

@@egorsychev9575 , и какое это дает удобство? Где в БЭМ объясняется такая гигантская вложенность всего для двух элементов? Для чего он оборачивает заголовки, параграфы и другие элементы в div, если для этого есть специальные теги?

[@ИгорьБыченко-в3ы]

Просто супер подача, мне как начинающему все понятно, учу с нуля верстку и, пересмотрев много ЮТУБА, могу с уверенностью сказать, что твои уроки лучшие и самые понятные! Спасибо тебе огромное!

[@Философствующийсантехник]

Это да,Жека молодец!

[@ruslanstupets9521]

Доброго дня . Так я погоджусь зі всіма підписниками і коментарями . Що ви дійсно крутий мен 🙌. Але Женя дуже Вас прошу !! Зверніть увагу що деякі люди не можуть так скоро верстати . Прошу може коли ви верстаєте блоки . То трошки помаліше пояснювати : що обертає 1 блок , що 2 і так далі . А ви все пишете потім в css раз два блок 1 блок 2 , 3 . І все я вже чуть ноутбук не розбив 😂😂. Мені тема влекси тяжко іде 🤦‍♂️

[@denyliu]

Мощь! Контент великолепный! Не знаю, как дизлайк люди ставят, палец отсохнет за такое. Продолжай работу, и да прибудет тебе свободного времени больше! Есть вопрос: Я так понимаю, нам .container нужен только для горизонтального ограничения. А почему нам не задать ему padding: 50px 0; ,как ты Блокам задавал ? или то будет уход от БЭМ-методологии?

[@FreelancerLifeStyle]

Спасибо! Экраны разные, контейнер помогает при адаптации

[@mattiasmelton7566]

Воу, урок просто шикарен. Пересмотрел плейлист по Flex два раза, сделал конспект, потом посмотрел практику, проработал практику. Поднял свой скилл работы в редакторе на пару ступеней вверх.... Но все равно сломать мозг когда началась "матрешка" - получилось! Думаю - это дело практики и опыта... Спасибо Вам за подобные уроки.

[@OleksandrKever]

Два лайка поставил бы если можна было бы. Супер!

[@FreelancerLifeStyle]

Спасибо! Всегда можно сделать репост! :)

[@Жизнь-я3ъ]

Очень много вложенностей, очень. И потом на каждый див что-то навешивается. Непонятен принцип. Было бы здорово, если бы ты в видео пояснял, что вот этот блок для того, чтобы на него навесить вот такие параметры. А на вот этот блок их нельзя повесить, потому что... Я делаю меньше блоков, потому что не понимаю эту матрешку. Что-то получается, что-то нет. Можно все повторить за тобой и все выйдет правильно, но не понимая что и для чего выходит просто манки-верстка, что ни есть гуд. Буду очень признательна) Спасибо за твой труд) Чмоки.

[@euejcgjaiehdjwus6886]

Да, уж слишком запутанно все получается

[@Mayhem888]

согласен, на моменте создания большого количества вложенных дивов можно и поподробней.

[@ЛьошаБуйний]

Уроки просто супер! Подача матеріалу на найвищому рівні! Все доступно викладено, темп і характер тільки мотивують. Після кожного відео тільки більше віри в те, що в мене все вийде. Шпори це взагалі щось з чимось. Дуже вдячний за твої уроки. Сподіваюсь ти будеш продовжувати цю справу, адже саме такі уроки допомагають вчитись і розвиватись.

[@BLGamesChannel]

Жека привет! Рад новому видео как ничему другому!)

[@FreelancerLifeStyle]

Крутяк! Приятно слышать!

[@vasia19941]

6:37 почему footer после того как я ввел "flex: 1 1 auto;" в content не прижался. На просторах интернета нашел лишь то, что нужно поменять "min-height: 100%" на "min-height: 100vh". Почему так?

[@sofar1363]

У меня была аналогичная проблема. Как оказалось, у меня в обнуляющем стиле не было указано html, body{height:100%;}

[@faf8834]

игра flexboxfroggy супер классная, свойства запоминаются на раз два. Спасибо за такой качественный контент. Очень нравиться подача материала, все структурированно как надо. Лучший канал!!!

[@АлександрПахомов-г7ж]

24 уровень прошел ?

[@АлександрПахомов-г7ж]

потупил еще часок и прошел :)

[@igorykn3970]

19:59 Я только учусь, и мне непонятен этот момент - для чего создаётся класс item? Я сделал флекс-контейнером .columns__column {}, внутри которого .columns__image {} и .columns__body {}, в свою очередь состоящий из .columns__header {} и .columns__text {}. Можно ли было сделать так, или обязательно внутри .columns__column {} создавать отдельный блок - флекс-контейнер, если да, то почему?

[@antonsedchenko6332]

Для каждой группы контента желательно создавать блок обертку и класс. Тогда ты всегда сможешь выровнять элементы так как тебе нужно с помощью флекса. А также задать этот класс и другим, таким же карточкам, чтобы они приняли те же стили. В данном случае это просто расширяет твою мобильность, но можно сделать и так как ты. Если тебе понадобится дополнительный блок-обертка, чтобы выровнять элементы, карточки или целые секции, то ты всегда можешь создать дополнительный div.Так что это не проблема)

[@igorykn3970]

@@antonsedchenko6332 спасибо

[@kruganiumplay]

Если будешь рад лайку,то я буду рад его поставить :-)

[@FreelancerLifeStyle]

Я рад, спасибо!

[@mycopob]

Спасибо за полноценный и структурированный контент. И, конечно же, интересную манеру подачи материала. Благодаря этим урокам я понял несколько вещей: 1. Перед тем как начинать учиться верстке, нужно сначала правильно и полноценно настроить инструменты для верстки - выбрать программу и наполнить ее плагинами и правильно настроить. Подготовить шаблоны для css и html. 2. Учиться нужно на реальных шаблонах - простое заучивание тегов и свойств не дает результата. Спасибо и ждем новых видеоуроки и дополнение Шпаргалок.

[@Bugsy0987987]

Подскажите, в части где колонки, зачем мы создаем элемент item_row, ведь у нас уже создан Блок item, где мы можем разместить item__image, item__body и так далее?

[@doizemc499]

Да у авирпа диватоз просто)Он в разметке плодит много лишних сущностей

[@vovaklepets5052]

У меня вопрос по поводу иерархии. Хоть я и смотрел видео о бэм методологии и примерно понимаю что это такое, но всё равно. А конкретно зачем такая длинная иерархия. В пример могу привести 28:24 зачем к классу "vertical__column" надо было создавать класс "vertical__item" ? Ведь по сути они содержат в себе одно и тоже. Если этот момент мне кто-нибудь разъяснит я буду очень благодарен этому человеку. Заранее спасибо.

[@kseniya_vm]

тут дело в том, что vertical__column подразумевает собой flex-элемент, а vertical__item - контент внутри этого flex-элемента можете это рассмотреть в примерах в шпаргалке Жени или или в браузере в режиме просмотра кода (в браузере хорошо это показано со всеми отступами и размерами, когда курсор находится на нужной строке кода)

[@МаксимВергелюк]

Дякую вам Євген, за такі цікаві досить круті курси! Я дивлюсь і навчаюсь у вас на одному подиху! Ви дали можливість мені полюбити веб розробку! Дуже все продумали а саме головне доступно! Продовжуйте в такому ж стилі! Дякую ще раз!

[@deastortion]

Боже мой, я смотрю уже 20-ое видео и он ответил почти на каждый комментарий под каждым видео. Вау, просто вау. А на счет курса очень понравилось. Он будет пополняться?

[@FreelancerLifeStyle]

Да, курс пополняется, сейчас выходят уроки по JS