Верстка многостраничного сайта для самых маленьких, html/css/js подробное объяснение

Друзья, в этом видео я верстаю полный многостраничный сайт для новичков в верстке, то есть прям для людей, которые делают самые первые шаги, начинают с самого начала. Мы будем писать html/css/js, обсудим заливку на хостинг, связь страниц и так далее.
Полезные ссылки:
______
макет: drive.google.c...
______
box-sizing: • box sizing border box ...
-----------------------------------
Мой курс по верстке - from0to1.com.ua/
-----------------------------------
Телеграм канал - t.me/from0to1com
Весь готовый проект вы можете найти у меня на патреон
/ from0to1
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@vadymprokopchuk]

макет - drive.google.com/file/d/1yXf0r9N9YQg2Us6y6IEf5UtAfAdQ5xxU/view?usp=share_link Сайт курса по верстке - from0to1.com.ua/ Готовая верстка на patreon - www.patreon.com/from0to1

[@godofphonk1097]

приветствую подписался на патреон не вижу работы этой,не подскажите как найти

[@vadymprokopchuk]

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

[@yura-serkiz]

А где файли? на сайт

[@nuke8112]

У меня ссылка не работает

[@axelbrennan4982]

.fig файл не работает

[@serjmarkelov9915]

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

[@vadymprokopchuk]

красава, помнб твои комментарии )

[@кирилларистархов-ь7в]

Когда начинал учиться и сколько по времени тратил в день примерно, если не секрет?

[@kotix_]

@@кирилларистархов-ь7в на самом деле это не имеет значения, когда тебе это интересно делать, то ты не обращаешь внимание на время

[@кирилларистархов-ь7в]

@@kotix_ Было бы неплохо понимать, когда стоит ждать результата твоих усилий, а если его нет, то на одном интересе и мотивации далеко не уедешь, кушать тоже на что то надо

[@ukraine1514]

Ну если в носе колупаться,то это и все чему научишся. Все понятно и доступно. Не ленись и все зависет только от тебя и твоих усилий. За сколько этот макет сверстал? За те же 5.35 часа? Или 5.35 дня? Или 5.35 недель?

[@hilarious-_-7569]

Отец верстки вновь в деле! Очень жду вечеринку олдов, с пометочкой ,,для старичков"!

[@ЕвгенийКотенко-ш2к]

дааааааа!

[@ДимДим-я4ч]

тоже, буду ждать.. поддерживаю

[@userLookAway]

Мужик, помимо благодарности за то, что ты делишься знаниями, своим драгоценным опытом, показываешь и объясняешь мелочи, я ещё хочу сказать спасибо за твою харизму и юмор) Эти комментарии с "вечеринка, вот эти парни (теги), нераздельные парочки" и все подобное очень сильно влияет на восприятие, становится как-то легче морально загружать все это в голову и расхлёбывать кашу новичку, ты очень крутой)

[@novostisela]

Вадим, огромное спасибо за твой труд, год назад я был грузчиком в колбасном цеху, ничем полезным не занимался, по вечерам смотрел тик ток. Решил что-то менять. Зашел на ютуб и попал на твой канал. Поначалу было тяжело, но ты как друг, как брат объяснял все на пальцах и я начал помаленьку верстать. Через полгода устроился контент-менеджером на небольшой сайт. Сейчас учу javascript и хочу развиваться дальше. Салам тебе из Казахстана!🇺🇦🇰🇿

[@El4inMamedov]

Хоть и за три дня но все же закончил. Спасибо за работу которую делаете для простых людей. Поверь мы очень это ценим. 🤲

[@vadymprokopchuk]

круто, молодцом

[@АннаЛопина-ч6н]

Три дня - это еще быстро)

[@El4inMamedov]

@@АннаЛопина-ч6н я старался)))

[@Shved_2.0]

Не смотря на то что смотреть настолько длинные ролики тяжеловато(удобнее разбитые п о часу), все равно очень крутой и полезный выпуск. Так же продолжаю ждать выпуски про расширение/углубление в GULP. лайк занес.

