Верстка сайта - HTML, CSS, JS. Адаптив, Часть 2, Финал
HTML-код
- Опубликовано: 13 ноя 2023
- Друзья, привет! Это вторая часть верстки сайта, в этом видео мы все с вами финализируем. Использовать мы будем как всегда, наших братанов 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
![A Day To Remember: Feedback [OFFICIAL VIDEO]](http://i.ytimg.com/vi/iXVnysmQ4e0/mqdefault.jpg)
макет - drive.google.com/file/d/1MmhE-n05AVMBFBTX9xCi4WAykIBZFVN-/view?usp=sharing
файлы (начальный html и css) - drive.google.com/file/d/15xRFhbsCaLgI4nEkmklbbthm5t6D4jPF/view?usp=sharing
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
Богдан, респект за відос)
Большое спасибо за эти 2 видео, вспомнил как верстать, всё повторил ни одной ошибки в видео, топ короче
Наконец то к нам приехал на Вадос дорогоооой!!! Спасибо брат, что так быстро завершающая часть этой грандиозной верстки!!! Лайк, подписки, ведро чая!!!
Вадим, спасибо за верстку) сто пятьсот лайков!
даже, не глядя как всегда шикарно. будет вечеринка на ночь, спасибо вам за это.
крутяк
Спасибо, увидел много полезного!
Адаптив, конечно, божественный! Заказчик рыдал бы от восторга!🤣
🤣🤣🤣🤣
супер кул, спасибо за такие шикарные обучалки!
Ураа! Новое видео, спасибо за уроки!
Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.
Да, спасибо что спросил)
Если кому интересно, почему картинки в футере кривые, то видимо это из за лишек. Перед просмотром ролика я сам сверстал эту страницу, по своему опыту, и оборачивал нижний блок в обычные дивы, и указал ему display flex, даже выравнивать не пришлось. А по этому ролику я задал элементам .partners-logo__item display flex и выровнял все по центру align-items center. Я хз почему с лишками так, но все выровнялось, дело не в картинках
Тоже так сделала. Странно, что автор не догадался.
все картинки по высоте разные, на ul добавь vertical-align: middle;
в partners-logo__item выставил display: flex; align-items: center; и все выровнялось)))
Большое спасибо. Отличная вечеринка. Замечательный канал.
благодарю
Бомба как всегда, спасибо 🙏
Оч классные видосы получились, много полезной информации.
Хотелось бы еще видео по контентным/декоративным изображениям и как их вставлять. Вот например соц сети в футере - почему они идут тегом img в разметке? Я бы подумал, что для них и background-img в css достаточно. Часто путаюсь, в общем
Сразу лайк ) Ноги сами бегут в пляс на этой вечеринке )
огонь!)
Как всегда большое спасибо
Коммент для продвижения !
Такая работа должна продвигаться в массы
Спасибо
Прекрасно! Отличная работа!!!
благодарю
Спасибо, очень круто!
Вот такая вечеринка. Вадос молодец
класс писал и улыбался отличная история !!!!
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.
Богдан))) ты шикарный, подтягиваю пробелы в верстке благодаря тебе.
P.S нас всех уже заменил AI, верстка не нужна и этот комментарий был написан нейросетью.
Ama 💤ing party Bro! Thank you so much! I appreciate it!
Просто песня!!! Огромнейшее спасибо. Очень бы хотелось вёрстку на препроцессорах и с анимациями. Плииииииизззззз!
*СПАСИБО ОГРОМНОЕ!!!*
Привіт, друже. Завершив і я верстку цього чудового макету. Я макет верстав використовуючи збірку Gulp, про яку ти розповідав, а точніше ми збирали разом за твоїми рекомендаціями) Єдине що я до збірки додав, так це свою будову файлів scss, а в цілому збірочка Gulp вийшла бомбезна. Дякую! З макетом збірка впоралася на всі 100% !!!
Супер, так тримати
Наконец то! Вечеринка друзья!
да как так-то?! что я делаю не так?! почему я постоянно пропускаю вечеринку
Хорошая вечеринка 👍
Спасибо большое
Шикарно
вадим, подскажи, а как сделать так, чтоб при сокращенной записи (когда записываем там целый блок, а потом раскрываем), классы элементов становились в самом начале? а то постоянно href там или src на первом месте и приходится ручками передвигать, заранее спасибо за ответ :)
Класс.
спасибо большое
Здравствуйте, если есть какое-то видео у вас по настройке vscode то подскажите, не могу найти. (Больше всего волнует форматтер документа который используете) и как его автоматизировать что б постоянно не выбирать)🙂
Хм, а скільки б коштувала така верстка? Ну тобто скільки можна отримати за 1 такий лендінг, або хоча б на яку зарплату може претендувати розробник з такими вміннями розробки і у тих же часових рамках?
Вадос ОТЖИГАЕТ 😉👍
Дякую тобі, Панасе
*ЖДЕМЬ С НЕТЕРПЕНИЕМ СЛЕДУЮЩИЕ ИНТЕРЕСНЫЕ МАКЕТЫ!!!!)*
супер!
3:33:03 картинки можно выровнять сделав их блочными
Уважаемый автор, спасибо за все точности, будет 3 часть с показом того как написать рабочую корзину и рабочий профиль через джава скрипт?
нет, это финальная часть была по верстке
😎👍
Монстр!
Всем салют 🎉 )
У меня вопрос по поводу картинок чая). Может всё же лучше их вырезать в png формате, вдруг на сайте в будущем будет не белый фон, а допустим серый, а так как картинки в jpg, то прозрачности не будет и беда.
Или обычно фон не меняется и всегда будет белый?)
Лучне в png, но в макете они в jpg, поэтому тут только просить дизайнера заменить их
@@vadymprokopchukПонял, видимо не внимательно слушал, спасибо)
Слушать, конечно приятно тебя, Вадос. Ощущение братского сердца и вообще позитив )
Но по сути, очень примитивная верстка. Все фишки уже сто раз разжеваны, причем тобой же. Это дешевая работа, по деньгам. Дорогие проекты, наполнены всякими scroll-based анимациями и прочими параллаксами. Интерактивными svg-шками, сложно отображающимися менюхами, полноэкранными слайдерами и т.д.
Вот этого не хватает. Сложных wow-кейсов.
Ну реально. Чтобы научиться нормально верстать на простом уровне, у тебя достаточно контента на канале. Может уже в эксперт-левел начать?
У меня при адаптиве контент уходит в лево. С чем это может быть связанно?
Почему не используешь clamp?
Трохи я заплуталась, на одному навчальному ресурсі розказують, шо в основному паддінг дають головним блокам, а марджин єлементам. Тут дивлюсь приклад з секціею assortment, то навпаки. То як правильно, чи не суть важливо ?
Те що ви чули що падінг дають основному, а марджин елементам, це не вірно, або вирвано із якогось контексту
Падінг внутрішній відступ, а марджин зовнішній, і потрібно відштовхуватися від цього
clip в .checkbox никак не могу понять зачем?
Ето бомбяо
оно самое)
Вопрос, при ховере на пункт меню, по дизайну он должен поменять жирность. Проблема в том, что всё прыгает при ховере - как это можно убрать ?
line-height задать побольше
А можно имиджевый сайт сложный а не простую сетку, и с красивыми эффектами при скролле?
можно
за чашкой чая забыли у блока с цитатой приколюшку фоновую сделать.. а там свои нюансы есть 😁
развиваюсь , спасибо хочу в айтишку!!!
Вадос, УЛУН чай, молочный улун типо )))
Та я не в курсах) спасибо )
Бро, что за шрифт стоит в vs code?
comic shanns
25:55 . почему то всё ок на 360, но когда екран ещё уменшаю до 356 и ниже оно скидывает в одну вертикаль выстраивает
и на 480 так же тема, всё ок, но на 465 тоже в одну линию выстраивает, или это нам не важно? а чисто по заданым на макете размерам?
@@yevhenp.7345можете добавить медиа-запрос дополнительный на 465px, который идет на 360px и все
Сделай экран 320px, это самый маленький и уменьшай max-width пока не будет как на макете, а body задай min-height: 320px
Заметка для меня 4:25:42
Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP. 😇😇😇
обязательно
Интересно, Вадим понял что oolong - это улун
Вот так можно затемнит весь вьюпорт за всплывающим бургером
.menu--close {} - удаляем из css
и дописываем обычную тень на блок с всплывающим меню
.menu__list.menu__list--open {
transform: translateY(0%);
box-shadow: rgba(0,0,0,.5) 0 0 0 10000px;
}
45:35 да да да... є таке.
Буде виходити якась верстка на українській?
так, на українському каналі, думаю незабаром
@@vadymprokopchuk буду чекати!
А где JS то ?
26:13 / 4:35:15
1:09:55 / 4:35:15
никто:
абсолютно никто:
Вадим: игнорит тайтл над сортами чая нную часть ролика😅
2:57:00