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

Подписаться 84 тыс.

Просмотров 19 тыс.

50% 1

Друзья, привет! Это вторая часть верстки сайта, в этом видео мы все с вами финализируем. Использовать мы будем как всегда, наших братанов 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

Опубликовано:

13 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 95

@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/ ----------------------------------------

@user-zq6hx6sl8k 11 часов назад

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

@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; и все выровнялось)))

@mmosow 6 месяцев назад

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

@Saba-cn8gp 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

крутяк

@user-dx9xd4gp6d 6 месяцев назад

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

@user-jr7jr6vi2m 5 месяцев назад

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

@irinadim 27 дней назад

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

@AU_IAN 5 месяцев назад

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

@0neAl0neRPubg 6 месяцев назад

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

@balcony_warrior 6 месяцев назад

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

@Wolfer_illya 6 месяцев назад

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

@oleglagoda3931 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

благодарю

@ringnull 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

огонь!)

@SandyWinman 6 месяцев назад

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

@datoshcode 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

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

@user-gj8wd1qm6h 6 месяцев назад

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

@El4inMamedov 6 месяцев назад

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

@alexms8508 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

Спасибо

@dimonikbeats 3 месяца назад

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

@pungushe 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, верстка не нужна и этот комментарий был написан нейросетью.

@tatianaiarotcaia4274 5 месяцев назад

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

@vadymprokopchuk 5 месяцев назад

благодарю

@ivanvyskrebentsev3017 3 месяца назад

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

@StarkRealityy 6 месяцев назад

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

@yuriykolomytsyn2352 6 месяцев назад

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

@BMikel 6 месяцев назад

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

@tatigerbst4416 6 месяцев назад

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

@user-tz1td1bx7g 5 месяцев назад

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

@imolinarty1412 6 месяцев назад

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

@user-cq9sz2qx8g 3 месяца назад

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

@aliexpress2109 24 дня назад

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

@paulbond8244 6 месяцев назад

Шикарно

@user-cq9sz2qx8g 3 месяца назад

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

@vadymprokopchuk 3 месяца назад

супер!

@Ghost_7-1-9 2 месяца назад

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

@MikhailovSoni 6 месяцев назад

Класс.

@user-ke8ov7dz8m 3 дня назад

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

@user-kb2zq4yp1k 3 месяца назад

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

@vadymprokopchuk 3 месяца назад

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

@arthurterner3348 6 месяцев назад

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

@candy_front 5 месяцев назад

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

@AndrewUrch 6 месяцев назад

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

@Zoroarkmaster65 6 месяцев назад

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

@kanohondas2839 6 месяцев назад

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

@danilribka3411 5 месяцев назад

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

@shurinskiy 3 месяца назад

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

@getFrontend 6 месяцев назад

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

@UsaFarmstylelife 3 месяца назад

Монстр!

@mmosow 6 месяцев назад

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

@sartjhon3300 6 месяцев назад

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

@Chocobocoboss 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

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

@Chocobocoboss 6 месяцев назад

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

@coracoal8268 6 месяцев назад

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

@vadymprokopchuk 6 месяцев назад

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