Верстка сайта для новичков ч.2 

Архив со всем добром для работы - 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, и многое для меня новое. Огромная благодарность за Ваш труд. Вадим здоровья Вам и вашей семье.

Вадим, я учу-учу джаву, сюда пришёл за тем что бы понять хоть немного фронт, хотябы на уровне просто вёрстки, ибо дошёл до веба, а там простейшие формы накидать уже проблема)) потому что если дело бэка касается, там всё плюс минус понятно) а вот вёрстка это боль... была))) пока не нарвался на вас)) это просто ПРЭКРАСНО)) я ржу как конь с этих фраз аля СДЕЛАЕМ ИМ КОНТЕЙНЕР ЧТОБЫ ПАЦАНЫ НЕ РАЗБЕЖАЛИСЬ) ВЕЧЕРИНОЧКА))) дак собственно к чему я) если бы бэк хоть ктонибудь рассказывал так же как вы) уже б давно работал гденибудь) спасибо!) продолжайте! пожалуйста) это анрил круто) лайк и подписка само собой

Привет! Ворвемся на эту вечеринку на крутых велосипедах))))))

блин , круто делаешь , и инфа качественная , и с юмором смешным , так учится верстке интересно и не скучно , респект , перехожу к адаптиву

Вадим спасибо! Отличный контент. Лучшее что мне попадалось, твои уроки! Твой труд обязательно будет вознагражден! Лайк как всегда!

Привет, Вадим! Очень рад тебя видеть и слышать!

Вадим, привет! Желаю всего хорошего тебе и твоей семье! Очень рад снова видеть тебя на стримах😉😉😉

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

Спасибо большое за Ваши старания! Вадим, у Вас отличные учительские навыки

Спасибо! Очень всё понятно. Пробую сначала сам верстать, а потом уже смотреть. Всё равно многое еще познавать и познавать. С Днём Вышиванки!

Столько всего нового для себя отметила я. Вы лучший просто! Огромное спасибо!

Благодарю за проделанную работу! Большое спасибо!

спасибо за чудесный урок! очень понятные объяснения, каждый урок отличается от предыдущего, что придает еще больше интереса к переходу на следующий и это прекрасно, даже Божественно, спасибо за Ваши старания)))))))............

Отличный вечер со вкусным чаем под не лучшую погодку за просмотром этого шедевра снова обеспечен)) Спасибо

Отличный урок! Заходит на одном дыхании!

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

Большое спасибо за ваш труд, Вадим!

вы святой, вы и выглядите как святой, один к одному, пришло знание и понимание, благородное дело, благодарю

Блииин! Красава вообще Вадим! В тоже время бесит, как так идеально получается, особенно позиционирование))))! Делаю сам, сидишь тупишь как разместить элементы, но это нормально))). Я сейчас прохожу обучение в SkillBox на Тестироващка ПО, сейчас у меня начался курс верстки. Там вообще непонятно рассказывают, а тебя начал смотреть, и прям как глаза раскрылись. Далее у меня адаптив. Продолжай в том же духе, буду ждать новых и интересных видосов!

Вадим здоровья Вам и вашей семье.

👍👍👍👍👍спасибо, отличное разъяснение, что куда зачем и почему!!!👍👍👍👍👍

И верстать научил, и настроение поднял. Хороший контент

Разве Я ,не писал под этим видео , что лучшие вечеренки по вёрстке на твоём канале !!!! Значит просто , я ещё не сделал третий урок ))!!!!

Спасибо большое за позновательные видео уроки. Очень полезно. Я создаю уже более 3 лет сайты на конструкторах и сейчас решил получить больше знаний изучая верстку. Друг порекомендовал ваши видео.

Не скучная и понятная подача👍👍👍, правда не для совсем новичков.

Огромное спасибо!!! Урок супер!!!

Превосходно!! Спасибо огромное, Вадим!!!

вы лучший!!! спасибо за вашу работу!😀💪

Спасибо! Хотелось бы еще увидеть верстку)

Вадим, было хорошо учить нас новичков верстать валидный HTML код.

Вадим, я все еще верстаю вместе с Вами этот же макет, дошла до элипсов, и балдею, из Вас получиться отличный рекламщик, маркетолог 😂

