Верстка сайта - HTML, CSS, JS. Адаптив, Часть 2, Финал

[@vadymprokopchuk]

макет - drive.google.com/file/d/1MmhE-n05AVMBFBTX9xCi4WAykIBZFVN-/view?usp=sharing файлы (начальный html и css) - drive.google.com/file/d/15xRFhbsCaLgI4nEkmklbbthm5t6D4jPF/view?usp=sharing ---------------------------------------- Сайт курса по верстке - from0to1.com.ua/ ----------------------------------------

[@ТетянаХарченко-н6н]

Просто клас. З Вами класно навчатися. Дякую за неймовірні відео-уроки. Цікаво, легко, спокійно, а головне - це подача і просто розкішне почуття гумору.

[@ТетянаХарченко-н6н]

3:51:26 просто вогонь! Крутий!)

[@mmosow]

Наконец то к нам приехал на Вадос дорогоооой!!! Спасибо брат, что так быстро завершающая часть этой грандиозной верстки!!! Лайк, подписки, ведро чая!!!

[@datoshcode]

Привіт, друже. Завершив і я верстку цього чудового макету. Я макет верстав використовуючи збірку Gulp, про яку ти розповідав, а точніше ми збирали разом за твоїми рекомендаціями) Єдине що я до збірки додав, так це свою будову файлів scss, а в цілому збірочка Gulp вийшла бомбезна. Дякую! З макетом збірка впоралася на всі 100% !!!

[@vadymprokopchuk]

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

[@c4inusiii]

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

[@AU_IAN]

Спасибо, увидел много полезного! Адаптив, конечно, божественный! Заказчик рыдал бы от восторга!🤣 🤣🤣🤣🤣

[@СергейРоговой-л5п]

Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.

[@DaniilSonin]

Да, спасибо что спросил)

[@Saba-cn8gp]

даже, не глядя как всегда шикарно. будет вечеринка на ночь, спасибо вам за это.

[@vadymprokopchuk]

крутяк

[@JavaScript-b1m]

The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work.

[@alexms8508]

Коммент для продвижения ! Такая работа должна продвигаться в массы

[@vadymprokopchuk]

Спасибо

[@SandyWinman]

Богдан, респект за відос)

[@ДядяБогданКлючНа9]

Большое спасибо за эти 2 видео, вспомнил как верстать, всё повторил ни одной ошибки в видео, топ короче

[@biotexcom5464]

Cпасибо, бэкенд учится верстать. Хочу быть универсальным програмистом. Что бы полноценно самому создавать целые приложения. привет из Киева.

[@АлексейЛысак-ц4н]

*ЖДЕМЬ С НЕТЕРПЕНИЕМ СЛЕДУЮЩИЕ ИНТЕРЕСНЫЕ МАКЕТЫ!!!!)*

[@vadymprokopchuk]

супер!

[@oleglagoda3931]

Большое спасибо. Отличная вечеринка. Замечательный канал.

[@vadymprokopchuk]

благодарю

[@dmitryvertoprakhov5469]

Дякую за чудову вечірку

[@GLUCKKKKKKKKKK]

Богдан))) ты шикарный, подтягиваю пробелы в верстке благодаря тебе. P.S нас всех уже заменил AI, верстка не нужна и этот комментарий был написан нейросетью.

[@StarkRealityy]

Наконец то! Вечеринка друзья!

[@yuriykolomytsyn2352]

да как так-то?! что я делаю не так?! почему я постоянно пропускаю вечеринку

[@ringnull]

Сразу лайк ) Ноги сами бегут в пляс на этой вечеринке )

[@vadymprokopchuk]

огонь!)

[@balcony_warrior]

Оч классные видосы получились, много полезной информации. Хотелось бы еще видео по контентным/декоративным изображениям и как их вставлять. Вот например соц сети в футере - почему они идут тегом img в разметке? Я бы подумал, что для них и background-img в css достаточно. Часто путаюсь, в общем

[@dimonikbeats]

класс писал и улыбался отличная история !!!!

[@aim6883]

