Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись.

Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: https://wayup.in/lm/load/lm30 И еще кое что....

---------------

Посмотрите другие видео о верстке:

День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив - https://www.youtube.com/watch?v=xlwPU0BRQKQ

Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS - https://www.youtube.com/edit?o=U&video_id=A90NZOh1jyw

Как Сверстать Сайт Адаптивно? HTML/CSS - https://www.youtube.com/watch?v=ROn-glSIKO8


---------------

Подписывайтесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

Спасибо за просмотр!
  • NCS Free Music [NoCopyrightSounds]

    автор огромный молодец, очень доступно объяснил)) спасибо

  • Dimaster

    я за эти 3 часа не только все повторил, но еще и много чего выучил/понял.... Апплодирую стоя.

  • OwlYaRly RUS

    1:04:23 - конец теории, начало верстки

  • Maxim Peshko

    Автор все дает бесплатно, с картинками и примерами. Ну просто без слов ОГРОМНОЕ СПАСИБО!

  • Bahtiyar Basharov

    У кого не сработал .clearfix:after Обязательно пишите без пробела. Я промучился минут 30 чтобы найти.

  • Maksim Cheremisov

    это отличный урок не для чайников, а для тех, кто вроде-бы что-то умеет верстать, но по факту целой, красивой и современной строночки сверстать не может, потому что просто не понимает какой последовательностью это делает. Еще он полезен тем новичкам, кто несколько месяцев назад бросил, и сейчас наверстывает

  • Nikolay Shapoval

    Крайне плохой подход, выравнивать 3 блока по центру через флоаты и мержины (костыли полнейшие). Достаточно родителю прописать:display: flex; justify-content: space-between; align-items: center;Я понимаю что я с 2018, но видео залито в 2017, а значит браузеры прекрасно его понимают. Зачем заведомо учить делать плохо?+ Отпадают все флоаты+ Отпадают все фиксы багов+ В дальнейшем легко адаптируется под мобильные и т.п+ Намного меньше кода+ Уверенность в том что блок стоит идеально по центру

  • Parti3an

    Hе могу в header добавить картинку. Пишу все как и вы. В чем причина?

  • Sasha Kulachinskiy

    вообще-то что б верстать на Wordpress нужно ого-го какие знания. Слишком загнул ты по поводу движков , а так все супер !!!!!!!

  • Alesha Drykalik

    Отличная подача, спасибо за урок. Я еще порылся в интернете насчет Emmet'а. Нашел то, что в css он работает таким образом:w20 = width: 20px;bg = background: #000;db = display: block;Очень понравился плагин, теперь только с ним учусь)

  • ჯუღაშვილი

    Пока если вы до конца не понимаете, просто поймите(с)1:14:06Великие фразы ))) полчаса смеялся

  • Aleksey Shishkin

    а где можно искать psd макет, что бы тренировать свои навыки верстки?

  • Andrey Opanasyuk

    Крутой урок. Я его первый раз увидел 3 месяца назад, но тогда мой багаж знаний был совсем poor и последнюю секцию на ДЗ у меня так и не получилось сделать на флотах, но сейчас немного научился, многое стал понимать. И вот вчера я решил сверстать этот макет заново на Флексах. Последняя секция опять заставила задуматься - но вроде вышло. В следующий раза заверстаю его на Гридах Ловите ссылку на макет и код. - https://opan85.github.io/Projects/golden%20adaptiv/https://github.com/Opan85/Projects/blob/master/golden%20adaptiv/index.htmlhttps://github.com/Opan85/Projects/blob/master/golden%20adaptiv/css/style.cssСпасибо Андрей

  • Ivanna Sulyma

    выключил видео после float :(

  • Mechenyy 01

    НАЙДЕНО ОШИБОК достаточно много чтобы половина не работало.странно как у него все запустилось.пока не исправил ничего не работало.он слеш в теге линк забыл - забыл.как у него заработал тег линк? где атрибут "type"?если бы я не знал основ я бы так и не понял почему не работает..а так норм.повторил и много нового узнал но для начинающего в первый раз не очень подходит!имхо сам учил по урокам хауди-хо

  • dAnTeSInFeRnObleat1

    Если кто уже в базисе чуть шарит, мотайте на 1:13:05

  • Vladimir Lipeckiy

    Спасибо за видео,очень толково,на самом деле новичкам очень важно озвучивание и расшифровка каждого на написания и это дает больший рывок,чем чтение различной литературы,раньше думал,что долго буду изучать HTML,а тут уже на третьей неделе осваиваю CSS и JS.

  • Evgeniy Che

    Хороший информативный материал. Честно! На коучинг, конечно же, не запишусь)))

  • Egor Besedin

    самостоятельную часть сделал так:<section> <div class="container"> <div class="title"> <h2> About Us </h2> <p>Proin iaculis purus consequat sem cure. </p> </div> <div class="about"> <div class="about-elem"> <div class="image"> <img src="img/about1.jpg" alt=""> </div> <div class="content"> <h3 class="titless"><span>July 2010</span><br> Our Humble Beginnings </h3> <p class="text_rght">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p> </div> </div> <div class="about-elem"> <div class="image"> <img src="img/about2.jpg" alt=""> </div> <div class="content"> <h3 class="titless-lft"> <span>January 2011</span> <br> Our Humble Beginnings </h3> <p class="text_lft">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p> </div> </div> <div class="about-elem"> <div class="image"> <img src="img/about3.jpg" alt=""> </div> <div class="content"> <h3 class="titless"> <span>December 2012</span> <br> Enter The Dark Days </h3> <p class="text_rght">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p> </div> </div> <div class="about-elem"> <div class="image"> <img src="img/about4.jpg" alt=""> </div> <div class="content"> <h3 class="titless-lft"> <span>february 2014</span> <br> Our Triumph </h3> <p class="text_lft">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p> </div> </div> </div> </div> </section> <footer id="copyright"> <div class="container"> <p>© Copyright 2014 FreebiesXpress.com</p> </div> </footer>></body></html>//////////////////////////////////////////////////////////////CSS CODE/////////////////////////////////////////////////////////////////////////////////.about{ padding-top: 80px;}.about-elem{ position: relative; display:block; text-align: center; margin-bottom: 80px;}.about-elem .image{ display: inline-block; overflow: hidden; border-radius: 50% width: 200px; height: 200px;}.about-elem .image img{ display: inline-block; vertical-align: top;}.about-elem .content{ position: absolute; top: -15px;}.about-elem .text_rght{ text-align: right;}.about-elem .text_lft{ text-align: left;}.about-elem .content span{ text-transform: uppercase;}.about-elem .content p{ color: #777777; line-height: 1.55em;}.about-elem:nth-child(odd) .content{ right: 50%; margin-right: 130px;}.about-elem:nth-child(even) .content{ left: 50%; margin-left: 130px;}.about-elem .content .titless{ font-weight: 700; text-align: right;}.about-elem .content .titless-lft{ text-align: left;}#copyright p{ color: #777777; text-align: center; margin: 115px 0;}

  • Oleg Gorbunov

    ! + Tab, вместо html:5

  • Hudozhnik Nastoyaschiy

    Решил доделать макет самостоятельно. Сначала затупил и не мог понять почему у меня картинка смещается вниз. Потом разобрался и все получилось. Вот мой говнокод, если у кого возникнут трудности. Не знаю насколько он валиден и оптимизирован, но в браузере все отобржается как надо.HTML:<section> <div class="container"> <div class="title"> <h2> About Us </h2> <p> Proin iaculis purus cosequat sem sure. </p> </div> <div class="block"> <div class="about_us_left"> <div class="about_text"> <h3>Jule 2010<br> Our Humble Beginnigs</h3> <p>Описание сервиса. SEO-анализ текста от - это уникальный сервис, не имеющий аналогов. Возможность подсветки «воды», заспамленности и ключей в тексте</p> </div> <img src="img/about1.jpg" alt="О нас"> </div> <div class="about_us_right"> <div class="about_text2"> <h3>Jule 2010<br> Our Humble Beginnigs</h3> <p>Описание сервиса. SEO-анализ текста от - это уникальный сервис, не имеющий аналогов. Возможность подсветки «воды», заспамленности и ключей в тексте</p> </div> <img src="img/about2.jpg" alt="О нас"> </div> <div class="about_us_left"> <div class="about_text"> <h3>Jule 2010<br> Our Humble Beginnigs</h3> <p>Описание сервиса. SEO-анализ текста от - это уникальный сервис, не имеющий аналогов. Возможность подсветки «воды», заспамленности и ключей в тексте</p> </div> <img src="img/about3.jpg" alt="О нас"> </div> <div class="about_us_right"> <div class="about_text2"> <h3>Jule 2010<br> Our Humble Beginnigs</h3> <p>Описание сервиса. SEO-анализ текста от - это уникальный сервис, не имеющий аналогов. Возможность подсветки «воды», заспамленности и ключей в тексте</p> </div> <img src="img/about4.jpg" alt="О нас"> </div> </div> </div> </section> <footer> <div class="container"> <div class="copyright"> <p>© Copyright 2014 FreebiesXpress.com</p> </div> </div> </footer>CSS:.about_us_left, .about_us_right { margin-top: 100px; height: 180px;}.about_text { width: 330px; text-align: right; float: left;}.about_text h3 { margin-bottom: 0;}.about_text p, .about_text2 p { color: #777777;}.about_us_left img { padding-left: 45px;}.about_text2 { width: 330px; text-align: left; float: right;}.about_us_right img { float: right; padding-right: 45px;}.block { padding-bottom: 140px;}.copyright { color: #777777; font-size: 14px; text-align: center; padding-bottom: 50px;}

  • Aleksey Valvachev

    скажите, кто доверстал последний блок? Покажите плиз как выглядит верстака и CSS файл?

  • Mr Doom

    Хз зачем смотрю, ибо нихерашечки не понимаю. Но лайк поставил

  • Neo

    Жаль что про clearfix не рассказал. Я лишь зашел сюда именно из-за этого. Самую важную тему забил. А вообще то что ты используешь везде пикселы это тоже плохая практика, em нужно использовать для маржинов и падингов. А для размеров шрифта rem. Высоту и длину можно использовать проценты. В некоторых моментах можно юзать функцию calc(). Относительные единицы - лучшая DRY техника. Сам же ты говоришь не повторяйтесь, а на деле используешь px, и куча повторений. Плохо. И кстати не стоит злоупотреблять фотошопом. Есть правильные и удобные инструменты например Figma, а иконки можно брать отсюда https://icons8.com (всё уже за нас приготовлено). Юзать jpeg, png рисунки на сайте это зло, SVG нужно использовать - есть конечно исключения, но старательно избегать от этих форматов если конечно сайт не фотосток.

  • Vasiliy Mihaylov

    нету кнопки генерировать есть альтернатива?

  • Vladislav Shiryaev

    Блин вот честно, лучше бы это дз он сам проделал, потому как на мой взгляд это новые принципы позиционирования, о которых не указывалось ранее. Лучше бы он это рассказал, а домашним заданием дал те 3 картинки которые он последние делал. Сейчас сижу и мучаюсь как это сделать картинку по центру, да так чтобы ее текст обвивал с разных сторон. Потому как text-aling: center и float: left совместно не работают

  • Maksimka Maksik

    Отличное видео, большое спасибо тебе за это!

  • Ryzze

    Можно было в начале css-файла написать * {padding: 0; margin: 0;} и не морочиться с обнулением отступов каждого элемента

  • Divannyy analitik

    Очень бесит этот чат по середине экрана

  • Sozdanie igr na Android

    Автор, спасибо за видео.

  • Dima

    Почему я не смог добавить вашу картинку (first-bg.img) в свой index.html/main.css. Я создавал их в самом начале, уже только потом скачал материалы проекта чтобы взять от туда картинки. Я пробовал просто добавить их в папку img, пробовал перезапускать/перезаписывать файлы по новой. Но картинки я в браузере так и не увидел. Меня просто бомбануло. Почему так? Взяв файлы индекса и ксс с вашего проекта картинка появилась. Но так там код один и тот же, все папки, так же само, те же...

  • Sergey Trubkin

    Ролик хороший, познавательный и хорошо изложенный. Для новичков будет понятна общая концепция верстки, но на протяжении всего ролика было столько мелких нюансов про float'ы рассказано, что проще и правильнее было бы объяснить и научить строить сетку на flex'ах. А float'ы оставить уже в покое и использовать их только по назначению( для тех кто не вкурсе это обтекание текста вокруг зафлоаченого блока). Не претендую на автора ролика лучше чем этот, просто немного обоснованной критики.Спасибо за твои работы, сам поднимал свои знания в веб-дизайне по твоим роликам.

  • Elena Nikitina

    Андрей,почему не получается  clearfix? все делаю по видео...спасибо за урок!

  • ! 54Maksimka85 !

    В css последних версий пишется так:header{ background: url(./img/first-bg.jpg) no-repeat center top / cover; height: 600px; }а не с двоеточием:"url(../img/first-bg.jpg)" иначе фоновою картинку не найдет

  • Denis Rudik

    Очень крутой урок! Давно искал, подобного коучера. Изучаю Python 3 сейчас, мозг иногда закипает. Глянул, как верстать, всё ясно стало))) спасибо автору!!!

  • Tigr Poehal

    Верстка как раздевание девушки) сверху вниз )

  • jack Kolyasnikov

    Мне кажется не стоит заверстывать первый экран в <header>. Правильнее такая структура section>container>headerSection>containerSection>containerSection>containerfooter>container

  • Zhoomart Satymbaev

    Кто доверстал, скиньте код. А то сижу чайник-чайником, не сходится айтемы тайтлам =)

  • Grigory Tarasov

    Ты не знаешь как заставит работать атрибут "alt" у тега <img> ?? Просто не валидный адрес напиши и будет тебе "описание картинки"

  • Yuriy Shishkin

    Кто сделал дз помогите с последним блоком поделитесь кодом

  • _Darkolomeo _

    Что это за программа? В которой ты пишешь HTML и Css

  • Vlachi

    margin: 0 auto; у меня ничего по центру не стало! ВАТАФАК?

  • Gorin Artem

    Хоть бы препроцессоры рассказал, а то ручками голый css писать туговато ))

  • Elison Whise

    Когда будет следующий курс, я только что узнал о вашем курсе, хочу обучаться у вас?

  • 1 2

    Хорошая идея: в простой подаче раскрыта теория и практика применения html и css в веб-дизайне. К сожалению, сама подача тяжеловата для восприятия. Много "отступов", "междометий" и обсуждения "за" и "против" вокруг очевидного и несущественного для общего восприятия материала. "Режут" слух "ЦСС" и "АшТиЭмЭл". Все-таки, живем в век информационных технологий - ничто не мешает прослушать в google translate правильное произношение CSS (СиЭсЭс) & HTML(ЭйчТиЭмЭль). В течение лекции складывается стойкое ощущение пыток в Гестапо :-). Если автору этот комментарий покажется не пустой критикой, а вектором для корректировки стиля подачи материалов в будущем, буду весьма рад. В целом получился весьма познавательный урок. И спасибо, Андрей, что потратили не час или два и взяли такой объемный и многосторонний проект для практики новичков.

  • Oleksandr Tovmachenko

    Андрей, а ты сделаешь еще мастер класс по вёрстке, только на примере сайта?

  • Super Toni man

    А почему у меня и у вас разное отображение? Например у меня между верхом надписи "It's nice to meet you" и ручкой на заднем фоне огромное расстояние, а у вас оно в притык. Это я накосячил или это зависит от экрана?

  • Martin Feyran

    Был вопрос как называеться программа Adobe где можно копировать свойства CSS при нажатие - Да,есть.Это Adobe.Assets в топ ребята :)

  • KoTe

    Верстка не резиновая и не адаптивная. Так уже не верстают

  • Nikita

    Реально ли научиться и зарабатывать этим на жизнь в 2019? А то есть мнение, судя по просмотрам,верстальщиков больше чем звёзд на небе

  • Dimka User

    ну давай здороваться будем пол часа

  • ICEICE ICE

    Вот ты барыга на бесплатной инфе в свободном доступе делаешь деньги

  • Bogdan Stecyuk

    как в фотошопе зделать так чтоби линия измеряла в пикселях а не в см

  • Oleg Bilko

    Классное видео. Спасибо за потраченное время на новичков. Вы вдохновляете людей)

  • Vasiliy Korol'

    Мда... центрирование жесть.... автор самоучка... на ходу придумал, это не терпит никакой критики...

  • Why KITAY

    Андрей, благодарю тебя за это великолепное видео!!! Оно помогает выйти из зоны комфорта))) Я целых 1,5 дня верстал, по видео, параллельно обучаясь. И еще 1,5 дня делал ДЗ. Блииииииииин, сколько нервов сил и времени у меня потратилось на выполнения этого ДЗ... Я столько нервов потратил, чтобы понять как это сделать! НО после целого дня мучения, и прибывания в жесткой зоне дискомфорта, я все-таки сделал эту первую секцию из ДЗ, остальные 3 пошли легче, я их сделал на следующий день, за несколько часов) НО все равно это было очень трудно. Спасибо! Ведь за гранью привычного мы растем. Я очень много чего понял, и применил, это лучшее видео по верстке, которое я на данный момент смотрел! За эти 3 дня, я очень сильно прокачался)))

  • nikit biscuit

    скиньте код третьей секции кому не сложно

  • Artem Ryazancev

    Ещё кто-то использует float? Ужас

  • Zamid Rzaev

    https://youtu.be/6l3ZSOQKE5g?t=8732 .work img { float: left; width: 31%; padding: 1.16%; margin-top: 60px;}по моему так удобно и правильно

  • nayk_youtube

    Кто доделал задание? скинте в комменты я уже второй день парюсь О_О

  • Geronimo

    Molodec Talkovo obyasnyaesh. Bilo bi xorosho eslib i pro footer sdelaesh urok. ochen problemni chast saita.

  • ID page

    Наконец то хоть кто-то нормально склоняет числительные...

  • Kayrat Borbiev

    Хахаха, тоже верстал этот psd

  • Oleh Nanovsky

    2 года назад смотрел урок верстки етого же сайта

Верстка сайта первый заработок
[Все О Flexbox CSS] Полный Урок: Верстка На FLEX
Стоит ли учить Web в 2019?
Верстка сайта основные ошибки начинающих
Первый заказ на фрилансе с нуля на практике. Как найти заказ.
[HOT] Wordpress: «натягиваем» верстку на движок
Учим CSS за 1 час! #От Профессионала
#сновавшколу: создаем дизайн и делаем верстку по правилам!
Bootstrap верстка современного сайта за 45 минут!
$10,000 в месяц Верстальщиком - Введение в Envato ThemeForest
Учим HTML за 1 Час! #От Профессионала
#яверстальщик / Что и как изучать в 2018