Так увлёкся просмотром, что чуть не забыл Лайк поставить👍

Спасибо, за ваш труд!

Спасибо за видео очень полезно и помогают)

Омг! Я это сверстала! Спасибо тебе огромное, Вадим.

Хотела поставить лайк, как Вадим и просил, а лайк-то уже стоит)

Очень благодарен за такую обучалку, ты серьезно лучший учитель ! Только в firefox велосипеды видны все ! Нет кроссбраузерности )

Жалко, что нельзя поставить 1000лайков!! Очень помогают ваши видео!

Вадим ты топыч я только начинаю учить верстку но вижу у тебя на канале не очень много верстки для продвинутых надеюсь в скором времене ее будет больше а так спасибо большое за этот контентыч!

Друже вибач шо не зразу лайк поставив, відос за два заходи дивився. Дякую за контент

Дуже продуктивно і цікавий формат, ДЯКУЮ

От себя добавлю следующее, я новичок в верстке, но уже не первый макет верстаю, и заметил такую штуку что некоторые ребята комментирую код для удобства. Отверстали, стилизовали, прокоментировали сочетанием клавиш ctrl / и +10 скорости в ориентировании по коду. Фича реально удобная, но есть нюанс если у вас тема какая либо стоит для VSC то комментарий может быть не так заметен, как по дефолту.

Hi, можно задать отступ для скрола красивого не переписывать отступы в готовом коде так. html{ scroll-behavior: smooth; scroll-padding-block-start: 150px;

Спасибо огроменное

Спасибо!

Все круто спасибо большое здаровье и успехов по жизни

Лучший!

спасибо за видос)

Привет, верстаю вперед тебя, даже не знал что можно выбор цвета сделать через инпуты с радио. Я вообще по другому пути пошел, просто сделал тот же слайдер, и всунул кнопки через абсолют, возле кнопки заказа. Сможет ли бэкэндер потом вытщаить заказ с цветом байка из слайдера?

Хароош, спасибо)

Дякую! найкащій в своїй праці

Прости Гуру, что на мгновение усомнился в тебе. Я подумал, зачем городить лишний div с классами form__radio-style. ведь можно просто сделать через input :after . Но за надменность я был наказа получасом тормозов, почему же не работает. После всего, я вернулся на путь исправления, покаялся и переписал код обратно. Из положительного, теперь я навсегда запомню что псевдоэлементы не применяются к input img и др непарным тегам типа ? , работает только с элементами, имеющими содержимое. Ещё раз спасибо за науку

Спасибо, все достойно. Вот только плавный скрол почему-то не работает. Браузер - Хром, об обновлениях он сам предупреждает. Предлагаемый скрипт работает на ура, правда приходится временно блокировать отмену стандартной обработки. Вернуться назад к меню в хедере можно, Ctrl-Home в помощь (боковой кнопкой мышки все же проще и тянуться далеко не надо))), а если эта меню где-то еще. Но это так, просто досадные мелочи. Еще раз спасибо.

Поставил лайк и подписался

привет, если в .characteristics__descr 2 строки текста ( взрослый, дорожный, городской, электровелосипед, алюминиевая рама), то отступ не 5, а 9 px. это не реализовано. как сделать?)

Лайк👍

Вадос ты просто Вадосище))) как всегда вечериночка шо в космосе побывал)))в ритме танца)

вопрос а если не таблицей делать, а через списки это разве на нарушает семантику?

лакосік комент ))) все чудово верстаю кайфую!!!

шутка про седло - топ)

Лайк! Крутий відос!

почему если в слайдере 3 картинки,то у меня последняя картинка уезжает вниз на пол экрана,а если добавляю четвертую,то все ок?ps. именно нечетное число картинок в слайдаре вызывает такую проблему.с чем может быть связано?

Дякую!

Дякую за відос🧑‍🎓

привет , я все делал как по видео но почему то жирный шрифт не работает. А так все очень классно! Рад что есть такой канал

блок с характеристиками лучше было бы таблицами сделать, а так засорять код десятками списками тоже не очень хорошо

.characteristics__list имеет padding-bottom 30 px. Это можно записать так: .characteristics__list:not(:last-child){ padding-bottom: 30px; } все кроме последнего..

