Верстка сайта - HTML, CSS, JS. Адаптив, Часть 2, Финал
Рет қаралды 19,040
6 ай бұрынДрузья, привет! Это вторая часть верстки сайта, в этом видео мы все с вами финализируем. Использовать мы будем как всегда, наших братанов HTML, CSS и JS, конечно же мы обязательно все адаптируем.
----------------------------------------
макет - drive.google.com/file/d/1MmhE...
файлы (начальный html и css) - drive.google.com/file/d/15xRF...
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
@vadymprokopchuk 6 ай бұрын
макет - drive.google.com/file/d/1MmhE-n05AVMBFBTX9xCi4WAykIBZFVN-/view?usp=sharing файлы (начальный html и css) - drive.google.com/file/d/15xRFhbsCaLgI4nEkmklbbthm5t6D4jPF/view?usp=sharing ---------------------------------------- Сайт курса по верстке - from0to1.com.ua/ ----------------------------------------
@everest4341 Сағат бұрын
Прикольная подача, спасибо за контент!)
@mmosow 6 ай бұрын
Наконец то к нам приехал на Вадос дорогоооой!!! Спасибо брат, что так быстро завершающая часть этой грандиозной верстки!!! Лайк, подписки, ведро чая!!!
@Saba-cn8gp 6 ай бұрын
даже, не глядя как всегда шикарно. будет вечеринка на ночь, спасибо вам за это.
@vadymprokopchuk 6 ай бұрын
крутяк
@user-zq6hx6sl8k 7 күн бұрын
Большое спасибо за эти 2 видео, вспомнил как верстать, всё повторил ни одной ошибки в видео, топ короче
@SandyWinman 6 ай бұрын
Богдан, респект за відос)
@irinadim Ай бұрын
Вадим, спасибо за верстку) сто пятьсот лайков!
@Wolfer_illya 6 ай бұрын
Ураа! Новое видео, спасибо за уроки!
@aim6883 5 ай бұрын
Если кому интересно, почему картинки в футере кривые, то видимо это из за лишек. Перед просмотром ролика я сам сверстал эту страницу, по своему опыту, и оборачивал нижний блок в обычные дивы, и указал ему display flex, даже выравнивать не пришлось. А по этому ролику я задал элементам .partners-logo__item display flex и выровнял все по центру align-items center. Я хз почему с лишками так, но все выровнялось, дело не в картинках
@irinal337 4 ай бұрын
Тоже так сделала. Странно, что автор не догадался.
@micaelkhamardiuk5819 3 ай бұрын
все картинки по высоте разные, на ul добавь vertical-align: middle;
@user-uh9ps3rz7e 2 ай бұрын
в partners-logo__item выставил display: flex; align-items: center; и все выровнялось)))
@AU_IAN 5 ай бұрын
Спасибо, увидел много полезного! Адаптив, конечно, божественный! Заказчик рыдал бы от восторга!🤣 🤣🤣🤣🤣
@0neAl0neRPubg 6 ай бұрын
супер кул, спасибо за такие шикарные обучалки!
@El4inMamedov 6 ай бұрын
Бомба как всегда, спасибо 🙏
@user-dx9xd4gp6d 6 ай бұрын
Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.
@user-jr7jr6vi2m 5 ай бұрын
Да, спасибо что спросил)
@oleglagoda3931 6 ай бұрын
Большое спасибо. Отличная вечеринка. Замечательный канал.
@vadymprokopchuk 6 ай бұрын
благодарю
@pungushe 6 ай бұрын
Как всегда большое спасибо
@balcony_warrior 6 ай бұрын
Оч классные видосы получились, много полезной информации. Хотелось бы еще видео по контентным/декоративным изображениям и как их вставлять. Вот например соц сети в футере - почему они идут тегом img в разметке? Я бы подумал, что для них и background-img в css достаточно. Часто путаюсь, в общем
@ringnull 6 ай бұрын
Сразу лайк ) Ноги сами бегут в пляс на этой вечеринке )
@vadymprokopchuk 6 ай бұрын
огонь!)
@alexms8508 6 ай бұрын
Коммент для продвижения ! Такая работа должна продвигаться в массы
@vadymprokopchuk 6 ай бұрын
Спасибо
@tatianaiarotcaia4274 6 ай бұрын
Прекрасно! Отличная работа!!!
@vadymprokopchuk 6 ай бұрын
благодарю
@ivanvyskrebentsev3017 3 ай бұрын
Спасибо, очень круто!
@datoshcode 6 ай бұрын
Привіт, друже. Завершив і я верстку цього чудового макету. Я макет верстав використовуючи збірку Gulp, про яку ти розповідав, а точніше ми збирали разом за твоїми рекомендаціями) Єдине що я до збірки додав, так це свою будову файлів scss, а в цілому збірочка Gulp вийшла бомбезна. Дякую! З макетом збірка впоралася на всі 100% !!!
@vadymprokopchuk 6 ай бұрын
Супер, так тримати
@BMikel 6 ай бұрын
Вот такая вечеринка. Вадос молодец
@user-xh2eq6vq8v 6 ай бұрын
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.
@GLUCKKKKKKKKKK 6 ай бұрын
Богдан))) ты шикарный, подтягиваю пробелы в верстке благодаря тебе. P.S нас всех уже заменил AI, верстка не нужна и этот комментарий был написан нейросетью.
@dimonikbeats 3 ай бұрын
класс писал и улыбался отличная история !!!!
@user-gj8wd1qm6h 6 ай бұрын
Просто песня!!! Огромнейшее спасибо. Очень бы хотелось вёрстку на препроцессорах и с анимациями. Плииииииизззззз!
@user-cq9sz2qx8g 4 ай бұрын
*СПАСИБО ОГРОМНОЕ!!!*
@Ghost_7-1-9 3 ай бұрын
Хорошая вечеринка 👍
@user-tz1td1bx7g 5 ай бұрын
вадим, подскажи, а как сделать так, чтоб при сокращенной записи (когда записываем там целый блок, а потом раскрываем), классы элементов становились в самом начале? а то постоянно href там или src на первом месте и приходится ручками передвигать, заранее спасибо за ответ :)
@paulbond8244 6 ай бұрын
Шикарно
@aliexpress2109 Ай бұрын
Спасибо большое
@tatigerbst4416 6 ай бұрын
Ama 💤ing party Bro! Thank you so much! I appreciate it!
@StarkRealityy 6 ай бұрын
Наконец то! Вечеринка друзья!
@yuriykolomytsyn2352 6 ай бұрын
да как так-то?! что я делаю не так?! почему я постоянно пропускаю вечеринку
@imolinarty1412 6 ай бұрын
Здравствуйте, если есть какое-то видео у вас по настройке vscode то подскажите, не могу найти. (Больше всего волнует форматтер документа который используете) и как его автоматизировать что б постоянно не выбирать)🙂
@MikhailovSoni 6 ай бұрын
Класс.
@candy_front 5 ай бұрын
спасибо большое
@Zoroarkmaster65 6 ай бұрын
Хм, а скільки б коштувала така верстка? Ну тобто скільки можна отримати за 1 такий лендінг, або хоча б на яку зарплату може претендувати розробник з такими вміннями розробки і у тих же часових рамках?
@arthurterner3348 6 ай бұрын
Вадос ОТЖИГАЕТ 😉👍
@AndrewUrch 6 ай бұрын
Дякую тобі, Панасе
@user-cq9sz2qx8g 4 ай бұрын
*ЖДЕМЬ С НЕТЕРПЕНИЕМ СЛЕДУЮЩИЕ ИНТЕРЕСНЫЕ МАКЕТЫ!!!!)*
@vadymprokopchuk 4 ай бұрын
супер!
@user-kb2zq4yp1k 4 ай бұрын
Уважаемый автор, спасибо за все точности, будет 3 часть с показом того как написать рабочую корзину и рабочий профиль через джава скрипт?
@vadymprokopchuk 4 ай бұрын
нет, это финальная часть была по верстке
@mikhaildolgov 6 ай бұрын
😎👍
@shurinskiy 4 ай бұрын
Слушать, конечно приятно тебя, Вадос. Ощущение братского сердца и вообще позитив ) Но по сути, очень примитивная верстка. Все фишки уже сто раз разжеваны, причем тобой же. Это дешевая работа, по деньгам. Дорогие проекты, наполнены всякими scroll-based анимациями и прочими параллаксами. Интерактивными svg-шками, сложно отображающимися менюхами, полноэкранными слайдерами и т.д. Вот этого не хватает. Сложных wow-кейсов. Ну реально. Чтобы научиться нормально верстать на простом уровне, у тебя достаточно контента на канале. Может уже в эксперт-левел начать?
@UsaFarmstylelife 3 ай бұрын
Монстр!
@Chocobocoboss 6 ай бұрын
Всем салют 🎉 ) У меня вопрос по поводу картинок чая). Может всё же лучше их вырезать в png формате, вдруг на сайте в будущем будет не белый фон, а допустим серый, а так как картинки в jpg, то прозрачности не будет и беда. Или обычно фон не меняется и всегда будет белый?)
@vadymprokopchuk 6 ай бұрын
Лучне в png, но в макете они в jpg, поэтому тут только просить дизайнера заменить их
@Chocobocoboss 6 ай бұрын
@@vadymprokopchukПонял, видимо не внимательно слушал, спасибо)
@sartjhon3300 6 ай бұрын
Почему не используешь clamp?
@danilribka3411 5 ай бұрын
У меня при адаптиве контент уходит в лево. С чем это может быть связанно?
@coracoal8268 6 ай бұрын
Трохи я заплуталась, на одному навчальному ресурсі розказують, шо в основному паддінг дають головним блокам, а марджин єлементам. Тут дивлюсь приклад з секціею assortment, то навпаки. То як правильно, чи не суть важливо ?
@vadymprokopchuk 6 ай бұрын
Те що ви чули що падінг дають основному, а марджин елементам, це не вірно, або вирвано із якогось контексту Падінг внутрішній відступ, а марджин зовнішній, і потрібно відштовхуватися від цього
@kanohondas2839 6 ай бұрын
3:33:03 картинки можно выровнять сделав их блочными
@user-ke8ov7dz8m 10 күн бұрын
clip в .checkbox никак не могу понять зачем?
@inessalamjarred1 6 ай бұрын
Вопрос, при ховере на пункт меню, по дизайну он должен поменять жирность. Проблема в том, что всё прыгает при ховере - как это можно убрать ?
@kanohondas2839 6 ай бұрын
line-height задать побольше
@tryhardsohard11 6 ай бұрын
Бро, что за шрифт стоит в vs code?
@vadymprokopchuk 6 ай бұрын
comic shanns
@getFrontend 6 ай бұрын
за чашкой чая забыли у блока с цитатой приколюшку фоновую сделать.. а там свои нюансы есть 😁
@andriiNS 4 ай бұрын
Ето бомбяо
@vadymprokopchuk 4 ай бұрын
оно самое)
@Liunamme 6 ай бұрын
А можно имиджевый сайт сложный а не простую сетку, и с красивыми эффектами при скролле?
@vadymprokopchuk 6 ай бұрын
можно
@chillmusicroombase 5 ай бұрын
развиваюсь , спасибо хочу в айтишку!!!
@nik_ibr 6 ай бұрын
Вадос, УЛУН чай, молочный улун типо )))
@vadymprokopchuk 6 ай бұрын
Та я не в курсах) спасибо )
@mmosow 6 ай бұрын
Вот так можно затемнит весь вьюпорт за всплывающим бургером .menu--close {} - удаляем из css и дописываем обычную тень на блок с всплывающим меню .menu__list.menu__list--open { transform: translateY(0%); box-shadow: rgba(0,0,0,.5) 0 0 0 10000px; }
@yevhenp.7345 5 ай бұрын
25:55 . почему то всё ок на 360, но когда екран ещё уменшаю до 356 и ниже оно скидывает в одну вертикаль выстраивает
@yevhenp.7345 5 ай бұрын
и на 480 так же тема, всё ок, но на 465 тоже в одну линию выстраивает, или это нам не важно? а чисто по заданым на макете размерам?
@rebroboga 5 ай бұрын
@@yevhenp.7345можете добавить медиа-запрос дополнительный на 465px, который идет на 360px и все
@rebroboga 5 ай бұрын
Сделай экран 320px, это самый маленький и уменьшай max-width пока не будет как на макете, а body задай min-height: 320px
@candy_front 5 ай бұрын
Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP. 😇😇😇
@vadymprokopchuk 5 ай бұрын
обязательно
@rebroboga 5 ай бұрын
Интересно, Вадим понял что oolong - это улун
@havrilyk4115 6 күн бұрын
45:35 да да да... є таке.
@AU_IAN 5 ай бұрын
Заметка для меня 4:25:42
@arhangel8380 6 ай бұрын
Буде виходити якась верстка на українській?
@vadymprokopchuk 6 ай бұрын
так, на українському каналі, думаю незабаром
@arhangel8380 6 ай бұрын
@@vadymprokopchuk буду чекати!
@user-xj6oi7fl9l 7 күн бұрын
А где JS то ?
@walterwhite4407 6 ай бұрын
@nastasiya_pant 5 ай бұрын
никто: абсолютно никто: Вадим: игнорит тайтл над сортами чая нную часть ролика😅
@bogdanlarionov4935 6 ай бұрын
26:13 / 4:35:15
@bogdanlarionov4935 6 ай бұрын
1:09:55 / 4:35:15
@user-of1cr8ce2c 5 ай бұрын
2:57:00
От 0 до 1
Рет қаралды 4,6 М.
TheSimplySpace
Рет қаралды 102 М.
Полиглот 16 с Петровым. Английский, немецкий с нуля за 16 часов для начинающих
Рет қаралды 135 М.