[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета

Современный и актуальный подход к верстке сайтов (лендингов) на HTML5/CSS3 с нуля для начинающих из Figma. Разберемся со всем, что волнует начинающих верстальщиков в одном емком уроке! И...
💻 Онлайн-курс «Веб-верстальщик: начало» - 7 занятий и личный наставник бесплатно: bit.ly/3duW5FP
🖌️ Макет: www.figma.com/file/qBe5OeAHs9...
💻 Верстка с 3-мя эффектами, которых нет в видео: wayup.in/lm/load/burning-man?...
⌨️ Sublime Text 3: www.sublimetext.com/3
0:00 Хайлайты
0:26 🎙️ Новый рэп, йоу
1:28 Что нас сегодня ждет
5:04 Редактор кода Sublime Text 3
5:50 Базовая структура и объяснение тегов HTML
11:20 Подключаем шрифты из Google Fonts
15:00 Основы CSS
20:37 ⭐ Самый главный принцип верстки
29:25 Как задать фон картинкой для секции (background)
31:10 Как создать меню в верстке (ul, li)
36:30 Dev tools (инструменты разработчика) в Chrome
44:01 Обидный баг в CSS
47:30 Что такое высота строки (line-height)
48:45 🤩 Как изучать верстку, чтобы было хорошо
56:55 🤔 {HOT!} 5 заповедей профессионального верстальщика
1:02:46 Новый розыгрыш! 🎁
1:03:55 Итоги предыдущего розыгрыша
1-ый эпизод шоу: • Основы веб-дизайна с н...
🌃🎓🌙 «Вечерняя школа» - это регулярное шоу для тех, кто хочет освоить дизайн и разработку сайтов. Весело. Нескучно. Чтобы вот прямо захватывало. Идеально смотреть после работы или во время работы, если она надоела и ты хочешь выйти на фриланс.
😉 Андрей Гаврилов - мое имя. Делаю сайты 10 лет. А еще, создал образовательный онлайн-проект WAYUP и здесь же преподаю. Путешествую по всему миру и веду блог:
/ andrew.gavrilov
🎁 Используй промо-код NIGHTSCHOOL при оплате любого моего коучинга на WAYUP и получи скидку -30%:
bit.ly/3eK3Acd
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!

[@maxpanama1516]

Надо было верстать по первому уроку) онлайн магазин по продаже животных) что бы паралельно с тобой верстать)

[@vorisxonsobirov6636]

Автор, огромное тебе человеческое спасибо за все твои труды. По твоим видео из серии «создание сайта с нуля» 5 лет назад учился верстать и пытался найти первую работу. Сейчас я сеньор фронтенд разработчик, живу в Европе. Твои видео буквально изменили мою жизнь. Лучшей подачи и качества объяснения, чем у тебя, я пока не встречал на просторах рунета. Вечного тебе здоровья и успехов!

[@wayupua]

Офигенно! Ты молодец 🙏🙏🙏

[@user-kd7qm2si8k]

Вдохновляет!

[@warnerbros2916]

Начинал с веб дизайна? Мог бы если не сложно подробнее рассказать о своем пути?

[@alba5188]

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

[@E55TV]

@@alba5188 зачастую образование не нужно, если это только не гос учреждение, тебе просто нужно будет пройти собеседования, где поймут уровень твоих навыков и отталкиваясь от этого примут решение. По видео можно научиться программировать)

[@user-up8pc4ff3r]

Шикарная подача, приятно смотреть. Очень хочется новых видео про: БЭМ (побольше примеров), анимация в CSS. Жду следующих выпусков!

[@user-py9du9gv9l]

Самые клевые видео у вас, не останавливайтесь, хочется смотреть вас каждый день!!!

[@allison8000]

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

[@hodjaevazamat9326]

Благодарю вас Андрей, за качественные и полезные ролики, очень приятно слушать и спасибо, что стараетесь ради нас))

[@masteruvz]

Андрей, огромное спасибо за уроки. НИЧЕГО БОЛЕЕ ПОНЯТНОГО И ЛЕГКО УСВАИВАЕМОГО Я ЕЩЁ НЕ ВИДЕЛ!

[@yuliakrey6879]

Спасибо вам за прекрасно изложенный материал! Очень легкая и понятная подача информации!!! Счастлива,что наткнулась на ваш канал!!! 🙏🙏🙏❤️

