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

Подписаться 84 тыс.

Просмотров 10 тыс.

50% 1

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

Опубликовано:

9 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 116

@user-lc4kp9zo7l 9 месяцев назад

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

@vadymprokopchuk 9 месяцев назад

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

@born_Serious 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

@@born_Serious для всех

@born_Serious 6 месяцев назад

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

@svetamyakotina5861 8 месяцев назад

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

@Denis-sg6sl 8 месяцев назад

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

@user-xe4be7iq1q 9 месяцев назад

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

@vadymprokopchuk 9 месяцев назад

круть

@NIKOLARUS1 9 месяцев назад

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

@yuliachamlai2024 8 месяцев назад

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

@kirafenix2004 9 месяцев назад

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

@user-zy1dc3gv6r 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

супер

@Jane_123 9 месяцев назад

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

@user-ms3mz9vg8b 8 месяцев назад

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

@andrey-Dudkin 9 месяцев назад

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

@Valentynka_22 3 месяца назад

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

@sadamhylio691 8 месяцев назад

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

@user-nf9eu7fm7x Месяц назад

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

@vadymprokopchuk Месяц назад

Дякую

@ArteEtHumanitate 9 месяцев назад

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

@vadymprokopchuk 9 месяцев назад

спасибо

@user-uq6ke4kg3p 4 месяца назад

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

@user-zx9uu7ol2m 2 месяца назад

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

@lenaromaniuk8378 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

дякую

@user-cf6fv3os4q 2 месяца назад

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

@leeeelou 7 месяцев назад

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

@SuperDima99 9 месяцев назад

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

@ilyas.n 9 месяцев назад

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

@tarassteba9983 3 месяца назад

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

@user-px1ue8um8b 4 месяца назад

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

@boginska_ya_ 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@Maks__RR 2 месяца назад

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

@ukraine1514 3 месяца назад

Спасибо 👌

@ivan_k13 7 месяцев назад

СУПЕР!👍

@nic-ori 9 месяцев назад

Useful information. Thank you.

@ig89 8 месяцев назад

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

@saveliikosevich620 8 месяцев назад

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

@user-wm5wk8pe9o 9 месяцев назад

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

@hpbulbasaur8946 8 месяцев назад

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

@vvks9901 9 месяцев назад

Кайф!

@user-mp6fv9sx3t 5 месяцев назад

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

@dimonikbeats Месяц назад

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

@user-te4up6ng2l 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

спасибо

@sheshko_pavel 6 месяцев назад

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

@user-bf6cp8ju1i 8 месяцев назад

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

@boburmustafo8868 7 месяцев назад

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

@antoha9486 5 месяцев назад

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

@vadymprokopchuk 5 месяцев назад

Спасибо

@natalietalas 5 месяцев назад

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

@vadymprokopchuk 5 месяцев назад

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

@zxcmetro667 2 месяца назад

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

@user-kp7ce3ns1x 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@user-kp7ce3ns1x 4 месяца назад

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

@user-mx1rb2ec1n 3 месяца назад

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

@zxcmetro667 2 месяца назад

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

@sashavarava7933 7 месяцев назад

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

@vadymprokopchuk 7 месяцев назад

супер

@2day159 8 месяцев назад

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

@vitka0 7 месяцев назад

👍 👌

@eddsechevoi9089 8 месяцев назад

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

@gyurchenko77 8 месяцев назад

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

@vadymprokopchuk 8 месяцев назад

дякую

@vladimirzvyagincev8193 9 месяцев назад

Четенько

@hpbulbasaur8946 8 месяцев назад

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

@farhodizuribek9006 8 месяцев назад

🤝

@Mugen68606 8 месяцев назад

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

@EvilYou 6 месяцев назад

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

@user-yp8up4wo3d 6 месяцев назад

Дякую Вам...

@vadymprokopchuk 6 месяцев назад

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

@sergeigerasimenko7112 7 месяцев назад

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

@AU_IAN 5 месяцев назад

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

@gerasymenko1 2 месяца назад

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

@zxcmetro667 2 месяца назад

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

@zxcmetro667 2 месяца назад

Помогите

@koaksil1997 8 месяцев назад

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

@WERWOLION 8 месяцев назад

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

@user-gf2fg8if7q 8 месяцев назад

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

@user-oh4qr5ie4e 3 месяца назад

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

@gogap7302 Месяц назад

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

@daniloy266 2 месяца назад

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

@bergghest Месяц назад

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

@vadymprokopchuk Месяц назад

Спасибо )

@vorosh1loff 8 месяцев назад

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

@neptune3519 8 месяцев назад

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

@antonbobryshev9514 4 месяца назад

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

@vvks9901 9 месяцев назад

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

@tmusabaev5188 7 месяцев назад

19:36

@user-xt1ns1br7o 8 месяцев назад

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

@vorosh1loff 8 месяцев назад

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

@vadymprokopchuk 8 месяцев назад

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

@vorosh1loff 8 месяцев назад

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

@vorosh1loff 8 месяцев назад

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

@zxcmetro667 2 месяца назад

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

@vadymprokopchuk 2 месяца назад

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

@zxcmetro667 2 месяца назад

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

@user-gf2fg8if7q 8 месяцев назад

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

@dimonikbeats Месяц назад

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

@vadymprokopchuk Месяц назад

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

@Alexey_Gri 8 месяцев назад

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

@user-zy1dc3gv6r 6 месяцев назад

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

@user-gf2fg8if7q 8 месяцев назад

Мошеник

@user-lf6fk1fm6r 8 месяцев назад

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

@user-ib3hj8wc4t 7 месяцев назад

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

@vadymprokopchuk 7 месяцев назад

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

@user-ib3hj8wc4t 7 месяцев назад

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

@vadymprokopchuk 7 месяцев назад

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

@user-ib3hj8wc4t 7 месяцев назад

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

@vadymprokopchuk 7 месяцев назад

именно

@user-mz7ge3ky8j 9 месяцев назад

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