Финал Верстки сайта, пишем переключение на JavaScript
Вставка
- Опубліковано 9 вер 2023
- Друзья, четвертая часть вечеринки. Это финал господа! Пишем штукенцию на 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
Спасибо за вечеринку!!
Учусь по твоим видео вёрстке!!!
супер, топчик
@@vadymprokopchukздравствуйте , этот сайт на какую ширину экрана подходит? Для айпадов или айфонов?
@@born_Serious для всех
@@vadymprokopchuk спасибо вам за ответ 🙂
Ну ты крассава, вечеринка норм. Так держать. И давай побольше JS на дальнейших вечеринках.!!!
Спасибо большое за терпение, за понятные и запоминающиеся объяснения благодаря веселой подаче. Каждое видео несет много пользы! Повторяю за вами, где-то стараюсь остановить и самой подумать, что бы сделала сама. Потом смотрю, как вы реализуете тот или иной момент. Благодаря вашим видео учусь. Еще раз спасибо!
Вадим ... Требуем больше таких шикарных видео !! 😁
круть
Очень нравится такой формат) Благодаря тебе я учусь новому), выпускай чаще такие видео, как это)
Ну просто самый лучший учитель! Очень полезный материал, легкая подача! Благодарю!
Отличная подача! Всё чётко разъясняешь! Юморок колоритный и уместный! Спасибо!
Очень полезный и классный урок, добавлю себе на портфолио 😊
Огромное спасибо за такое интересное и познавательное видео!
3 вечера прошли великолепно! Спасибо!)
Большое спасибо, полезная, познавательная и подробная верстка!
спасибо вам огромное долго искал такие круты Верстки сайтов , очень круто обясняете , всегда была проблема с версткой но с вами тихонько учусь ЛАЙК
Спасибо большое ролики просто пушка буду применять такую вечеринку
Просто огроменное спасибо за урок!!!🥰👍 Хотела сверстать один макет, где можно выбрать фон сайта, но не знала, как это делается! Теперь знаю. Пошла верстать и закреплять полученные знания!
супер
Спасибо за твои видео, прокачивать свои скиллы в такой атмосфере - одно удовольствие)
класс, спасибо
Привет, спасибо большое за подробное разъяснение js!
Как насчёт сделать мини курсик или стрим (платный ) по js!? Только не углублённый а только то что нужно для верстки! Поверхностный так сказать!
это лучший канал по верстке!!!
Это сильно, это сильно. Крутая задумка с кнопками и вечеринкой, спасибо вам. Продолжайте в том же духе))
Супер, дякую!! Давай ще!!
Дякую
Дякую, усе вийшло.🤩😉Трішки з data-button погралась, тому що додала його не кнопці, а картинці. Не могла зрозуміти чому виходить undefined. Пояснення як завжди дуже зрозумілі!!! Рухаємось далі))
Спасибо большое
Человечище! Жму с благодарностью твою натруженную руку!
спасибо
Вечеринка топ! просто от души, благодарю, хотел бы от тебя уроки по Js, когда вижу Js втыкаю,теряюсь, а так красота красатище. Ты лучший в СНГ
спасибо
Спасибо тебе хороший человек
Спасибо за видео
Спасибо 👌
лайк за пояснение
Спасибо, шикарная вечеринка была, нужны еще вечеринки)
Спасибо братишка
Useful information. Thank you.
Дуже дякую за матеріал. Як кажуть - ніх... не зрозуміло, проте дуже цікаво)
Насправді для мене, як для початківця, поки що JS - це щось на кшталт фантастики. Якісь окремі моменти зрозумілі, але це мабуть 1-2% від загального. І все ж таки, як сказав Вадим, якщо нічого не зрозуміло, але продовжувати робити, то настане час, коли це розуміння прийде.
Ще раз красно дякую за корисну інформацію!
Дякую, так, все вірно, розуміння прийде, навіть не сумнівайтесь
@@vadymprokopchuk Дякую за підтримку. Іноді її не вистачає, щоб продовжувати робити щось далі.
Красава , Психовал много раз думал ты не правильно делаешь, оказывается я с дырявыми руками)) Я тебе очень благодарен.
Не работает js что белать?
спасибо очень круто
Дуже дякую Вам за відео. Ви потрясно класний лектор!
дякую
вообще интересная вечеринка получилась, познавательная
Очень, очень хорошо🙂🙂🙂
СУПЕР!👍
Спасибо большое за видео с JS!
пожалуйста, думаю может вам всякого позаписывать на нем )
@@vadymprokopchukне работаеть js
Кайф!
А мне понравилось. Спасибо автору за труд.
Спасибо
HTML/CSS удачно прошло. Но с JS проблемы, никак не доходило до меня, до этого момента. Спасибо Вадим
Сделал! Все получилось... Надо думать брать курс JS ^__^
У меня не работает js что делать?
Помогите
Это была легендарная вечеринка, с кайфом смотрел!
Ну это лайк и коммент! )
Дяка Братішка Вадосік)))))!!!!!!
Я смену картинок и стилей сделал полностью через JS, не добавляя никаких дополнительных классов или data-атрибутов. И еще решил, что не помешает возможность выбирать стили по умолчанию, поэтому меняя одну переменную defaultColor, у меня меняется цвет всех картинок (и background) еще до кликов пользователя.
Реализовал просто: меняю src картинок, а background - с помощью переопределения стилей :root (корневого) элемента.
P.S. С псевдоклассом :has интересное решение вышло у автора.
Дуже та дуже!
Very and very!
Очень и очень!
👍 👌
лайк за вечеринку
псевдокласс has не работает в Firefox-е, здесь уместнее было бы задать каждому градиенту класс и менять классы.
ещё как вариант задать кнопкам data-color с hex цветом и при смене цвета на jse задавать стиль градиента
большой + этого подхода в том, что если вёрстка будет тянуться на цмску, то для каждой кнопки можно задавать цвет какой хочешь и заданный цвет будет также отрабатывать для фона
Ставлю класс с классом класс
Четенько
Спасибо за вечеринку, правда затянулась она на пару дней😀
супер
Дякую за цікаве відео.
дякую
🤝
Заметка для меня! 28:16
Js нужно цеплять на дата атрибуты.
Цеплять JS к стилям неправильно.
Если мы цепляем JS к дата атрибутам мы не делаем кашу и получаем модульность.
Т.е наши скрипты работают с любыми классами и стилями.
+ в дата атрибуты можно передавать данные.
Дякую Вам...
Дякую за комент
В общем допилил весь проект. По JS: лучше проверять в хроме в мозиле не всё работает как надо, в частности с градиентом фоновым траблы а в хроме всё работает.
Вадим,привет! появился вопрос по верстки mobileFirst у тебя на канале,а подскажи как правильно(или как лучше) сделать секцию новостей? А то сделал флексами и на основных брейкпоинтах нормально получилось,как в макете,а в промежуточных размерах ужасно(
все видео подтверждения есть
Вечеринка, достойная жирного лайка, подписки, колокольчика. Если ваша вечеринка не похожа на эту даже не пытайтесь меня приглашать )))
Спасибо )
Все круто, единственный момент, если перевернуть телефон в альбомный формат, то адаптив в хэдере сыпится ((((((
Привет. Слава небесам, что я нашел тебя в пустоте ютуба. Начинаю смотреть твои видео, но появился вопрос. В более старых видео ты верстаешь многостраничник на препроцессоре, а в видео про многостраничник, которому 7 месяцев, без него, как и в этом проекте. Препроцессоры уже можно не изучать из-за развития css или все же нужно?
У меня ошибка по js где нужно убрать синие наушники не получается 3 дня все перепроверял😢
когда пытаюсь сменить цвет наушников то кнопка меняется, а наушников на сайте нет
Может кто html код скинуть, я просто где-то либо букву пропустил, либо добавил и теперь у меня когда нажимаю на кнопки пропадают все картинки
Хотелось бы уточнить, что тег "has" работает не во всех браузерах и при написании кода на firefox я долго не мог понять в чем проблема 😅
Все работает в firefox. Специально проверил.
has не работает в файрфоксе Firefox и много где еще
19:36
Я вот пробуюсь повторить, но на JS тупняк. Убирать синие - убирает. А выбранный не выводит, хотя и код уже с экрана 1 в 1 переписывал ток классы свои вставлял чуток другие. А всё равно не алё. Кто-нибудь пробовал?
значит что-то не так, есть ошибки
@@vadymprokopchuk всё всё, спасибо огромное, через часы мучений я понял, что мой затуп был в том что в data-button я писал "color-blue" и тд с одной тире а надо две. Я не очень понял, почему, но добавив тире - сработало. Спасибо за видео, удачи тебе в развитии, очень круто подаёшь информацию. Я даже жалею за купленный курс, с твоих видосов научился большему.
p.s. я не про твой курс если-что)) брал у html academy
нарешті я доВерстав цей сайтець.
Супер, так тримати
У меня не работает Js
где-то допустил ошибку, перепроверь
@@vadymprokopchuk а где можно вам задавать вопросы?
Добрый день, У вадима в группе заказал сайт у его администратора группы и меня кинули на 35 тр
Это всё замечательно, но уж очень простой макет для верстки. Смотрю проекты на фрилансе и там намного сложнее макеты в заказах ((
Макет простой, но на нем можно очень многому научиться.🙂
Мошеник
Верстку можно конечно посмотреть,но js это пустая трата времени не чего не понятно не чего не работает,внятно автор как и многие не сможет объяснить.
Вечеринка для классных типов и типих
именно
Привет. Объясни, пожалуйста, для чего ты делаешь div с классом container во всех проектах, но в стайлщите к нему не обращаешься?
Это контейнер, чтобы верстка не разлеталась, обращаюсь к нему в самом начале
@@vadymprokopchuk Как говорится, "не зовите меня, если ваша вечеринка не в контейнере")
@@user-ib3hj8wc4t именно так))
Знаю, что не по теме, но у меня при запуске галпа возникает вот такая ошибка:
[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
Подскажите пожалуйста, как её исправить!
С радостью купил бы у вас курс если он был по React.ts. Актуальней по рынку!