Верстка 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 часа не только все повторил, но еще и много чего выучил/понял.... Апплодирую стоя.

  • Strem4ik

    Конечно кайф когда зашёл на этот видос в 2к19 , а тут позиционируется через float когда есть flexbox или та же grid system

  • T

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

  • Maxim Peshko

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

  • Andy Partner

    Зачем нужна вёрстка если сейчас есть конструкторы для сайтов?

  • Bahtiyar Basharov

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

  • Maksim Borisenko

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

  • Yaroslav Ly

    Спасибо за прекрасный материал, очень доходчиво

  • Taras Ivanov

    Прошло уже 2 года, а тебе все респектуют чувак.ДА ХРАНИ ТЕБЯ ГОСПОДЬ, ДАЙ БОЖЕ

  • ABATHUR

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

  • Timur H

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

  • ჯუღაშვილი

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

  • Nikolay Shapoval

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

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

  • Maksim Cheremisov

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

  • Alesha Drykalik

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

  • Mr Doom

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

  • Stanislove Anderson

    Пока, если вы до конца не понимаете - просто поймите!

  • Oleg Suvorov

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

  • Star Haski

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

  • gd Papafant

    *{padding:0;margin:0;}

  • Heliclaster

    У меня в момент перекура видео остановилось XD

  • Kazantseva Anna

    Очень крутой видеоурок, единственное что, хоть убей, не поняла с clearefix, решила проблему через padding-topА так, огромное спасибо!

  • MorBon MorBon

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

  • Roman Terentjev

    Дружище, видео - топ! Выражаю огромную благодарность.

  • Rava Bat

    Я просто кайфую от твоих уроков!!! Спасибо тебе огромное!

  • Zhoomart Satymbaev

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

  • Fury_667

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

  • Dmitriy Kiriy

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

  • Taras

    А якій він Фотошоп використовував?Was für ein Fotoschop hat er verwendet?

  • Obychnyy Chelovek

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

  • Andrey Frolov

    Спасибо за все Андрей, можно пожалуйста название вашей книги?

  • Roma

    Побольше бы таких видео с вёрсткой:)

  • Andrey Denysenko

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

  • Sasha Kulachinskiy

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

  • Brain Zeek

    То самое чувство когда у тебя комп фотошоп не тянет

  • ugorobec

    Зашел в тупик по CSS, опустились руки. После видео беру курс только вперед! Спасибо большое!

  • al'mir mir

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

  • dAnTeSInFeRnObleat1

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

  • Pavel Spec

    Ты огонь 🔥 МОЛОДЕЦ, ты мне очень помог

  • Zamid Rzaev

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

  • Zero Toleranse

    Сколько стоит,такой сайт сделать???

  • Sozdanie igr na Android

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

  • Temirbek Maketaev

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

  • Daler Dadodzhonav

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

  • Papka Dzhov

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

  • Eyyub Muradov

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

  • Parti3an

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

  • king_of_electro Loza

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

  • Prinzzessa Rayana

    Почему то у меня не работает. .services_item:nth-child(2)

  • acaunt manager

    Для Mac - водов есть как Sublime + плагины Emmet, так и на мои взгляд более удобный Brackets + плагины Emmet и Minimap. Из локальных серверов MAMP в триал версии живется весьма удобно. + к хорошим делам)

  • Cap igen

    Здравствуйте, спасибо за ваше видео, очень полезно и много чего нового узнал хоть и в 2019.

  • Aleksey

    Очень познавательно, спасибо Андрей

  • Fox 3

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

  • White Star

    я тоже жил в одессе я из 2к19

  • Kids world

    Автор красавчик, огромное тебе спасибо!

  • Alexander Kuz

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

  • Tf90X

    Можешь снять видео как загрузить сайт в интернет

  • Gulnara Bisheva

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

  • El Dios

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

  • Salam Student

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

  • Vladimir Nikiforov

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

  • YoBurashka TM

    А что делать если текстовый документ представлен WordPadом и нет обозначения .txt?У меня windows 8

  • Ross Man

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

  • Sipliy YT

    Не могу найти на какой минуте он резать psdшку объясняет как

  • Ihtiyor Hasanov

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

  • r3lich

    Это просто офигенно.Здоровья и всех благ, а главное удачи!

10 глупых вопросов РЕПЕТИТОРУ ЕГЭ
Как стать Front-End разработчиком? ► Самый Верный Путь!
😱 ПОЧЕМУ Я БРОСИЛ ПРОГРАММИРОВАНИЕ?!
Верстка сайта основные ошибки начинающих
Отзывы GeekBrains JavaRush Специалист Luxoft и другие
Как правильно рисовать дизайн сайта?
Фриланс — уроки за год. Начал с нуля.
Программист из Google. Как работать 3 дня в неделю и посетить 70 стран.
Верстка сайта - с чего начать
Первый заказ на фрилансе с нуля на практике. Как найти заказ.
Учим HTML за 1 Час! #От Профессионала
$10,000 в месяц Верстальщиком - Введение в Envato ThemeForest