Адаптив сайта. Адаптирую многостраничный сайт, сверстаный с GULP, SCSS, БЭМ, GRID

Поделиться
HTML-код
  • Опубликовано: 25 янв 2025

Комментарии • 101

  • @ТетянаХарченко-н6н
    @ТетянаХарченко-н6н Месяц назад

    Вадим, дякую. Дуже цікаво, доступно. Почуття гумору, як завжди, на висоті. Доступно все пояснюєте. Дякую за Вашу працю.

  • @Fatt_Dude
    @Fatt_Dude 3 года назад +21

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

    • @centwor1on167
      @centwor1on167 2 года назад +1

      Или же не у каждого возникают проблемы с адаптивом :)

  • @kubris.developer
    @kubris.developer 3 года назад +8

    Меня прикалывает не сама верстка, а ньюансы, которые Вадос раскрывает в процессе. Получается зачетная вечеринка! :-))

  • @ArtemNi
    @ArtemNi 2 года назад +2

    Вадим, огромное Вам спасибо! Очень приятно с Вами иметь дело и учиться и развиваться! Лучшие вечеринки у Вас клубе!) Держитесь и берегите себя!!! Здоровья, терпения, Мира!!!!!

  • @ВиталийКабаков-ф5э
    @ВиталийКабаков-ф5э 3 года назад +4

    Ух, это было увлекательно! Закончил просмотр и параллельную верстку этого макета... В общем: мне понравилось такая вечеринка, даёшь исчё и спасибо за твой труд!

  • @mrdanbis7824
    @mrdanbis7824 3 года назад +3

    Не смотрел ещё, но знаю, что огонь! Ты красавчик, бро! Спасибо! Закончу с прошлым видосом и приступлю за это!

  • @АнтонСлободчиков-ж7ж
    @АнтонСлободчиков-ж7ж 3 года назад +3

    Большое спасибо! Лучший учитель по верстке на ютубе)

  • @МихаилФадеев-и6ф
    @МихаилФадеев-и6ф 3 года назад +3

    Спасибо тебе, О ВЕЛИКИЙ МАСТЕР ВЁРСТКИ! :-) Вот чуть ли не физически ощущаю, что эти два видоса по многостраничнику сделали меня на голову выше меня прежнего! Горжусь собой и чувствую свою мощу! :-) И да - ты прав 3:43:35 :-))))

  • @1Cheburash
    @1Cheburash 2 года назад +1

    Благодарю вас за эти прекрасные видео :) Ваша подача просто супер!

  • @olegger7436
    @olegger7436 3 года назад +1

    фух осилил, большое Спасибище за эти уроки, практически 15 часов топового обучения)

  • @FaYrUsinc
    @FaYrUsinc 3 года назад +1

    Спасибо, посмотрел и поверстал на одном дыхании. Отдохни, наберись сил и давай его на WP посадим - завершим эти эпичную трилогию!

  • @vladimirbelokur602
    @vladimirbelokur602 3 года назад +2

    Супер. Владос как всегда лучший.

  • @oleksandrpoliichuk9603
    @oleksandrpoliichuk9603 3 года назад +3

    Лайк авансом за роботу! Гляну пізніше!

  • @МихаилФадеев-и6ф
    @МихаилФадеев-и6ф 3 года назад

    Какой же ты ЗДРАВО-ЛОГИЧНЫЙ и ЗДРАВО-ЭТИЧНЫЙ!!! Начиная с 19:05 и до 23-20 "Чтобы никого не пугало, не бомбило.. Лично для себя - ни для браузера, ни для кого-то.. Абсолютно по барабану, как оно будет написано!.. Главное - не напортачить!.. Вот в чём соль.. Делал бы свой собственный проект, я б фигачил вот так!.. Но поскольку на Ютьюбе я люблю длинные ролики - поэтому я буду здесь делать вот так!"
    Да, с тобой мои МОЗГИ НЕ ЗАРЖАВЕЮТ! Вадос, если бы я был 70-летним, я б рекомендовал тебя своим кентам в качестве ЛЕКАРСТВА от МАРАЗМА! :-)

  • @karinadnepr
    @karinadnepr 3 года назад +3

    Как всегда очень полезно и информативно. Спасибо) хоть и закончила курс год назад, но все равно продолжаю смотреть)))

  • @peiiiajikuh
    @peiiiajikuh 3 года назад +1

    Эх, помню время, когда тоже занимался вёрсткой. Этот канал был в топ-3 по ютубу лично для меня. Сейчас уже занимаюсь фронтом на реакте, но иногда заглядываю сюда на огонёк.

    • @1Cheburash
      @1Cheburash 2 года назад

      А кто еще в вашем топ-3?

  • @alexkodding9354
    @alexkodding9354 3 года назад +1

    Залител видос. Смотрю описание, мысли в голове" друг дай я тебя обниму " 👍👍👍 спасибо

  • @sergeysokolov4270
    @sergeysokolov4270 3 года назад +2

    Урра я ждал этот видосик!

  • @lemonjuice938
    @lemonjuice938 3 года назад

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

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 3 года назад

    Владос, респект за уроки!
    от себя: хотелось бы видеть на примере исходники(где-то то там, то здесь ошибки искать)
    здоровья тебе и близким, отдуши, жги)

  • @WhiteBear141981
    @WhiteBear141981 3 года назад

    Красавчик! Огромный труд проделал.
    Спасибо большое!

  • @ШепелевЕвгений
    @ШепелевЕвгений 3 года назад +1

    Очень круто! Спасибо за труды👍

  • @historypolikchannel324
    @historypolikchannel324 3 года назад +2

    Спасибо большое! Очень круто было. Скажи пожалуйста будет ли натяжка данной верстки на Wordpress как ты говорил или нет? Хочется знать стоит ли ждать.)))) Заранее спасибо за ответ.

  • @Camonoto
    @Camonoto 3 года назад

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

  • @grigoriyfomenko4927
    @grigoriyfomenko4927 Год назад

    Спасибо за видео. Очень полезное. Есть чему поучиться

  • @bashergurtama8332
    @bashergurtama8332 3 года назад

    подача шикарная )) жирный лойс

  • @ЮрійБендзо
    @ЮрійБендзо 3 года назад +4

    посмотрел комментарии и вижу никто не обратил внимание на баг с правым выезжающим меню на маленьких экранах. Если зайти с телефона то будет возможность скролить в бок в пустую область. Для тех кто хочет пофиксить этот баг то просто уберите блок с правым меню на маленьких экранах.

  • @betsmagazine-7242
    @betsmagazine-7242 3 года назад +3

    не прижимается у меня что-то футер + когда адаптируешь, как Вадим, без включения моб. режима, т.е. не нажимая иконку телефончика, то прокруток нет, когда нажимаешь - появляются из-за бокового меню как я понимаю, хотя на др. макетах такого вроде бы не было у нас же оферфлоу hidden есть .... убираешь side-menu - всё нормализуется

    • @WhiteBear141981
      @WhiteBear141981 3 года назад +1

      Та же фигня. Залил проект на Github Pages. Открываю с мобильника: огромная горизонтальная полоса прокрутки...
      Вам удалось как-то ее побороть?

    • @betsmagazine-7242
      @betsmagazine-7242 3 года назад +2

      @@WhiteBear141981 я ещё адаптив полностью не досмотрел (нахожусь на 2:40:00), думал в процессе Вадим всё же заметит ... если не увидел, то можно попробовать в его сообществе в телеграмме спросить, как остальные, кто верстал, исправили ... т.к. я всё равно буду переделывать этот макет для портфолио, думаю просто убить это боковое меню и всё - когда его убираю, то и горизонтальный и вертикальный скроллы пропадают

    • @WhiteBear141981
      @WhiteBear141981 3 года назад +1

      @@betsmagazine-7242 тоже подумывал о том, чтобы удалить сайд-меню. Но как-то жаль

    • @betsmagazine-7242
      @betsmagazine-7242 3 года назад +2

      @@WhiteBear141981 ну да, тем более что непонятно от чего там прокрутка, в том же магазине, что Вадим выкладывал на Udemy также боковое меню выезжает и свойства вроде бы такие, но скролла нет .. как всегда будет из-за какой-то пропущенной мелочи)))

    • @WhiteBear141981
      @WhiteBear141981 3 года назад

      @@betsmagazine-7242 спасибо! Будем разбираться

  • @СлаваБогузавсё-щ6д
    @СлаваБогузавсё-щ6д 3 года назад +4

    в блоке how it works забыли диван поставить на один уровень с ост. картинками как на макете

  • @МихаилФадеев-и6ф
    @МихаилФадеев-и6ф 3 года назад

    :-) 1:50:02 «Всё, у меня вот есть один, второй и, как бы грубо говоря, третий! Белиссимо! Перфетто! Всё - я знаю, как это решить!» :-)))
    Все изучаем МАНТРЫ и ЗАКЛИНАНИЯ от Вадоса!!! Верный путь к успеху в вёрстке! :-)))))
    В этом видео Вадос продемонстрировал вершины своего мастерства! Все, желающие насытиться вдохновением от сэнсэя в полной мере, после просмотра видео слушаем известную мелодию "Полёт кондора"!

  • @OskarPrice
    @OskarPrice 3 года назад

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

  • @vladimirpuzey713
    @vladimirpuzey713 3 года назад

    Это было эпичность! 👍

  • @evgeniys3473
    @evgeniys3473 3 года назад +2

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

  • @НиколайТрунин-ц6р
    @НиколайТрунин-ц6р 3 года назад

    Спасибо братское сердце!

  • @sergey_zatsepin
    @sergey_zatsepin 3 года назад +3

    2:03:55 - ну если делать по-нормальному, то ресайз нужно прослушивать палюбэ. Ты же в курсах, что есть т.н. книжная/альбомная ориентация? Юзер просто переворачивает смарт, и твоя вёрстка к херам ломается.

  • @asdasd-hg3uz
    @asdasd-hg3uz 8 месяцев назад

    А есть видео натяжки на WP етого сайта?

  • @bANSHEE-dev
    @bANSHEE-dev 3 года назад +2

    Пушка, лайк

  • @АлександрВьюгин-с1ъ
    @АлександрВьюгин-с1ъ 3 года назад +4

    А у вас на телефонах нету горизонтального скролла?

    • @8x8x36
      @8x8x36 3 года назад +1

      У меня тоже скролл и не могу победить

    • @sestik1
      @sestik1 3 года назад +6

      могу подсказать решение, если вдруг не получилось. В global.scss нужно прописать классу .wrapper - position: relative; и overflow-x: hidden; а из body убрать этот оверфлоу

    • @sestik1
      @sestik1 3 года назад +3

      @@8x8x36 могу подсказать решение, если вдруг не получилось. В global.scss нужно прописать классу .wrapper - position: relative; и overflow-x: hidden; а из body убрать этот оверфлоу

    • @АлександрВьюгин-с1ъ
      @АлександрВьюгин-с1ъ 3 года назад +2

      @@sestik1 Починил, пасиб за подсказку

    • @ПавелФ-р1б
      @ПавелФ-р1б 3 года назад +1

      @@sestik1 Спасибо, попробую. Я и в Jquery пытался div удалять, но на хостинге не работает почему-то. А на Live Server удалять.

  • @anton-vr5xw
    @anton-vr5xw 3 года назад +3

    Еее 🔥🔥🔥

  • @владимирбелов-ы9г
    @владимирбелов-ы9г 3 года назад +3

    всем доброго дня!

  • @АшимовБектур
    @АшимовБектур 3 года назад

    Да ты крут братан очень прокачал!!!!!!!

  • @felixboy85
    @felixboy85 3 года назад

    Top content. Спасибо тебе чувак!!!

  • @aleksandrkanygin2672
    @aleksandrkanygin2672 3 года назад +1

    Спасибо за контент, подскажите как правильно выезжающее меню растянуть на всю ширину, чтобы не было отступов по бокам от контейнера.
    Сделал
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    Работает, но есть подозрение что не надо так делать.
    А просто margin-left: -15px; margin-right: -15px; не работает, т.к. width 100% насколько я понимаю

    • @-shakirov
      @-shakirov 3 года назад

      о чувак че-то ты намудрил - повесь просто белый фон элементами after и before у одного укажи right: 0 у другого left 0 и ширина 100% что-то в таком роде. Если не получится спрашивай, могу подзаморочиться ахах. А так Вадим в макете шведская горечь такое делал вроде (7-8 часовой видос на канале верстка сайта полностью до завершения)

    • @aleksandrkanygin2672
      @aleksandrkanygin2672 3 года назад

      @@-shakirov Нормальный варик, спасибо за совет.

    • @aleksandrkanygin2672
      @aleksandrkanygin2672 3 года назад

      @@-shakirov Нормальный варик, все теперь отлично выглядит, спасибо за совет.

    • @1Cheburash
      @1Cheburash 2 года назад

      @@aleksandrkanygin2672 Подскажите, пожалуйста, вы задавали after и before у menu__list или у menu--open? Прописывал и первому, и второму, а фон так и не появляется(( Не могу понять что я делаю не так. content ''; прописал.

    • @1Cheburash
      @1Cheburash 2 года назад

      @@-shakirov Подскажите, пожалуйста, вы задавали after и before у menu__list или у menu--open? Прописывал и первому, и второму, а фон так и не появляется(( Не могу понять что я делаю не так. content ''; прописал.

  • @aleksandrlushkin4459
    @aleksandrlushkin4459 3 года назад

    Всё круто! Вопрос нужен ли :hover-эффект на мобильных устройствах?

    • @sergey_zatsepin
      @sergey_zatsepin 3 года назад

      А как ты хочешь реализовать hover на моб. устройствах? По умолчанию, он "застывает" при тапе и убирается при тапе на другом элементе, т.е. либо оставлять так, либо отслеживать на js тап+антап и стилизовать соответственно 'элемент на эти доли секунды.

  • @АртемЯкушкин-в8ш
    @АртемЯкушкин-в8ш 2 года назад

    Привет. Впервые столкнулся с галпом. Все сделал по твоим видосам, начиная со сборки галпа. Такой вопрос: при использовании этой сборки, как загрузить верстку на гитхаб пейджес? Нужны какие-то особенные навыки? Потому что у меня чет не получается. Спасибо

    • @renatas2661
      @renatas2661 2 года назад

      github подхватывает файлы из папки "docs" (в этом проекте она "app"). Короче я переименовала папку и соответственно все настроики в gulpfile.js и все на гитхаб загрузилось.

  • @nMnFunny
    @nMnFunny 3 года назад +1

    WordPress в студию

  • @ІраІра-ю4з
    @ІраІра-ю4з 3 года назад +2

    Спасибо)

  • @АлександрСергеев-ы4э

    Потихоньку приближаемся к wordpress

  • @dianadostiyeva4711
    @dianadostiyeva4711 3 года назад

    супер, очень полезно!!!

  • @Hector_UA
    @Hector_UA 2 года назад

    Добрый день. Подскажите пожалуйста, все было хорошо, все работало а потом бах и 'default' errored after 1.21 s
    Не могу понять что случилось.

    • @Hector_UA
      @Hector_UA 2 года назад

      Извините, разобрался, скобку фигурную пропустил:)

  • @daurenbeksuleymen6657
    @daurenbeksuleymen6657 3 года назад

    Наконец то закончил

  • @Артём-д2ь6л
    @Артём-д2ь6л 3 года назад +1

    на 2:40:00 не 10 фото, а 9 осталось, всё же лучше чем 5)

    • @-shakirov
      @-shakirov 3 года назад

      пропиши grid-column: span 1;
      grid-row: span 1; и будет тебе счастье

  • @АндрейМелкозеров-ж9с
    @АндрейМелкозеров-ж9с 3 года назад +1

    Вадос, спасибо! Всегда - огонь. Только вот у меня на адативе в процессе уменьшения header постепенно испаряются ссылка(logo) и button. Не просто исчезает, не налазит друг на друга, а потихоньку превращается в точку(0). Первый раз такое вижу, может из ребят кто-нибудь подскажет.

    • @UchVuch
      @UchVuch 3 года назад

      Может размер шрифта не в пикселях задан?

    • @webdev7135
      @webdev7135 2 года назад

      у меня также было. я дополнительно задала ширину.

  • @rostyslavkinash5232
    @rostyslavkinash5232 3 года назад

    спасибо

  • @prince_off
    @prince_off 3 года назад

    Лучший!

  • @ТвойСоветчик
    @ТвойСоветчик Год назад

    1:54:10

  • @PesE-footboll
    @PesE-footboll 3 года назад +1

    lagan

  • @masteruvz
    @masteruvz 2 года назад

    Автор, ты вообще живой?

  • @svpas76
    @svpas76 3 года назад

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

    • @sestik1
      @sestik1 3 года назад +1

      это такой сленг, браток. У любой профессии есть куча терминов, который обычный обыватель не поймет

  • @soko9005
    @soko9005 2 года назад

    Может кто-нибудь сможет мне помочь, не могу сделать так, чтобы при нажатии на кнопку header__btn-menu страница не скролилась. Добавил в файл global.scss body.lock { overflow: hidden}, никак не хочет работать. В файл min.js для функции .header__btn-menu вот такое - $("body").toggleClass("lock");

  • @ha3apbl4
    @ha3apbl4 Год назад

    на елементе works__path__item--measurements баг