[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
HTML-код
- Опубликовано: 6 июн 2024
- Современный и актуальный подход к верстке сайтов (лендингов) на 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
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!
Автор, огромное тебе человеческое спасибо за все твои труды. По твоим видео из серии «создание сайта с нуля» 5 лет назад учился верстать и пытался найти первую работу. Сейчас я сеньор фронтенд разработчик, живу в Европе. Твои видео буквально изменили мою жизнь. Лучшей подачи и качества объяснения, чем у тебя, я пока не встречал на просторах рунета.
Вечного тебе здоровья и успехов!
Офигенно! Ты молодец 🙏🙏🙏
Вдохновляет!
Начинал с веб дизайна? Мог бы если не сложно подробнее рассказать о своем пути?
Скажите пожалуйста, у меня нет образования реально ли по видео научиться и возьмут на работу?
@@alba5188 зачастую образование не нужно, если это только не гос учреждение, тебе просто нужно будет пройти собеседования, где поймут уровень твоих навыков и отталкиваясь от этого примут решение. По видео можно научиться программировать)
Надо было верстать по первому уроку) онлайн магазин по продаже животных) что бы паралельно с тобой верстать)
Андрей, огромное спасибо за уроки. НИЧЕГО БОЛЕЕ ПОНЯТНОГО И ЛЕГКО УСВАИВАЕМОГО Я ЕЩЁ НЕ ВИДЕЛ!
Андрей, очень доступное изложение материала. Хорошая дикция, очень грамотное донесение сложных моментов верстки. Спасибо! Так держать!!!
Благодарю вас Андрей, за качественные и полезные ролики, очень приятно слушать и спасибо, что стараетесь ради нас))
Андрей молодец ! Спасибо за твой труд и за любовь к своему делу. Ты не просто учитель, а наставник. Таких людей редко можно встретить в жизни
Шикарная подача, приятно смотреть. Очень хочется новых видео про: БЭМ (побольше примеров), анимация в CSS. Жду следующих выпусков!
Оформление выпуска, конечно, на полной высоте, мега приятно и удобно смотреть. Спасибо за контент!
Андрей, вы отличный учитель! Спасибо вам за доступное и понятное объяснение.
Спасибо вам за прекрасно изложенный материал! Очень легкая и понятная подача информации!!! Счастлива,что наткнулась на ваш канал!!! 🙏🙏🙏❤️
Какое счастье, что есть люди, которые несут ясность! Спасибо за урок!!!
Самые клевые видео у вас, не останавливайтесь, хочется смотреть вас каждый день!!!
Отличный урок! Коротко, без воды и по делу) Жду продолжения!
Все супер) Так держать!
Андрей, очень классный формат, действительно всё очень не скучно) ждём ещё видосики с интересными макетами и фишками)
Заслуженный лайк. На первом этапе обучения, создавал свою версию но примеру с видео. Больше таких видосов!)
Андрей, спасибо вам огромное! Очень удобно и подробно преподносите информацию...
Поражает лишь тот люд, что ставит дизлайки)))
Большое спасибо за новый выпуск! Всегда интересно тебя смотреть, жду следующее видео!
Полезно не только для новичков, во время работы освежить память - прекрасно😎 Спасибо🔥
Мое первое знакомство с версткой))) Спасибо за видео!)
Только вкатываюсь во всю эту движуху, но у вас самые интересные видосы, вот вас слушаешь и не становится занудно после 10 минут как во всех остальных видосов, а так же информативность нет воды, все по делу и максимум инфы
ОГРОМНЕЙШЕЕ спасибо! Так доходчиво еще никто не объяснял! Даже мотивацию повысил) Очень приятно смотреть и наслаждаться информацией!)
Спасибо за видео. Хорошая подача, приятно смотреть!
Спасибо за прекрасный ролик, очень вдохновляешь! Ждемс следущих выпусков)
Это великолепно, лучшие уроки которые я видел. Мой путь веб-дизайнера только начинается, поэтому я очень рад, что есть такие разборы. Спасибо вам за проделанную работу, продолжайте!)
Здравствуйте! Как успехи в этой сфере?
как успехи?
Привет, как успехи?
Отличная дикция, интересная подача. Видео идет час и за все это время не разу не заскучал) респект
Крутая рубрика, буду ждать следующие видео)
договорились)
И снова крутейший урок!!!
Все очень просто и доступно.Супер!
С удовольствием смотрю все Ваши видео. Благодарность за труд. Жду новые ролики.
Супер!! Очень очень доступно! Шикарный урок! Спасибо!!))
Спасибо за такое информативное видео! Всё ясно, а главное интересно, желаю удачи в продвижении канала!
Очень классно и доступно объясняете, по сути. Наткнулся случайно. Искал видео о FiGMA.Спасибо за ваш труд.
Наконец-то сдал экзамен и могу начать в полную меру обучаться, твои уроки очень помогают, СПАСИБО
Вы лучшие! Жду нового выпуска! Благодаря вам я очень многому научился, спасибо вам за это!
Нууу класс. Оч ёмко сжато и по полочкам
Мне зашло и понятно )
Спасибо
Пожалуй лучшее что я видел из всех видеороликов на ютубе про основы html и css! Талантливый человек - талантлив во всем! Удивила цена курса, всего один доллар!! то есть автор не преследует цели содрать с вас больше 30к условно говоря, а реально намерен делиться знаниями, как это видно из этого и предыдущего урока вечерней школы! Спасибо за два лучших урока которые я смотрел по основам html и css!! Удачи
Видос топ, Андрей это круто, смотрю тебя не очень давно, но успел посмотреть очень много твоих видосов, в том числе и старые) очень вырос уровень монтажа!)
Вечерняя школа очень крутая тема, во многом помогает! Спасибо:)
Отличный проект. Желаю успехов!
Самый качественный контент по веб дизайну. Спасибо за твою работу!
Спасибо большое за практику! Отличный материал для начинающих!)
Рубрика огонь, ждём следующий урок)
Как всегда, всё на высоте!!! Спасибо огромное, очень интересно смотреть твои уроки.
Более доступного объяснения HTML и CSS не встречала) Грамотно, лаконично, по полочкам. Спасибо, Андрей и команда WAYUP!))
присоединяюсь
Благодарю за данное видео! Жду новых уроков.
Просто класс! Со всех трех аккаунтов врубил лайк!💪💪💪
Андрей, отличный подкаст! Так держать!
Супер, отличные уроки для повторения вёрстки)) так держать, Андрей!
Классный и интересный урок) жду больше уроков по верстке)
Андрей, спасибо за курсы! Наставнику Руслану привет!
Ребята, курсы это реально где вас научат верстать и понимать код.
Андрей,настоящий спец!классный контент для новичков.очень понравилось!жду следующих работ!добра!
Спасибо огромное за такое классное видео!!!!Автор большой молодец
Спасибо большое за ваш труд !
Очень нравится видео Андрея, все кратко и понятно, спасибо!)
Спасибо вам большое! Очень полный и понятный урок
На ютубе много уроков по HTML×CSS, но у тебя очень подробно и понятно. Спасибо друг👍. Поддержим автора лайками и подписками!
Я недавно начал изучать верстки сайта и мне очень помогают эти видеоролики. Я искренно благодарен трудящимся за выпуск этих роликов.
Отличный формат! Заходит налегке)
Очень доступно и понятно, спасибо !
Крутое видео) помогает новичку не запутаться в основах, спасибо!
Все как всегда супер ! )
Наконец новый выпуск , делаю свой сайт , спасибо)))
Как всегда все емко и понятно, завтра попробую сама по горячим следам сделать верстку. И да, очень хочется мышку)
Очень содержательный урок для новичков. Я имею полное право это писать так как не являюсь новичком. Андрей, молодец! Продолжай! Новички нуждаются в подобных видео!
Большое спасибо, отличный урок!
боже мой смотрю по несколько раз чтобы освежиь память и так рад что есть такой адекватный чел! Тренировки у вас просто космос!!!! Спасибо за такой вклад)
Спасибо тебе огромное за твой бесценный труд !
Качество видео стало в разы лучше! Приятно смотреть, все разложено по полочкам! Андрей спасибо Вам и Вашей команде за такую работу!
очень классное видео для тех, кто уже знает хоть какие то основы, чтобы понять. как происходит процесс вёрстки
Привет, Андрей. Спасибо за видео. Было интересно узнать что такое верстка. Обязательно займусь ее изучением после дизайна)
Ребят, я вас обожаю!!!
Андрей! Замечательная работа! Лайк, подписка.
куда вывалить гору лайков? я этот плейлист включаю каждый раз когда что-то забываю. ты лучший спасибо за видео)
Очень интересно наблюдать и учиться чему-то новому,но все же хочется обучиться этому у вас на курсе (бесплатно)
Клёвый формат!
Надеюсь будут подобные разборы в дальнейшем с усложнениями)
да, будем набирать обороты)
Хороший контент получился, спасибо за труд и знания
Отличная рубрика, крутой урок, очень понравился) Давайте верстать вместе чаще! Может не так подробно и, в следующий раз, без объяснений что такое тег и тд) По сути)
Но вечерня школа- это крутотенюшкка :)
Все круто))) жду продолжения)))
Нам надо больше таких выпусков, все классно! Понятно! Супер!
😘👍
качество и процесс объяснения супер!
Спасибо за отличную работу над контентом этого канала)
Ай молодца! Это успех!
Реально доступно обьясняете! Круто!
Урок просто бомбезный!! Ты очень круто объясняешь. Смотрю тебя очень давно. И повезло, что наткнулся на тебя тогда.
Монтаж на высоте. У тебя очень круто получается монтировать.
Спасибо большое что делаешь такие прикольные, полезные уроки!!
Спасибо, очень ждём продолжения тех моментов, которых не было в этом видео
С нетерпением жду новое видео❤️❤️❤️
Дружище. Ты крутой. Талант преподавания на лицо! Быстро, чётко, ёмко, просто, доступно и легко. Спасибо тебе Андрей!) Подписался и лайкнул.
Спасибо большое за уроки, уже побежал покупать твой онлайн-курс по вёрстке))
Блин, очень классно, что есть такие люди, которые могут так хорошо объяснить в этой сфере, я многое понял при просмотре данного видео 😊👍
Как всегда четко и без ненужной информации, в сфере обучающего контента по верстке ты лучший.
бред рассказывает самые первые азы которые вообще есть HTML...Залез дальше на первом же месяце, в итоге такие дебри!
да я хз что там было во второй половине хэдэра
ему пох походу на нас
или просто выебывается что умеет
Спасибо за подробное объяснение, очень хочется разобраться как верстать. Хотелось бы видеть у вас какой нибудь раздел с названием "Домашняя работа", задания от вас для начинающих верстальщиков.
Очень полезный урок. Спасибо
Очень полезное видео, Андрей, спасибо !!!
Классная рубрика! Прикольная подача! :)
Ох уж эта вебка закрывающая css текст)
рил
Спасибо! Чётко, понятно, красиво!
Класное видео! жду больше уроков по верстке)!
Давно смотрю ролики и уроки Андрея. Всё очень круто. И вот новый проект как всегда на высоте.
Спасибо Андрею и всей команде Way Up. Смотрю и учусь и всем рекомендую
Выпуск крутой, очень понравилось
Обожаю команду WAYUP!
Я не всегда пишу комменты но друг, это одно из лучших обучающих видосиков на RUclips. Всё грамотно и очень понятно респект и подписка