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

6176 ratings | 281968 views


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

Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: И еще кое что. --------------- Посмотрите другие видео о верстке: День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив - Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS - Как Сверстать Сайт Адаптивно? HTML/CSS - --------------- Подписывайтесь на мой канал: Спасибо за просмотр!

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

Иван Иванов 23 hours ago
Пожалуйста обучи, будто сделать слайдер
Հայկ Խաչատրյան 3 days ago
Помогите, воткнул картину в собственный веб-сайт с ID welcomeImage вот этак - <img id= welcomeImage src= (ССЫЛКА) > и в CSS написал чтоб эта полотно стало меньше и было в центре вот этак - welcomeImage width: 500px; text-align: center; Картина стала меньше однако не было в центре, что мне мастерить? Не гласите что я не подключил HTML к CSS!
Павел Пещеров 3 days ago
пишу код точь-в-точь будто на видео, однако 2-ой блок в разделе SERVICES просто не желает становиться в центре, на правый float: right сработал, а margin для второго чайлда не делается((
Артём Карасёв 3 days ago
отчего бы не использовать avacode ?
Sasha Karalchuk 4 days ago
на чем лучше мастерить сетку при верстке, бутстрап либо что-то нибудь из препроцессоров для этого использовать
Roma MLV 5 days ago
Грамотный человек, благодарю за твой труд
Александр Кулаков 5 days ago
2:02:48 Говорится что кушать два метода, можно сделать для кнопки margin-botton: 160px либо для header padding-botton:160 px , однако когда применил для кнопки не чего не вышло, она выталкивает контент под ней книзу а фоновая картина не возрастает
Анастасия Челяпина 7 days ago
Как сделать веб-сайт этот адаптивным?
John Smith 8 days ago
Prosto u menya net slov,,, VI OCHEN MOLODEC!!!! SPASIBO ESHYO RAZ :)
John Smith 9 days ago
Andrey,OGROMNOE SPASIBO VAM ! VI OCHEN POMOGLI :)
ZHEILING 9 days ago
Кто знает в чем вина того что.css файл не подключается
Владислав Рудка 4 days ago
Коряво подключил
Мурад Ахмедов 9 days ago
точнее тест я поставил то в 1-ый то в 3-ий, а во втором рисунки
Мурад Ахмедов 9 days ago
Здравствуйте. Скажите изволь а будто верно воплотить заключительный экран? Там то картина в центре вечно остаётся а текст может быть то слева то справа. Я вот сделал этак: сделал 3 чуда, во все 2-ые воткнул рисунки, а текст воткнул то в 1-ый то во 2-ой чередованием.Я думаю можно естественно и на position:absolute это сделать, однако это не хотелось бы мастерить. Есть какой нибудь более верный вариант? Как будет вернее?
Aydana Akimbaeva 12 days ago
Спасибо для тебя Андрей!
сергей олейник 13 days ago
благодарю
Александр Деркачев 14 days ago
Все делаю этак само, однако картина голден не двигается. Что мастерить???
Lilu Gat 15 days ago
Очень длительное вступление.
asl gulomov 16 days ago
сними обучения j.script та пж
Pentyakov V 16 days ago
Я смотрел старенькые видео по вёрстке, кушать проблема: такие штуки будто wrapper, row уже устарели ?
Эрмек Султанов 16 days ago
Оказалось что я многого не знал, однако сейчас знаю Спасибо !!!
Mi Fan 17 days ago
Болт сороковый размер. Переслушал этот момент один 10.
USMON. Tj 18 days ago
В каком програма ти сделал
amanturov islam 18 days ago
здраствуйте у меня проблема таковой а будто добавить сделанную веб-сайт в google поисковики
Djamper 19 days ago
Спасибо огромное, го стримы на твиче)))
Max Tarakankin 20 days ago
подкапотная братва))
Домогато Ры 21 days ago
кушать люд,которые реально разбираются и реально могут посодействовать новенькому?)
Vlad 23 days ago
Извините, Андрей, я где-то на 55 минутке на Вашем видео, перебежал на css и пробую придать краска h1, однако отчего - то в браузере все не желает и не желает отображаться, вроде все делаю по видео, в чем вина?(
daf daf 24 days ago
у меня на 3-ей страничке сероватый background лишь до краев странички не доходит((( что мастерить подскажите чайничку) height: 600px; тоже не посодействовал((((
Витя 25 days ago
Помогите!! Когда заливаю в хром файл index.HTML, то не показываются опции сss. Что мастерить? Это еще в самом начале
Html Junior 27 days ago
Хотелось бы услышать мировоззрение и критику
Денис Коржавин 27 days ago
Ответьте изволь, весьма необходимо, ВОпрос таковой, Если я создаю шапку ( Услуги Портфолио КОнтакты,) мне необходимо отдельные html файлы основывать по эти странички? либо другие методы кушать?
Кайрат Борбиев 28 days ago
Хахаха, тоже верстал этот psd
Про Комп 29 days ago
весьма стремительно все делаешь, нам же еще необходимо свертеть страничку, и тоже самое сделать в блокноте, и не вечно выходит, приходится управлять, однако понимаю если будет медлительнее то растянется на 5 часов а не на 3=))
Super Toni man 1 month ago
А будто попросту картину распялить на полный экран?
Super Toni man 1 month ago
А отчего у меня и у вас различное отображение? Например у меня меж верхом надписи It's nice to meet you и ручкой на заднем фоне большущее дистанция, а у вас оно в притык. Это я накосячил либо это зависит от экрана?
Super Toni man 1 month ago
Еще отлично видать на ручных часах (которые на фоне). У вас вообщем дудки циферблата, у меня полавинка, в оригинале чуток больше, чем полный.
Super Toni man 1 month ago
В оригинале верхняя надпись вообщем по ручке идёт. И эти различия не лишь в этой надписи.
Super Toni man 1 month ago
Моё почтение
aibol kalam 1 month ago
Спасибо. Получил кучу информацию и прав это лучше чем готовые шаблоны. Уроков по PHP MySQL дудки? интересует одинешенек момент $_GET['id']); получение глобальной ссылки.
MaAr Y 1 month ago
скажите. в видео кушать о том будто сделать чтоб при другом разрешении экрана все оставалось также?
Ярослав Басов 28 days ago
Все величины задаёшь в %, и без пикселей.
VRAGOREZ 6000 1 month ago
Вообще, создатель колдун и неплохой человек! Дай господь для тебя здоровья! За то что делишься познаниями и этак понятно, расстоновочно объясняешь.
Top Stories 1 month ago
Спасибо, подремал
my tahkent 1 month ago
А где psd
Александр Гурник 1 month ago
Есть-ли у кого нибудь макет этого веб-сайта?
WAYUP & Андрей Гаврилов 29 days ago
Александр Гурник ссылка в описании же кушать :)
Евгений Силин 1 month ago
<head> <meta charset= utf-8 > <title>Golden</title> <link rel= stylesheet href= css/main.css > <link rel= stylesheet href= d:\OSPanel\domains\layout\css\main.css > </head> Ну никак подключать не желает! И безотносительный линия указывал???
iquz 1 month ago
красава
Vadim Captaciuc 1 month ago
Ребята кто доделал макет до конца и какие трудности появлялись ?
ZORO 1 month ago
Molodec Talkovo obyasnyaesh. Bilo bi xorosho eslib i pro footer sdelaesh urok. ochen problemni chast saita.
Islamkz 1 month ago
2:22:45
Жоомарт Сатымбаев 1 month ago
Кто доверстал, сбросьте код. А то сижу чайник-чайником, не сходится айтемы тайтлам =)
Диванный Эксперт 1 month ago
я длительно страдал из-за невнимательности он гласил что или в header прописать padding-bottom либо в кнопке margin-bottom в кнопке не вышло,а в header заместо padding-bottom написал margin-bottom. Ппц длительно задумывался,чуток проблема в StaackOverflow не задал
застрелить или застрелиться 1 month ago
Можно ли сделать этак что при нажатии на картину тебя забрасывает на какой-то веб-сайт тоесть запихнуть ссылку в картину?
Ярослав Басов 28 days ago
<a href= ссылка ><img src= линия к картинке alt= ></a>
застрелить или застрелиться 1 month ago
Фига для себя сколько просмотров надеюсь что Марс колонизируют , а то на этой земле от конкуренции задохнуться можно
Данила Фомин 1 month ago
Если на Марсе будет веб, нам с тобой это не поможет.
Yurii Kilyk 1 month ago
Честно я этак поразмыслил про наследувание и увидел что полный текст в блоке хедер Белый и я сделал клас в которм прописан color: fff; и подключил ко всему блоку.
DANCE WITH THE DEVIL 1 month ago
Я когда tab нажимаю, у меня попросту трудности идут. И будто мне быть?
Ярослав Басов 28 days ago
ctrl+shift+p >> Install Package >> Emmet
Данила Фомин 1 month ago
Emmet установил?
Artem Smirnow 1 month ago
ОТЛИЧНОЕ РЕШЕНИЕ ДЛЯ СОЗДАНИЯ ВЕБСАЙТА Привет, я отыскал хороший метод без помощи других сделать прекрасный и дешевый веб-сайт. Самое увлекательное, что для этого не требуется никаких особых познаний и способностей, все попросту как будто в Word’e. Система именуется Moto CMS и она представлена в самом крутом гипермаркете шаблонов в мире TemplateMonster, а это наивысший символ свойства. А еще она стопроцентно на российском языке с бесплатной технической поддержкой! Мне будто это безупречная перрон для сотворения веб-сайта-визитки. А главное, у их кушать даровой тестовый этап на 14 дней. Ты попросту выбираешь хоть какой дизайн, какой для тебя нравится, начинаешь с ним трудиться и в течении месяца принимаешь решение о покупке, истина классно? В общем, советую для тебя самому протестировать шаблоны для веб-сайтов Moto CMS! А если хочешь получить скидку 10% при оформлении покупки на TemplateMonster, применяй промокод ytvwis8apzhi91ndxk44if8e9
DenC Программирование 1 month ago
хороший задание однако мелкие иконки необходимо прописывать не чрез img а чрез i что и розшифровывается будто icon
SPEC_TV 1 month ago
Как отворить окошко слева, а то я чрез открытие файлов делаю, и что-то туплю
Vlachi 1 month ago
margin: 0 auto; у меня ничего по центру не стало! ВАТАФАК?
Vlachi 1 month ago
У меня логотип в чуде не центрировался, поэтому, что <img> тег является строчкой
Vlachi 1 month ago
Абсолютно некорректно! необходимо было показать display: block;
Александр Гурник 1 month ago
Vlachi укажи ширину что бы контент поместился в чуде и укажи этому диву margin: auto;
Just Fox 1 month ago
проблема одинешенек. масштаб. либо для адаптивности можно впихнуть bootstrap? /задумчивый смайлик/ попросту помнится что кто-то где-то его для схожей адаптивности масштаба использовал. а вот кто и где, это уже к огорчению не помниться :с
Ярослав Басов 28 days ago
Можно и Bootstrap, можно самому, чрез @media
Алекс Казанцев 1 month ago
весьма отлично обьясняете,для себя немало нового усвоил
Zaur Yandarbiev 1 month ago
отчего в хедере бакграунд не стопроцентно видать?
Danila Vasilyev 1 month ago
Автор благодарю для тебя огромное за твои труды!
застрелить или застрелиться 1 month ago
Сам Иисус спустился и снял этот видос
Pro Games 1 month ago
Всё классно объясняешь!!!
Виктор Гаврилюк 1 month ago
Когда работаешь верстальщиком, то заказчик тоже такие макеты присылает со слоями либо будто это происходит?
Ярослав Басов 28 days ago
Всякое бывает, всё от интернет-дизайнера, какой макет делал зависит
Haarit di asorit ken baar 1 month ago
Не за 2, а за практически 4.
L1 1 month ago
подскажите веб-сайт на котром можно скачать готовые макеты фотошопа , чтоб упражнять конкретно верстку.
Кристина Винярская 1 month ago
Канал ge0s'a :3 в гугле забей скачать макет лэндинга
Alex Lis 1 month ago
Честно говоря я нубас нубасом в этом деле, однако даже я знаю что (1:46:20) не все ШЕСТЬ однообразные, а ТРИ ПАРЫ ОДИНАКОВЫХ, этак будто это двузначные шестнадцатиричные значения 3-х каналов, записанные попорядку. То кушать FAE либо 0F0 тоже будет трудиться, так как эта шестнадцатиричная запись соответствует rgb(0, 255, 0). Более того rgba(0, 255, 0, 0.5) тоже имеет шестнадцатиричное понятие, однако там альфаканал размещен сначала (то кушать по факту argb) и не сокращается (хотя может в новых спецификация что то поменялось).
Юрий Богатый 1 month ago
Вроде норм начин
Ярослав И 1 month ago
Спасибо,весьма полезное видео
limepillX 1 month ago
2:32
Narek Badalyan 1 month ago
отчего не делайте уроки pro modx revo я не знал что вы понимаете modx pro modx весьма не достаточно обучающих video сделай видео про modx cms весьма немало людей желают учит modx форумах миларды безответных вопросов
Jassy James 1 month ago
Заебал привет передавать
Dave Bottomhell 1 month ago
будто скачать файлы
Narek Badalyan 1 month ago
psd gde ?
Niko Chenko 1 month ago
будто выровнять текст и картину на одном уровне?
Al. V. 2 months ago
толковое видео, мне весьма посодействовало , thx
Vaynah 95 2 months ago
SPASIBA BRAT
Ярослав Мошков 2 months ago
Просто потрясающе объясняете!!
Ярослав Мошков 2 months ago
Просто потрясающе объясняете!!
Алексей Фёдоров 2 months ago
Супер задание! Доходчиво и понятно!
Программер Компьютерович 2 months ago
Как настроить Sublime text 3 будто у тебя?
Ярослав Басов 28 days ago
ctrl+shift+p >> Install Package >> Emmet
Pro Minecraft 2 months ago
Кому нравится лайк на мой комент
Sarbast_extra666 Extra 2 months ago
У кого старенькый Фотошоп, гляньте это тех минутное видео
Олег Александров 2 months ago
Я покамест поглядел 1-ый час видео,однако без познания фотошопа в верстке выходит никак?
Just Fox 1 month ago
у меня тоже дудки познаний особенных в фотошопе, без гемора пользуюсь Assets, полностью доволен ,_,
Kira khan 2 months ago
базы только необходимы верстальщику , что бы верстать по макету. Достаточно разобраться только с инструментами. (они находятся слева обыкновенно)
losad kfejd 2 months ago
Сука тупоумный мямля, 3 часа тянул даун
Kira khan 2 months ago
тупоумный школьник. он не верстал,а учил (будто нибудь сообрази разницу)
Олег Александров 2 months ago
Выступи сам и позже я тебя прокоментирую,грамотей.
Художник Настоящий 2 months ago
Решил доделать макет без помощи других. Сначала затупил и не мог осознать отчего у меня картина сдвигается книзу. Потом разобрался и все вышло. Вот мой говнокод, если у кого возникнут трудности. Не знаю как он валиден и оптимизирован, однако в браузере все отобржается будто нужно. 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;
Denis L 19 days ago
Спасибо огромное друг, пол денька страдал!
Golovach Lena 2 months ago
Почему у меня контейнер на 930пх растянут на полный экран. Код в ксс тот же.
Gogor Sargsyan 2 months ago
немогу сделать logo
Иванов Иван 2 months ago
С хрена ли Dreamweaver не пишет код?
Sergey Soprunov 2 months ago
Чтобы показалось смысл параметра alt тега img необходимо в ссылке(src) выслать одну буковку пути. Тогда браузер не опознает линк и покажет стринг параметра alt.
Димон Фалкон 2 months ago
2:03:22 2:03:22 2:03:22 5
Slawa Lokosov 2 months ago
Наконец то хоть кто-то нормально склоняет числительные.
Димон Фалкон 2 months ago
1:43:52 1:43:52 1:43:52 1:43:52
Димон Фалкон 2 months ago
1:46:13 1:46:13 1:46:13
Tim Kerman 2 months ago
Вот что-что, а что решётку назавут диезом (музыкальный термин) я не ждал!
Azelit 2 months ago
Спасибо!!!!!!!Лучший обучающий ролик!!!!!№
Никита Иванов 2 months ago
Редактор кода Atom не пробовал ??? Он капец будто легче чем эта хрень которую ты советуешь для работы
Titan Machinery LTD 2 months ago
Автору благодарю! Но у меня проблемка, не могу ccs подключить.
Ярослав Басов 28 days ago
взгляни пристально заглавие папок и файлов, месторасполодение HTML файла, а также их расширения
Titan Machinery LTD 2 months ago
<!DOCTYPE html> <html lang= en > <head> <meta charset= UTF-8 > <title>Apple</title> <link rel= stylesheet href= css/main.css > <body> <header>
Димон Фалкон 2 months ago
59:36 59:36
Alex Star 2 months ago
Float Это нехорошая практика.