[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
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!

Пікірлер: 862

  • @maxpanama1516
    @maxpanama15162 жыл бұрын

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

  • @vorisxonsobirov6636
    @vorisxonsobirov663610 ай бұрын

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

  • @wayupua

    @wayupua

    10 ай бұрын

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

  • @user-kd7qm2si8k

    @user-kd7qm2si8k

    9 ай бұрын

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

  • @warnerbros2916

    @warnerbros2916

    8 ай бұрын

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

  • @alba5188

    @alba5188

    8 ай бұрын

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

  • @E55TV

    @E55TV

    7 ай бұрын

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

  • @user-up8pc4ff3r
    @user-up8pc4ff3r3 жыл бұрын

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

  • @user-py9du9gv9l
    @user-py9du9gv9l3 жыл бұрын

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

  • @allison8000
    @allison80003 жыл бұрын

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

  • @hodjaevazamat9326
    @hodjaevazamat93263 жыл бұрын

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

  • @masteruvz
    @masteruvz2 жыл бұрын

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

  • @yuliakrey6879
    @yuliakrey68792 жыл бұрын

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

  • @vitaliinemyrovskyi9268
    @vitaliinemyrovskyi92683 жыл бұрын

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

  • @igorkozhevin9186
    @igorkozhevin91863 жыл бұрын

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

  • @sonyashalom9655
    @sonyashalom96553 жыл бұрын

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

  • @Innysia2012
    @Innysia20123 жыл бұрын

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

  • @arthurmakhmudov8702
    @arthurmakhmudov87023 жыл бұрын

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

  • @msvpy
    @msvpy3 жыл бұрын

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

  • @user-hx1qi7sw1q
    @user-hx1qi7sw1q3 жыл бұрын

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

  • @niko_g4342
    @niko_g43423 жыл бұрын

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

  • @serser3229
    @serser32293 жыл бұрын

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

  • @cat.basilio
    @cat.basilio3 жыл бұрын

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

  • @stevgene1
    @stevgene13 жыл бұрын

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

  • @user-nc2jb4df6t
    @user-nc2jb4df6t2 жыл бұрын

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

  • @user-kq4zf5vm8y
    @user-kq4zf5vm8y3 жыл бұрын

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

  • @anastasiyadegtyaryova7374
    @anastasiyadegtyaryova73743 жыл бұрын

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

  • @user-he4kn2ir1q
    @user-he4kn2ir1q3 жыл бұрын

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

  • @user-ic5lt4yj6q
    @user-ic5lt4yj6q3 жыл бұрын

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

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

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

  • @babyyoda7685

    @babyyoda7685

    2 жыл бұрын

    рил

  • @onnikkaona8564
    @onnikkaona85643 жыл бұрын

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

  • @isaiahcurtis8953

    @isaiahcurtis8953

    2 жыл бұрын

    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-hv7dx6pz3k

    2 жыл бұрын

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

  • @user-ip3is2oz9j

    @user-ip3is2oz9j

    2 жыл бұрын

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

  • @ichkchya

    @ichkchya

    2 жыл бұрын

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

  • @user-df9cx3fb6l

    @user-df9cx3fb6l

    2 жыл бұрын

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

  • @user-cv4uh8co6p
    @user-cv4uh8co6p2 жыл бұрын

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

  • @user-cx3qy6ri8h

    @user-cx3qy6ri8h

    2 жыл бұрын

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

  • @laferrari5081

    @laferrari5081

    2 жыл бұрын

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

  • @user-ld9jn3nf7h

    @user-ld9jn3nf7h

    2 жыл бұрын

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

  • @kirskay1223

    @kirskay1223

    Жыл бұрын

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

  • @andreeva133

    @andreeva133

    Жыл бұрын

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

  • @275ssb
    @275ssb3 жыл бұрын

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

  • @user-bp1oc2xq5j
    @user-bp1oc2xq5j9 ай бұрын

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

  • @IliaAdmin
    @IliaAdmin2 жыл бұрын

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

  • @funny_pets-catsdogs
    @funny_pets-catsdogs3 жыл бұрын

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

  • @user-qj2wo6hs7e
    @user-qj2wo6hs7e3 жыл бұрын

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

  • @almi8704
    @almi87043 жыл бұрын

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

  • @user-ch8ri3wj1i
    @user-ch8ri3wj1i3 жыл бұрын

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

  • @user-tx1cw5db9j
    @user-tx1cw5db9j3 жыл бұрын

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

  • @dinarl8439
    @dinarl84393 жыл бұрын

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

  • @wayupua

    @wayupua

    3 жыл бұрын

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

  • @veya_candle
    @veya_candle3 жыл бұрын

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

  • @user-rr6pu4lb4d
    @user-rr6pu4lb4d3 жыл бұрын

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

  • @veezn5768
    @veezn57683 жыл бұрын

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

  • @antohasotnikov2099
    @antohasotnikov20993 жыл бұрын

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

  • @iazyboff3794
    @iazyboff37943 жыл бұрын

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

  • @jexkh2030
    @jexkh20303 жыл бұрын

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

  • @vladabalymov
    @vladabalymov2 жыл бұрын

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

  • @viktoriagrishchenko8617
    @viktoriagrishchenko86173 жыл бұрын

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

  • @antonmolchanov9327
    @antonmolchanov93273 жыл бұрын

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

  • @laimmilka
    @laimmilka3 жыл бұрын

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

  • @maxsaCEO
    @maxsaCEO3 жыл бұрын

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

  • @hikky9971
    @hikky99713 жыл бұрын

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

  • @catsforever3306
    @catsforever33063 жыл бұрын

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

  • @user-qs6cs8ec8h
    @user-qs6cs8ec8h3 жыл бұрын

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

  • @baboon_hero
    @baboon_hero7 ай бұрын

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

  • @dayvan5227
    @dayvan52273 жыл бұрын

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

  • @olyaost7314
    @olyaost73143 жыл бұрын

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

  • @aronets_dmitriy
    @aronets_dmitriy3 жыл бұрын

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

  • @Head_Kitik
    @Head_Kitik3 жыл бұрын

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

  • @winter9674
    @winter96743 жыл бұрын

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

  • @vadberg1841
    @vadberg18413 жыл бұрын

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

  • @user-cr1xr2do7o

    @user-cr1xr2do7o

    2 жыл бұрын

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

  • @tamaaeev_raketka

    @tamaaeev_raketka

    Жыл бұрын

    как успехи?

  • @blyaidinaxuy

    @blyaidinaxuy

    10 ай бұрын

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

  • @user-eb2it8ck7u
    @user-eb2it8ck7u3 жыл бұрын

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

  • @cancel8779
    @cancel87793 жыл бұрын

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

  • @user-bw8eh1dm9t
    @user-bw8eh1dm9t3 жыл бұрын

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

  • @igorkan5805
    @igorkan58053 жыл бұрын

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

  • @zagurskij_v
    @zagurskij_v2 жыл бұрын

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

  • @user-eo9dp3zb4t
    @user-eo9dp3zb4t3 жыл бұрын

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

  • @e.n.d4689
    @e.n.d46893 жыл бұрын

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

  • @user-tg8kw6nx6j
    @user-tg8kw6nx6j3 жыл бұрын

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

  • @user-om3kt5oz9i
    @user-om3kt5oz9i3 жыл бұрын

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

  • @mrCetus
    @mrCetus2 жыл бұрын

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

  • @muhammadabdulloev3600
    @muhammadabdulloev36003 жыл бұрын

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

  • @sanndroids8652
    @sanndroids86523 жыл бұрын

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

  • @alexavaggg9510
    @alexavaggg95103 жыл бұрын

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

  • @user-bp1oc2xq5j

    @user-bp1oc2xq5j

    9 ай бұрын

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

  • @Aleal616
    @Aleal6163 жыл бұрын

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

  • @worldofcheats7332
    @worldofcheats73323 жыл бұрын

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

  • @solo8968
    @solo89683 жыл бұрын

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

  • @user-fx3ss7cu1b
    @user-fx3ss7cu1b3 жыл бұрын

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

  • @user-iq6kr9it5l
    @user-iq6kr9it5l3 жыл бұрын

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

  • @Lcake1672
    @Lcake16723 жыл бұрын

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

  • @lurrfy
    @lurrfy3 жыл бұрын

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

  • @user-gl3hk3jg4e
    @user-gl3hk3jg4e3 жыл бұрын

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

  • @hannasavostianova7155
    @hannasavostianova71553 жыл бұрын

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

  • @s.angelina5926
    @s.angelina59263 жыл бұрын

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

  • @sleem8578
    @sleem85783 жыл бұрын

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

  • @sofakonyuhova8851
    @sofakonyuhova88513 жыл бұрын

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

  • @user-vg8xk7to7e
    @user-vg8xk7to7e3 жыл бұрын

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

  • @user-vv9uq5ty5s
    @user-vv9uq5ty5s3 жыл бұрын

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

  • @zdorovedarom
    @zdorovedarom2 жыл бұрын

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

  • @user-rs7wo1kj7o
    @user-rs7wo1kj7o3 жыл бұрын

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

  • @sudden458
    @sudden4582 жыл бұрын

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

  • @user-gc1pz6sh8l
    @user-gc1pz6sh8l2 жыл бұрын

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

  • @user-pc1pc9qx2l
    @user-pc1pc9qx2l3 жыл бұрын

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

  • @user-nk5fi5qs6b
    @user-nk5fi5qs6b Жыл бұрын

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

  • @volodimircherneha2920
    @volodimircherneha29203 жыл бұрын

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

  • @user-vs6rn1pc4z
    @user-vs6rn1pc4z3 жыл бұрын

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

  • @user-dk2hv8sl4f
    @user-dk2hv8sl4f3 жыл бұрын

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

  • @tolyanooo
    @tolyanooo3 жыл бұрын

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

  • @bigtrevorshowtv1078
    @bigtrevorshowtv10783 жыл бұрын

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

  • @akjolaltyn1592
    @akjolaltyn15922 жыл бұрын

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

  • @Faininarizku
    @Faininarizku3 жыл бұрын

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

  • @user-daraha
    @user-daraha3 жыл бұрын

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

  • @mbait2669
    @mbait26693 жыл бұрын

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

  • @fastball236
    @fastball2363 жыл бұрын

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

Келесі