[@pixelbul]

Tak smotri po chasy

[@Dima-t4j6e]

Лучшая "вечеринка" в этом стиле. Автору ОГРОМНОЕ СПАСИБО!!!

[@Ghost_7-1-9]

С таким Диджеем на вечеринке всегда играет крутая музыка. Спасибо за "Знания" Мастер!

[@ShiawaseKaze]

Подтверждаю

[@1081bad]

Наконец новое видео Вадима! Если ваша вечеринка не похожа на эту, то даже не зовите меня!

[@vadymprokopchuk]

благодарю

[@РафаэльБ-ш4в]

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

[@vadymprokopchuk]

нужно же довести до результата

[@felion111]

Просто обалденная подача материала. Слушаешь забавную болтовню Вадима, повторяешь код, и знания волшебным образом сами записываются в мозгу. Здесь вроде все выглядит просто но по факту очень эффективно. Пока что Вадим сделал для меня самый большой вклад на моем пути к веб-разработке. Большое спасибо!

[@christianspace9700]

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

[@СтаниславГорячев-г1ъ]

С кайфом за один подход посмотрел за тазиком чая, спасибо

[@vadymprokopchuk]

крутяк!

[@posadcom]

Давно замечаю, уже пробегал по каналам, вот ты объясняешь вообще прекрасно! Разжёвываешь там где надо, а где всё понятно не льёшь воды.

[@ИльяКабанов-с1ч]

Вадим, слов нет!! Спасибо тебе огромное!!! Дай Бог всех-всех благ!

[@olegs4418]

Человечище, как всегда ОГРОМЕННОЕ СПС. смотрю аж слюнки текут, удачи как всегда тебе. 👍👍👍

[@Sacar666]

Хоть и работаю в этом уже давно но все равно смотрю каждый раз по кайфу)) Очень круто рассказываешь)

[@vadymprokopchuk]

спасибо)

[@grandmaster-yo-yo]

Вадим, спасибо огромное! Модно сказать что я уже олд, в 10 классе верстал сайты по вашим урокам, сейчас поступил в универ и у нас курсач сделать свой сайт) Эти видео стали гениальным вложением!))

[@damir5581]

А в каком вузе Вы учитесь?

[@aleksandr-vyr]

Круто! после твоих уроков и твоего платного курса даже не хочется смотреть на обучающее видео других верстальщиков! У тебя как то все правильно по БЭМ и без лишнего кода Кстати хотелось бы от тебя увидеть разбор правил БЭМ с их официального сайта с примерами и оригинальной подачей ;)

[@ИльяКабанов-с1ч]

Привет, Вадим! Какой же ты МОЛОДЕЦ!

[@evgenia315]

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

[@vadymprokopchuk]

спасибо, мне приятно, и рад что так

[@МихаилКазанков-п7й]

С кайфом смотрю твои видосы! Из всех людей на ютубе - ты объясняешь лучше всех, спасибо за контент)

[@Pyrothecaracallx3]

"тщательная вечеринка" 😀👍👍👍 Спасибо огромное за урок!!!

[@demidronder]

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

[@awwyh-]

гайды этого мужика это просто нечто

[@vadymprokopchuk]

@@awwyh- спасибо

[@ДмитрийХимич-б6й]

Думал как мне провести выходные, захожу к Вадиму на канал, а тут такая вечеринка

[@vadymprokopchuk]

вот и порешали)

[@Валерия-х2ь9к]

Как всегда спасаете в трудную минуту)лучший видео урок!

[@vimvexvimvex8780]

Добрался до конца ролика на 3-ю ночь ) Хочу сказать еще раз огроменное человеческое спасибо за Ваш труд и знания.

[@a7eka]

привет, скажите , пожалуйста, как вы открываете макет? я скачиваю ,а фигма не открывает

[@bobya6697]

Лучший канал по верстке! Чувак реально талантливо и с юмором подает материал! Респект!

[@ТОЛЬКОПОБЕЗДОРОЖЬЮ]

