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

[@vorisxonsobirov6636]

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

[@wayupua]

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

[@СофияРутберг-с9к]

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

[@warnerbros2916]

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

[@Sim_sim-h2o]

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

[@E55TV]

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

[@maxpanama1516]

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

[@KateBit-n3f]

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

[@КсенияЧЧЧ-л4п]

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

[@masteruvz]

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

[@Микола-к9т]

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

[@alexavaggg9510]

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

[@KateBit-n3f]

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

[@ВалентинаШитова-е1з]

Начинала с нуля около месяца назад. Просмотрела кучу видео отдельно по html, css, конкретным тегам и теперь Ваш урок становится понятным. Очень информативно и полезно, спасибо большое.

[@xeedreen2120]

не понял... ты выучила html css за месяц?

[@dadzhi]

@@xeedreen2120 Легко вообще то. Я тоже знаю html css, но в практике пробелемы. ПОнимаю как все устроен но забываю в практике . Проблема уменя работа с позиницирований

[@blyaidinaxuy]

@@dadzhi как успехи?)

[@sudden458]

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

[@sonyashalom9655]

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

[@vadberg1841]

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

[@Ж.М-ч1з]

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

[@tamaaeev_raketka]

как успехи?

[@blyaidinaxuy]

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

[@arthurmakhmudov8702]

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

[@igorkozhevin9186]

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

[@iazyboff3794]

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

[@ИванМикерин-ю9д]

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

[@wayupua]

Ну вот мы и встретились! Сегодня в уроке: 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 Итоги предыдущего розыгрыша

[@ДавидСоломонян-р6м]

ты же читаешь да???))

[@wayupua]

@@ДавидСоломонян-р6м ну да))

[@Alexnor]

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

[@gsthscht9906]

@@Alexnor смотрю на 4 дюймах . Это увеличение очень помогает

[@ВадимМалеев-ф4б]

А как ты фоновому изображению высоту задал? Оно же равняется высоте контента. Я про Header

[@hodjaevazamat9326]

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

[@ДмитрийПавлов-ъ3о]

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

[@allison8000]

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

[@IliaAdmin]

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

[@yuliakrey6879]

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

[@stevgene1]

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

[@ВадимМиронов-ж1ы]

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

[@relaxplay9359]

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

[@babyyoda7685]

рил

[@serser3229]

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

[@АлександрУльянов-ф9х]

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

[@Злойдед-п3ю]

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

[@laferrari5081]

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

[@dmt_one]

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

[@kirskay1223]

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

[@andreeva133]

@@Злойдед-п3ю его курс стоит 1109$ ))))))))))))))))))))))

[@antonmolchanov9327]

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

[@СергійСанніков]

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

[@msvpy]

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

[@artoha8422]

куда вывалить гору лайков? я этот плейлист включаю каждый раз когда что-то забываю. ты лучший спасибо за видео)

[@balenciagastore]

Лучшая БЕСПЛАТНАЯ школа для новичков в плане создания сайтов и их дизайнов, лучше про сайты не кто не объясняет ! Подписка + лайк обеспеченны 👍🏾

[@ДмитрийКраснов-ж4ы]

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

[@veezn5768]

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

[@Богдан-ж4д8в]

Как всегда четко и без ненужной информации, в сфере обучающего контента по верстке ты лучший.

[@dominikeffect9052]

бред рассказывает самые первые азы которые вообще есть HTML...Залез дальше на первом же месяце, в итоге такие дебри!

[@nonenona_4Jxq]

да я хз что там было во второй половине хэдэра ему пох походу на нас или просто выебывается что умеет

[@worldofcheats7332]

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

[@igorkan5805]

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

[@dinarl8439]

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

[@wayupua]

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

[@ДжорджСейлов]

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

[@solo8968]

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

[@Aleal616]

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

[@niko_g_o]

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

[@bizneswomen605]

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

[@НурланАкимов-р8с]

Одна из причин человек думает о других и ставит метки по времени 👍

[@magomedmycaev7080]

Привет я тоже изучаю JavaScript я на телеграмм канале bofre@ нашел бесплатные книги по JavaScript

[@НурланАкимов-р8с]

