Вёрстка адаптивного сайта для новичков по БЭМ с адаптивностью

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ม.ค. 2025

ความคิดเห็น • 79

  • @TradingRF
    @TradingRF หลายเดือนก่อน +1

    Очень-очень круто объясняете. Спасибо, что сделали такое полезное видео. Пересмотрел 20+ разных примеров вёрстки, и только это видео ответило на вопрос, как надо верстать сайты оптимально.

  • @kosmonavt980
    @kosmonavt980 3 หลายเดือนก่อน +3

    класс!!! наконец-то поняла БЭМ, делала сразу в React в виде отдельных компонентов и потом сборки с пропсами добавления классов. Отличное начало для своей библиотеки. Спасибо огромное, Александр. Много интересных приемчиков, пойду смотреть видео про карточки

    • @alex_dudukalo
      @alex_dudukalo  3 หลายเดือนก่อน +1

      Я рад, что видео было полезным и помогло применить эти приемы в работе с реактом :) Спасибо за поддержку комментарием. Мне очень приятно читать :)

  • @the.lightfall
    @the.lightfall 2 หลายเดือนก่อน

    Спасибо за видео! Очень понравился подход с версткой блоков в начале и наглядным переиспользованием. По рекомендации сначала посмотрел БЭМ, Grid и потом только взялся за это видео.
    Про неразрывный пробел впервые услышал.

  • @igors7305
    @igors7305 11 หลายเดือนก่อน +3

    Спасибо, Александр! Проверил и упорядочил свои познания в верстке. Возьму на вооружение интересные приёмы из этого видео.

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน

      Очень рад, что видео было вам полезным. Да, я сам часто верстаю компоненты отдельно и потом собираю верстку всей страницы :)

  • @УльянаБольшакова-й3е
    @УльянаБольшакова-й3е 9 หลายเดือนก่อน

    Единственное видео, благодаря которому вообще поняла смысл БЭМ, а также его назначение! Спасибо огромное! Теперь уже руки чешутся переделать домашку на скилбоксе правильно))

  • @archybro7977
    @archybro7977 10 หลายเดือนก่อน

    Добрый день, подача видео и содержание шикарно! Дополнил знаний, подглядел некоторые приемы. Теперь стало понятнее) За тэг picture!

  • @SandyWinman
    @SandyWinman 7 หลายเดือนก่อน

    Спасибо Саша. Давно не было от Вас новых видео. Все ждут!

    • @alex_dudukalo
      @alex_dudukalo  7 หลายเดือนก่อน

      Спасибо за комментарий :) Июнь планируется продуктивный в части записи видео ) Думаю, скоро будет на канале )

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic3608 11 หลายเดือนก่อน +2

    Легко усваиваемый контент, для изучения вёрстки то что нужно.

  • @presquevu5281
    @presquevu5281 8 หลายเดือนก่อน

    Огромное спасибо. Спокойно и без суеты. Благодаря Вам понял что такое БЭМ. Однозначно подписка.

  • @serrybakov
    @serrybakov 10 หลายเดือนก่อน +1

    Спасибо Александр! Грамотно и доходчиво. Подпишусь и жду следующих видео!

    • @alex_dudukalo
      @alex_dudukalo  10 หลายเดือนก่อน

      Спасибо за ваш комментарий :) Я рад, что видео вам понравилось и что вы присоединились :) Думаю, канал сможет предложить вам интересный контент :)

  • @redbread_official
    @redbread_official 11 หลายเดือนก่อน +1

    Очень неплохой ролик, освежил у себя знания в голове по БЭМ и подчерпнул пару полезных лайфхаков)

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน

      Очень рад, что видео было для вас полезным :) Спасибо, что оставили комментарий, это очень помогает и вдохновляет.

  • @sergius_yo
    @sergius_yo 11 หลายเดือนก่อน +1

    Прекрасный ролик, Александр! Сижу делаю вместе с Вами!!! Всё понятно и просто. И кстати, поздравляю с 10-ю тысячами подписчиков😃

  • @alephanta
    @alephanta 10 หลายเดือนก่อน

    Потрясающий урок по БЭМ. Много благодарностей!

  • @Se7eN_time
    @Se7eN_time 9 หลายเดือนก่อน

    @alex_duduklo ​​⁠ я научился базовым js только посмотрев ваши видео ) думал что никогда не пойму js и хотел на пол пути даже бросить учиться , к счастью нашел ваши видео !
    Просто спасибо что вы есть…
    Хотелось бы попросить вас можете добавить видео как работать с GULP и SCSS/SASS .
    Непременно буду ждать )

  • @olegdp
    @olegdp 11 หลายเดือนก่อน +1

    Спасибо. Урок понравился. Наименование классов по БЭМ стало понятнее. Да, материал усваивается легко.

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน

      Спасибо за ваш отклик 😍. Я очень рад, что видео вам понравилось. Будем продолжать

  • @krashovotv4437
    @krashovotv4437 11 หลายเดือนก่อน

    Видео как всегда супер! Учусь вместе с вами, лучшая подача знаний!

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน +1

      Спасибо вам :) Рад, что видео было полезным и интересным :)

  • @Ruslan93Nazarov
    @Ruslan93Nazarov 11 หลายเดือนก่อน

    Спасибо за отличный материал! Очень понравилась подача. Из интересующего было бы здорово увидеть ролик про единицы измерения. Что чаще используют в реальных проектах px или rem. Что больше подходит адаптивности и всё в таком духе!

  • @ЕвгенийПопов-я7ш
    @ЕвгенийПопов-я7ш 10 หลายเดือนก่อน

    Огромная благодарность за Вашу работу

  • @Af1n0chka
    @Af1n0chka 10 หลายเดือนก่อน

    Хочется видео о теге пикчер и теге дисплей. И в целом порядке записи тегов. Видео очень полезное, спасибо!

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 11 หลายเดือนก่อน

    Наконец-то добрался к видосу, урааа))

  • @СергейОсадчий-и5е
    @СергейОсадчий-и5е 6 หลายเดือนก่อน +1

    Все супер круто!!! Спасибо вам ОГРОМНОЕ!!! 👍👍👍100% буду использовать.

    • @alex_dudukalo
      @alex_dudukalo  6 หลายเดือนก่อน

      Я рад, что видео было для вас полезным. Спасибо за комментарий 😇

  • @ВадимВладыка-р6в
    @ВадимВладыка-р6в หลายเดือนก่อน +1

    Здравствуйте. Есть ли у вас ещё уроки верстки из фигмы?По мне так если были бы ещё видео по вёрстке с таким объяснением это был бы просто топ. Т.к. многие просто машинально уже пишут не объясняя, а вы как раз объясняете в момент, то что как раз не понятно. Спасибо вам за это и такой подход.

    • @alex_dudukalo
      @alex_dudukalo  27 วันที่ผ่านมา

      Прошу прощения за долгий ответ. Не всегда получается быстрее отвечать, как мне хотелось бы ((
      В новому году планирую записать много контента по верстке ) Уже готовлю макеты для этого ) HTML+CSS + фигма или пиксо )
      Спасибо за приятный и полезный комментарий

  • @dobriikompotik
    @dobriikompotik 11 หลายเดือนก่อน

    Хорош, спасибо за видео!) в следующий раз расскажи правильный порядок для свойств в сss, пожалуйста.

  • @jekakavaltchuk2714
    @jekakavaltchuk2714 6 หลายเดือนก่อน

    Классное видео, спасибо за контент)

  • @vladislavlightweight5855
    @vladislavlightweight5855 4 หลายเดือนก่อน +1

    Хороший урок,спасибо =)

    • @alex_dudukalo
      @alex_dudukalo  4 หลายเดือนก่อน +1

      Спасибо вам :) Я рад, что видео вам понравилось

  • @АнтонУваров-щ1ц
    @АнтонУваров-щ1ц 11 หลายเดือนก่อน

    Как всегда - шикарно!!!

  • @АртемКиряев-ч5м
    @АртемКиряев-ч5м 11 หลายเดือนก่อน

    Александр, видео турбо пушка. Хотелось бы больше видео по JS с реализацией каких-нибудь мини проектов, на подобие игры в пары. Есть огромная проблема с тем, с чего начинать делать проект. Может с просмотром ваших уроков придет осознание😂 А то я никогда не сяду делать дипломку по базовому js😢

  • @Илья-ф7и2д
    @Илья-ф7и2д 3 หลายเดือนก่อน

    годный контент, все понятно обьясняется, надо только некоторые свойства подучить

  • @_Alhimik_
    @_Alhimik_ 7 หลายเดือนก่อน

    Отличное видео!

  • @ЕвгенийБурков-в6ы
    @ЕвгенийБурков-в6ы 11 หลายเดือนก่อน

    Спасибо! Очень полезное видео🙂

  • @andreyfedyukin8360
    @andreyfedyukin8360 11 หลายเดือนก่อน

    Супер! 👍 Спасибо))

  • @gm_Maker
    @gm_Maker 11 หลายเดือนก่อน

    Топ, спасибо! :)

  • @ЕвгенийПопов-я7ш
    @ЕвгенийПопов-я7ш 10 หลายเดือนก่อน

    Здравствуйте. Вы замечательный преподаватель. Спасибо. И... я за урок по тэгу

  • @McGaROrEP
    @McGaROrEP 11 หลายเดือนก่อน

    Все круто очень хорошее объяснение

  • @SuperDenis800
    @SuperDenis800 2 หลายเดือนก่อน

    Спасибо всё понятно.

  • @ИльяГригорьев-э2ч
    @ИльяГригорьев-э2ч 8 หลายเดือนก่อน +1

    очень полезно!!!

    • @alex_dudukalo
      @alex_dudukalo  8 หลายเดือนก่อน

      Спасибо за отзыв :)

  • @igorwagner7176
    @igorwagner7176 9 หลายเดือนก่อน

    видео полезное!

  • @ЮсуповРамиль-р3ц
    @ЮсуповРамиль-р3ц 11 หลายเดือนก่อน

    спасибо!!! То что надо

  • @Илья-ф7и2д
    @Илья-ф7и2д 3 หลายเดือนก่อน

    зачем и nav и ul подскажите? 35:20

  • @kontorasb2754
    @kontorasb2754 11 หลายเดือนก่อน

    Привет! Как всегда супер!
    А подскажи что за настройка, чтоб класс первым подставлялся, у меня тоже пунктик по этому поводу))

  • @ГлебПрохоров-й3ю
    @ГлебПрохоров-й3ю 9 หลายเดือนก่อน

    Асмр верстка 😊
    Полезное с приятным

  • @ВиталийРябенко-з1ь
    @ВиталийРябенко-з1ь 11 หลายเดือนก่อน

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

  • @balcony_warrior
    @balcony_warrior 11 หลายเดือนก่อน +1

    Здравствуйте. Подскажите пожалуйста, как часто общая структура сайта (именно основные, большие блоки страницы) строится с помощью гридов с учетом колоночной системы? Вот это разбиение на 12\16 колонок и т.д.
    Мне это показалось немного душноватым, но я именно так делать не пробовал, возможно оно и удобно. Пока что я гриды использовал только для более мелких компонентов, типа карточек. Хотя на макетах в фигме часто вижу эти колонки (а может они именно дизайнерам нужны были).

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน +1

      Здравствуйте, очень хороший вопрос. Кажется это пошло с времен бутстрапа. Эта библиотека появилась еще до гридов в CSS. И там это было необходимостью. Возможно дизайнеры делают такую сетку по этой причине. Бутстрап уже редко используются, но привычка осталась :) Возможно есть другое мнение...

    • @balcony_warrior
      @balcony_warrior 11 หลายเดือนก่อน

      @@alex_dudukalo Понял, благодарю за ответ!

  • @ИльяМизонов-з3с
    @ИльяМизонов-з3с 11 หลายเดือนก่อน

    Спасибо!

  • @YouMeNow88
    @YouMeNow88 11 หลายเดือนก่อน

    А почему нет уроков с 0 до верстки макета? Просто какша в плейлисте. Спасибо

  • @ЭлайтСолт
    @ЭлайтСолт 11 หลายเดือนก่อน +1

    Спасибо за урок! Разве БЭМ не подразумевает стили каждого блока реализовывать в отдельном файле? Вообще не понятно как организовывать файловую структуру стилей по БЭМ, на чистом CSS почти никто не пишет, т.к. в одном файле получается каша.

    • @BotKarma66
      @BotKarma66 11 หลายเดือนก่อน

      На чистом CSS никто этим в здравом уме не будет заниматься. Все используют сборщики например Галп, потому,что там настраиваешь все под свою работу и он автоматом за тебя все действия выполняет в работе , кто то пишет в общем файле style.scss а тока media файл выносят отдельно и потом все автоматом ипортируется в общий файл и сжимается в финале. Либо под каждый блок разбивают scss и потом это так же ипортируется в один файл и сжимается.

    • @ЭлайтСолт
      @ЭлайтСолт 11 หลายเดือนก่อน +2

      @@BotKarma66 Я про тоже что на CSS никто писать не будет, а вот как организуется файловая структура по БЭМ в SCSS ни где нет.

    • @BotKarma66
      @BotKarma66 11 หลายเดือนก่อน

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

  • @DreamingWithAndrew
    @DreamingWithAndrew 10 หลายเดือนก่อน +1

    Помогите, не понимаю в чем разница с inline-block и без него

    • @alex_dudukalo
      @alex_dudukalo  10 หลายเดือนก่อน

      Элемент с inline-block имеет свойства блочного элемента и инлайнового. Рекомендую посмотреть тему "Блочная модель"

  • @dmitriydikunov7400
    @dmitriydikunov7400 11 หลายเดือนก่อน +1

    имеет ли смысл начинать учить это сейчас, или ИИ вытиснет ?

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน

      Это дискуссионный вопрос, но я считаю что имеет :)

  • @VasiJKeee
    @VasiJKeee 7 หลายเดือนก่อน

    А как понять по макету какая кнопка это фокус, а какая при нажатие и т.д?

    • @alex_dudukalo
      @alex_dudukalo  7 หลายเดือนก่อน

      Обычно в макете это указывается или же уточняется у дизайнера :)

  • @UchimVmeste.
    @UchimVmeste. 9 หลายเดือนก่อน

    Как буд-то два раза верстаешь один и тот же макет. Лучше бы сразу все сверстал. И очень много модификаторов и переменных. Новичков может запутать легко.

  • @profesor2009
    @profesor2009 11 หลายเดือนก่อน

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

    • @profesor2009
      @profesor2009 11 หลายเดือนก่อน

      @@lexuschert из этого видео, я все таки нашел как скачать фото, у меня все время скачивалось с кнопкой и текстом.

    • @whatislove1641
      @whatislove1641 18 วันที่ผ่านมา

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

  • @true227
    @true227 11 หลายเดือนก่อน

    По факту этот бэм вам нафиг не потребуется.

    • @sh0ny
      @sh0ny 11 หลายเดือนก่อน

      Module css forever

  • @dmitrysh7227
    @dmitrysh7227 11 หลายเดือนก่อน

    Прости если воспримешь не очень надеюсь будет как мотивация. Я понимаю что канал для так кто только начал, но все очень слабо....Учи сразу как использовать gulp, webpack, git, препроцессоры, посмотрел 1 видео о js и вообще разочаровался, в данных реалиях это просто не о чем(опять таки не хочу обидеть). На видео в привью канала ты говоришь что ты "профессиональный разработчик" но материал... сложилось впечатление что ты даже не джун, и коммерческого опыта у тебя вообще нету, в плане что сейчас просто html верстка мало кому нужна. Не могу сказать что по верстке они что то не узнают, подчеркнут, но это просто очень слабо( Еще раз не считай за сильную критику, просто это все вообще не соответствует реалиям на данный момент)

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน +8

      Дмитрий, спасибо за ваш комментарий, раскрывающий важные моменты. Да, несомненно знание сборщика, препроцессора, системы контроля версий, flow, фреймворки - это то, чего требует рынок для того, что бы занять начальную позицию. Но, это видео действительно для новичков. Если включить, например в это видео, препроцессор (а он очень хорошо подходит при работе с БЭМ), то это будет ссылка на другой материал. И зрителю придется смотреть материал по препроцессорам. Фокус БЭМ теряется. Что бы упросить и сделать материал понятным, я спрашиваю себя:
      - Какая тема видео?
      - БЭМ,
      - Что нужно, что бы зритель понял тему и мог использовать БЭМ?
      - Основы верстки и CSS,
      - нужен ли препроцессор, чтобы понять основы БЭМ?
      - нет.
      Есть разные методики обучения. Если говорить о конечной цели: пройти техническое собеседование и устроиться на работу, то нужно соответствовать рынку, то, на мой взгляд, если человек не научился и не понял, то он вообще не придет на это собеседование. Я считаю, что моя первая задача, помочь понять тему и помочь научиться учиться самостоятельно. Я не рассказываю о препроцессоре и сборщике в этом видео, но надеюсь, что после просмотров тема БЭМ будет понятна. В любом методе обучения есть плюсы и минусы, думаю время расставит все на свои места :)
      Спасибо вам за такой интересный комментарий

    • @ДарьяЧелюбеева-з1и
      @ДарьяЧелюбеева-з1и 11 หลายเดือนก่อน

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

  • @shna90
    @shna90 11 หลายเดือนก่อน

    большая работа.....много новых для себя свойств открыл , outline / flex-basis...есть куда расти

  • @egorrublev5529
    @egorrublev5529 11 หลายเดือนก่อน

    неплохо очень доступно лампово продолжай дальше