Если кому интересно, почему картинки в футере кривые, то видимо это из за лишек. Перед просмотром ролика я сам сверстал эту страницу, по своему опыту, и оборачивал нижний блок в обычные дивы, и указал ему display flex, даже выравнивать не пришлось. А по этому ролику я задал элементам .partners-logo__item display flex и выровнял все по центру align-items center. Я хз почему с лишками так, но все выровнялось, дело не в картинках

[@irinal337]

Тоже так сделала. Странно, что автор не догадался.

[@micaelkhamardiuk5819]

все картинки по высоте разные, на ul добавь vertical-align: middle;

[@АликМакаров-е2ц]

в partners-logo__item выставил display: flex; align-items: center; и все выровнялось)))

[@АннаАгабекян-р7е]

привет! если не сложно сможешь пожалуйста поделиться кодом? ссылку на репозиторий

[@aim6883]

@@АннаАгабекян-р7е Привет! Этот проект давно верстал. Сейчас не найду его. А что у тебя не получается?

[@Uncaught_in_promise]

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

[@0neAl0neRPubg]

супер кул, спасибо за такие шикарные обучалки!

[@СергейКрюков-ь7ф]

Просто песня!!! Огромнейшее спасибо. Очень бы хотелось вёрстку на препроцессорах и с анимациями. Плииииииизззззз!

[@everest4341]

Прикольная подача, спасибо за контент!)

[@КуралбекАгубаев-д5с]

сейчас oculus закончу и потом сюда приду

[@irinadim]

Вадим, спасибо за верстку) сто пятьсот лайков!

[@Wolfer_illya]

Ураа! Новое видео, спасибо за уроки!

[@tatianaiarotcaia4274]

Прекрасно! Отличная работа!!!

[@vadymprokopchuk]

благодарю

[@pungushe]

Как всегда большое спасибо

[@AndrewUrch]

Дякую тобі, Панасе

[@tatigerbst4416]

Ama 💤ing party Bro! Thank you so much! I appreciate it!

[@El4inMamedov]

Бомба как всегда, спасибо 🙏

[@ivanvyskrebentsev3017]

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

[@Ghost_7-1-9]

Хорошая вечеринка 👍

[@MikhailovSoni]

Класс.

[@АлексейЛысак-ц4н]

*СПАСИБО ОГРОМНОЕ!!!*

[@mikhaildolgov]

😎👍

[@UsaFarmstylelife]

Монстр!

[@ТетянаХарченко-н6н]

Cool=)

[@candy_front]

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

[@terner_arthur]

Вадос ОТЖИГАЕТ 😉👍

[@shurinskiy]

Слушать, конечно приятно тебя, Вадос. Ощущение братского сердца и вообще позитив ) Но по сути, очень примитивная верстка. Все фишки уже сто раз разжеваны, причем тобой же. Это дешевая работа, по деньгам. Дорогие проекты, наполнены всякими scroll-based анимациями и прочими параллаксами. Интерактивными svg-шками, сложно отображающимися менюхами, полноэкранными слайдерами и т.д. Вот этого не хватает. Сложных wow-кейсов. Ну реально. Чтобы научиться нормально верстать на простом уровне, у тебя достаточно контента на канале. Может уже в эксперт-левел начать?

[@kanohondas2839]

3:33:03 картинки можно выровнять сделав их блочными

[@paulbond8244]

Шикарно

[@Zoroarkmaster65]

Хм, а скільки б коштувала така верстка? Ну тобто скільки можна отримати за 1 такий лендінг, або хоча б на яку зарплату може претендувати розробник з такими вміннями розробки і у тих же часових рамках?

[@АлександрЛевыкин-ы7б]

вадим, подскажи, а как сделать так, чтоб при сокращенной записи (когда записываем там целый блок, а потом раскрываем), классы элементов становились в самом начале? а то постоянно href там или src на первом месте и приходится ручками передвигать, заранее спасибо за ответ :)

[@andriiNS]

Ето бомбяо

[@vadymprokopchuk]

оно самое)

[@nik_ibr]

Вадос, УЛУН чай, молочный улун типо )))

[@vadymprokopchuk]

Та я не в курсах) спасибо )

[@mmosow]