[@vitaliinemyrovskyi9268]

Все супер) Так держать!

[@igorkozhevin9186]

Андрей, очень доступное изложение материала. Хорошая дикция, очень грамотное донесение сложных моментов верстки. Спасибо! Так держать!!!

[@sonyashalom9655]

Андрей, вы отличный учитель! Спасибо вам за доступное и понятное объяснение.

[@Innysia2012]

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

[@arthurmakhmudov8702]

Андрей молодец ! Спасибо за твой труд и за любовь к своему делу. Ты не просто учитель, а наставник. Таких людей редко можно встретить в жизни

[@msvpy]

Андрей, очень классный формат, действительно всё очень не скучно) ждём ещё видосики с интересными макетами и фишками)

[@user-hx1qi7sw1q]

Мое первое знакомство с версткой))) Спасибо за видео!)

[@niko_g4342]

Отличный урок! Коротко, без воды и по делу) Жду продолжения!

[@serser3229]

С удовольствием смотрю все Ваши видео. Благодарность за труд. Жду новые ролики.

[@cat.basilio]

Спасибо за прекрасный ролик, очень вдохновляешь! Ждемс следущих выпусков)

[@stevgene1]

Спасибо за видео. Хорошая подача, приятно смотреть!

[@user-nc2jb4df6t]

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

[@user-kq4zf5vm8y]

Полезно не только для новичков, во время работы освежить память - прекрасно😎 Спасибо🔥

[@anastasiyadegtyaryova7374]

Спасибо большое за ваш труд !

[@user-he4kn2ir1q]

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

[@user-ic5lt4yj6q]

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

[@relaxplay9359]

Ох уж эта вебка закрывающая css текст)

[@babyyoda7685]

рил

[@onnikkaona8564]

в начале видео: ну вот это щас самое сложное-дальше будет легче. Через 2 минуты: это сложно, но, поверьте, вам дальше всё станет понятно. Еще через 3 минуты: на самом деле это самое сложное в css, но вы потом сами это поймете и загуглите). Через пару минут еще: это вам сейчас не понятно, на самом деле всё легко). И в добивку: всё что мы сделали..это алгоритм, со всем остальным , только в УСКОРЕННОМ темпе мы проделаем тоже самое.-)) Новичок такой в конце ролика: да-да, я всё понял, изи же)

[@isaiahcurtis8953]

sorry to be offtopic but does any of you know a trick to log back into an instagram account?? I somehow forgot the login password. I would appreciate any help you can offer me

[@user-hv7dx6pz3k]

как будто на эльфийском

[@user-ip3is2oz9j]

@@artik3144 Человек Объяснил все очень доходчиво и доступно для новичков, а если тебе не понятно, то иди смотри мультики, ребенок.

[@ichkchya]

Я всё понял, потому-что учился (в отличие от некоторых)

[@user-df9cx3fb6l]

Ээээээээээээээээээээээээээээээ

[@user-cv4uh8co6p]

Всегда любил уроки, где объясняют, как сохранить файл можно горячей клавишей Ctrl + S, копировать можно Ctrl + C, а вставить Ctrl + V, а потом на действительно чем-то важном, что надо было бы разъяснить: "Ну, эту конструкцию я объяснять не буду - её надо просто запомнить.", или "Я понимаю, что это может быть вам сейчас непонятно, но не переживайте - скоро вы все поймете! (@ но не на моих уроках)". Мне кажется, что чтобы не было подобных комментариев, лучше вcего сразу обозначать, что урок для начинающих, но для комфортного прохождения желательно бы иметь базовые знания HTML+CSS. За себя я не переживаю, я здесь исключительно чтобы посмотреть, как делается верстка по макету (в частности из Figma), а вот за реальных новичков, которым не сказали, что чтобы начать верстать, как начинающий, по данному уроку, надо бы заранее HTML и CSS изучить - переживаю. Теперь по поводу подачи материала. Первую половину урока ничего толком не разъясняется (в частности все тот же HTML и CSS) а во вторую половину урока вообще - врубили перемотку на х10: "А почему бы и нет? - Урок-то для начинающих!".

[@user-cx3qy6ri8h]

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

[@laferrari5081]

Полностью согласен

[@user-ld9jn3nf7h]

