Архив со всем добром для работы - drive.google.com/file/d/1BaRwLoCQ2817VYHb7frXknzbiK8_nFnK/view?usp=sharing Готовая верстка на patreon - www.patreon.com/from0to1 Сайт курса по верстке - from0to1.com.ua/
Классный макет. Инфа качественная и с юмором смешным, весело смотреть. Очень познавательно было смотреть о слайдах, стилизации checkbox и radio, узнала о slick-dots, .form__input-name::placeholder, и многое для меня новое. Огромная благодарность за Ваш труд. Вадим здоровья Вам и вашей семье.
Вадим, я учу-учу джаву, сюда пришёл за тем что бы понять хоть немного фронт, хотябы на уровне просто вёрстки, ибо дошёл до веба, а там простейшие формы накидать уже проблема)) потому что если дело бэка касается, там всё плюс минус понятно) а вот вёрстка это боль... была))) пока не нарвался на вас)) это просто ПРЭКРАСНО)) я ржу как конь с этих фраз аля СДЕЛАЕМ ИМ КОНТЕЙНЕР ЧТОБЫ ПАЦАНЫ НЕ РАЗБЕЖАЛИСЬ) ВЕЧЕРИНОЧКА))) дак собственно к чему я) если бы бэк хоть ктонибудь рассказывал так же как вы) уже б давно работал гденибудь) спасибо!) продолжайте! пожалуйста) это анрил круто) лайк и подписка само собой
Вадим, огромное спасибо за твой труд. С каждым твоим видео я чувствую, как прокачиваются мои навыки в вёрстке. Спасибо за регулярный выпуск видео, благодаря этому могу заниматься каждый день.
спасибо за чудесный урок! очень понятные объяснения, каждый урок отличается от предыдущего, что придает еще больше интереса к переходу на следующий и это прекрасно, даже Божественно, спасибо за Ваши старания)))))))............
Спасибо большое за позновательные видео уроки. Очень полезно. Я создаю уже более 3 лет сайты на конструкторах и сейчас решил получить больше знаний изучая верстку. Друг порекомендовал ваши видео.
Блииин! Красава вообще Вадим! В тоже время бесит, как так идеально получается, особенно позиционирование))))! Делаю сам, сидишь тупишь как разместить элементы, но это нормально))). Я сейчас прохожу обучение в SkillBox на Тестироващка ПО, сейчас у меня начался курс верстки. Там вообще непонятно рассказывают, а тебя начал смотреть, и прям как глаза раскрылись. Далее у меня адаптив. Продолжай в том же духе, буду ждать новых и интересных видосов!
Вадим ты топыч я только начинаю учить верстку но вижу у тебя на канале не очень много верстки для продвинутых надеюсь в скором времене ее будет больше а так спасибо большое за этот контентыч!
Hi, можно задать отступ для скрола красивого не переписывать отступы в готовом коде так. html{ scroll-behavior: smooth; scroll-padding-block-start: 150px;
Прости Гуру, что на мгновение усомнился в тебе. Я подумал, зачем городить лишний div с классами form__radio-style. ведь можно просто сделать через input :after . Но за надменность я был наказа получасом тормозов, почему же не работает. После всего, я вернулся на путь исправления, покаялся и переписал код обратно. Из положительного, теперь я навсегда запомню что псевдоэлементы не применяются к input img и др непарным тегам типа ? , работает только с элементами, имеющими содержимое. Ещё раз спасибо за науку
Привет, верстаю вперед тебя, даже не знал что можно выбор цвета сделать через инпуты с радио. Я вообще по другому пути пошел, просто сделал тот же слайдер, и всунул кнопки через абсолют, возле кнопки заказа. Сможет ли бэкэндер потом вытщаить заказ с цветом байка из слайдера?
От себя добавлю следующее, я новичок в верстке, но уже не первый макет верстаю, и заметил такую штуку что некоторые ребята комментирую код для удобства. Отверстали, стилизовали, прокоментировали сочетанием клавиш ctrl / и +10 скорости в ориентировании по коду. Фича реально удобная, но есть нюанс если у вас тема какая либо стоит для VSC то комментарий может быть не так заметен, как по дефолту.
Доброго времени суток. На 13:05 я обновляю страницу, но фотография все равно останется растянутой, а самое длинное заглавие (комбинация режимов для увеличения запаса хода) не влазит в одну строку и занимает больше чем 490рх. Не могу понять почему, все перепробовал. Код 1 в 1 как у Вас. Что может быть?
Таская же беда. Я посмотрел h4 это и есть 16 px , так в документации прописано. Но заметил что если к h4 прописывать font size 16px , то текст увеличивается. И у меня отступы по 50px не работают .info__item + .info_item
я бы реализовал секцию с цветами по-другому. По сути это тот же самый слайдер. Мы просто стилизуем дотсы под нужные цвета и размещаем их в нужном месте, а потом в js отключаем для слайдера autoplay. И все, пользователь нажимает на дотс определенного цвета и видит нужную картинку
Спасибо, все достойно. Вот только плавный скрол почему-то не работает. Браузер - Хром, об обновлениях он сам предупреждает. Предлагаемый скрипт работает на ура, правда приходится временно блокировать отмену стандартной обработки. Вернуться назад к меню в хедере можно, Ctrl-Home в помощь (боковой кнопкой мышки все же проще и тянуться далеко не надо))), а если эта меню где-то еще. Но это так, просто досадные мелочи. Еще раз спасибо.
Спасибо за урок. Повторяла, не работает переключатель цвета, Если мы убираем input-radio за область, как он понимает что выбран серый или красный (1:26). Непонимаю, как привязать переключатели "form__radio-style". Уже несколько раз пересмотрела(
.characteristics__list имеет padding-bottom 30 px. Это можно записать так: .characteristics__list:not(:last-child){ padding-bottom: 30px; } все кроме последнего..
Вадим здравствуйте. У меня .form__input-radio:checked+.form__bike { display: block; } не работает,. СSS display: block; зачеркнут, справа написано "таблица стилей агента пользователя". Nozmalıze кажется не помогает. Вроде проверила весь код, смотрела видео 3 раза. В начале работал, к концу верстку во второму видео велики в форме исчезли, когда убираю display: none, велики появляются, но не работают с кнопками radio. Что делать?
не знаю актуально или нет, но я столкнулась с такой же проблемой. запись цсс должна выглядеть так: .form__input-radio { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); } .form__bike { display: none; } .form__input-radio:checked + .form__bike { display: block; } т.е идти друг за другом, может быть у вас проблема была именно с этим
привет, если в .characteristics__descr 2 строки текста ( взрослый, дорожный, городской, электровелосипед, алюминиевая рама), то отступ не 5, а 9 px. это не реализовано. как сделать?)
почему если в слайдере 3 картинки,то у меня последняя картинка уезжает вниз на пол экрана,а если добавляю четвертую,то все ок?ps. именно нечетное число картинок в слайдаре вызывает такую проблему.с чем может быть связано?
@kochansv Спасибо вам большое! просто настроил и то и то, но в webp вроде размер меньше при том же качестве, плюс bmp с прозрачным фоном тоже хорошо конвертирует. Просто интересует мнение на счет поддержки браузерами и популярности WebP, можно ли на его использовать на постоянке. Может я глупые вопросы задаю, просто нахожусь на этапе обучения)))
Добрый вечер! я так понимаю, макеты отличаются? картинки по размерам не бьются немного) специально посмотрел подробно, у Вас картинки одинакового размера. В первом слайдере у меня картинка одна с контуром) Во втором слайдере у меня картинки 1150*632 и 1200*630 Архив качал по ссылке) с чем это может быть связанно?
Втаю. Шось не збагну ... ширину Flex елементу задаємо для .info__list { max-width: 490px; } в наступному розділі вже для .characteristics__items { flex-basis: 570px; } ?
Как совсем новичок, скажу - вот начиная с радиокнопок просто жесть)). 3 минути видео - потом 30 мин в гугле, что это за тег и с чем его едят)). А зачем дисплей: блок для фоток байков и сейчас не доганяю, и почему они тогда не занимают всю строку.... Хз.
Привет друзья, у меня возникла проблема с вечеринкой(2ым слайдером). Когда слайдер отображает первый слайд, у меня висят 4 переключателя как у нашего первого слайдера .bike-slider. Но когда начинается второй и третий слайд все отображается корректно: 3 переключателя с нужной позицией. Пожалуйста помогите Разобрался, переключатели "нарисованные" и являются частью картинки это не интерактивные элементы😄
@@sergeykupriyenko3379 только ручками в редакторе. Я например не стал их убирать так как это учебный проект и тратить врем на то чтобы подтирать их глупо( в моей ситуации).
Вадим отличный контент! Есть вопросик? В блоке info , .info__item + .info__item ты применил item - (am) padding-top! можно ли применить margin-top? Если нет , то в чем разница?
Архив со всем добром для работы - drive.google.com/file/d/1BaRwLoCQ2817VYHb7frXknzbiK8_nFnK/view?usp=sharing
Готовая верстка на patreon - www.patreon.com/from0to1
Сайт курса по верстке - from0to1.com.ua/
Классный макет. Инфа качественная и с юмором смешным, весело смотреть. Очень познавательно было смотреть о слайдах, стилизации checkbox и radio, узнала о slick-dots, .form__input-name::placeholder, и многое для меня новое. Огромная благодарность за Ваш труд. Вадим здоровья Вам и вашей семье.
Благодарю
Офигеть просто, какая у вас классная информация на канале. Недавно попался в рекомендациях, сижу уже неделю смотрю. Спасибо!
Вадим, я учу-учу джаву, сюда пришёл за тем что бы понять хоть немного фронт, хотябы на уровне просто вёрстки, ибо дошёл до веба, а там простейшие формы накидать уже проблема)) потому что если дело бэка касается, там всё плюс минус понятно) а вот вёрстка это боль... была))) пока не нарвался на вас)) это просто ПРЭКРАСНО)) я ржу как конь с этих фраз аля СДЕЛАЕМ ИМ КОНТЕЙНЕР ЧТОБЫ ПАЦАНЫ НЕ РАЗБЕЖАЛИСЬ) ВЕЧЕРИНОЧКА))) дак собственно к чему я) если бы бэк хоть ктонибудь рассказывал так же как вы) уже б давно работал гденибудь) спасибо!) продолжайте! пожалуйста) это анрил круто) лайк и подписка само собой
блин , круто делаешь , и инфа качественная , и с юмором смешным , так учится верстке интересно и не скучно , респект , перехожу к адаптиву
Вадим спасибо! Отличный контент. Лучшее что мне попадалось, твои уроки! Твой труд обязательно будет вознагражден! Лайк как всегда!
спасибо
Привет, Вадим! Очень рад тебя видеть и слышать!
вы святой, вы и выглядите как святой, один к одному, пришло знание и понимание, благородное дело, благодарю
Привет!
Ворвемся на эту вечеринку на крутых велосипедах))))))
Вадим, привет! Желаю всего хорошего тебе и твоей семье! Очень рад снова видеть тебя на стримах😉😉😉
Спасибо! Очень всё понятно. Пробую сначала сам верстать, а потом уже смотреть. Всё равно многое еще познавать и познавать. С Днём Вышиванки!
Вадим, огромное спасибо за твой труд. С каждым твоим видео я чувствую, как прокачиваются мои навыки в вёрстке. Спасибо за регулярный выпуск видео, благодаря этому могу заниматься каждый день.
Спасибо тебе Вадос, очень приятно с тобой верстку учить!
спасибо
Спасибо большое за Ваши старания! Вадим, у Вас отличные учительские навыки
Столько всего нового для себя отметила я. Вы лучший просто! Огромное спасибо!
Отличный вечер со вкусным чаем под не лучшую погодку за просмотром этого шедевра снова обеспечен))
Спасибо
спасибо за чудесный урок! очень понятные объяснения, каждый урок отличается от предыдущего, что придает еще больше интереса к переходу на следующий и это прекрасно, даже Божественно, спасибо за Ваши старания)))))))............
Благодарю за проделанную работу! Большое спасибо!
Спасибо большое за позновательные видео уроки. Очень полезно. Я создаю уже более 3 лет сайты на конструкторах и сейчас решил получить больше знаний изучая верстку. Друг порекомендовал ваши видео.
супер, добро пожаловать на борт)
Очень благодарен за такую обучалку, ты серьезно лучший учитель !
Только в firefox велосипеды видны все ! Нет кроссбраузерности )
У меня всё работает и лисе и в опере.
Разве Я ,не писал под этим видео , что лучшие вечеренки по вёрстке на твоём канале !!!! Значит просто , я ещё не сделал третий урок ))!!!!
Друже вибач шо не зразу лайк поставив, відос за два заходи дивився. Дякую за контент
Омг! Я это сверстала! Спасибо тебе огромное, Вадим.
Блииин! Красава вообще Вадим! В тоже время бесит, как так идеально получается, особенно позиционирование))))! Делаю сам, сидишь тупишь как разместить элементы, но это нормально))). Я сейчас прохожу обучение в SkillBox на Тестироващка ПО, сейчас у меня начался курс верстки. Там вообще непонятно рассказывают, а тебя начал смотреть, и прям как глаза раскрылись. Далее у меня адаптив. Продолжай в том же духе, буду ждать новых и интересных видосов!
И верстать научил, и настроение поднял. Хороший контент
Отличный урок! Заходит на одном дыхании!
Дуже продуктивно і цікавий формат, ДЯКУЮ
дякую
Вадим здоровья Вам и вашей семье.
Вадим, я все еще верстаю вместе с Вами этот же макет, дошла до элипсов, и балдею, из Вас получиться отличный рекламщик, маркетолог 😂
Превосходно!! Спасибо огромное, Вадим!!!
Так увлёкся просмотром, что чуть не забыл Лайк поставить👍
Вадим, было хорошо учить нас новичков верстать валидный HTML код.
Большое спасибо за ваш труд, Вадим!
Хотела поставить лайк, как Вадим и просил, а лайк-то уже стоит)
Не скучная и понятная подача👍👍👍, правда не для совсем новичков.
Спасибо! Хотелось бы еще увидеть верстку)
Вадим ты топыч я только начинаю учить верстку но вижу у тебя на канале не очень много верстки для продвинутых надеюсь в скором времене ее будет больше а так спасибо большое за этот контентыч!
Как успехи?
@@yaspermcglott3403 Отлично вот уже скоро буду первый заказ делать хотя в то время мне казалось что заробатывать я буду куда быстрее.
@@vasiliypetrovych2405 Какие заказы берёте?
блок с характеристиками лучше было бы таблицами сделать, а так засорять код десятками списками тоже не очень хорошо
вы лучший!!! спасибо за вашу работу!😀💪
👍👍👍👍👍спасибо, отличное разъяснение, что куда зачем и почему!!!👍👍👍👍👍
лакосік комент ))) все чудово верстаю кайфую!!!
Супер, так тримати
Жалко, что нельзя поставить 1000лайков!! Очень помогают ваши видео!
Огромное спасибо!!! Урок супер!!!
Дякую! найкащій в своїй праці
Hi, можно задать отступ для скрола красивого не переписывать отступы в готовом коде так.
html{
scroll-behavior: smooth;
scroll-padding-block-start: 150px;
Спасибо за видео очень полезно и помогают)
Спасибо, за ваш труд!
Вадос ты просто Вадосище))) как всегда вечериночка шо в космосе побывал)))в ритме танца)
шутка про седло - топ)
Манетки - это переключатели скоростей)
Лучший!
Прости Гуру, что на мгновение усомнился в тебе. Я подумал, зачем городить лишний div с классами form__radio-style. ведь можно просто сделать через input :after . Но за надменность я был наказа получасом тормозов, почему же не работает. После всего, я вернулся на путь исправления, покаялся и переписал код обратно. Из положительного, теперь я навсегда запомню что псевдоэлементы не применяются к input img и др непарным тегам типа ? , работает только с элементами, имеющими содержимое. Ещё раз спасибо за науку
красава, всегда круто проверить на практике, и потом навсегда запомнить
Все круто спасибо большое здаровье и успехов по жизни
Благодарю
Привет, верстаю вперед тебя, даже не знал что можно выбор цвета сделать через инпуты с радио. Я вообще по другому пути пошел, просто сделал тот же слайдер, и всунул кнопки через абсолют, возле кнопки заказа. Сможет ли бэкэндер потом вытщаить заказ с цветом байка из слайдера?
От себя добавлю следующее, я новичок в верстке, но уже не первый макет верстаю, и заметил такую штуку что некоторые ребята комментирую код для удобства. Отверстали, стилизовали, прокоментировали сочетанием клавиш ctrl / и +10 скорости в ориентировании по коду. Фича реально удобная, но есть нюанс если у вас тема какая либо стоит для VSC то комментарий может быть не так заметен, как по дефолту.
Доброго времени суток. На 13:05 я обновляю страницу, но фотография все равно останется растянутой, а самое длинное заглавие (комбинация режимов для увеличения запаса хода) не влазит в одну строку и занимает больше чем 490рх. Не могу понять почему, все перепробовал. Код 1 в 1 как у Вас. Что может быть?
Таская же беда. Я посмотрел h4 это и есть 16 px , так в документации прописано. Но заметил что если к h4 прописывать font size 16px , то текст увеличивается. И у меня отступы по 50px не работают .info__item + .info_item
Лайк! Крутий відос!
я бы реализовал секцию с цветами по-другому. По сути это тот же самый слайдер. Мы просто стилизуем дотсы под нужные цвета и размещаем их в нужном месте, а потом в js отключаем для слайдера autoplay. И все, пользователь нажимает на дотс определенного цвета и видит нужную картинку
это же не красоты ради показания с кнопок будут передаваться на сервер и как-то обрабатываться а как ты обработаешь дотсы со слайдера
@@helmas_witch дотсы это такой же элемент страницы данные от которого тоже могут передаваться
Поставил лайк и подписался
Где заказать такие велики?😁
Спасибо за видео! супер!
Спасибо, все достойно. Вот только плавный скрол почему-то не работает. Браузер - Хром, об обновлениях он сам предупреждает. Предлагаемый скрипт работает на ура, правда приходится временно блокировать отмену стандартной обработки. Вернуться назад к меню в хедере можно, Ctrl-Home в помощь (боковой кнопкой мышки все же проще и тянуться далеко не надо))), а если эта меню где-то еще.
Но это так, просто досадные мелочи. Еще раз спасибо.
вопрос а если не таблицей делать, а через списки это разве на нарушает семантику?
Спасибо за урок. Повторяла, не работает переключатель цвета, Если мы убираем input-radio за область, как он понимает что выбран серый или красный (1:26). Непонимаю, как привязать переключатели "form__radio-style". Уже несколько раз пересмотрела(
у меня заработала, после того как убрал атрибур for в тэге label
@@SashaGroza Спасибо. Тоже заработало!
@@SashaGroza Спасибо, Человек! Полчаса раздумий что-где-как и такое простое решение!
а я не понял что нужно сделать у меня такая же проблемка ((( помогите пожалуйста
Лучший гений
Дякую за відос🧑🎓
Почему блок характеристик , списком описания не сделать было?
Лайк👍
.characteristics__list имеет padding-bottom 30 px.
Это можно записать так:
.characteristics__list:not(:last-child){
padding-bottom: 30px;
}
все кроме последнего..
Дякую!
спасибо за видос)
Вадим здравствуйте. У меня .form__input-radio:checked+.form__bike {
display: block;
} не работает,.
СSS display: block; зачеркнут, справа написано "таблица стилей агента пользователя". Nozmalıze кажется не помогает. Вроде проверила весь код, смотрела видео 3 раза.
В начале работал, к концу верстку во второму видео велики в форме исчезли, когда убираю display: none, велики появляются, но не работают с кнопками radio.
Что делать?
не знаю актуально или нет, но я столкнулась с такой же проблемой.
запись цсс должна выглядеть так:
.form__input-radio {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.form__bike {
display: none;
}
.form__input-radio:checked + .form__bike {
display: block;
}
т.е идти друг за другом, может быть у вас проблема была именно с этим
привет, если в .characteristics__descr 2 строки текста (
взрослый, дорожный, городской, электровелосипед, алюминиевая рама), то отступ не 5, а 9 px. это не реализовано. как сделать?)
Спасибо!
почему если в слайдере 3 картинки,то у меня последняя картинка уезжает вниз на пол экрана,а если добавляю четвертую,то все ок?ps. именно нечетное число картинок в слайдаре вызывает такую проблему.с чем может быть связано?
привет , я все делал как по видео но почему то жирный шрифт не работает. А так все очень классно! Рад что есть такой канал
Error: Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.)
Привет! Подскажите пожалуйста что лучше использовать, сжатие картинок или конвертацию в webp? Спасибо!
@kochansv Спасибо вам большое! просто настроил и то и то, но в webp вроде размер меньше при том же качестве, плюс bmp с прозрачным фоном тоже хорошо конвертирует. Просто интересует мнение на счет поддержки браузерами и популярности WebP, можно ли на его использовать на постоянке. Может я глупые вопросы задаю, просто нахожусь на этапе обучения)))
конвертация хорошо себя показывает
Добрый вечер! я так понимаю, макеты отличаются?
картинки по размерам не бьются немного) специально посмотрел подробно, у Вас картинки одинакового размера.
В первом слайдере у меня картинка одна с контуром)
Во втором слайдере у меня картинки 1150*632 и 1200*630
Архив качал по ссылке)
с чем это может быть связанно?
Измени размер изображения в фирме
Спасибо огроменное
Хароош, спасибо)
Привет, скажи пожалуйста, какую тему ты используешь в коде Visual Studio?
material
Секцию с характеристиками сделал с помощью гридов. Допускается ли в web-сообществе такое решение?
CSS:
.property-table-columns
{
display: grid;
grid-row-gap: 5px;
grid-template-columns: repeat(2, 1fr);;
}
.property-table-column
{
max-width: 285px;
}
HTML:
Общие
Производитель
Xiaomi
Вид
взрослый, дорожный, городской, электровелосипед, алюминиевая рама
Колеса
26, двойной алюминиевый обод
Электропривод
мотор 250W, разгон до 25 км/ч
Втаю. Шось не збагну ... ширину Flex елементу задаємо для .info__list {
max-width: 490px;
}
в наступному розділі вже для .characteristics__items {
flex-basis: 570px;
} ?
По поводу блока характеристик, его же проще таблицей сделать и стилизовать потом проще, зачем лепить такого франкенштейна с кучей класов???
А ты сделай таблицей, потом все поймёшь
я делал таблицей и... сделал) но лучше не надо поверь)
@@SqwedWardillo а че такого?
Как совсем новичок, скажу - вот начиная с радиокнопок просто жесть)). 3 минути видео - потом 30 мин в гугле, что это за тег и с чем его едят)). А зачем дисплей: блок для фоток байков и сейчас не доганяю, и почему они тогда не занимают всю строку.... Хз.
👏🏻👍
Привет друзья, у меня возникла проблема с вечеринкой(2ым слайдером). Когда слайдер отображает первый слайд, у меня висят 4 переключателя как у нашего первого слайдера .bike-slider. Но когда начинается второй и третий слайд все отображается корректно: 3 переключателя с нужной позицией. Пожалуйста помогите
Разобрался, переключатели "нарисованные" и являются частью картинки это не интерактивные элементы😄
и как убрать эти нарисованные переключатели?
@@sergeykupriyenko3379 только ручками в редакторе. Я например не стал их убирать так как это учебный проект и тратить врем на то чтобы подтирать их глупо( в моей ситуации).
Новички на характеристиках потерялись , закипели)))
Ну-ну-ну. Дошла до конца! Осталось только 3 часть про адаптив, но точно уже не сегодня. Закипела в конце
Привет земляк.
Так і не зрощумів навіщо було создавати div з классом container?
Вадос крутий, без питань. Но не дуже розумію, в чому прикол випускати кучу відосів для новачків? Чисто для переглядів?
Ссылку на style check bocks забыл походу ( 1:18:10 )
исправил, спасибо
Лайк -да, почему нет?
почему отступы между абзацами в секции "Info" делаем паддингами, а не маржинами?
Вадим благодарю но валидатор ругается , говорит что Див не может быть ребенком у Лейбла*
можно забить на то что валидатор ругается
Или это не страшно?
kaef
Вадим отличный контент! Есть вопросик? В блоке info , .info__item + .info__item ты применил item - (am) padding-top! можно ли применить margin-top? Если нет , то в чем разница?
Дуже круто виглядає в мене на ПК, дякую я зробив ) !!!