Верстка сайта для самых маленьких, html/css подробное объяснение
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2025
- Друзья, в этом видео я верстаю полный сайт для новичков в верстке, то есть прям для людей, которые делают самые первые шаги, начинают с самого начала. Эта верстка для самых маленьких в этой сфере, я объясню абсолютно все.
Полезные ссылки:
------------
макет - drive.google.c...
------------
VSC - code.visualstu...
Figma - www.figma.com/...
Все теги и свойства (справочник) - doka.guide/
Нормалайз - necolas.github...
Шрифты - fonts.google.com/
------------
Мой курс по верстке (закрытая вечеринка=)) - from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Часть кода, который хотел оставить, сокращение для списка, youtube не разрешил, в целях безопасности.
Весь готовый проект вы можете найти у меня на патреон
/ from0to1
Рекомендую после этого видео, пройти марафон по верстке:
1. • Верстка сайта с нуля, ...
2. • Верстка сайта с нуля, ...
3. • Верстка сайта с нуля, ...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
макет - drive.google.com/file/d/1N3QB3YGJbuVkMw7l3Qg5NMJz9F53CA7s/view?usp=sharing
Сайт курса по верстке - from0to1.com.ua/
Готовая верстка на patreon - www.patreon.com/from0to1
Привет, скажи а ты сейчас работаешь в компании?
большое вам спасибо и низкий поклон, что вы безвозмездно делитесь своими знаниями с обычными людьми, которые хотят изменить свою жизнь!
если стану разработчиком, то обязательно вас поодержу не только словами, но и материально)
@@markgod1811 здравствуйте. Как ваши успехи ?
Когда тебе грустно и одиноко, то нет ничего лучше, чем залететь на вечеринку Вадима. Вадим - это топовый DJ верстки. Его вечеринки унесут тебя в полный отрыв. Это лучший канал!
спасибо
Согласен)
Блин, если ты наберёшь в Википедии слово "красавчик" - там будет твоё фото. 👍
=))))
Красиво красиво
Красиво,!!!!
😂
Вот прям аплодисменты автору!
5 часов - сразу видно, что человек делал от души и постарался не просто "налить воды".
Большая благодарность и процветания каналу!
Наконец то я нашел идеального преподавателя! Уже около месяца пытаюсь самостоятельно изучать верстку, но всегда сталкивался с тем, что в видео зачастую ведущий просто пишет текст, особо ничего не объясняя, как будто я уже должен все знать. Здесь же все просто прекрасно, все доходчиво и очень понятно! За все видео ни разу не столкнулся с проблемой того, что что-то не понятно, спасибо вам!
круть, движемся вместе
Боже, твой канал - настоящая находка для всех, кто только знакомится с версткой!
Огромное спасибо тебе за такой мега полезный контент, супер доходчивую подачу и легкий вайб, с которым ты донес этот 5-ти (ПЯТИ!!!!!) часовой мастер-класс для самых маленьких :)
круть, спасибо
я с вами полностью согласен,это единственный нормальный канал, который толково обьясняет
как успехи
Я чайник вообще в html и в css но после твоего видосика я понял что не совсем еще деградировал что соображать и понимать еще что то могу мне нравится такая ВЕЧЕРИНКА 🎉 респект тебе и добра дружище, по больше видосов для таких чайников как я записывай благодаря таким как ты хочется что то изучать и узнавать новое 🤝✊🏻👏🏻
Блин! Как же я рад приглашению на твою вечеринку! Слушаю как хороший рок, смотрю как японский сад камней
Спасибо тебе Вадим, вот это вечеринка подъехала 😉👍
P.s. спасибо тебе за контент, ОГРОМНОЕ дело делаешь!!!
Спасибо!
Одна из самых классных вечеринок на которых я побывал :D Мало того что верстка практически от и до, так еще и JS зацепили немного. Круто!
Впервые вижу столь подробную информацию по верстке! Спасибо!
Как говорит Вадим -потрясающе! Очень доступная и грамотная подача материала. Да ещё и с юмором - вообще песня! Ждём новых уроков!
невероятное видео именно из-за его подачи!! у меня нет слов чтоб описать это невообразимый характер, очень приятно смотреть, сразу улыбка, автору глубочайшее уважение за такую огромную работу, пять часов писать видео с параллельными объяснениями каждого миллиметра без воды и поясняя необходимые правила. чтобы уметь преподносить материал - нужен талант и умение, в плане чего автору можно позавидовать, спасибо!!!
Спасибо Вам огромное!) Это правда, что ваш канал настоящая находка, так доходчиво объяснять, при этом шутить, показали столько полезного, интересного, что хочется всё больше и больше обучаться верстке) Вы прям вдохновитель)))
Я в этом деле только начинаю разбираться, этот контент для меня особо важен, благодаря несложной манере подачи довольно непростого материала. Спасибо большое за ваш труд!
Выражаю слова благодарности автору канала. Сверстал уже 2 макета, все доходчиво и занимательно. А главное, время потраченное с пользой. Огромное спасибо за ваш труд!
Благодарю
Вадос, респект за марафоны и гайды, учусь потихоньку, стараюсь верстать сам, а потом сравниваю с твоей версткой и слушаю объяснения. Сильно бустишь и мотивируешь, спасибо, что ты есть)
лучшего объяснения я не видел.. даже на платных курсах.. отвечаю! чел просто от души делает...
Это просто не передать словами. Уже второй час ищу где поставить ещё второй лайк. Спасибо большое Вадим, за данный, познавательный контент!
Ты очень сильно помог в изучение верстки. Я вроде бы основы понимал, но боялся верстать, просто постоянно теорию слушал. Думал, что профи как-то по другому верстают, не так, как я думаю. Оказалось, что я думал правильно и начал активно верстать. После тебя поперло с php, laravel и vue. Спасибо за контент, приятно слушать, даже когда пишешь на PHP)
круто, я очень рад
как успехи
Ставь класс если старичок и ждёшь вёрстку с gulp/scss/PHP и натяжку на WP. А так канешно же спасибо Вадиму за труд. Новачки тоже должны рости.
Этих новичков как грязи, по 300 заявок на вакансию. Хватит уже плодить. Хайп закончился
Мне больше нравится sass
@@gladiatorrussia хайп еще даже не начинался...вот будет 10000 заявок на вакансию, вот тогда хайп, а щас 400 всего
@@splcell выписан из верстальщиков!
@@OstapIvanovshys че это? Ничего удобнее sass еще не придумали
Щиро дякую вам за ваш контент! Багато чого з цього вже знаю, але за допомогою ваших відео вперше посміхаюсь за довгий час. Успіхів вашому каналу!
Спасибо тебе огромное Вадим !!! Твои вечеринки помогают жить и двигаться дальше в это ужасное время. Я очень благодарна тебе, за то что можно просто учиться и на какое-то время забыться! В темное время особенно видно светлых людей❤🩹🙏
Благодарю
Если кто то спрашивает как начать во фронте всегда советую этот канал как самый полезный и позитивный
Хотелось бы конечно что бы канал рос и здесь когда появилась инфа для миддл уровня, js + react/redux
Но видно как ты кайфуешь именно помагая людям зайти в профессию по этому наверное это именно твоя тарелка)
Я бы наверное забросила вёрстку либо очень долго бы ее учила если бы не ты
Огромная тонна курсов в интернете. Документация библиотек, которую по сути авторы и пересказывают. На «продвинутом» уровне вы уже сами ищите информацию и набиваете шишки
@@user-en5jt2ng2j спасибо я уже 2 года в разработке)
В том то и дело что большинство пересказывают сухую документацию, что само по себе для многих не понятно и запутано
Что касается вёрстки у Вадима очень хорошо получается своими словами объяснить материал да еще и с юмором, в этом и есть его ценность как учителя
Зачем набивать свои шишки когда уже есть человек который через все это прошел и теперь своими словами доносит это другим? Странная у вас логика
Если вам удобно читать сухую документацию то можете учить так и набивать свои шишки
Но если бы Вадим например начал преподавать более продвинутые технологии я бы училась у него, потому что это помогло бы ускорить обучение в разы, сколько не смотрела авторов подаче Вадима аналогов нет
Благодарю!
@@mariia7044 спасибо)
@@mariia7044 почему же странная. Вы 2 года в разработке и должны ведь хорошо понимать, что не все есть в виде уроков и в источниках. Многие библиотеки со своими странностями и так или иначе, вы набиваете шишки)
Это я вообще сказал в целом про опыт, не существует таких курсов после которых вы станете крутым разрабом и не важна подача. С этим мы разобрались.
А второе: документация у реакта не сухая, очень хорошо написанная, на русском языке, лаконично, понятно, с примерами. Тоже самое у редакса, особенно тулкит. По html и css согласен, да как и джаваскрипт, информация раскидана по крупицам по всему интернету, а Вадим ее преподносит круто.
То чувство, когда понимаешь что следующие 5 часов пройдут офигенно)
Спасибо за такие классные видеоуроки
Годно! Особенно порадовало объяснение структуры сайта. Вложенность, наследование и переопределение CSS свойств. Вот это вот в начале довольно трудно сложить в голове.
Это лучшее что я видел! Спасибо за титанический труд, успехов и всех благ тебе)
ОГРОМНЕЙШЕЕ СПАСИБО за это видео! я начинала смотреть штук 5 видео про вёрстку с нуля, но ни один из авторов не объяснял настолько понятно. все объясняли очень монотонно, я заснула несколько раз пока смотрела и после каждого действия автора оставалось много вопросов
супер, спасибо
Вадим спасибо большое. Один из немногих, который расскажет максимально подробно. Хорошее дело делаешь. Веселый и хороший человек, приятно слушать..
Огонь контент - изложено доступно, по человечески. Объяснять сложные вещи простым языком не все могут. Скилы ростут - спасибо, что делишься опытом!
Спасибо
Вадим это действительно круто для начинающих, я изучил кое-что здесь бах и все по полочкам, большое спасибо. Жалько только один раз можно нажать лайк, а так с меня 1000 лайков за этот урок
круть, рад что помог
Вадиме, велике дякую. Це треба мати талант щоб так доступно подавати матеріал. Ще раз дякую 💙💛
Благодарю. Все получилось. Честно делал неделю. Так я монтажник окон и ремонты делаю, думаю я вообще не способен такому учиться, но по немного учусь. Преподаватель ты реально хороший. Удачи тебе.
Как успехи?
ты единственный, кто обьяснил для людей, как и что работает
Ай тигр это лучший чувак и лучше всех обьесняет. Топовый канал с этого ролика я когдато начал, а щас уже работаю в компании и зарабатываю 180к, спасибо за карьеру❤.
ставим 2 монитора повторяем и учимся, Класс. хорошо что есть такой Вадим. который сам знает и другим хочет донести знания. чтобы другие желающие научится. тоже понимали нутро сайта. Спасибо тебе Вадим!
Да, тоже давно хотел проверить каково на двух мониторах, должно быть удобнее, за одним замудохаешся переключать окна постоянно
мне 3ох не хватает. уже задумываюсь 4ый купить. стоит 1ин монитор - на нем страница которую делаем, в браузере - что бы при сохранении кода только голову повернуть и посмотреть результат. 2-3 мониторы стоит 34" разделен на 2 части код где пишеться и страница с браузером в котором обучающее видею и 4ый монитор нужен что бы фигма была под рукой! )
@@helputel4 да ты мониторный магнат)
@@Alexey_Gri да, я такой.
@@helputel4 как вобще получается верстка? JS там?
ты один из тех, кто действительно ясно все рассказывает для новичков. отличный материал.
по твоему 12 часовому видосу учил верстку, сейчас работаю реакт нейтив разрабом, спасибо тебе за крутой контент, тебя очень интересно слушать как препода))
Круто, молодцом, спасибо
долго учился?
@@wentymor1902 суммарно активной учебы было полгода +-
@@airpodsclub6443 а сколько часов в неделю обучения примерно выходило?
@@peppyfine9987зачастую все время которое мог уделять я и уделял, скипал колледж в угоду самостоятельной учебе, среднее значение привести трудно, не считал
Спасибо за Ваш труд! Несмотря на последние трагичные события вы по прежнему помогаете нам развиваться 🙏
честно, раньше я думала, что вот программирование не мое. смотрела видео, читала,, а по итогу забила, потому что было сложно. а тут все очень просто и полезно. спасибо вам большое за такую вечеринку!))
важно найти своего препода, и все пойдет по маслу
Ну это еще не считается программированием
Отличная подача , все понятно , интересно и весело . На твоем канале недавно , но мне очень нравиться , многое уже узнал про верстку. Спасибо тебе!
пипец! Досмотрела до конца это не просто какой-то коктейльчик, который сербанул и забыл- это видео- Дедовский самогон!! Такой концентрат, что не каждый вывезет тем более за один присест)))))Спасибо)) даже бургер-меню на js сюда вошло! Это просто пушка, а не видео)))
Супер, молодцом
не смотря на то, что данное видео уже давно не для меня, ставлю лайк и коммент, для продвижения видео
спасибо
Топовый преподаватель. Буду смотреть твои марафоны и верстать. Спасибо за труд!
Это лучший марафон для новичков по вёрстке. И кофе у тебя лучшее)))). Было бы не плохо по js устроить марафон для новичков.
Новое для меня:
1:49:40 - цвет для ссылок
2:09:05 - разница между png и jpeg форматами
2:13:20 - другие форматы (вектор. графика svg)
2:17:17 - не всё то кнопка, что кнопкой визуально выглядит
2:32:43 - как поставить по центру страницы
2:34:10 - посмотреть видео по флексам
Круто Вадим, хотелось бы побольше видео со сложными макетами, но без таких видосов конечно тоже нельзя:)
Только начал разбираться в верстке, прошел какие-то азы, наткнулся на твой блог, просто находка)
Правда я лохонулся и начал сразу верстать твою последнюю вечеринку с ламбой, там много вопросов у меня было, сверстал есть косяки которые я не могу найти, адаптив так вообще крах, но в этом видео, объяснил все доступно и понятно, ты молодец, теперь буду дальше по твоим видео учиться
Еще бы не вся эта ситуация в мире, то я бы и на курс по верстке залетел к тебе, но ты ограничил доступ людям с РФ, обидно..
Самое доходчивое объяснение этой темы. Спасибо за ваш труд !
Дуже дякую друже)
Таке навчання я навіть на курсах за кошти не не бачів)
Спасибо Вам огромное за атмосферное, теплое видео!!!! Очень легко и приятно с вами учиться, а ваша подача и юмор 🔥🔥🔥
благодарю
Ура, новое видео, лайк не глядя , спасибо тебе за контент высшего сорта !
Не описать как я рада, что нашла этот канал ) Спасибо огромное!
огромнейшее спасибо за урок, буду смотреть другие ваши видео) отдельное спасибо за концовку💗
спасибо вам за такой прекрасный урок закончил только что УРА), буду двигаться дальше благодаря вам и вашим урокам
супер, так держать
Спасибо за урок тоже сверстал, выпускник Вадима, для меня легко да но с радостью все равно сверстал и хорошо с Вадимом вечер провел с виной перед праздником, было довольно лампово)
Эхххх, где же ты был раньше. Ты очень крут чувак👍
Зробив свій 1 сайт завдяки вам!
Дякую велике, сподіваюсь що в майбутньому (коли пройду ваші марафони)буду робити це так же легко
Этот формат лучше марафона а то там много ответов на вопросы и лишних разговоров
согласен
Хорошое видео, опыт в верстке есть, но как повторить основы кайф 🤗
спасибо
@@vadymprokopchuk тебе спасибо
Спасибо за контент! Для начинающих точно полезно 100%! Я хоть и не начинающий в верстке, но повторение мать учения, и для себя я нашел несколько полезных фишек, которые упростят процесс верстки в будущем, да и заодно проверил себя все ли я делаю правильно!
Огромное спасибо! Недавно начал изучать верстку по потребности. Требовалось написать сайт для своего проекта, а денег на верстальщика нет. Вы помогли мне полюбить и войти в айти) Продовжуйте в тому ж русі, файно виходить=)
Сидів і кайфував всі 5 годин!!! "ВЕЧЕРИНКА" топ. Сайт майже встигав верстати з автором. Подача неймовірно легка і зрозуміла. На просторах ЮТУБА знайти гарного лектора дуже важко, а цей канал просто подарунок долі. Тепер передивляюся поступово всі корисні для мене відео і отримую знання. Хотілося б одне виправити - це "руснявський язик". Процвітання і успіху каналу і школі!
терпи животное)
Спасибо вам большое за ваш труд. Я так рада, что подписалась на ваш канал. Отличный урок и хороший учитель.
Дякую за ваш урок. Такі українські айтішники найкращі. 5 годин самої гущі. Успіхів вашій вечеринці.
Огромное спасибо за такой титанический труд
Впервые закончил верстать сайт(имеется ввиду от начало и до конца), спасибо)
Красава
не глядя ставлю уже лайк и подписку))) начала только идти поэтому пути всему, начиная от дизайна с вашей женой на ютубе :) спасибо Вам за ваши видео
Спасибо тебе. За последний год твой контент стал намного круче
Одна из лучших моих вечеринок за последнее время!)))
блин какой же ты классный, спасибо тебе большое, счастье и здоровье тебе и твоей семье
Братан Ты просто лучший✊🏻 столько инфы тем более столько внимание и времени потрачено с твоей стороны это просто нереально. Большое большое спасибо Тебе, долгих лет жизни и процветание в карьера💪🏻
Гарно. Отличное подробное видео и еще делай!
Здравствуйте, Вадим! Рад, что вы живы здоровы! Пусть скорее закончиться эта ненавистная война...
Шикарно, чётко, Борис Джонсон)...Спасибо, мозг вынес, но с юмором и новыми знаниями!
Кажется, это то, что мне необходимо. Спасибище милый человек!
Вадим, ты очень крутой парень! Идеальная вечеринка! Всех благ тебе и твоим близким!💪💪💪👍👍👍👌👌👌
Спасибо огромное за то, что ты для нас делаешь!
Спасибо большое за столь подроброе видево, для таких докторов наук, как я даже все понятно.
супер
братишка, спасибо за контент для полных "0" я еще не решил заниматься ли версткой.НО тут важно что б чел видел сам процесс и оценивал, сможет он такое "сверстать" или нет. я конечно понимаю, что это самый простой пример верстки-но ОООООЧ интересно. "лукаса" оставил😉 ну с таким соком и " жаргонизмами"сленгом" " все рассказывает прям приятно смотреть.
Девочки и Мальчики спасите мой мозг. Что только не делал, section "headline" и images alt "iphone" в центре стоят. Если headline поменять букву любую они улетают в право. И все́ это синхронно! Вадос Как всегда красава!!!)))
спасибо за урок, буду ждать более сложных лендингов и с применением js))
вечеринка постепенно запускается, искреннее пасиб за труды
Здравствуйте Вадим. Урок отличный ! Понятно, доходчиво. Особенно для начинающих.
Люблю послушать Вадима, освежить память, и что-нибудь сверстать...
Вадим спасибо за годный контент. Ещё не досмотрел до конца 3 части самокатов. Очень продуктивно-полезный контент для скилов. Однозначно лайк. Для новеньких я думаю можно отдельно шпаргалку с тегами написать как в flex-ах. Чтобы хорошо запоминалось.
Ты единственный блогер, которому лайк ставится после первых 10 секунд просмотра
Лайк ,подписка чисто за жаргон! Смотрю внимательно,а не могу! Смешно! «Эврибади Борис Джонсон», « падинг 15пх что бы никто не прислюнявился на дискотеку» и тп 😂
Лайк не глядя)
Благодарю за обучающие видео великий учитель. по больше бы таких видео от профессионалов )
Спасибо за видео , наконец-то собрал многие пазлы воедино :)
ЛАЙК вам от ТОПОВОГО и ЛЕГЕНДАРНОГО СЕООНЛИ
Хотелось бы серию роликов, например отталкиваясь от этого макета. Например 1-уровень верстки блока это как в этом видео, потом уже короткое видео как сверстать его более быстро и с применением других методов и тд до JS и все такое.
Дякую друже, все зрозуміло та ясно! Ціную твою працю
Дякую
за макети в вільному доступі і можливість потренить свій скіл, а також для себе щось цікаве підкреслити відразу лайк і дякую за працю!)
дякую
Большое спасибо! Обьяснение супер. Дней 5 кодил за вами. Отличное видео!
Спасибо за столь подробный видеоурок) Однозначно лайк!
Спасибо вам,добрый человек, что помогаете осваивать азы верстки!
Огромное спасибо за контент, ждём новых марафонов, ты лучший!)
Здравствуйте. Спасибо большое за данный урок. Выполняла в течение трех дней. Буду продолжать заниматься) Жаль, что не смогу купить ваш курс.
Все бомба, спасибо! Огооврился чуть, ul - unnamed list, а не нумированный.