Поставил лайк и подписался👍👍👍 спасибо дружище, побольше уроков с тебя, и реакт js покажи пожалуйста👌

[@tayku808]

вроде как комментарий больше чем с 4 словами даёт больше шанс продвинуть видео в рекомендации. Спасибо вам за это видео!

[@vadymprokopchuk]

спасибо за лайк и коммент, кайфуем )

[@СергейКулла-з7з]

Вадим, ОГРОМНАЯ благодарность за проделанную работу. )))

[@custercuster4918]

Большое спасибо за контент, приятно смотреть за работой мастера, перенимать его опыт! :)

[@julichka6527]

С каждой секундой этого шедевра все больше жалею о потраченных деньгах на курс одной канадской училки, где ни гридов, ни бэм даже не пахло!! 🫠 Эх.

[@vadymprokopchuk]

бывает( набирайтесь знаний из видоса

[@ДмитрийПлахутин-ю1ы]

Canshecode?)

[@Максим-х7к5й]

Тут будет scss?

[@АлисаЛиса-з2л]

@@ДмитрийПлахутин-ю1ытоже хотела спросить, я у нее прошла верстку, сейчас думаю идти на реакт или не стоит того

[@user-frond-end_dev]

диджей Вадим снова замутил крутую тусу! ура! новые видосы с версткой, как глоток свежего воздуха, классный контент, спасибо огромное за Ваши старания и помощь людям, которые хотят изменить свою жизнь в лучшую сторону и войти в Ай-ти, от души благодарочка и низкий поклон!!!! здоровья и всего самого наилучшего Вам)))))))).............

[@ВасильЗаячківський-л7щ]

Вітаю! Гарний контент, приємної верстки всім💪

[@vadymprokopchuk]

Дякую, старався для вас!=)

[@ukraine1514]

Вадим,лайкосик 👍💪 И подписка... Доверстал не за 5 часов,а 5 дней🤣 из за специфики места прибывания..... Супер! Практика это самое оно! Сколько не читал и не слушал,а как начал верстать то тараканы разбежались с "вечериночки"🤣 Спасибо за труды!👍💪

[@Unknown-xh7rz]

Дуже Вам дякую за урок і за те, що Ви дуже лаконічно і доступно пояснюєте, як треба верстати сайти❤

[@vadymprokopchuk]

дякую за коментар, радий, що допомогаю

[@daniyar2975]

Наконец то получилось сверстать сайт первый без ошибок каких либо и непонятных вещей!Большое спасибо!

[@djarch1278]

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

[@vadymprokopchuk]

дуже дякую, радий, що допомогаю і вам по кайфу

[@mishon9739]

Маэстро , рад наблюдать вашу привычную харизму в деле , контент как всегда on top , спасибо Вам за вашу подачу !

[@vadymprokopchuk]

Благодарю=)

[@Bloodravenful]

настоящий король вечеринок, попросили многостраничник - сделал) спасибо!)

[@vadymprokopchuk]

это пока только для новичков, а вот, что там дальше... =)

[@julichka6527]

@@vadymprokopchuk 🚀взлетаем

[@ChernykovS5917]

Спасибо за Ваш труд. Очень хороший урок. Занял неделю освоения. Все очень подробно.

[@VladimirOnokhov]

Спасибо огромное за то, что ты делаешь. Не знаю что делал бы без твоих объяснений

[@vadymprokopchuk]

спасибо

[@jerome6722]

Большое спасибо за видос , как обычно на вечеринку залетаю и лайк ставлю . С нетерпением жду вторую часть ))

[@vadymprokopchuk]

круть, готовлю

[@dimasivantsov5651]

ты крутой, спасибо большое, очень интересная подача и очень доступно для понимания

[@tatigerbst4416]

Бро, спасибо тебе огромное за ценную информацию и столь увлекательное, бесстрессовое обучение!!!🤜🤛

[@vadymprokopchuk]

стараюсь, успехов в обучении !

[@tatigerbst4416]

@@vadymprokopchuk СПАСИБО!