👏🏻👍

я бы реализовал секцию с цветами по-другому. По сути это тот же самый слайдер. Мы просто стилизуем дотсы под нужные цвета и размещаем их в нужном месте, а потом в js отключаем для слайдера autoplay. И все, пользователь нажимает на дотс определенного цвета и видит нужную картинку

Лучший гений

Где заказать такие велики?😁 Спасибо за видео! супер!

Привет, скажи пожалуйста, какую тему ты используешь в коде Visual Studio?

Манетки - это переключатели скоростей)

Почему блок характеристик , списком описания не сделать было?

Привет! Подскажите пожалуйста что лучше использовать, сжатие картинок или конвертацию в webp? Спасибо!

Доброго времени суток. На 13:05 я обновляю страницу, но фотография все равно останется растянутой, а самое длинное заглавие (комбинация режимов для увеличения запаса хода) не влазит в одну строку и занимает больше чем 490рх. Не могу понять почему, все перепробовал. Код 1 в 1 как у Вас. Что может быть?

Привет. Подскажи пожалуйста каким сочетанием клавишь ты дублируешь код?

Вадим здравствуйте. У меня .form__input-radio:checked+.form__bike { display: block; } не работает,. СSS display: block; зачеркнут, справа написано "таблица стилей агента пользователя". Nozmalıze кажется не помогает. Вроде проверила весь код, смотрела видео 3 раза. В начале работал, к концу верстку во второму видео велики в форме исчезли, когда убираю display: none, велики появляются, но не работают с кнопками radio. Что делать?

Добрый вечер! я так понимаю, макеты отличаются? картинки по размерам не бьются немного) специально посмотрел подробно, у Вас картинки одинакового размера. В первом слайдере у меня картинка одна с контуром) Во втором слайдере у меня картинки 1150*632 и 1200*630 Архив качал по ссылке) с чем это может быть связанно?

Привет земляк.

Спасибо за урок. Повторяла, не работает переключатель цвета, Если мы убираем input-radio за область, как он понимает что выбран серый или красный (1:26). Непонимаю, как привязать переключатели "form__radio-style". Уже несколько раз пересмотрела(

Секцию с характеристиками сделал с помощью гридов. Допускается ли в web-сообществе такое решение?

Втаю. Шось не збагну ... ширину Flex елементу задаємо для .info__list { max-width: 490px; } в наступному розділі вже для .characteristics__items { flex-basis: 570px; } ?

Как совсем новичок, скажу - вот начиная с радиокнопок просто жесть)). 3 минути видео - потом 30 мин в гугле, что это за тег и с чем его едят)). А зачем дисплей: блок для фоток байков и сейчас не доганяю, и почему они тогда не занимают всю строку.... Хз.

Новички на характеристиках потерялись , закипели)))

Привет друзья, у меня возникла проблема с вечеринкой(2ым слайдером). Когда слайдер отображает первый слайд, у меня висят 4 переключателя как у нашего первого слайдера .bike-slider. Но когда начинается второй и третий слайд все отображается корректно: 3 переключателя с нужной позицией. Пожалуйста помогите Разобрался, переключатели "нарисованные" и являются частью картинки это не интерактивные элементы😄

Error: Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.)

По поводу блока характеристик, его же проще таблицей сделать и стилизовать потом проще, зачем лепить такого франкенштейна с кучей класов???

Вадим благодарю но валидатор ругается , говорит что Див не может быть ребенком у Лейбла*

Вадос крутий, без питань. Но не дуже розумію, в чому прикол випускати кучу відосів для новачків? Чисто для переглядів?

Лайк -да, почему нет?

можно забить на то что валидатор ругается

Так і не зрощумів навіщо було создавати div з классом container?

kaef

Ссылку на style check bocks забыл походу ( 1:18:10 )

Или это не страшно?

Вадим отличный контент! Есть вопросик? В блоке info , .info__item + .info__item ты применил item - (am) padding-top! можно ли применить margin-top? Если нет , то в чем разница?

Добрый вечер, вопрос по поводу нейминга классов footer__social-img про двойное подчеркивание все понятно, но почему следующее слово идете через "-", а не через "_"