KZhead

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

От 0 до 1
2023 ж. 9 Қыр.
9 388 Рет қаралды
Жүктеу

Друзья, четвертая часть вечеринки. Это финал господа! Пишем штукенцию на 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

Пікірлер

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

    @user-lc4kp9zo7l@user-lc4kp9zo7l8 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk8 ай бұрын

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

      @born_Serious@born_Serious5 ай бұрын

    • @@born_Serious для всех

      @vadymprokopchuk@vadymprokopchuk5 ай бұрын

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

      @born_Serious@born_Serious5 ай бұрын

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

    @kirafenix2004@kirafenix20048 ай бұрын

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

    @ilyas.n@ilyas.n8 ай бұрын

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

    @user-xe4be7iq1q@user-xe4be7iq1q8 ай бұрын

    • круть

      @vadymprokopchuk@vadymprokopchuk8 ай бұрын

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

      @NIKOLARUS1@NIKOLARUS18 ай бұрын

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

    @Jane_123@Jane_1238 ай бұрын

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

    @andrey-Dudkin@andrey-Dudkin8 ай бұрын

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

    @sadamhylio691@sadamhylio6917 ай бұрын

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

    @SuperDima99@SuperDima998 ай бұрын

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

    @saveliikosevich620@saveliikosevich6207 ай бұрын

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

    @user-cf6fv3os4q@user-cf6fv3os4qАй бұрын

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

    @svetamyakotina5861@svetamyakotina58618 ай бұрын

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

    @Denis-sg6sl@Denis-sg6sl8 ай бұрын

  • Useful information. Thank you.

    @nic-ori@nic-ori8 ай бұрын

  • Кайф!

    @vvks9901@vvks99018 ай бұрын

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

    @user-ms3mz9vg8b@user-ms3mz9vg8b7 ай бұрын

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

    @user-uq6ke4kg3p@user-uq6ke4kg3p4 ай бұрын

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

    @yuliachamlai2024@yuliachamlai20248 ай бұрын

  • Спасибо 👌

    @ukraine1514@ukraine15142 ай бұрын

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

    @user-px1ue8um8b@user-px1ue8um8b3 ай бұрын

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

    @user-wm5wk8pe9o@user-wm5wk8pe9o8 ай бұрын

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

    @leeeelou@leeeelou6 ай бұрын

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

    @ArteEtHumanitate@ArteEtHumanitate8 ай бұрын

    • спасибо

      @vadymprokopchuk@vadymprokopchuk8 ай бұрын

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

    @hpbulbasaur8946@hpbulbasaur89468 ай бұрын

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

    @Maks__RR@Maks__RRАй бұрын

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

    @user-zx9uu7ol2m@user-zx9uu7ol2mАй бұрын

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

    @ig89@ig897 ай бұрын

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

    @user-nf9eu7fm7x@user-nf9eu7fm7x24 күн бұрын

    • Дякую

      @vadymprokopchuk@vadymprokopchuk21 күн бұрын

  • СУПЕР!👍

    @ivan_k13@ivan_k136 ай бұрын

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

    @Valentynka_22@Valentynka_223 ай бұрын

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

    @user-mp6fv9sx3t@user-mp6fv9sx3t5 ай бұрын

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

    @boginska_ya_@boginska_ya_4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @natalietalas@natalietalas5 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

      @zxcmetro667@zxcmetro6672 ай бұрын

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

    @2day159@2day1598 ай бұрын

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

    @dimonikbeats@dimonikbeatsАй бұрын

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

    @tarassteba9983@tarassteba99833 ай бұрын

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

    @user-bf6cp8ju1i@user-bf6cp8ju1i8 ай бұрын

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

    @lenaromaniuk8378@lenaromaniuk83785 ай бұрын

    • дякую

      @vadymprokopchuk@vadymprokopchuk5 ай бұрын

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

    @boburmustafo8868@boburmustafo88687 ай бұрын

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

    @user-zy1dc3gv6r@user-zy1dc3gv6r6 ай бұрын

    • супер

      @vadymprokopchuk@vadymprokopchuk6 ай бұрын

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

    @gyurchenko77@gyurchenko778 ай бұрын

    • дякую

      @vadymprokopchuk@vadymprokopchuk8 ай бұрын

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

    @eddsechevoi9089@eddsechevoi90898 ай бұрын

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

    @sashavarava7933@sashavarava79336 ай бұрын

    • супер

      @vadymprokopchuk@vadymprokopchuk6 ай бұрын

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

    @antoha9486@antoha94865 ай бұрын

    • Спасибо

      @vadymprokopchuk@vadymprokopchuk5 ай бұрын

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

    @sheshko_pavel@sheshko_pavel6 ай бұрын

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

    @user-te4up6ng2l@user-te4up6ng2l4 ай бұрын

    • спасибо

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @user-mx1rb2ec1n@user-mx1rb2ec1n3 ай бұрын

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

      @zxcmetro667@zxcmetro6672 ай бұрын

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

    @Mugen68606@Mugen686068 ай бұрын

  • 🤝

    @farhodizuribek9006@farhodizuribek90068 ай бұрын

  • Четенько

    @vladimirzvyagincev8193@vladimirzvyagincev81938 ай бұрын

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

    @WERWOLION@WERWOLION8 ай бұрын

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

    @koaksil1997@koaksil19978 ай бұрын

  • 👍 👌

    @vitka0@vitka06 ай бұрын

  • Дякую Вам...

    @user-yp8up4wo3d@user-yp8up4wo3d5 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk5 ай бұрын

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

    @gerasymenko1@gerasymenko12 ай бұрын

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

      @zxcmetro667@zxcmetro6672 ай бұрын

    • Помогите

      @zxcmetro667@zxcmetro6672 ай бұрын

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

    @user-kp7ce3ns1x@user-kp7ce3ns1x3 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk3 ай бұрын

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

      @user-kp7ce3ns1x@user-kp7ce3ns1x3 ай бұрын

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

    @EvilYou@EvilYou6 ай бұрын

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

    @vvks9901@vvks99018 ай бұрын

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

    @hpbulbasaur8946@hpbulbasaur89468 ай бұрын

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

    @user-gf2fg8if7q@user-gf2fg8if7q8 ай бұрын

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

    @AU_IAN@AU_IAN5 ай бұрын

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

    @vorosh1loff@vorosh1loff7 ай бұрын

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

    @bergghest@bergghestАй бұрын

    • Спасибо )

      @vadymprokopchuk@vadymprokopchukАй бұрын

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

    @neptune3519@neptune35198 ай бұрын

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

      @antonbobryshev9514@antonbobryshev95143 ай бұрын

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

    @sergeigerasimenko7112@sergeigerasimenko71127 ай бұрын

  • 19:36

    @tmusabaev5188@tmusabaev51886 ай бұрын

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

    @daniloy266@daniloy266Ай бұрын

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

    @user-xt1ns1br7o@user-xt1ns1br7o7 ай бұрын

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

    @user-oh4qr5ie4e@user-oh4qr5ie4e2 ай бұрын

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

    @gogap7302@gogap730217 күн бұрын

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

    @vorosh1loff@vorosh1loff7 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk7 ай бұрын

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

      @vorosh1loff@vorosh1loff7 ай бұрын

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

      @vorosh1loff@vorosh1loff7 ай бұрын

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

    @Alexey_Gri@Alexey_Gri7 ай бұрын

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

      @user-zy1dc3gv6r@user-zy1dc3gv6r6 ай бұрын

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

    @user-gf2fg8if7q@user-gf2fg8if7q8 ай бұрын

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

    @dimonikbeats@dimonikbeatsАй бұрын

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

      @vadymprokopchuk@vadymprokopchukАй бұрын

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

    @zxcmetro667@zxcmetro6672 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk2 ай бұрын

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

      @zxcmetro667@zxcmetro6672 ай бұрын

  • Мошеник

    @user-gf2fg8if7q@user-gf2fg8if7q8 ай бұрын

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

    @user-lf6fk1fm6r@user-lf6fk1fm6r7 ай бұрын

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

    @user-ib3hj8wc4t@user-ib3hj8wc4t7 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk7 ай бұрын

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

      @user-ib3hj8wc4t@user-ib3hj8wc4t7 ай бұрын

    • @@user-ib3hj8wc4t именно так))

      @vadymprokopchuk@vadymprokopchuk7 ай бұрын

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

    @user-ib3hj8wc4t@user-ib3hj8wc4t7 ай бұрын

    • именно

      @vadymprokopchuk@vadymprokopchuk7 ай бұрын

  • Знаю, что не по теме, но у меня при запуске галпа возникает вот такая ошибка: [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 Подскажите пожалуйста, как её исправить!

    @user-mz7ge3ky8j@user-mz7ge3ky8j8 ай бұрын

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

    @icegouse@icegouse7 ай бұрын
KZhead