[@МиронД-э4ш]

Спасибо, тебе огромное!!! Ты очень крут в делах своих!!! Как всегда жирный лайк!!! Запиши пожалуйста что-нибудь для старичков!

[@vadymprokopchuk]

договорились

[@Станислав-ф8ы]

Дядя, от души, контент цікавий и прям конкрэтный 👍

[@vadymprokopchuk]

дякую

[@best_video_guru]

Классный видос. Кажется, что слишком много лишней болтовни, но на самом деле это только помогает, не дает уснуть, как в других обучалках, где все строго по теме)) Ну а кому долго, скорость Х2, вам упростит жизнь)

[@marinKalluu]

Он мега крут !!!!🫶🫶🫶🫶

[@drawusoon]

Вечеринка на 5 часов это конечно мы смотрим, суббота пройдет шикарно!)

[@vadymprokopchuk]

спецом старался к субботу выпустить

[@drawusoon]

@@vadymprokopchuk голова кипит наверное после таких трудов, но мы ценим, спасибо😎

[@vadymprokopchuk]

@@drawusoon хотелось спать, так как писал ночью )

[@drawusoon]

@@vadymprokopchuk ну всегда можно растянуть вечеринку на пару дней чтоб не мучить организм) сон важен) А можно вопрос, возможно ты уже объяснял, но будут ли стримы? А то уже давно не было (понятно почему), хотелось бы в реальном времени верстать всей компанией вместе)

[@МаринаТюгай]

Благодарю за очень подробный курс❤

[@rikersan9036]

ХАВЫХАХЫВХАЫВХАЫВХАЫ, спасибо тебе дружище, я начал учиться по твоим видосом, всегда нравятся твои шутки во время серьезных вопросов для новичков

[@ДмитрийКласс-н4б]

Круто, очень круто, смотрю тебя примерно с go-surf макета, сейчас пишу по той же сборке галпа. Только там еще слик слайдер использовался. Смотрю ты перешел на другой слайдер. Отсюда вопрос: - свайпер круче слика?) А вообще ждемс вечеринку по Галпу, продолжение и наполнение сборки, новых проэктов!)

[@ЕвгенийКотенко-ш2к]

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

[@Semyonioni]

Жирный ЛАЙК. Ваша подача безупречна. С Вашей помощью я сделал своей супруге сайт по косметологии. Спасибо. ❤

[@front_praxis]

Вадиму как всегда большое спасибо !

[@fobianka2131]

как круто! спасибо за урок, ждём продолжения) от js кукуха потекла, конечно)

[@vadymprokopchuk]

продолжаем)

[@МаксимМазур-д2х]

Вооо! Чотенько! Если ещё в конце посадим на какую нибудь CMSку, будет огонь

[@THE_KIROSHI]

Годнота підїхала Вадян як завжди топ!

[@vadymprokopchuk]

дякую

[@ВладиславТихонов-р5ь]

спасибо за качественный контент! Словно манна небесная

[@vadymprokopchuk]

Благожарю, пихтел пол ночи

[@artemcyberschool1186]

Веселая вечеринка получилась. Спасибо, Вадим!

[@yuriykolomytsyn2352]

огромная благодарность! буду практиковаться с большим удовольствием

[@vadymprokopchuk]

красава

[@BEKS705]

Огромное спасибо за видос!!! Исполинская работа... Все доступно, и легко в восприятии!!!

[@DmitryYanushkevich]

Самые лучшие вечеринки не у Тимати, а у Вадима) 🔥🔥🔥 Всё сделал как у тебя, обновляю страницу - ничего нет 😂😂😂😂😂

[@ВроцлавПольша]

Спасибо за такие уроки! Твои уроки для меня самые лучшие!

[@vadymprokopchuk]

спасибо

[@anselone2817]

Кому интересно, вот некоторые настройки emmet(перенос строки и класс после тега), настраивается в settings.json : "emmet.preferences": { "output.inlineBreak": 1, "output.reverseAttributes": true }

[@dmytro_shevchenko8]

