Верстка 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

Спасибо за просмотр!
  • OwlYaRly RUS

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

  • Dimaster

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

  • Tapochek v smetane

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

  • NCS Free Music [NoCopyrightSounds]

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

  • Agressor

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

  • Maxim Peshko

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

  • Bahtiyar Basharov

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

  • Nikolay Shapoval

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

  • Mikhail Ugryumov

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

  • Maksim Cheremisov

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

  • Temirbek Maketaev

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

  • 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Спасибо Андрей

  • Alesha Drykalik

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

  • Mr Doom

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

  • Stanislav Goloshkin

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

  • 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;}

  • Vladimir Kovalchuk

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

  • Grigory Tarasov

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

  • ABATHUR

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

  • Morgan

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

  • ჯუღაშვილი

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

  • al'mir mir

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

  • Abakar Kamalov

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

  • ArtOfFun

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

  • Fury_667

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

  • Ihtiyor Hasanov

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

  • Fantom

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

  • Obychnyy Chelovek

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

  • Zhoomart Satymbaev

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

  • Sasha Kulachinskiy

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

  • Evgeniy Che

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

  • Parti3an

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

  • CannK

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

  • king_of_electro Loza

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

  • MorBon MorBon

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

  • Google Google

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

  • Alexander Kuz

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

  • Baby Rage

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

  • teo doro

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

  • gd Papafant

    *{padding:0;margin:0;}

  • German Kahnovich

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

  • Star Haski

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

  • Ikeret

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

  • Oleg Suvorov

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

  • Vlad Metr

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

  • Salam Student

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

  • Baқdәulet Pernebaev

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

  • Dmitriy Kiriy

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

  • Timur H

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

  • Alex Volkov

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

  • Pavel Pavlovich

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

  • Marina Afanaseva

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

  • Zamid Rzaev

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

  • Andrey Denysenko

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

  • Gulnara Bisheva

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

  • dAnTeSInFeRnObleat1

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

  • Tatti Canto

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

  • Fox 3

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

  • Daler Dadodzhonav

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

  • ! 54Maksimka85 !

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

  • Abdurahmon 09

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

  • Abdullah Yusupov

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

  • Osnovy chercheniya Grafika

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

  • Ob'edinenie Sokov Evgena

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

  • Eyyub Muradov

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

  • vit grey

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

  • El Dios

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

  • CRAZY SHIT

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

Как стать Front-End разработчиком? ► Самый Верный Путь!
Верстка сайта основные ошибки начинающих
КАК ВЗЯТЬ ЗАКАЗ, ЧЕГО БОЯТЬСЯ, ЖИВЫЕ ФРИЛАНС-ИСТОРИИ / ОТВЕТЫ НА ВОПРОСЫ
Выпадающее МЕНЮ на чистом CSS / HTML
UI Анимация дизайна интерфейса мобильного приложения в After Effects
ИНТРИГА ВЕКА 😨 ЧТО СТАНЕТ С ВЕБ-ДИЗАЙНЕРАМИ
Bootstrap верстка современного сайта за 45 минут!
Opencart с нуля: перестаем бояться магазинов!
Сколько времени нужно, чтобы научиться верстать сайты?
Как Верстальщику Зарабатывать Много На Фрилансе В 2018
ЧЕМ ДЛЯ МЕНЯ СТАЛА ВЕРСТКА? ОТКРОВЕНИЕ ФРИЛАНСЕРА
Создание простого сайта в HTML [NOTEPAD++]