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

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

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

Я зарегистрировался на fl.ruЗашёлКак-то ссыкатно стало. 0_0Это нормально?

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

На чём он стримит, задержки вообще нет, либо чат липовый

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

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

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

Друг, ты просто бесподобен.Только начинаю учить html и css, и этот урок максимально помогает во всем разобраться.Спасибо за твои старания.подписался

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

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

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

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

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

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

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

спасибо большое))) снимаю шляпу!))

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

1:44 Ну тут наверное не класс, а идентификатор! Так как меню в единственном экземпляре.

Эммет не на полную используешь, можно было написать nav>ul>li*4, так быстрее и легче + обьяснить подписчикам

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

спасибо за видео, многое узнал. но в секции мое портфолио картинка не совсем по центру, отвлекает ппц )

Что такое фрилансеры? И вёрстка

Важное:background: url(../img.png) no-repeat center top / cover;sans-serif - любой другой подходящий шрифтmargin: 0 auto; - элемент всегда по центру

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

.services__item:last_child - без пробела надо

Спасибо, отличный мастер-класс!

Спасибо Андрей, очень профессионально и грамотно объясняешь! Будем ждать твоих новых видео кастов

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

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

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

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

Почему ссылки не ставятся в ряд, как на 1:45:00, примерно; Тоже через флоат писал, вроде бы все так прописал, нотоно не работает :/

Очень доступно и толково объясняешь. Лайк однозначно.Подскажи, как у тебя пройти курсы?Большое спасибо.

очень круто! вы прекрасный учитель!

.clear-fix: after{ content: ' '; display: table; width: 100%; clear: both;}

а что мешало вместо clearfix в некоторых случаях поставить просто overflow:hidden?

Итак доброго времени суток !Начну с того что , я финансист, для себя решил попробовать html (MAC OS) , или все таки запилить винду сверху?Заранее спасибо кто ответит

Дякую!! Ти красунчик!! З мене Підписка лайк і комент!

*{padding:0;margin:0;}

display: inline-block заместо костыльного класса clearfix, float'ами сейчас никто не верстает

Спасибо огромное ! Очень хорошо объяснил ! СПАСИБОО

не оч удобно смотреть, когда он изичные вещи валенкам разжевывает

Сколько терпения.. Огромный молодец!!

Можете подсказать пожалуйста, как просматривать у элементов макета в фотошоп стили? Какой то специальный плагин?

какой же автор молодец! все понятно и четко, крепкого тебе здоровья, доброе дело делаешь!!! таким людям всегда в жизни вознаграждается их добро!!!

Andrei, A vy kakie knigi po sovetali dla nachinaiushih? Po HTML i CSSEsli est' elektronyie versy mojete dat?zaranie spasibo!

Спасибо автору за его труд! Очень доступно и полезно!

Посмотрел 2 видео у Хауди (HTML и CSS) и половину этого видео.. и сверстал сайт, для которого сделал макет, но не знал, как сверстать. Огромное спасибо.

Андрей, огромное спасибо за урок. Доверстал)) Теперь работаю над адаптивностью.

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

нереально помогло.... лучше чем все уроки и курсы вместе взятые

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

Спасибо вам большое, что Вы такой есть. Дай Вам бог здоровья, после таких видео хочется творить, жить, учиться. Еще раз спасибо

Изучаю веб дизайн, и что я тут делаю, не понимаю... Разве нельзя такие страницы сверстать в спец программах???

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

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

Благодарю, во многом разобрался. Замечательный урок!!!

Класс с clearfix не срабатывает не получается

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

Спасибо вам большое. Хороший вы человек!

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

Не то слово - умница!!!!!!! Спасибо большое))) всё чётко, понятно, без заумностей))))

2:17:00 здесь проще воспользоваться flexbox. На самом деле, всё понятно, но многого не объяснил, тот же flex намного удобнее при создании верхнего меню.

все понятно и доступно! спасибо за все что ты делаешь !

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

Это чё, можно записать, и оно 700 000+ просмотров наберёт?

Про на 1:54:34 я решил так .titles{ float: left; margin-top: 180px; }