Верстка сайта с нуля до завершения html/css/js Часть 2

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

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

50% 1

Друзья, вторая часть вечеринки. Это верстка сайта, с самого нуля, с адаптивом, используем html и css, в конце это все полернем js, чтобы было интереснее и более практически. Погнали дальше!
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
box-sizing: • box sizing border box ...
ХотКей по VScode: • 10 горячих клавиш в VS...
Видео про БЭМ - • БЭМ методология. Практ...
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

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

7 сен 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

спасибо, очень приятно

@user-ms3mz9vg8b 7 месяцев назад

согласен

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

поставил лайк потусил на вечеринке Вадос Приятный веселый Учетель-Вечериностальщик)))))))

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

спасибо =)

@denisabramov3094 8 месяцев назад

Не получалось объединить, чела со звуком, что он тусанул нормально на вечерине, а оказалось в макете уже есть объединенный😂 Спасибо за контент и вечеринки, респект.

@aswarriorr 4 месяца назад

Лучший препод на реальных проектах ! Без воды и всякой ерунды !

@leeeelou 7 месяцев назад

Спасибо за видос! Я чувствую как преисполняюсь знаниями, 10 лет в ит уже уставать начал как вдруг попались твои уроки по верстке и я понял какое направление ит мне необходимо.

@iwmatt 8 месяцев назад

Спасибо за качественный контент, всегда приятно посмотреть видос от мастера.

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

спасибо

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

Самое лучшее времяпрепровождение в пятничный вечер, это вечеринка у Вадоса 🎉

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

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

@Jane_123 8 месяцев назад

Большущее спасибо за всегда интересный и полезный контент)))

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

благодарю

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

Спасибо за труды!!! Жирный лайк под видос!!! Записался на курсы. До встречи на курсах

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

до встречи, будет круто

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

Как всегда, просто космос. Спасибо за труды.

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

спасибо

@dimalukashenko4865 8 месяцев назад

Классный урок, спасибо за труд

@salazar6386 7 месяцев назад

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

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

Вечериночка огонь!

@drawusoon 8 месяцев назад

Пришел сюда не по колокольчику а по велению сердца ❣️

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

красава, спасибо)

@jeraras2310 7 месяцев назад

@@vadymprokopchuk🤣👍

@user-rn9cw1xs1x 8 месяцев назад

Cпасибо, отличная вечеринка))

@fridaoblomova4939 8 месяцев назад

Лайк поставила, комментах оставила👍 Спасибо за урок!

@ArteEtHumanitate 7 месяцев назад

Дайте мастеру свету💡! Спасибо за урок!

@user-te4up6ng2l 4 месяца назад

Лучший из лучших! обнял приподнял!!!

@def1se806 7 месяцев назад

спасибо большое за такой контент!!!!!

@olegs4418 7 месяцев назад

Человечище!! Спс огромное

@andrey-Dudkin 8 месяцев назад

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

@KyryloShtanko 8 месяцев назад

Чтобы кнопка корректно работала достаточно .audio__box задать z-index:10 (без z-index для других классов). Не нужно добавлять афтер, бифор... Пока Вадим делал 100% работающий вариант, я методом проб и ошибок натыкал. Вывод: не бойтесь тыкать. Весёлой вечеринки!)

@Bamserok 8 месяцев назад

а я просто кнопке поставил position:relative и все норм работает) так как свойство выдергивает из потока индексов этих всяких и выводит наперед

@goodmorning9938 8 месяцев назад

ты красапчик, уважаю!

@user-gp1vo3yv3m 7 месяцев назад

Пожелания и предложения.... Попробуй рассмотреть идею записать урок про абсолютные и относительные единицы измерения (px, vh em rem ......).Спасибо за урок

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

Поддерживаю!

@spirit-tl7cp Месяц назад

а я чтобы получить к кнопке доступ прописал ей position relative и z-index 5. Так можно сделать, чтобы не переносить все на after?

@ondreeey3004 8 месяцев назад

Видеос, как и прошлый, отличный, но хочется придраться все таки... Во всех секциях, когда ты вставляешь картинки, ничего не делаешь с надежностью верстки. То есть, всегда полагаешься на размеры картинки, которая предоставлена из макета. А что будешь делать, если через какое-то время приходит заказчик с правками, мол, надо поменять картинки, ты вставляешь новую картинку и вся верстка ломается ? Скорее всего ты прекрасно знаешь что с этим делать и как этого избежать, но я давненько смотрю твои марафоны по верстке, и ты никогда не уделяешь этому внимание. Для людей которые только начинают, это очень сильно выходит боком

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

А как можно предотвратить эту проблему? Что посоветуете?

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