Это всё можно самому загуглить. Вам бесплатно дают информацию и никто не заставляет смотреть именно этот канал.

[@kirskay1223]

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

[@andreeva133]

@@user-cx3qy6ri8h его курс стоит 1109$ ))))))))))))))))))))))

[@275ssb]

Очень доступно и понятно, спасибо !

[@user-bp1oc2xq5j]

Какое счастье, что есть люди, которые несут ясность! Спасибо за урок!!!

[@IliaAdmin]

Спасибо за такое информативное видео! Всё ясно, а главное интересно, желаю удачи в продвижении канала!

[@funny_pets-catsdogs]

Как всегда, всё на высоте!!! Спасибо огромное, очень интересно смотреть твои уроки.

[@user-qj2wo6hs7e]

С нетерпением жду новое видео❤️❤️❤️

[@almi8704]

Благодарю за данное видео! Жду новых уроков.

[@user-ch8ri3wj1i]

Наконец-то сдал экзамен и могу начать в полную меру обучаться, твои уроки очень помогают, СПАСИБО

[@user-tx1cw5db9j]

Только вкатываюсь во всю эту движуху, но у вас самые интересные видосы, вот вас слушаешь и не становится занудно после 10 минут как во всех остальных видосов, а так же информативность нет воды, все по делу и максимум инфы

[@dinarl8439]

Крутая рубрика, буду ждать следующие видео)

[@wayupua]

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

[@veya_candle]

И снова крутейший урок!!! Все очень просто и доступно.Супер!

[@user-rr6pu4lb4d]

Спасибо большое за практику! Отличный материал для начинающих!)

[@veezn5768]

Отличная дикция, интересная подача. Видео идет час и за все это время не разу не заскучал) респект

[@antohasotnikov2099]

Супер!! Очень очень доступно! Шикарный урок! Спасибо!!))

[@iazyboff3794]

Нууу класс. Оч ёмко сжато и по полочкам Мне зашло и понятно ) Спасибо

[@jexkh2030]

Спасибо, очень ждём продолжения тех моментов, которых не было в этом видео

[@vladabalymov]

Очень классно и доступно объясняете, по сути. Наткнулся случайно. Искал видео о FiGMA.Спасибо за ваш труд.

[@viktoriagrishchenko8617]

Все как всегда супер ! )

[@antonmolchanov9327]

ОГРОМНЕЙШЕЕ спасибо! Так доходчиво еще никто не объяснял! Даже мотивацию повысил) Очень приятно смотреть и наслаждаться информацией!)

[@laimmilka]

Рубрика огонь, ждём следующий урок)

[@maxsaCEO]

Отличный проект. Желаю успехов!

[@hikky9971]

Как всегда крутой видос, спасибо.

[@catsforever3306]

Ребят, я вас обожаю!!!

[@user-qs6cs8ec8h]

Андрей, спасибо вам огромное! Очень удобно и подробно преподносите информацию... Поражает лишь тот люд, что ставит дизлайки)))

[@baboon_hero]

Спасибо тебе огромное за твой бесценный труд !

[@dayvan5227]

очень годный видос,спасибо!)

[@olyaost7314]

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

[@aronets_dmitriy]

Хороший контент получился, спасибо за труд и знания

[@Head_Kitik]

Очень нравится видео Андрея, все кратко и понятно, спасибо!)

[@winter9674]

Просто класс! Со всех трех аккаунтов врубил лайк!💪💪💪

[@vadberg1841]

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

[@user-cr1xr2do7o]

Здравствуйте! Как успехи в этой сфере?

[@tamaaeev_raketka]

как успехи?

[@blyaidinaxuy]

Привет, как успехи?

[@user-eb2it8ck7u]

Все круто))) жду продолжения)))

[@cancel8779]

Спасибо за урок! Много нового узнал)

[@user-bw8eh1dm9t]

Андрей, отличный подкаст! Так держать!

[@igorkan5805]

Самый качественный контент по веб дизайну. Спасибо за твою работу!

[@zagurskij_v]

Спасибо! Чётко, понятно, красиво!

[@user-eo9dp3zb4t]

Очень интересно наблюдать и учиться чему-то новому,но все же хочется обучиться этому у вас на курсе (бесплатно)

[@e.n.d4689]

Реально доступно обьясняете! Круто!

[@user-tg8kw6nx6j]

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

[@user-om3kt5oz9i]