Вот так можно затемнит весь вьюпорт за всплывающим бургером .menu--close {} - удаляем из css и дописываем обычную тень на блок с всплывающим меню .menu__list.menu__list--open { transform: translateY(0%); box-shadow: rgba(0,0,0,.5) 0 0 0 10000px; }

[@getFrontend]

за чашкой чая забыли у блока с цитатой приколюшку фоновую сделать.. а там свои нюансы есть 😁

[@havrilyk4115]

45:35 да да да... є таке.

[@Leaven-m5f]

Уважаемый автор, спасибо за все точности, будет 3 часть с показом того как написать рабочую корзину и рабочий профиль через джава скрипт?

[@vadymprokopchuk]

нет, это финальная часть была по верстке

[@chillmusicroombase]

развиваюсь , спасибо хочу в айтишку!!!

[@imolinarty1412]

Здравствуйте, если есть какое-то видео у вас по настройке vscode то подскажите, не могу найти. (Больше всего волнует форматтер документа который используете) и как его автоматизировать что б постоянно не выбирать)🙂

[@Chocobocoboss]

Всем салют 🎉 ) У меня вопрос по поводу картинок чая). Может всё же лучше их вырезать в png формате, вдруг на сайте в будущем будет не белый фон, а допустим серый, а так как картинки в jpg, то прозрачности не будет и беда. Или обычно фон не меняется и всегда будет белый?)

[@vadymprokopchuk]

Лучне в png, но в макете они в jpg, поэтому тут только просить дизайнера заменить их

[@Chocobocoboss]

​@@vadymprokopchukПонял, видимо не внимательно слушал, спасибо)

[@rebroboga]

Интересно, Вадим понял что oolong - это улун

[@walterwhite4407]

[@AU_IAN]

Заметка для меня 4:25:42

[@sartjhon3300]

Почему не используешь clamp?

[@НиколайНиколаев-х1ц]

clip в .checkbox никак не могу понять зачем?

[@danilribka3411]

У меня при адаптиве контент уходит в лево. С чем это может быть связанно?

[@coracoal8268]

Трохи я заплуталась, на одному навчальному ресурсі розказують, шо в основному паддінг дають головним блокам, а марджин єлементам. Тут дивлюсь приклад з секціею assortment, то навпаки. То як правильно, чи не суть важливо ?

[@vadymprokopchuk]

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

[@yevhenp.7345]

25:55 . почему то всё ок на 360, но когда екран ещё уменшаю до 356 и ниже оно скидывает в одну вертикаль выстраивает

[@yevhenp.7345]

и на 480 так же тема, всё ок, но на 465 тоже в одну линию выстраивает, или это нам не важно? а чисто по заданым на макете размерам?

[@rebroboga]

⁠@@yevhenp.7345можете добавить медиа-запрос дополнительный на 465px, который идет на 360px и все

[@rebroboga]

Сделай экран 320px, это самый маленький и уменьшай max-width пока не будет как на макете, а body задай min-height: 320px

[@candy_front]

Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP. 😇😇😇

[@vadymprokopchuk]

обязательно

[@Liunamme]

А можно имиджевый сайт сложный а не простую сетку, и с красивыми эффектами при скролле?

[@vadymprokopchuk]

можно

[@nastasiya_pant]

никто: абсолютно никто: Вадим: игнорит тайтл над сортами чая нную часть ролика😅

[@tryhardsohard11]

Бро, что за шрифт стоит в vs code?

[@vadymprokopchuk]

comic shanns

[@bogdanlarionov4935]

26:13 / 4:35:15

[@bogdanlarionov4935]

1:09:55 / 4:35:15

[@arhangel8380]

Буде виходити якась верстка на українській?

[@vadymprokopchuk]

так, на українському каналі, думаю незабаром

[@arhangel8380]

@@vadymprokopchuk буду чекати!

[@Just_A_Man]

@vadymprokopchuk бро, так а как растянуть затемнение на всю страницу? я чёт не нашел продолжения вечеринки

[@ИльяИстомин-ч5ж]

А где JS то ?

[@inessalamjarred1]

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

[@kanohondas2839]

line-height задать побольше

[@ТвойСоветчик]

2:57:00

[@aliexpress2109]

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