@@user-of1cr8ce2c Делать "контейнер" для картинки, в который класть тег img. Для контейнера задавать фиксированные, или в идеале резиновые значения высоты и ширины, а для самого тега изображения внутри контейнера, применять свойство object-fit. Приблизительно вот так: HTML: CSS: .image__container{ max-width: 500px; // нужное вам значение overflow: hidden; // на всякий случай, точно не помню что делает, но все равно использую } .image__container img{ width: 100%; height: 100%; object-fit: cover; // "растягивает" тег изображения внутри всего контейнера. Похоже на свойство background-size: cover; но работает по-другому object-position: center; // тоже "на всякий случай", центрирует тег изображения по центру контейнера. } Хорошо работает при mobile-first подходе. При desktop-first нужно смотреть по ситуации. В идеале это делать не на div'ах, а с семантическими тегами и , но я в них плаваю, поэтому не могу сказать что-то конкретное

@minesai_tgbot 8 месяцев назад

А мы ждали

@user-xe4be7iq1q 7 месяцев назад

50:50 почему мы задаем min-height:200vh; в inner, а не в container ?

@interestingaroundus5131 8 месяцев назад

Вечеринка 🎉

@Kuba-so4tk 8 месяцев назад

А как сделать выделение контейнера в фигме?

@IlyaAlekseev101 7 месяцев назад

Подскажите, как сделать цвет тегов как у вас?

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

38:28 Я выставил у energy__num также как на видео margin-bottom: 40px. Но там получается схлопывание и общий становится 210 из-за размера шрифта у energy__num. Как можно игнорировать margin, который выставляется в соответствии с шрифтом?

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

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

@esco-it 8 месяцев назад

Подскажете пожалуйста, репитал 1 в 1, час просидел, пересматривал ошибку, bg с пацанчиком не хотел раскрываться, он оставался ~ в 100 vh, обрезанный на половину, в .audio__inner был прописан min-heigth: 200 vh, в дальнейшем 220vh;. Но всё же нашёл решение в виде задать бг 220 vh и она раскралась, полностью, вместе с "soung.png", в чём может заключаться моя ошибка, я сравнивал код 1000 раз и не смог найти ошибку... А так, контент топ, позволяет например после лета вспомнить и прогнать забытое 🙃

@user-pi4rg1dk2w Месяц назад

Всех приветствую! Знает ли кто-нибудь, какой шрифт в vs code использует автор для написания кода?

@bekmun 8 месяцев назад

Привет всем макет где можно найти?

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

Super, muper, giper

@user-mc6id1sz1m 8 месяцев назад

Контент - огонь. Подскажите, что за плагин для css снипетов (p0-10 = padding: 0 10px;)

@user-ew2vc4qn3o 7 месяцев назад

emmet вроде

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

Вадим, здравствуйте! У меня один вопрос: почему нельзя использовать один контейнер для всего макета? Почему их нужно прописывать отдельно для каждого блока?

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

Не получится сверстать с одним, фоны всегда у секций разные

@ii-yj5qj 8 месяцев назад

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

@konkov_aleksey 7 месяцев назад

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

@ii-yj5qj 7 месяцев назад

@@konkov_aleksey спасибо за подсказку!

@konkov_aleksey 7 месяцев назад

@@ii-yj5qjеще можешь в настройках браузера найти «всегда указывать место для скачивания». В chrome в настройках есть пункт «скачанные файлы». Таким образом и место выбирается, и нэйминг сразу имеется

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

Вадос, контент - Огонь), Царский лайк поставил, жду на этом сообщении твой)😁

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

обязательно)

@yashulja 8 месяцев назад

Лайк та коментар обов'язково

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

дякую!

@vvks9901 8 месяцев назад

13:03 choose__color-btn{ } Можно ничего не писать, т.к. там картинка уже с границей, ты скачал не всю картинку, а только ее центр, без границы

@cars_owners 8 месяцев назад

Если делать адаптив то ваш способ сохранения картинок будет плох

@Rikitikitak-cd6sk 8 месяцев назад

золотой

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

Где находится фото не мону найти

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

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

@farhodizuribek9006 8 месяцев назад

🤑

@cars_owners 8 месяцев назад

Главная проблема в том, что 99% заказов идут без макетов и ты сидишь придумываешь вместо дизайнера структуру, подбираешь шрифты и т.д.

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

1:14:03 мне кажется только зубы видны после падения темноты :D

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

лицо ничто, код все =)

@alexander_stark 7 месяцев назад

А зачем плодить кучу файлов? в 2м блоке можно же было просто использовать те же картинки из 1 экрана... Добавил: .choose-color__list img и не надо сохранять дополнительно файлы...

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

8:51

@mrkut360 8 месяцев назад

как плагин называется?

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

ecsstractor там же сразу указано

@mrkut360 8 месяцев назад

@@vadymprokopchuk спасибо

@vorosh1loff 7 месяцев назад

1:07:22 повторяю за тобой мне помогло задать .audio {z-index: 1;}

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

Я помітила, що якщо записати "m0-a-80", то буде "margin: 0 auto -80px", а якщо записати "m0-a80", то буде "margin: 0 auto 80px". Тобто там не було поставлено двічи мінус. Виявляється, що воно так працює.🙃

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

ох, немножко бы инглиш произношение подтянуть... Не джАстифи-контЕнт, а джАстифай-кОнтент (justify-content)

@serhioperez773 8 месяцев назад

Я так и не могу понять когда Margen а когда Padding((( Вадим на 195 строке вообще решил по издеваться, влупил оба!!! Хотя учит, что высота задаётся Margin

@antonbobryshev9514 4 месяца назад

padding - это внутренние отступы, а margin - внешние. Смотрите в окошке окна разработчика. Паддинги всегда зеленые, а марджины - оранжевые

@leonidbabii1006 8 месяцев назад

купляв курс твій зайшов в кабінет а там пише доступ акунта обмежений

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

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

@timashuba569 8 месяцев назад

Здравствуйте можно пожалуйста топ плагинов на VC code)) Очень хочется узнать что нужно для новичку и как упорядочить код а не так чтобы он был прописаный в одну строку)) Спасибо и видео топ!!🔥