Спасибо вам большое! Очень полный и понятный урок

[@mrCetus]

боже мой смотрю по несколько раз чтобы освежиь память и так рад что есть такой адекватный чел! Тренировки у вас просто космос!!!! Спасибо за такой вклад)

[@muhammadabdulloev3600]

Спасибо, старшой!

[@sanndroids8652]

Привет, Андрей. Спасибо за видео. Было интересно узнать что такое верстка. Обязательно займусь ее изучением после дизайна)

[@alexavaggg9510]

Более доступного объяснения HTML и CSS не встречала) Грамотно, лаконично, по полочкам. Спасибо, Андрей и команда WAYUP!))

[@user-bp1oc2xq5j]

присоединяюсь

[@Aleal616]

Спасибо за подробное объяснение, очень хочется разобраться как верстать. Хотелось бы видеть у вас какой нибудь раздел с названием "Домашняя работа", задания от вас для начинающих верстальщиков.

[@worldofcheats7332]

Спасибо огромное за такое классное видео!!!!Автор большой молодец

[@solo8968]

Пожалуй лучшее что я видел из всех видеороликов на ютубе про основы html и css! Талантливый человек - талантлив во всем! Удивила цена курса, всего один доллар!! то есть автор не преследует цели содрать с вас больше 30к условно говоря, а реально намерен делиться знаниями, как это видно из этого и предыдущего урока вечерней школы! Спасибо за два лучших урока которые я смотрел по основам html и css!! Удачи

[@user-fx3ss7cu1b]

Спасибо за урок! Теперь все ясно!

[@user-iq6kr9it5l]

Классный и интересный урок) жду больше уроков по верстке)

[@Lcake1672]

Супер, отличные уроки для повторения вёрстки)) так держать, Андрей!

[@lurrfy]

Ждем продолжения)

[@user-gl3hk3jg4e]

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

[@hannasavostianova7155]

Отличная рубрика, крутой урок, очень понравился) Давайте верстать вместе чаще! Может не так подробно и, в следующий раз, без объяснений что такое тег и тд) По сути) Но вечерня школа- это крутотенюшкка :)

[@s.angelina5926]

Спасибо за отличную работу над контентом этого канала)

[@sleem8578]

Наконец новый выпуск , делаю свой сайт , спасибо)))

[@sofakonyuhova8851]

Качество видео стало в разы лучше! Приятно смотреть, все разложено по полочкам! Андрей спасибо Вам и Вашей команде за такую работу!

[@user-vg8xk7to7e]

Крутое видео) помогает новичку не запутаться в основах, спасибо!

[@user-vv9uq5ty5s]

качество и процесс объяснения супер!

[@zdorovedarom]

Андрей! Замечательная работа! Лайк, подписка.

[@user-rs7wo1kj7o]

Я недавно начал изучать верстки сайта и мне очень помогают эти видеоролики. Я искренно благодарен трудящимся за выпуск этих роликов.

[@sudden458]

очень классное видео для тех, кто уже знает хоть какие то основы, чтобы понять. как происходит процесс вёрстки

[@user-gc1pz6sh8l]

Ай молодца! Это успех!

[@user-pc1pc9qx2l]

Очень полезное видео, Андрей, спасибо !!!

[@user-nk5fi5qs6b]

Простое и понятное видео, спасибо)

[@volodimircherneha2920]

Спасибо за урок!

[@user-vs6rn1pc4z]

Очень классно сверстал свой первый макет)

[@user-dk2hv8sl4f]

Большое спасибо :)

[@tolyanooo]

Андрей,настоящий спец!классный контент для новичков.очень понравилось!жду следующих работ!добра!

[@bigtrevorshowtv1078]

На ютубе много уроков по HTML×CSS, но у тебя очень подробно и понятно. Спасибо друг👍. Поддержим автора лайками и подписками!

[@akjolaltyn1592]

Очень классно,все понятно,кратко

[@Faininarizku]

Спасибо за видио, с помощью которого я повторил HTML и CSS))

[@user-daraha]

Спасибо за интересные и полезные видео.

[@mbait2669]

Жду следующее видео , данной рубрики

[@fastball236]

Очень содержательный урок для новичков. Я имею полное право это писать так как не являюсь новичком. Андрей, молодец! Продолжай! Новички нуждаются в подобных видео!