[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
Vložit
- čas přidán 16. 06. 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.Спасибо за ваш труд.
Крутая рубрика, буду ждать следующие видео)
договорились)
Супер!! Очень очень доступно! Шикарный урок! Спасибо!!))
Нууу класс. Оч ёмко сжато и по полочкам
Мне зашло и понятно )
Спасибо
Ох уж эта вебка закрывающая css текст)
рил
Благодарю за данное видео! Жду новых уроков.
Спасибо большое за ваш труд !
ОГРОМНЕЙШЕЕ спасибо! Так доходчиво еще никто не объяснял! Даже мотивацию повысил) Очень приятно смотреть и наслаждаться информацией!)
Всегда любил уроки, где объясняют, как сохранить файл можно горячей клавишей Ctrl + S, копировать можно Ctrl + C, а вставить Ctrl + V, а потом на действительно чем-то важном, что надо было бы разъяснить: "Ну, эту конструкцию я объяснять не буду - её надо просто запомнить.", или "Я понимаю, что это может быть вам сейчас непонятно, но не переживайте - скоро вы все поймете! (@ но не на моих уроках)". Мне кажется, что чтобы не было подобных комментариев, лучше вcего сразу обозначать, что урок для начинающих, но для комфортного прохождения желательно бы иметь базовые знания HTML+CSS. За себя я не переживаю, я здесь исключительно чтобы посмотреть, как делается верстка по макету (в частности из Figma), а вот за реальных новичков, которым не сказали, что чтобы начать верстать, как начинающий, по данному уроку, надо бы заранее HTML и CSS изучить - переживаю. Теперь по поводу подачи материала. Первую половину урока ничего толком не разъясняется (в частности все тот же HTML и CSS) а во вторую половину урока вообще - врубили перемотку на х10: "А почему бы и нет? - Урок-то для начинающих!".
Вот так ютаберы и учат,а хочешь более сносного обучения переходи на их платные курсы!Нет,я не против того,что курсы платные,главное,чтобы приподнесли информацию доходчиво.
Полностью согласен
Это всё можно самому загуглить. Вам бесплатно дают информацию и никто не заставляет смотреть именно этот канал.
гораздо важнее разъяснения нюансов то, что он показал сам принцип того, как идёт вёрстка, какие элементы используются и тд, в любом случае чем больше верстаешь, тем больше понимаешь, как те или иные элементы работают, а нюансы всегда можно загуглить
@@user-cx3qy6ri8h его курс стоит 1109$ ))))))))))))))))))))))
Спасибо большое за практику! Отличный материал для начинающих!)
Пожалуй лучшее что я видел из всех видеороликов на ютубе про основы html и css! Талантливый человек - талантлив во всем! Удивила цена курса, всего один доллар!! то есть автор не преследует цели содрать с вас больше 30к условно говоря, а реально намерен делиться знаниями, как это видно из этого и предыдущего урока вечерней школы! Спасибо за два лучших урока которые я смотрел по основам html и css!! Удачи
Самый качественный контент по веб дизайну. Спасибо за твою работу!
Очень доступно и понятно, спасибо !
Андрей, отличный подкаст! Так держать!
Это великолепно, лучшие уроки которые я видел. Мой путь веб-дизайнера только начинается, поэтому я очень рад, что есть такие разборы. Спасибо вам за проделанную работу, продолжайте!)
Здравствуйте! Как успехи в этой сфере?
как успехи?
Привет, как успехи?
Рубрика огонь, ждём следующий урок)
Андрей, спасибо вам огромное! Очень удобно и подробно преподносите информацию...
Поражает лишь тот люд, что ставит дизлайки)))
Спасибо тебе огромное за твой бесценный труд !
Большое спасибо, отличный урок!
Как всегда, всё на высоте!!! Спасибо огромное, очень интересно смотреть твои уроки.
Наконец-то сдал экзамен и могу начать в полную меру обучаться, твои уроки очень помогают, СПАСИБО
Очень нравится видео Андрея, все кратко и понятно, спасибо!)
Супер, отличные уроки для повторения вёрстки)) так держать, Андрей!
Спасибо вам большое! Очень полный и понятный урок
Спасибо огромное за такое классное видео!!!!Автор большой молодец
Отличная дикция, интересная подача. Видео идет час и за все это время не разу не заскучал) респект
Все как всегда супер ! )
Просто класс! Со всех трех аккаунтов врубил лайк!💪💪💪
Я недавно начал изучать верстки сайта и мне очень помогают эти видеоролики. Я искренно благодарен трудящимся за выпуск этих роликов.
Хороший контент получился, спасибо за труд и знания
Андрей! Замечательная работа! Лайк, подписка.
Наконец новый выпуск , делаю свой сайт , спасибо)))
Привет, Андрей. Спасибо за видео. Было интересно узнать что такое верстка. Обязательно займусь ее изучением после дизайна)
Качество видео стало в разы лучше! Приятно смотреть, все разложено по полочкам! Андрей спасибо Вам и Вашей команде за такую работу!
Андрей,настоящий спец!классный контент для новичков.очень понравилось!жду следующих работ!добра!
Нам надо больше таких выпусков, все классно! Понятно! Супер!
😘👍
Отличный формат! Заходит налегке)
качество и процесс объяснения супер!
Крутое видео) помогает новичку не запутаться в основах, спасибо!
Андрей, спасибо за курсы! Наставнику Руслану привет!
Ребята, курсы это реально где вас научат верстать и понимать код.
в начале видео: ну вот это щас самое сложное-дальше будет легче. Через 2 минуты: это сложно, но, поверьте, вам дальше всё станет понятно. Еще через 3 минуты: на самом деле это самое сложное в css, но вы потом сами это поймете и загуглите). Через пару минут еще: это вам сейчас не понятно, на самом деле всё легко). И в добивку: всё что мы сделали..это алгоритм, со всем остальным , только в УСКОРЕННОМ темпе мы проделаем тоже самое.-)) Новичок такой в конце ролика: да-да, я всё понял, изи же)
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
как будто на эльфийском
@@artik3144 Человек Объяснил все очень доходчиво и доступно для новичков, а если тебе не понятно, то иди смотри мультики, ребенок.
Я всё понял, потому-что учился (в отличие от некоторых)
Ээээээээээээээээээээээээээээээ
Более доступного объяснения HTML и CSS не встречала) Грамотно, лаконично, по полочкам. Спасибо, Андрей и команда WAYUP!))
присоединяюсь
Классный и интересный урок) жду больше уроков по верстке)
Ну вот мы и встретились! Сегодня в уроке:
0:00 Хайлайты
0:26 🎙️ Новый рэп, йоу
1:01 Напомню, как изучать дизайн
1:28 Что нас сегодня ждет
1:39 Обзор программ для дизайна
3:20 Обзор макета под верстку
4:00 Создаем файловую структуру для верстки
4:37 Как создавать файлы
5:04 Редактор кода Sublime Text 3
5:45 Установка Emmet
5:50 Базовая структура и объяснение тегов HTML
10:38 Что делать с макетом перед версткой
11:20 Подключаем шрифты из Google Fonts
12:40 Экспортируем изображений из Figma
15:00 Основы CSS
19:55 Что мы записываем в начале файла CSS
20:37 ⭐ Самый главный принцип верстки
23:08 Описываем секции и контейнеры
26:23 Как правильно группировать элементы
28:10 Для чего нужен тег div
29:25 Как задать фон картинкой для секции (background)
30:45 Почему высота секции не равна фоновой картинке
31:10 Как создать меню в верстке (ul, li)
32:45 Как правильно оформлять номер телефона
33:30 Как перекрасить все ссылки и использовать hex-код
33:30 Как использовать FLEX BOX базово
36:55 Figma помогает быстро получать расстояния
36:30 Dev tools (инструменты разработчика) в Chrome
37:40 Как работает свойство margin в CSS
38:35 Свойство наследования в CSS
39:40 Как работает FLEX BOX
44:01 Обидный баг в CSS
44:40 Как работает свойство padding
45:40 Как записывать расстояние между буквами (letter-spacing)
46:20 Нежданчик
47:30 Что такое высота строки (line-height)
48:45 🤩 Как изучать верстку, чтобы было хорошо
50:00 Как верстать вторую секцию
53:10 Как распространить элементы в строке (justify-content)
54:30 Как сверстать правильно высоту строки параграфа (line-height)
54:50 Как использовать относительные единицы измерения em?
56:20 Завершение верстки
56:55 🤔 {HOT!} 5 заповедей профессионального верстальщика
1:02:46 Новый розыгрыш! 🎁
1:03:55 Итоги предыдущего розыгрыша
ты же читаешь да???))
@@user-jj9is7yy2q ну да))
Ты все испортил! Я тебя смотрел, понимал, что ты делаешь. Тетерь экран увеличивается, ка будто я слепой, и не могу понять, что ты показываешь. Не надо показывать в крупно, что ты делаешь, у меня экран не мелкого разрешения. А у кого мелкого, тот не увидит и того что ты показал
@@Alexnor смотрю на 4 дюймах . Это увеличение очень помогает
А как ты фоновому изображению высоту задал? Оно же равняется высоте контента. Я про Header
Очень полезное видео, Андрей, спасибо !!!
Реально доступно обьясняете! Круто!
очень классное видео для тех, кто уже знает хоть какие то основы, чтобы понять. как происходит процесс вёрстки
Спасибо за подробное объяснение, очень хочется разобраться как верстать. Хотелось бы видеть у вас какой нибудь раздел с названием "Домашняя работа", задания от вас для начинающих верстальщиков.
Очень интересно наблюдать и учиться чему-то новому,но все же хочется обучиться этому у вас на курсе (бесплатно)
Как всегда все емко и понятно, завтра попробую сама по горячим следам сделать верстку. И да, очень хочется мышку)
Спасибо за отличную работу над контентом этого канала)
Очень полезный урок. Спасибо
Спасибо! Чётко, понятно, красиво!
Ребят, я вас обожаю!!!
Клёвый формат!
Надеюсь будут подобные разборы в дальнейшем с усложнениями)
да, будем набирать обороты)
Как всегда крутой видос, спасибо.
Спасибо большое за уроки, уже побежал покупать твой онлайн-курс по вёрстке))
С нетерпением жду новое видео❤️❤️❤️
Спасибо за урок.
Давно слежу за каналом.
Прошел начальный курс верстки в школе WayUp. Хочу дальше развиваться!
Спасибо за урок! Много нового узнал)
Спасибо за урок! Теперь все ясно!
Классная рубрика! Прикольная подача! :)
куда вывалить гору лайков? я этот плейлист включаю каждый раз когда что-то забываю. ты лучший спасибо за видео)
Все круто))) жду продолжения)))
Дружище. Ты крутой. Талант преподавания на лицо! Быстро, чётко, ёмко, просто, доступно и легко. Спасибо тебе Андрей!) Подписался и лайкнул.
Решил вспомнить азы, спасибо!
Простое и понятное видео, спасибо)
боже мой смотрю по несколько раз чтобы освежиь память и так рад что есть такой адекватный чел! Тренировки у вас просто космос!!!! Спасибо за такой вклад)
Спасибо за интересные и полезные видео.
Спасибо, очень ждём продолжения тех моментов, которых не было в этом видео
Лущый видео который я видел в ютубе.
Супер огромное спасибо видео был качественный и понятный 👍👍
Спасибо, старшой!