Финал Верстки сайта, пишем переключение на JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ต.ค. 2024
  • Друзья, четвертая часть вечеринки. Это финал господа! Пишем штукенцию на JavaScript
    ----------------------------------------
    Сайт курса по верстке - from0to1.com.ua/
    ----------------------------------------
    ----------------------------------------
    Готовая верстка на patreon - / from0to1
    Телеграм канал - t.me/from0to1com
    ----------------------------------------
    ----------------------------------------
    Доп ссылки:
    box-sizing: • box sizing border box ...
    ХотКей по VScode: • 10 горячих клавиш в VS...
    Видео про БЭМ - • БЭМ методология. Практ...
    Видос по svg - • SVG, большой гайд
    Большой гайд по гридам - • CSS GRID Большое руков...
    Все о флексах - • FLEXBOX начало. Флексб...
    Продвинутые флексы - • flex-basis, flex-grow,...
    ----------------------------------------
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

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

  • @АртёмОвсянников-с6т
    @АртёмОвсянников-с6т ปีที่แล้ว +24

    Спасибо за вечеринку!!
    Учусь по твоим видео вёрстке!!!

    • @vadymprokopchuk
      @vadymprokopchuk  ปีที่แล้ว +3

      супер, топчик

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

      ​@@vadymprokopchukздравствуйте , этот сайт на какую ширину экрана подходит? Для айпадов или айфонов?

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

      @@White_Passion для всех

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

      @@vadymprokopchuk спасибо вам за ответ 🙂

  • @SuperDima99
    @SuperDima99 ปีที่แล้ว +6

    Привет, спасибо большое за подробное разъяснение js!
    Как насчёт сделать мини курсик или стрим (платный ) по js!? Только не углублённый а только то что нужно для верстки! Поверхностный так сказать!

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

    Ну ты крассава, вечеринка норм. Так держать. И давай побольше JS на дальнейших вечеринках.!!!

  • @май-и8е
    @май-и8е 7 หลายเดือนก่อน +1

    Может кто html код скинуть, я просто где-то либо букву пропустил, либо добавил и теперь у меня когда нажимаю на кнопки пропадают все картинки

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

    нарешті я доВерстав цей сайтець.

    • @vadymprokopchuk
      @vadymprokopchuk  5 หลายเดือนก่อน

      Супер, так тримати

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

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

  • @andrey-Dudkin
    @andrey-Dudkin ปีที่แล้ว +2

    Спасибо большое ролики просто пушка буду применять такую вечеринку

  • @WERWOLION
    @WERWOLION ปีที่แล้ว +1

    Js нужно цеплять на дата атрибуты.
    Цеплять JS к стилям неправильно.
    Если мы цепляем JS к дата атрибутам мы не делаем кашу и получаем модульность.
    Т.е наши скрипты работают с любыми классами и стилями.
    + в дата атрибуты можно передавать данные.

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

    Сделал! Все получилось... Надо думать брать курс JS ^__^

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

      У меня не работает js что делать?

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

      Помогите

  • @Denis-sg6sl
    @Denis-sg6sl ปีที่แล้ว +2

    Отличная подача! Всё чётко разъясняешь! Юморок колоритный и уместный! Спасибо!

  • @IvanKeats-q3q
    @IvanKeats-q3q ปีที่แล้ว +9

    Вадим ... Требуем больше таких шикарных видео !! 😁

    • @vadymprokopchuk
      @vadymprokopchuk  ปีที่แล้ว +3

      круть

    • @NIKOLARUS1
      @NIKOLARUS1 ปีที่แล้ว +1

      Очень нравится такой формат) Благодаря тебе я учусь новому), выпускай чаще такие видео, как это)

  • @АйданаИскакова-ж3г
    @АйданаИскакова-ж3г 6 หลายเดือนก่อน

    Очень полезный и классный урок, добавлю себе на портфолио 😊

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

    У меня ошибка по js где нужно убрать синие наушники не получается 3 дня все перепроверял😢

  • @РоманЧудосейкин
    @РоманЧудосейкин หลายเดือนก่อน

    сделал все как в видосе - часть не работает - закинул в чат гпт - оказывается надо делать по другому и все работает че за на? типа что то обновилось и теперь все по балде поехало

  • @МаксимСергеевич-п2б
    @МаксимСергеевич-п2б 11 หลายเดือนก่อน

    has не работает в файрфоксе Firefox и много где еще

  • @yuliachamlai2024
    @yuliachamlai2024 ปีที่แล้ว +2

    Ну просто самый лучший учитель! Очень полезный материал, легкая подача! Благодарю!

  • @bbkakimov
    @bbkakimov 7 วันที่ผ่านมา

    Nice

  • @gogap7302
    @gogap7302 5 หลายเดือนก่อน

    когда пытаюсь сменить цвет наушников то кнопка меняется, а наушников на сайте нет

  • @dimonikbeats
    @dimonikbeats 5 หลายเดือนก่อน

    Дяка Братішка Вадосік)))))!!!!!!

  • @svetamyakotina5861
    @svetamyakotina5861 ปีที่แล้ว +2

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

  • @kirafenix2004
    @kirafenix2004 ปีที่แล้ว +3

    3 вечера прошли великолепно! Спасибо!)

  • @bergghest
    @bergghest 5 หลายเดือนก่อน

    Вечеринка, достойная жирного лайка, подписки, колокольчика. Если ваша вечеринка не похожа на эту даже не пытайтесь меня приглашать )))

  • @neptune3519
    @neptune3519 ปีที่แล้ว +1

    Хотелось бы уточнить, что тег "has" работает не во всех браузерах и при написании кода на firefox я долго не мог понять в чем проблема 😅

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

      Все работает в firefox. Специально проверил.

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

    Спасибо тебе хороший человек

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

    19:36

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

    👍 👌

  • @saveliikosevich620
    @saveliikosevich620 ปีที่แล้ว +1

    лайк за пояснение

  • @Jane_123
    @Jane_123 ปีที่แล้ว +2

    Огромное спасибо за такое интересное и познавательное видео!

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

    Дуже дякую Вам за відео. Ви потрясно класний лектор!

  • @vvks9901
    @vvks9901 ปีที่แล้ว +2

    Кайф!

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

    Дякую, усе вийшло.🤩😉Трішки з data-button погралась, тому що додала його не кнопці, а картинці. Не могла зрозуміти чому виходить undefined. Пояснення як завжди дуже зрозумілі!!! Рухаємось далі))

  • @олексійлазня
    @олексійлазня 5 หลายเดือนก่อน

    Супер, дякую!! Давай ще!!

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

    Ну это лайк и коммент! )

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

    Заметка для меня! 28:16

  • @Victor-e8f
    @Victor-e8f ปีที่แล้ว

    Дуже та дуже!
    Very and very!
    Очень и очень!

  • @АманНургабылов
    @АманНургабылов 8 หลายเดือนก่อน

    Спасибо за видео

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

    Просто огроменное спасибо за урок!!!🥰👍 Хотела сверстать один макет, где можно выбрать фон сайта, но не знала, как это делается! Теперь знаю. Пошла верстать и закреплять полученные знания!

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

    У меня не работает Js

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

      где-то допустил ошибку, перепроверь

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

      @@vadymprokopchuk а где можно вам задавать вопросы?

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

    Я смену картинок и стилей сделал полностью через JS, не добавляя никаких дополнительных классов или data-атрибутов. И еще решил, что не помешает возможность выбирать стили по умолчанию, поэтому меняя одну переменную defaultColor, у меня меняется цвет всех картинок (и background) еще до кликов пользователя.
    Реализовал просто: меняю src картинок, а background - с помощью переопределения стилей :root (корневого) элемента.
    P.S. С псевдоклассом :has интересное решение вышло у автора.

  • @ArteEtHumanitate
    @ArteEtHumanitate ปีที่แล้ว +1

    Человечище! Жму с благодарностью твою натруженную руку!

  • @vvks9901
    @vvks9901 ปีที่แล้ว

    Все круто, единственный момент, если перевернуть телефон в альбомный формат, то адаптив в хэдере сыпится ((((((

  • @Інал-ІпаВлад
    @Інал-ІпаВлад 8 หลายเดือนก่อน

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

  • @koaksil1997
    @koaksil1997 ปีที่แล้ว

    псевдокласс has не работает в Firefox-е, здесь уместнее было бы задать каждому градиенту класс и менять классы.
    ещё как вариант задать кнопкам data-color с hex цветом и при смене цвета на jse задавать стиль градиента
    большой + этого подхода в том, что если вёрстка будет тянуться на цмску, то для каждой кнопки можно задавать цвет какой хочешь и заданный цвет будет также отрабатывать для фона

  • @hpbulbasaur8946
    @hpbulbasaur8946 ปีที่แล้ว

    Вадим,привет! появился вопрос по верстки mobileFirst у тебя на канале,а подскажи как правильно(или как лучше) сделать секцию новостей? А то сделал флексами и на основных брейкпоинтах нормально получилось,как в макете,а в промежуточных размерах ужасно(

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

    С радостью купил бы у вас курс если он был по React.ts. Актуальней по рынку!

  • @ВадимОлійник-ч9ш
    @ВадимОлійник-ч9ш 10 หลายเดือนก่อน

    Дякую Вам...

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

      Дякую за комент

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

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

  • @OlegStepanenko-v5d
    @OlegStepanenko-v5d ปีที่แล้ว +1

    Очень, очень хорошо🙂🙂🙂

  • @isxaoc
    @isxaoc ปีที่แล้ว

    В общем допилил весь проект. По JS: лучше проверять в хроме в мозиле не всё работает как надо, в частности с градиентом фоновым траблы а в хроме всё работает.

  • @eddsechevoi9089
    @eddsechevoi9089 ปีที่แล้ว

    HTML/CSS удачно прошло. Но с JS проблемы, никак не доходило до меня, до этого момента. Спасибо Вадим

  • @nic-ori
    @nic-ori ปีที่แล้ว

    Useful information. Thank you.

  • @РустемСтахорный
    @РустемСтахорный 9 หลายเดือนก่อน

    Это была легендарная вечеринка, с кайфом смотрел!

  • @ХайдаровБобур
    @ХайдаровБобур ปีที่แล้ว

    спасибо вам огромное долго искал такие круты Верстки сайтов , очень круто обясняете , всегда была проблема с версткой но с вами тихонько учусь ЛАЙК

  • @ilyas.n
    @ilyas.n ปีที่แล้ว +1

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

  • @isxaoc
    @isxaoc ปีที่แล้ว

    Я вот пробуюсь повторить, но на JS тупняк. Убирать синие - убирает. А выбранный не выводит, хотя и код уже с экрана 1 в 1 переписывал ток классы свои вставлял чуток другие. А всё равно не алё. Кто-нибудь пробовал?

    • @vadymprokopchuk
      @vadymprokopchuk  ปีที่แล้ว

      значит что-то не так, есть ошибки

    • @isxaoc
      @isxaoc ปีที่แล้ว

      @@vadymprokopchuk всё всё, спасибо огромное, через часы мучений я понял, что мой затуп был в том что в data-button я писал "color-blue" и тд с одной тире а надо две. Я не очень понял, почему, но добавив тире - сработало. Спасибо за видео, удачи тебе в развитии, очень круто подаёшь информацию. Я даже жалею за купленный курс, с твоих видосов научился большему.

    • @isxaoc
      @isxaoc ปีที่แล้ว

      p.s. я не про твой курс если-что)) брал у html academy

  • @АбрамАбрам-ч3ж
    @АбрамАбрам-ч3ж ปีที่แล้ว

    Добрый день, У вадима в группе заказал сайт у его администратора группы и меня кинули на 35 тр

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

    Спасибо, шикарная вечеринка была, нужны еще вечеринки)

  • @hpbulbasaur8946
    @hpbulbasaur8946 ปีที่แล้ว

    вообще интересная вечеринка получилась, познавательная

  • @vladimirzvyagincev8193
    @vladimirzvyagincev8193 ปีที่แล้ว +1

    Четенько

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

    это лучший канал по верстке!!!

  • @sadamhylio691
    @sadamhylio691 ปีที่แล้ว

    Большое спасибо, полезная, познавательная и подробная верстка!

  • @ІванЩербаков-д3ф
    @ІванЩербаков-д3ф 8 หลายเดือนก่อน

    Дуже дякую за матеріал. Як кажуть - ніх... не зрозуміло, проте дуже цікаво)
    Насправді для мене, як для початківця, поки що JS - це щось на кшталт фантастики. Якісь окремі моменти зрозумілі, але це мабуть 1-2% від загального. І все ж таки, як сказав Вадим, якщо нічого не зрозуміло, але продовжувати робити, то настане час, коли це розуміння прийде.
    Ще раз красно дякую за корисну інформацію!

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

      Дякую, так, все вірно, розуміння прийде, навіть не сумнівайтесь

    • @ІванЩербаков-д3ф
      @ІванЩербаков-д3ф 8 หลายเดือนก่อน

      @@vadymprokopchuk Дякую за підтримку. Іноді її не вистачає, щоб продовжувати робити щось далі.

  • @Виктор-т9л9б
    @Виктор-т9л9б 8 หลายเดือนก่อน

    Вечеринка топ! просто от души, благодарю, хотел бы от тебя уроки по Js, когда вижу Js втыкаю,теряюсь, а так красота красатище. Ты лучший в СНГ

  • @ГеоргийМацукатов
    @ГеоргийМацукатов 7 หลายเดือนก่อน

    Красава , Психовал много раз думал ты не правильно делаешь, оказывается я с дырявыми руками)) Я тебе очень благодарен.

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

      Не работает js что белать?

  • @Alexey_Gri
    @Alexey_Gri ปีที่แล้ว

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

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

      Макет простой, но на нем можно очень многому научиться.🙂

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

    Спасибо большое за видео с JS!

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

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

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

      @@vadymprokopchukне работаеть js

  • @farhodizuribek9006
    @farhodizuribek9006 ปีที่แล้ว

    🤝

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

    спасибо очень круто

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

    Спасибо за твои видео, прокачивать свои скиллы в такой атмосфере - одно удовольствие)

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

      класс, спасибо

  • @АбрамАбрам-ч3ж
    @АбрамАбрам-ч3ж ปีที่แล้ว

    все видео подтверждения есть

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

    А мне понравилось. Спасибо автору за труд.

  • @Mugen68606
    @Mugen68606 ปีที่แล้ว

    Ставлю класс с классом класс

  • @gyurchenko77
    @gyurchenko77 ปีที่แล้ว

    Дякую за цікаве відео.

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

    Спасибо братишка

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

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

  • @2day159
    @2day159 ปีที่แล้ว

    лайк за вечеринку

  • @АбрамАбрам-ч3ж
    @АбрамАбрам-ч3ж ปีที่แล้ว

    Мошеник

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

    СУПЕР!👍

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

    Спасибо 👌

  • @МашаБукина-в1ц
    @МашаБукина-в1ц ปีที่แล้ว

    Верстку можно конечно посмотреть,но js это пустая трата времени не чего не понятно не чего не работает,внятно автор как и многие не сможет объяснить.

  • @Станислав-ф8ы
    @Станислав-ф8ы 11 หลายเดือนก่อน

    Вечеринка для классных типов и типих

  • @lazydragon-2000
    @lazydragon-2000 ปีที่แล้ว

    Знаю, что не по теме, но у меня при запуске галпа возникает вот такая ошибка:
    [11:34:56] Error in plugin "gulp-webp"
    Message:
    ���⥬� �� 㤠���� ���� 㪠����� ����.
    Details:
    errno: ENOENT
    code: ENOENT
    syscall: spawn D:\Web sites
    itm-style
    ode_modules\cwebp-bin\vendor\cwebp.exe
    killed: false
    stdout:
    stderr: ���⥬� �� 㤠���� ���� 㪠����� ����.
    failed: true
    signal: null
    cmd: D:\Web sites
    itm-style
    ode_modules\cwebp-bin\vendor\cwebp.exe -quiet -mt
    -o C:\Users\73B5~1\AppData\Local\Temp\ac8c4597-ce8f-43e0-aee0-30ae59817731 C:\Users\73B5~1\AppData\Local\Temp\8d1ac832-06d9-4a6f-b370-9c66a3e4d8dc
    timedOut: false
    fileName: D:\Web sites
    itm-style\app\images\src\fullscreen.jpg
    domainEmitter: [object Object]
    domainThrown: false
    [11:34:56] 'default' errored after 16 s
    Подскажите пожалуйста, как её исправить!

  • @Станислав-ф8ы
    @Станислав-ф8ы 11 หลายเดือนก่อน

    Привет. Объясни, пожалуйста, для чего ты делаешь div с классом container во всех проектах, но в стайлщите к нему не обращаешься?

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

      Это контейнер, чтобы верстка не разлеталась, обращаюсь к нему в самом начале

    • @Станислав-ф8ы
      @Станислав-ф8ы 11 หลายเดือนก่อน

      @@vadymprokopchuk Как говорится, "не зовите меня, если ваша вечеринка не в контейнере")

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

      @@Станислав-ф8ы именно так))