спасибо автору за контент! всё очень ясно, и понятно как для новичка. успехов и здоровья вам! ❤

[@ArtemBohush]

Это просто великолепно, автор! Спасибо!

[@qwertymax8290]

обожаю вечеринки с этим богом верстки

[@molodoj9928]

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

[@КириллСтаценко-р6к]

Как успехи?

[@molodoj9928]

@@КириллСтаценко-р6к админку сижу делаю, маленечко страничек сверстал, но я не профи поэтому дела не очень

[@КириллСтаценко-р6к]

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

[@molodoj9928]

@@КириллСтаценко-р6к так а кто сказал что я умею это делать так минимально, остальное копипаст и под себя подгоняю

[@КириллСтаценко-р6к]

@@molodoj9928 Ааа понял

[@daria__sha]

Спасибо за Ваш труд. Тонна полезного материла👍

[@MrVitiok20091]

вже трошки передивився ютуба... чувак , ти красавчик) можливо з тобою все вийде...)

[@vadymprokopchuk]

Дякую

[@ЕвгенийГавриленко-ь4м]

Будет ли курс по JS?

[@alexnik2705]

Дякую за матеріал!!! Молодець!!! Так і продовжуй!!!

[@denisdmitriev4670]

Класс, сейчас буду смотреть

[@vadymprokopchuk]

приятного просмотра )

[@LConstantin]

Спасибо! Очень полезный контент. Ждем продолжения.

[@niakhai3659]

Очень полезный контент 👍🏻 Спасибо ! Жду продолжения про Gulp ))

[@luckytima2315]

Вадим спасибо вам за видео )) Досмотрел вечеринку с айфоном ) Тут уже новая вечеринка для новичков )

[@vadymprokopchuk]

в ритме )

[@Виктор-т9л9б]

Ты лучший бро жду ещё такие уроки с ясным пояснением!!!

[@sashavarava7933]

Супер!!! Очень полезное видео. Узнал много нового. Спасибо.

[@sergeigerasimenko7112]

Самый простой способ получить затемненную картинку на слайдере без потери возможности этот слайдер крутить мышкой - это скачать картинку уже с затемнением. Для этого в фигме сначала выключаем полоски сладера, потом через ctrl выделяем картинку и ее затемнение, группируем через ctrl+g и качаем уже правильную картинку. Правда, все остальные картинки тоже нужно будет затемнять отдельно, если нужен одинаковый эффект затемнения.

[@chikivanildada4837]

Спасибо за урок :)

[@ЮлияМамаева-э6з]

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

[@kidoxxxl]

Очень полезное видео! У меня вопрос, какую тему VSCode используешь и какое расширение для форматирования?

[@Anatoli-bq1pe]

Благодарю за очень полезное видео

[@MyFdfg]

Привет Вадим, спасибо!!!

[@vadymprokopchuk]

привет

[@Serhii_lolovich]

спасибо! Коммент в поддержку канала

[@ВроцлавПольша]

О! Новое видео! Супер!

[@phoenixbeard8543]

Дуже крутий контент і подача! Дякую!

[@vadymprokopchuk]

Дякую, радий, що допомогаю

[@Marylovesautumn]

Скоро с нашей помощью Вадим будет топовым ютубером в этом сегменте.

[@vadymprokopchuk]

поднажмем =)

[@belford123]

Автор! я чуть не обделался в моменте 4:08:47 😮‍💨 - за видео спасибо! Желаю тебе и твоим близким крепкого здоровья!

[@upwlqwp]

Малыши-карандаши на месте 🎉

[@АлександрПляко-н5н]

нашёл авше видео и хочу сказать вам спасибо за ваш труд очень много вопросов отпало

[@si4476]

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

[@igornewidomsky7240]

Спасибо!

[@dimasnytin]

Как всегда топ из топчиков

[@vadymprokopchuk]

благодарствую

[@grigoriyfomenko4927]

Спасибо за твой труд! Вадим, скажи пожалуйста, сколько стоит заверстать такой сайт новичку, если не секрет? Спасибо