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

2024 ж. 20 Мам.
734 214 Рет қаралды

Современный и актуальный подход к верстке сайтов (лендингов) на 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@maxpanama15162 жыл бұрын
  • Автор, огромное тебе человеческое спасибо за все твои труды. По твоим видео из серии «создание сайта с нуля» 5 лет назад учился верстать и пытался найти первую работу. Сейчас я сеньор фронтенд разработчик, живу в Европе. Твои видео буквально изменили мою жизнь. Лучшей подачи и качества объяснения, чем у тебя, я пока не встречал на просторах рунета. Вечного тебе здоровья и успехов!

    @vorisxonsobirov6636@vorisxonsobirov663610 ай бұрын
    • Офигенно! Ты молодец 🙏🙏🙏

      @wayupua@wayupua10 ай бұрын
    • Вдохновляет!

      @user-kd7qm2si8k@user-kd7qm2si8k9 ай бұрын
    • Начинал с веб дизайна? Мог бы если не сложно подробнее рассказать о своем пути?

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

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

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

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

    @user-up8pc4ff3r@user-up8pc4ff3r3 жыл бұрын
  • Оформление выпуска, конечно, на полной высоте, мега приятно и удобно смотреть. Спасибо за контент!

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

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

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

    @user-py9du9gv9l@user-py9du9gv9l4 жыл бұрын
  • Андрей, огромное спасибо за уроки. НИЧЕГО БОЛЕЕ ПОНЯТНОГО И ЛЕГКО УСВАИВАЕМОГО Я ЕЩЁ НЕ ВИДЕЛ!

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

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

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

    @msvpy@msvpy3 жыл бұрын
  • Спасибо за видео. Хорошая подача, приятно смотреть!

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

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

    @user-he4kn2ir1q@user-he4kn2ir1q3 жыл бұрын
  • Какое счастье, что есть люди, которые несут ясность! Спасибо за урок!!!

    @user-bp1oc2xq5j@user-bp1oc2xq5j9 ай бұрын
  • Отличный урок! Коротко, без воды и по делу) Жду продолжения!

    @niko_g4342@niko_g43423 жыл бұрын
  • Все супер) Так держать!

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

    @cat.basilio@cat.basilio4 жыл бұрын
  • Вы лучшие! Жду нового выпуска! Благодаря вам я очень многому научился, спасибо вам за это!

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

    @user-nc2jb4df6t@user-nc2jb4df6t2 жыл бұрын
  • С удовольствием смотрю все Ваши видео. Благодарность за труд. Жду новые ролики.

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

    @Innysia2012@Innysia20124 жыл бұрын
  • Нууу класс. Оч ёмко сжато и по полочкам Мне зашло и понятно ) Спасибо

    @iazyboff3794@iazyboff37943 жыл бұрын
  • Как всегда, всё на высоте!!! Спасибо огромное, очень интересно смотреть твои уроки.

    @funny_pets-catsdogs@funny_pets-catsdogs3 жыл бұрын
  • Мое первое знакомство с версткой))) Спасибо за видео!)

    @user-hx1qi7sw1q@user-hx1qi7sw1q3 жыл бұрын
  • Только вкатываюсь во всю эту движуху, но у вас самые интересные видосы, вот вас слушаешь и не становится занудно после 10 минут как во всех остальных видосов, а так же информативность нет воды, все по делу и максимум инфы

    @user-tx1cw5db9j@user-tx1cw5db9j3 жыл бұрын
  • Спасибо большое за ваш труд !

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

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

    @user-qs6cs8ec8h@user-qs6cs8ec8h3 жыл бұрын
  • Очень доступно и понятно, спасибо !

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

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

    @user-cv4uh8co6p@user-cv4uh8co6p2 жыл бұрын
    • Вот так ютаберы и учат,а хочешь более сносного обучения переходи на их платные курсы!Нет,я не против того,что курсы платные,главное,чтобы приподнесли информацию доходчиво.

      @user-cx3qy6ri8h@user-cx3qy6ri8h2 жыл бұрын
    • Полностью согласен

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

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

      @kirskay1223@kirskay1223 Жыл бұрын
    • @@user-cx3qy6ri8h его курс стоит 1109$ ))))))))))))))))))))))

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

    @antonmolchanov9327@antonmolchanov93273 жыл бұрын
  • Отличная дикция, интересная подача. Видео идет час и за все это время не разу не заскучал) респект

    @veezn5768@veezn57683 жыл бұрын
  • Супер!! Очень очень доступно! Шикарный урок! Спасибо!!))

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

    @user-rr6pu4lb4d@user-rr6pu4lb4d3 жыл бұрын
  • Спасибо тебе огромное за твой бесценный труд !

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

    @worldofcheats7332@worldofcheats73323 жыл бұрын
  • И снова крутейший урок!!! Все очень просто и доступно.Супер!

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

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

    @user-ch8ri3wj1i@user-ch8ri3wj1i3 жыл бұрын
  • Хороший контент получился, спасибо за труд и знания

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

    @solo8968@solo89683 жыл бұрын
  • Самый качественный контент по веб дизайну. Спасибо за твою работу!

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

    @user-om3kt5oz9i@user-om3kt5oz9i3 жыл бұрын
  • Благодарю за данное видео! Жду новых уроков.

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

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

    @sofakonyuhova8851@sofakonyuhova88513 жыл бұрын
  • Крутая рубрика, буду ждать следующие видео)

    @dinarl8439@dinarl84394 жыл бұрын
    • договорились)

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

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

    @hannasavostianova7155@hannasavostianova71553 жыл бұрын
  • Спасибо! Чётко, понятно, красиво!

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

    @bigtrevorshowtv1078@bigtrevorshowtv10783 жыл бұрын
  • Реально доступно обьясняете! Круто!

    @e.n.d4689@e.n.d46893 жыл бұрын
  • Очень нравится видео Андрея, все кратко и понятно, спасибо!)

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

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

    @user-eo9dp3zb4t@user-eo9dp3zb4t3 жыл бұрын
  • Привет, Андрей. Спасибо за видео. Было интересно узнать что такое верстка. Обязательно займусь ее изучением после дизайна)

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

    @onnikkaona8564@onnikkaona85643 жыл бұрын
    • 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

      @isaiahcurtis8953@isaiahcurtis89532 жыл бұрын
    • как будто на эльфийском

      @user-hv7dx6pz3k@user-hv7dx6pz3k2 жыл бұрын
    • @@artik3144 Человек Объяснил все очень доходчиво и доступно для новичков, а если тебе не понятно, то иди смотри мультики, ребенок.

      @user-ip3is2oz9j@user-ip3is2oz9j2 жыл бұрын
    • Я всё понял, потому-что учился (в отличие от некоторых)

      @ichkchya@ichkchya2 жыл бұрын
    • Ээээээээээээээээээээээээээээээ

      @user-df9cx3fb6l@user-df9cx3fb6l2 жыл бұрын
  • Просто класс! Со всех трех аккаунтов врубил лайк!💪💪💪

    @winter9674@winter96743 жыл бұрын
  • Крутое видео) помогает новичку не запутаться в основах, спасибо!

    @user-vg8xk7to7e@user-vg8xk7to7e3 жыл бұрын
  • Ребят, я вас обожаю!!!

    @catsforever3306@catsforever33063 жыл бұрын
  • С нетерпением жду новое видео❤️❤️❤️

    @user-qj2wo6hs7e@user-qj2wo6hs7e4 жыл бұрын
  • очень классное видео для тех, кто уже знает хоть какие то основы, чтобы понять. как происходит процесс вёрстки

    @sudden458@sudden4582 жыл бұрын
  • Ох уж эта вебка закрывающая css текст)

    @relaxplay9359@relaxplay93593 жыл бұрын
    • рил

      @babyyoda7685@babyyoda76852 жыл бұрын
  • Отличный проект. Желаю успехов!

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

    @user-gl3hk3jg4e@user-gl3hk3jg4e4 жыл бұрын
  • Спасибо за отличную работу над контентом этого канала)

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

    @vadberg1841@vadberg18413 жыл бұрын
    • Здравствуйте! Как успехи в этой сфере?

      @user-cr1xr2do7o@user-cr1xr2do7o2 жыл бұрын
    • как успехи?

      @tamaaeev_raketka@tamaaeev_raketka Жыл бұрын
    • Привет, как успехи?

      @blyaidinaxuy@blyaidinaxuy10 ай бұрын
  • Урок просто бомбезный!! Ты очень круто объясняешь. Смотрю тебя очень давно. И повезло, что наткнулся на тебя тогда. Монтаж на высоте. У тебя очень круто получается монтировать. Спасибо большое что делаешь такие прикольные, полезные уроки!!

    @user-xy6xr1cn8w@user-xy6xr1cn8w3 жыл бұрын
  • Как всегда крутой видос, спасибо.

    @hikky9971@hikky99713 жыл бұрын
  • Спасибо за урок! Много нового узнал)

    @cancel8779@cancel87793 жыл бұрын
  • Большое спасибо, отличный урок!

    @olyaost7314@olyaost73143 жыл бұрын
  • Наконец новый выпуск , делаю свой сайт , спасибо)))

    @sleem8578@sleem85784 жыл бұрын
  • Простое и понятное видео, спасибо)

    @user-nk5fi5qs6b@user-nk5fi5qs6b Жыл бұрын
  • Супер, отличные уроки для повторения вёрстки)) так держать, Андрей!

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

    @tolyanooo@tolyanooo3 жыл бұрын
  • Здравствуйте, я очень ценю ваше творчество, недавно пытался сделать сайт по шаблону с вашим видео 3 летней давности, понял что некоторые функции вырезаны. Смотрю, а на канале вот прям вышло видео то что мне и нужно было, спасибо что вы есть, у вас очень хорошая подача, негромкая музыка и.... вообще, всё как надо)

    @_DungeonMaster_@_DungeonMaster_4 жыл бұрын
  • Спасибо за урок. Давно слежу за каналом. Прошел начальный курс верстки в школе WayUp. Хочу дальше развиваться!

    @maximnecheporuk@maximnecheporuk3 жыл бұрын
  • очень годный видос,спасибо!)

    @dayvan5227@dayvan52273 жыл бұрын
  • Очень классно,все понятно,кратко

    @akjolaltyn1592@akjolaltyn15922 жыл бұрын
  • Все как всегда супер ! )

    @viktoriagrishchenko8617@viktoriagrishchenko86173 жыл бұрын
  • Рубрика огонь, ждём следующий урок)

    @laimmilka@laimmilka3 жыл бұрын
  • Спасибо за урок! Теперь все ясно!

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

    @fastball236@fastball2364 жыл бұрын
  • Андрей, отличный подкаст! Так держать!

    @user-bw8eh1dm9t@user-bw8eh1dm9t4 жыл бұрын
  • Хорошо все рассказано и понятно

    @reyos89@reyos892 жыл бұрын
  • Блин, очень классно, что есть такие люди, которые могут так хорошо объяснить в этой сфере, я многое понял при просмотре данного видео 😊👍

    @user-zn7zc3lh9j@user-zn7zc3lh9j3 жыл бұрын
  • Спасибо за интересные и полезные видео.

    @user-daraha@user-daraha3 жыл бұрын
  • Давно смотрю ролики и уроки Андрея. Всё очень круто. И вот новый проект как всегда на высоте. Спасибо Андрею и всей команде Way Up. Смотрю и учусь и всем рекомендую

    @user-em1pr7wf9h@user-em1pr7wf9h4 жыл бұрын
  • Лущый видео который я видел в ютубе. Супер огромное спасибо видео был качественный и понятный 👍👍

    @user-nk9ie6rg2p@user-nk9ie6rg2p2 жыл бұрын
  • Андрей! Замечательная работа! Лайк, подписка.

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

    @user-iq6kr9it5l@user-iq6kr9it5l3 жыл бұрын
  • Огромное спасибо за видео

    @user-sh7kl2rs1m@user-sh7kl2rs1m2 жыл бұрын
  • Дружище. Ты крутой. Талант преподавания на лицо! Быстро, чётко, ёмко, просто, доступно и легко. Спасибо тебе Андрей!) Подписался и лайкнул.

    @namename245@namename2452 жыл бұрын
  • Все круто))) жду продолжения)))

    @user-eb2it8ck7u@user-eb2it8ck7u3 жыл бұрын
  • Очень полезное видео, Андрей, спасибо !!!

    @user-pc1pc9qx2l@user-pc1pc9qx2l3 жыл бұрын
  • Топ контент 💣

    @_undersoul@_undersoul Жыл бұрын
  • Друг ты просто красавчик 💪

    @gizatekstil1890@gizatekstil18902 жыл бұрын
KZhead