БЭМ методология. Практический пример

  Рет қаралды 141,836

От 0 до 1

От 0 до 1

4 жыл бұрын

Друзья, в видео расскажу о бэм нейминге, объясню принципы, которыми руководствовались ребята при создании данной методологии. Конечно же, теория это круто, но мы с вами пропишем бэм стили для целого лендоса, чтобы закрепить все на практике.
Макет из урока:
drive.google.com/file/d/1h2Tt...
Мой курс по верстке - from0to1.com.ua/
Урок по scss/sass:
• Препроцессоры SCSS/SAS...
Урок по Gulp:
• Gulp 4
Урок по Pug:
• Препроцессор html (jad...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Пікірлер: 508
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Полезные ссылки: Бонусы на patreon - www.patreon.com/from0to1 Курс по верстке - from0to1.com.ua/ Телеграм канал - t.me/from0to1com Подпишитесь на канал, если вам понравилось данное видео: bit.ly/2IFzwBZ
@Vladikslavik
@Vladikslavik 4 жыл бұрын
Было бы не плохо в качестве продолжения запилить к этому уроку второй урок по классам. Кто ЗА, ставьте лайк.
@user-cu6hg6go4c
@user-cu6hg6go4c 3 жыл бұрын
Из многих видео по БЭМу этот ролик считаю самым толковым. То самое чувство когда до тебя дошло то что долго не доходило 👍
@amirgali17
@amirgali17 4 жыл бұрын
У него всегда контент ТОП!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Amirgali Turalinov благодарю
@justspartak
@justspartak 4 жыл бұрын
Полностью согласен, коллега!
@user-lf3ht2ss8q
@user-lf3ht2ss8q 2 жыл бұрын
Согласен
@user-ei6wy1ew9f
@user-ei6wy1ew9f 2 жыл бұрын
100%
@user-um5vk4fn6l
@user-um5vk4fn6l 4 жыл бұрын
Спасибо, большое! Ты лучший, от тебя веет позитивом и очень грамотно объясняешь.
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
благодарю
@mnelenpridumivatimya
@mnelenpridumivatimya Жыл бұрын
Очень круто парень всё объясняет, а юмор всё это только украшает. Спасибо вам.
@sssbbb3768
@sssbbb3768 4 жыл бұрын
Редко пишу комментарий, но за такое должен сказать огромное СПАСИБО !!!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Tylsym Show благодарю)
@user-lt5xd2pq2b
@user-lt5xd2pq2b Ай бұрын
Большой респект за легкость и простоту подачи информации! Шутки, сокращение нудных терминов из доки до понятного человеку языку Крутой канал, однозначно лайк
@dmitriyk.2462
@dmitriyk.2462 4 жыл бұрын
Какой же ты все таки позитивный,очень приятно слушать, продолжай в том же духе!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Благодарю
@milahallmark862
@milahallmark862 Жыл бұрын
Блин, как приятно слушать твою речь, будто мне друг сидит объясняет, очень доходчиво, спасибо большое
@tatyanashurinova8161
@tatyanashurinova8161 4 жыл бұрын
Спасибо, что так хорошо объяснили! Наконец-то понятно, что такое БЭМ
@tatianaleonova335
@tatianaleonova335 4 жыл бұрын
Как обычно - крутое видео, было полезно :) нравится твоя подача материала: не нудно и с юмором. Однозначно лайк.
@zendoos
@zendoos 4 жыл бұрын
Вижу новый ролик,сразу ставлю лайк без вопросов) спасибо за топ контент !
@backda
@backda 3 жыл бұрын
Нескучный практис ) Интересно и доходчиво переданные знания. За макет для трени, отдельное спасибо!
@shakhboztashpulatov5225
@shakhboztashpulatov5225 3 жыл бұрын
Лучший контент про БЭМ который я видел когда либо, однозначно в ТОП. Спасибо что понятно и без воды, лайк и подписка с меня!
@user-nl2qw1su9y
@user-nl2qw1su9y Жыл бұрын
Одно из самых лучших объяснений, методологии. Спасибо!
@json_js
@json_js 3 жыл бұрын
Это просто гениальный человек, тебя настолько приятно слушать ! Спасибо тебе за контент, благодаря тебе я прокачался ;) продолжай в том же духе! Обучаюсь на курсе, но параллельно учусь у тебя.
@okla_ua
@okla_ua 3 жыл бұрын
Человек как будто отвечает на все вопросы возникающие в моей голове по ходу его объяснений) спасибо, очень качественно донес всю информацию
@Alina_Shhh
@Alina_Shhh 2 жыл бұрын
Очень круто воспринимается информация, когда видишь, что человеку самому в кайф то, что он делает, он на своем месте. Пасибо, что делишься!)
@Ultegra_
@Ultegra_ 4 жыл бұрын
Вадим приветствую, как всегда спасибо за топ контент, лайк сходу. Очень полезно про БЭМ знания подтянуть. P.S. Ждем сложную, если возможно модульную верстку с галпом и препроцессором.
@svhanz
@svhanz 2 жыл бұрын
Хорошо, что я таки зашёл на эту вечеринку! Очень понятно, информативно и весело! Вадим конечно огонь! Умение сухой технический язык перевести на обепонятный, при этом без потери технической сути, это немногие могут!
@Mykhailo_Vdovychenko
@Mykhailo_Vdovychenko 4 жыл бұрын
Давно ждал этого урока. Спасибо!
@user-sy6cl9mr6o
@user-sy6cl9mr6o Жыл бұрын
Спасибо тебе огромное дорогой человек за понятное и доступное объяснение простым языком такой важной темы! Но так как я только начал детально курить тему БЭМа, то еще есть некоторые вопросы и спорные моменты, но уверен с опытом все прояснится и станет на свои места.
@igor9830
@igor9830 4 жыл бұрын
Ля Ору с ваших объяснений) очень полезно и в то же время смешно - лайкосик однозначно!
@aleksius7819
@aleksius7819 4 жыл бұрын
любо-дорого глянуть, спасибо за твою работу, давай еще видосиков, тебе явно не хватает постоянства для развития ютуб канала.
@user-zk2kd3jm3c
@user-zk2kd3jm3c 3 жыл бұрын
Вадим, ты молодец! Держишь внимание ученика от первой до последней секунды видео. Потому что интересно и поучительно!!! 👍👍👍🤓☝️
@user-xg2on8ql7v
@user-xg2on8ql7v Жыл бұрын
Благодаря тебе и моим усердным стараниям, сейчас я приступаю к тестовому заданию по работе с полным пониманием "Что? Куда? Когда? И зачем?". Очень благодарна за уроки, если бы слово "комфорт" было человеком, я бы назвала твоё имя))
@alexsoft7073
@alexsoft7073 4 жыл бұрын
Очень интересный подход к объяснению, лайк Удачи во всем, надеюсь ты скоро вырвешься в топы
@irinadim
@irinadim 2 жыл бұрын
Спасибо, очень хорошо разъяснили. Здорово, что на длинном макете, разные блоки, разные имена классов, помогло.
@vadimyatsentiuk338
@vadimyatsentiuk338 4 жыл бұрын
Устроил вечеринку на карантине)
@vitaliy_
@vitaliy_ 2 жыл бұрын
Ну ты дядька даешь! Тонна полезной инфы + нестандартный юмор = отличное настроение на день а то и больше))) В преподы бы тебя: топовым будешь реально.
@antonovichvladimir
@antonovichvladimir 2 жыл бұрын
Чувак, ты крутой, сколько бы я не смотрел ребят, которые делают контент про фронтенду и только у тебя всё четко, понятно рассказано и показано простыми словами, особенно важно это для ребят которые только начали изучать всё в вёрстке . спасибо, обнял!
@angrythunderbird
@angrythunderbird 4 жыл бұрын
Будет чем вечером заняться. Сборку галп пользую, очень удобно. Тот выпуск эпичен и очень помог. После просмотров видосов других авторов было больше путаницы, чем пользы.
@user-lr6ut6kf6s
@user-lr6ut6kf6s Жыл бұрын
Спасибо за ясное разъяснение, особенно с учётом опыта использования!
@user-yk5gq8ji1e
@user-yk5gq8ji1e 2 жыл бұрын
Спасибо за подробный обзор методологии ! В голове все разложилось по полочкам. Респект👍
@Natalikashka
@Natalikashka 3 жыл бұрын
Я только учусь, ваш канал нашла недавно. Но теперь как сажусь верстать, так в голове вечеринка вашим голосом весь процесс комментирует)))
@user-qf2jr4cp8o
@user-qf2jr4cp8o Жыл бұрын
Удивительный вы человек!))) Смотрю ваши обучающие видео и ничего кроме восхищения!! Юмор и стеб с такими честными умными глазами - это надо уметь!! Здоровья вам и вашим деткам. Удачи и успехов. Я вас обожаю!
@mikhaildevichensky6407
@mikhaildevichensky6407 3 жыл бұрын
Не скучно смотреть твои видео , спасибо!
@olshab8360
@olshab8360 3 жыл бұрын
Я прямо продирался через дебри этого БЭМа, а тут все так с юмором и понятно! Очень благодарен :) Жалко - раньше не увидел, сэкономил бы себе моск :)
@user-uw9mr9tk5u
@user-uw9mr9tk5u 3 жыл бұрын
Толково, интересно, полезно. А за юмор вообще отдельный жирный плюс 👍
@user-ig2sj1ix5d
@user-ig2sj1ix5d 3 жыл бұрын
Вадим, огромное спасибо Вам за такой шикарный контент! Не знаю сколько бы я мучился и разбирался с БЭМ, если бы не Ваш ролик! Однозначно лайк!
@vadymprokopchuk
@vadymprokopchuk 3 жыл бұрын
круть, теперь все понятно)
@vladayakovleva9095
@vladayakovleva9095 2 жыл бұрын
🥺🥳 это божественное объяснение БЭМ. спасибо
@kubavko
@kubavko 3 жыл бұрын
это бомба, понятненько становиться) только начал въезжать в эту тему. Спасибо за контент!!!
@user-ok4qd9is7q
@user-ok4qd9is7q 4 жыл бұрын
Джаред, анекдот дня, посмеялся в голос) Спасибо за видео) Немного показал как сразу писать код в строчку и потом разворачивать)
@ilmiragubarenko3618
@ilmiragubarenko3618 4 жыл бұрын
Очень понятно и круто! Спасибо за труды!
@user-nm3ls7yf2q
@user-nm3ls7yf2q 4 жыл бұрын
БЛАГОДАРОЧКА за выложеный контент, как раз углубляю свои знания в этом направлении на данный момент. Так уж совпало
@MrSaya7777
@MrSaya7777 4 жыл бұрын
ну НАКОНЕЦ ТО!! Вадос, ну спасибо тебе большое! Спасибо что находишь время на бесплатные советы - уроки, пояснения и тд. Успеваешь и с группой и для нас. Во время карантина - работу никто не отменял, но жду новые видосы от тебя)))
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Благодарю
@MrSaya7777
@MrSaya7777 4 жыл бұрын
@@vadymprokopchuk сегодня слушал одного блогера по вэбу. Ведёт группы и тд... пилит видосы - но просто не та вечерина ... ну оочень скучно, туманно. Больше скрывает.. монотонно.. Короче вообще не тот танец. Уже привык к тебе - к живым видео, пускай и на записи.. Ты хорошо прокачал скилл препода. Ты в ритме танца (; И спасибо тебе на этом.
@twomeow9904
@twomeow9904 3 жыл бұрын
Огромное спасибо за такое видео, Вадим. Подробно,по полочкам и не скучно. Не то, чтобы было лень просто читать на сайте, просто намного проще во всём разобраться по ходу дела,когда показывают как всё устроено. Есть идея для видео, может какие то прикольные штуки с css или javascript можешь показать. Ещё раз спасибо, ты самый крутой, помогаешь нам развиваться. И если можно,было бы классно,если бы ты прикрепил нам шпаргалку из видео ссылкой. Мне было бы удобно у себя открыть и в ней поковыряться чем рыскать по сайту Бэм.
@user-cy7ox9du2h
@user-cy7ox9du2h 4 жыл бұрын
Вадим, спасибо за твою работу! Контент мегаполезный. Мало кто так подробно и понятно всё объясняет и показывает. Привет из Одессы.
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Привет, спасибо
@user-eo4rp8fd8n
@user-eo4rp8fd8n 4 жыл бұрын
Вадим, привет. Отличный урок , спасибо. Жду продолжения.
@user-gs5sf8ou9r
@user-gs5sf8ou9r Жыл бұрын
Очень здорово видеть на практике, спасибо!) Хорошо, что он довольно гибкий. В доке мозг сломать можно, а тут так понятно) Чмоки) П.С. У вас классный юмор, смотреть так еще веселее и приятнее) И было бы здорово вторую часть запиленную css увидеть)
@TheAwem
@TheAwem 4 жыл бұрын
Круто, Вадим расскажи что то про Git а то там такие дебри, спасибо.
@Ivlievs
@Ivlievs Жыл бұрын
Наконец-то нашел толковое практическое видео по БЭМу! Спасибо!
@Jazzzzby
@Jazzzzby 4 жыл бұрын
Топовый контент подъехал. Спасибо!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Jazzzzby благодарю
@user-if7rr4xb4u
@user-if7rr4xb4u 3 жыл бұрын
просто бомба. сначала читал документацию потом смотрел ролики, думал то это так запутанно, но оказалось проще простого
@user-zu2xy3nj1g
@user-zu2xy3nj1g Жыл бұрын
Боже мой , спасибо что я наткнулась на этот канал. Все это время я плакала что у меня не получается изучить этот проклятый БЭМ, он казался максимально непонятным( да и многие вещи тоже) ты на столько круто , весело и понятно рассказываешь , что я наконец то все поняла!!! И уроком позанималась и разобралась и от души посмеялась. Просто лучший!
@iordachidenis5026
@iordachidenis5026 4 жыл бұрын
Спасибо тебе, очень хорошо обьясняешь, ты сильно помог даже тем у кого нет денег на курс.
@stas9066
@stas9066 Жыл бұрын
Братишка, мне нравится твоя движуха. Спасибо за урок)
@user-ow2hr5xk8t
@user-ow2hr5xk8t 2 жыл бұрын
Что не понимаю в других местах, иду смотреть у тебя на канале. Возвращайся)Спасибо.
@069681316
@069681316 4 жыл бұрын
Спасибо за простой язык объяснения и позитив!!!
@user-hg3bw9fl5w
@user-hg3bw9fl5w 3 жыл бұрын
Вы гений приятно было послушать, спасибо!
@user-my5nw2kg6l
@user-my5nw2kg6l 4 жыл бұрын
Спасибо огромное, после того как по занимался по этому видосу, стало понятно почему в прошлых видео с версткой так пишете, теперь пишу по БЭМ) автор дает безценные знания, и море позитива (шутки огонь :D) жду новых видосов, а пока занимаюсь по предыдущим)
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
Благодарю
@jackasmile6517
@jackasmile6517 3 жыл бұрын
Огромное спасибо за видео! Все было понятно, вас приятно слушать!
@amelany
@amelany 3 жыл бұрын
Спасибо! Очень полезное видео. Все оказалось проще, чем я думала.
@dollgarden588
@dollgarden588 2 жыл бұрын
Круто объяснил! Я ни разу не обладаю техническим складом ума, пыталась разобраться в БЭМе несколько раз, была пересмотрена горстка видео, где объяснения были скомканными и быстрыми, уже думала, что БЭМ понимают только гении. А здесь все по полочкам, да еще и чуть юмора. Спасибо!
@oleksiikaliniushko1958
@oleksiikaliniushko1958 3 жыл бұрын
Видео ТОП! Искал этот материал целый день в ютубе и гугле!
@gio2156
@gio2156 4 жыл бұрын
Спасибо, единственный нормальный практический полноценный урок по бему который я нашел, лайк, но с фигмовским макетом пришлось повозиться чтобы скачать фигму и разобраться как экспортнуть
@YarkiiYa
@YarkiiYa 4 жыл бұрын
Вадим, спасибо. Отлично раскрыл тему
@motividv
@motividv 3 жыл бұрын
Интересно как вообще можно ставить дизлайки, хотел бы посмотреть таким людям в глаза
@vasya8441
@vasya8441 Жыл бұрын
Самый лучший учитель в ютубе, великолепный урок.
@user-wm4kp8hs8g
@user-wm4kp8hs8g 3 жыл бұрын
Не видео, а вечеринка просто. Спасибо за позитив, подписался
@user-kp7ce3ns1x
@user-kp7ce3ns1x 3 ай бұрын
Передивився код на деяких сайтах і побачив, що майже жоден з верстальників не заморочується такою методологією) Типу - це ж я написав код і коли треба буде, я і так все згадаю і зможу щось виправити або додати. Або ж, якщо вже до мене не будуть звертатися, то це вже не мої проблеми... Як на мене, то така метода дуже схожа на каталогізацію, наприклад, інтернет-магазина --> Каталог / Інструмент / Електро-інструмент / Перфоратор. Що дозволяє швидко знайти необхідне. Щиро дякую!
@user-xm5bi7oo8o
@user-xm5bi7oo8o 2 жыл бұрын
Не передать словами насколько ты приятный человек, просто лучший )
@vadymprokopchuk
@vadymprokopchuk 2 жыл бұрын
спасибо)
@zvonok78
@zvonok78 2 жыл бұрын
Вечеринка удалась! Молодец, суперский стиль повествования, пизитив мощнейший! )))
@vadymprokopchuk
@vadymprokopchuk 2 жыл бұрын
спасибо
@user-fo3mr6gm6y
@user-fo3mr6gm6y Жыл бұрын
Информация нужная. Вернусь к просмотру еще. Спасибо
@Viktor_Hladkykh
@Viktor_Hladkykh 3 жыл бұрын
Отличный ролик , как всегда на высшем уровне 👍
@user-mt4oo4um1y
@user-mt4oo4um1y Жыл бұрын
Супер видео! Спасибо огромное за Вашу работу! : )
@kirillpuzanov2008
@kirillpuzanov2008 4 жыл бұрын
Подача просто уникальна!!!!! Про БЭМ смотрю третье видео, и либо так совпало, что пазл в голове сложился только с 3 раза, либо автор объясняет простым интересным языком , который запоминается !!!?? ИНФО МАЗАХИЗМ 5 баллов))))
@vitalyryzhenkov958
@vitalyryzhenkov958 4 жыл бұрын
Круто! Очень все понятно и доступно. Однозначно ЛАЙК!!!
@nikolay-t6497
@nikolay-t6497 3 жыл бұрын
Супер видос! Просто бимба! Можно нахреновертить что и сам потом не разберёшься. А можно структурировано и красиво всё написать. Даже карта кода справа красиво смотрится). Даже опытные (в любом деле) далеко не всегда придерживаются "хороших манер". С таким подходом гораздо легче обучатся. Всё по полочкам и в правильном порядке. Мне повезло что я попал на твой канал. Уже многое пересмотрел и узнал. "О сколько нам открытий чудных Готовит просвещенья дух И опыт, сын ошибок трудных И гений, парадоксов друг." Лайкос однозначно.
@TamaraNikolaevna
@TamaraNikolaevna 2 жыл бұрын
Отлично! Спасибо за работу!
@user-ji9nk6ef3i
@user-ji9nk6ef3i 4 жыл бұрын
Спасибо. Ясно и понятно. Ценный контент
@yuriismakota9574
@yuriismakota9574 3 жыл бұрын
Интересное видео! Спасибо за труды.
@alpi9683
@alpi9683 4 жыл бұрын
Як завжди топчик, дякую за те що ти робиш!!! І як завжди спершу лайк тоді дивлюсь)))
@user-zp9iq1po5o
@user-zp9iq1po5o 2 жыл бұрын
Наконец-то встретил человека, который как и я использует в разговорной речи "архаровцы"! Спасибо, очень хороший контент. Учусь в RS School, очень в тему!
@igr3943
@igr3943 4 жыл бұрын
Моё уважение! Впитывается материал, как в детстве молоко матери!
@dushaev_dev325
@dushaev_dev325 2 жыл бұрын
Благодарю за видео. А то я чуть чуть не понимал. Удачи всем кто смотрит.
@swaymaway
@swaymaway 3 жыл бұрын
Спасибо за простое и понятное объяснение. Хотелось бы узнать больше как работает BEM в связке с Grid system и как писать Responsive HTML пользуясь методологией BEM.
@elementdevelopment3502
@elementdevelopment3502 Жыл бұрын
Круто объясняете, спасибо! Правда все понятно! Заодно мысленно составил себе словарик: качели, вечеринка, батарейка)
@den4ik7840
@den4ik7840 3 жыл бұрын
Действительно полезно! Спасибо за контент)
@user-up6xd8cv4x
@user-up6xd8cv4x 4 жыл бұрын
Спасибо тебе добрый человек за твои видео:)
@user-uc9bg2tw8l
@user-uc9bg2tw8l 4 жыл бұрын
наконец-то! благодарствую
@sad_gary
@sad_gary Жыл бұрын
ты просто лучший! спасибо тебе большое!!!
@user-iq9ll8lz9m
@user-iq9ll8lz9m 4 жыл бұрын
Спасибо за хорошее, понятное обьяснение=)
@elenasmirnova3549
@elenasmirnova3549 Жыл бұрын
ты отличный преподаватель, спасибо тебе!😘
@IhorHarnyk
@IhorHarnyk 3 жыл бұрын
Спасибо! Все прозрачно! Хорошая вечеринка)
@user-xp3ph9ev8d
@user-xp3ph9ev8d 2 жыл бұрын
привет с 2021. как всегда великолепно) после просмотра и познавательно и душеньке приятно))
@alekskirilov3254
@alekskirilov3254 4 жыл бұрын
ОуОу, Гоблин в студию) Лайк за видео!
@llwebstylell242
@llwebstylell242 3 жыл бұрын
Классный веселый парень как и его контент. Спасибо за видео. Всё разжевал четко. Сейчас скачаю 2 макета и буду закреплять на практике. Кстати ты тегам р не задавал класс.
@user-er5kd2xr8c
@user-er5kd2xr8c 3 жыл бұрын
Большое спасибо Много видео смотрел но благодаря вашим видео начел верстать
FLEXBOX начало. Флексбокс верстка.
44:38
От 0 до 1
Рет қаралды 45 М.
Тяжелые будни жены
00:46
К-Media
Рет қаралды 3,4 МЛН
didn't want to let me in #tiktok
00:20
Анастасия Тарасова
Рет қаралды 12 МЛН
БЭМ методология за 10 минут | Основы для начинающих
10:01
Александр Ламков — Friendly Frontend
Рет қаралды 10 М.
БЭМ - верстка вместе и без проблем
19:47
CSS GRID Большое руководство
1:10:16
От 0 до 1
Рет қаралды 61 М.
Методология БЭМ. Теория + пример
15:16
MaxGraph - cайты как страсть
Рет қаралды 32 М.
Tailwind, utility-first css-фреймворк
1:25:39
От 0 до 1
Рет қаралды 10 М.