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

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

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

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

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

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

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

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

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

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

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

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

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

Крутой урок. Я его первый раз увидел 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Спасибо Андрей

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

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

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

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

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

самостоятельную часть сделал так:<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;}

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

Решил доделать макет самостоятельно. Сначала затупил и не мог понять почему у меня картинка смещается вниз. Потом разобрался и все получилось. Вот мой говнокод, если у кого возникнут трудности. Не знаю насколько он валиден и оптимизирован, но в браузере все отобржается как надо.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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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