@@magomedmycaev7080 думаю годно )

[@ФЕДОРДОСТОЕВСКИЙ-б7ф]

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

[@borislihachev8325]

Нам надо больше таких выпусков, все классно! Понятно! Супер!

[@wayupua]

😘👍

[@БогданШпика]

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

[@tolyanooo]

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

[@sofakonyuhova8851]

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

[@vitaliinemyrovskyi9268]

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

[@АлександрИсаков-в5и]

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

[@antohasotnikov2099]

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

[@МихаилВоронков-щ4п]

За диез отдельный лайк )))) решетки и хештеги лесом, музыкальный дизайнер )))

[@royaltyfreebeats6415]

♯

[@andrei6214]

Клёвый формат! Надеюсь будут подобные разборы в дальнейшем с усложнениями)

[@wayupua]

да, будем набирать обороты)

[@cat.basilio]

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

[@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

[@РусланБаллыев-о1ы]

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

[@АлександрКузмицкас-щ1н]

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

[@ichkchya]

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

[@ГулнацАлыев]

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

[@bigtrevorshowtv1078]

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

[@MaKs-RuSSkii]

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

[@Lcake1672]

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

[@ВасилийКалинников-у7щ]

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

[@АртемЗычков-я3з]

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

[@fastball236]

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

[@namename245]

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

[@АнастасияЛакота-и4щ]

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

[@ВалерияМоисеенко-ц7ч]

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

[@hannasavostianova7155]

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

[@zdorovedarom]

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

[@ЕвгенийФилатов-х5ы]

сколько я пересмотрел блогеров по верстке , для меня Андрей лучше всех объясняет,стараюсь верстать по его правилам

[@СветланаПопова-р7г]

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

[@Innysia2012]

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

[@Ктобызнал-я1т]

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

[@ОксанаСупрунюк]

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

[@Cry_plus]

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

[@anastasiyadegtyaryova7374]

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

[@aronets_dmitriy]

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

[@laimmilka]

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

[@FAMILY-nl2mg]

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

[@akjolaltyn1592]

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

[@_DungeonMaster_]

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

[@ОлександрБуркін]

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

[@almi8704]

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

[@ВладТищенко-ф9х]

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

[@maximnecheporuk]

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

[@sb_boiler]

спасибо! давно пытаюсь войти в айти)) в разное время пробовал с разных сторон. в данный момент самая продолжительная попытка, и благодаря вашим роликам систематизируются знания в голове за все время, в частности понятно почему в бутстрапе 12 колонок, я понять не мог почему именно 12, ну ладно типа 12 и 12. css более понятно объяснили, с figma вообще клево, когда то смотрел как с дизайна лэндига делали верстку, теперь понятно стало примерно какими программами это делали. в общем полная палка! ))

[@alexanderstark2198]

Шикарный урок) Решил вернуться во front-end разработку, очень быстро все вспоминается))

[@winter9674]

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

[@Toksi86]

Очень полезный урок. Спасибо

[@АлисаЛис-л3б]

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

[@s.angelina5926]

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

[@lizalizaveta1882]

было интересно как работает фигма и как она связана с кодом, теперь это немножко разъяснилось. спасибо, хорошее видео для практики навыков, я даже подписалась

[@MrManesio]

Мне нравиться этот формат. Очень толково

[@АНДРЕЙПЛОХОЙ-ш6ъ]

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

[@s.angelina5926]

Обожаю команду WAYUP!

[@Head_Kitik]

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

[@doomtest3450]

Молодец парень, хорошая подача и объяснение. Хвала и почёт

[@ILKOOL999]

Во сижу никого не трогаю... И офигиваю от твоей понятной аргументированности действий которые ты делаешь, рассказываешь и показываешь... Лайк и подписка )))) Санта Барбара отдыхает.... Ты молодец, Респект )))

[@funny_pets-catsdogs]

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

[@Напоминание-ы2щ]

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

[@ДімаКауза]

Отличный формат! Заходит налегке)

[@alexfedorov9095]

блин урок конечно бомба просто XD особенно нео в тему вставлен! Приятно смотреть что не сплошные дивы) чистый код-хороший урок!

[@reyos89]

Хорошо все рассказано и понятно