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

10776 ratings | 503596 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. С Нуля. Полная Запись.

Яма TV 2 months ago
1:18:30 что это такое ?:D
Vitalii Savchuk 2 months ago
он же скалал что это попросту не купированная картина
Vitalii Savchuk 2 months ago
Про на 1:54:34 я решил этак .titles float: left; margin-top: 180px;
Мухаммад Мирзоев 2 months ago
Кто шарит весьма отлично, в веб-сайтах напишите в лс Не поленитесь обьяснить.
Science Community 2 months ago
очень коротко обрисовал front end в целом, здорово для начинающих.
Юлия Сальниченко 2 months ago
Мое ДЗ: HTML: <section id= about > <div class= container > <div class= title > <h2> About us </h2> <p> Proin iaculis purus consequat sem sure. </p> </div> <div class= event_left clearfix > <div class= about_left > <h3>JULI 2010</h3> <h3>Our Humble Beginning</h3> <p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt</p> </div> <div class= about_img > <img src= img/about1.jpg alt= О нас > </div> </div> <div class= event_right clearfix > <div class= about_img > <img src= img/about2.jpg alt= О нас > </div> <div class= about_right > <h3>JANUARY 2011</h3> <h3>Our Humble Beginning</h3> <p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt</p> </div> </div> <div class= event_left clearfix > <div class= about_left clearfix > <h3>DECEMBER 2012 </h3> <h3>Our Humble Beginning</h3> <p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt</p> </div> <div class= about_img > <img src= img/about3.jpg alt= О нас > </div> </div> <div class= event_right clearfix > <div class= about_img > <img src= img/about4.jpg alt= О нас > </div> <div class= about_right > <h3>FEBRUARY 2014</h3> <h3>Our Humble Beginning</h3> <p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt</p> </div> </div> </div> </section> <footer> <div class= container > <p>C Copyright 2017</p> </div> </footer> CSS: html height: 100%;/* прибиваем футер книзу */ body padding: 0; margin: 0; font-family: Arial sans-serif; color: 222222; min-height: 100%; /* прибиваем футер книзу */ display: flex;/* прибиваем футер книзу */ flex-direction: column;/* прибиваем футер книзу */ about.title p margin-bottom: 100px; .event_left float: left; .event_right float: right; .about_left float: left; width: 320px; text-align: right; margin-bottom: 100px; .about_right float: left; width: 300px; text-align: left; margin-bottom: 100px; .about_img float: left; .event_left img margin: 0 60px 0 60px; .event_right img margin: 0 60px 0 60px; footer padding: 100px 0 100px 0;/* прибиваем футер книзу */ text-align: center;
Олексій Шишкин 2 months ago
а где можно находить psd макет, что бы упражнять свои способности верстки?
ВЛАС АКТЕРОВИЧ 2 months ago
Убил три часа и сделал геморой лишь. необходимо разбивать уроки по шагово. будто то будто это. а у тебя все в кучу и стремительно без разъяснений что и отчего. лишь поверхностно. сделай конкретику какую то. будто поставить два изображения в одну линию горизонтально. будто выровнить их по центру. будто и что. вот что необходимо. понимаю ты будто 2+2 это решаешь. однако многие неудачники будто и я и для меня 99 % черный лес.
ВЛАС АКТЕРОВИЧ 2 months ago
привет, итут вро ди будто с нуля обучалка. однако немало ччего пропускаешь. для тех кто с нуля а это я полностью не понятно где ты берешь какие папочки лайаут куда ты их кладешь и этак дальше.
MotteoSkaletto 2 months ago
Спасибо для тебя огромное помогаешь весьма очень, буду сдавать на программера и это видео весьма помогает!
Егор Беседин 2 months ago
самостоятельную доля сделал этак: <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;
king_of_electro Loza 2 months ago
Очень доступно и толково объясняешь. Лайк совершенно точно. Подскажи, будто у тебя миновать курсы? Большое благодарю.
Фануз Саяхов 2 months ago
верно и понятно!благодарю
pro100 filka 2 months ago
Респект!
RM'FM 2 months ago
Спасибо.
Nikolas Keidg 2 months ago
достал ты здороваться. задумайся об этом если 12000 один привет услышать не захочешь урока.
Ilya Mayer 2 months ago
Title h2 имеет болт сороковой размер 2:07:25
Алексей Соколов 2 months ago
3 МЕСЯЦА ХОСТИНГА БЕСПЛАТНО!!! При регистрации используем одинешенек из промо-кодов - HOSTAP-10 , HOSTAP-15 , HOSTAP-30
Andrey Isaenko 2 months ago
при float значения right элемента nav ссылки прикреплялись к правому краю всей странички, а не конкретно контейнера и всё это продолжалось до написания clearfix
Anette Sweet 3 months ago
35
Samorodok 3 months ago
39:05 Для того, чтоб узреть замещающий текст необходимо сделать не существующую ссылку (попросту выслать ссылку на картину)
Samorodok 3 months ago
16:43 можно попросту ! и tab
oleg barinov 3 months ago
Почему не работает ! Таб ' ? все остальное нормально, плагин emmet установлен
Denys Martych 3 months ago
Гле-то можно скачать PSD макет что в уроке показан?
Vitalii Savchuk 2 months ago
в описании под видео все написано
Dmitry Minchenko 3 months ago
В статье о семантике () говориться, что схожий подход обычного разбития на секции не является правильным. В нашем случае необходимо было секции завернуть в тег <article>. Кто разбирается в семантике, подскажите?
Сергей Кондулуков 3 months ago
Андрей и ещё проблема. У меня Фотошоп СС 2017. Как из макета вынуть рисунки. Через смарт объект у меня не удаётся :-(
izvarzone 3 months ago
Альт-клик по слою либо группе на глаз, чтобы был лишь 1 картина, позже Image - Trim (советую добавить хоткей, т.к. одна из самых частоиспользуемых функций при вырезке веб-сайта; у меня ctrl+q) позже ctrl+alt+shift+s и сохранить будто jpeg, png8 либо 24 в зависимости какой формат нужен. Это самый резвый метод из тех что отыскал. Можно еще скрипт написать будет еще резвее, однако во времена когда делал верстку я про скрипты не знал.
Vladislav Tkachuk 3 months ago
Скиньте кто-то полную вёрстку, не выходит у меня расположить текст около рисунки((
ツChocoboy 3 months ago
Кому пригодиться *HTML* <!DOCTYPE html> <html lang= en > <head> <meta charset= utf-8 > <title>Golden</title> <link rel= stylesheet href= css/main.css > </head> <body> <header> <div class= container > <div class= heading clearfix > <img src= img/logo.png alt= Golden class= logo > <nav> <ul class= menu > <li> <a href= >Home</a> </li> <li> <a href= >Services</a> </li> <li> <a href= >Portfolio</a> </li> <li> <a href= >About</a> </li> <li> <a href= >Contact</a> </li> </ul> </nav> </div> <div class= titles > <div class= titles__first > Welcome To Our Studio! </div> <h1> It's Nice To meet you </h1> </div> <a class= button href= >Tell me more</a> </div> </header> <section id= services > <div class= container > <div class= title > <h2> Services </h2> <p> Proin laculis purus consequat sem cure. <div class= services clearfix > <div class= services__item > <img src= img/icon1.png alt= Услуга > <h3>E-commerce</h3> <p>Proin laculis purus consequat sem cure digni ssim.Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p></div> <div class= services__item > <img src= img/icon2.png alt= Услуга > <h3>Responsive Web</h3> <p>Proin laculis purus consequat sem cure digni ssim.Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p></div> <div class= services__item > <img src= img/icon3.png alt= Услуга > <h3>Web Security</h3> <p>Proin laculis purus consequat sem cure digni ssim.Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p></div> </div> </p> </div> </div> </section> <section id= portfolio > <div class= container > <div class= title > <h2> Our portfolio </h2> <p> Proin laculis purus consequat sem cure. </p> </div> <div class= works clearfix > <img src= img/img1.jpg alt= Работа > <img src= img/img2.jpg alt= Работа > <img src= img/img3.jpg alt= Работа > </div> </div> </section> <section> <div class= container > </div> </section> <footer> <div class= container > </div> </footer> </body> </html> *CSS* body font-family: Arial, sans-serif; padding: 0; margin: 0; color 222222; .clearfix:after content:''; display: table; width: 100%; clear: both; div box-sizing: border-box; header background: url(./img/first-bg.jpg) no-repeat center top / cover; padding-bottom: 160px; .container width: 930px; margin: 0 auto; .logo float: left; margin-top: 41px; nav float: right; margin-top: 45px; .menu padding: 0; margin: 0; display: block; .menu li float: left; display: block; margin-right: 41px; .menu li a color: fff; text-decoration: none; text-transform: uppercase; font-size: 14px; .titles__first font-size: 40px; color: fff; text-transform: uppercase; text-align: center; margin-top: 180px; h1 font-size: 75px; color: fff; text-transform: uppercase; text-align: center margin: 15px; .button background: fed136; color: 484543; border-radius: 3px; display: block; width: 240px; padding: 20px 0; margin: 0 auto; text-decoration: none; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 18px; margin-top: 50px; .title padding-top: 115px; .title h2 font-size: 40px; font-weight: bold; text-align: center; text-transform: uppercase; margin: 0; .title p color: 777777; text-align: center; font-size: 16px; margin-top: 5; .services margin-top: 80px; .services__item width: 270px; float: left; text-align: center; .services__item h3 font-size: 18px; margin-bottom: 5px; .services__item p line-height: 1.55em; font-size: 14px; color: 777777; .services__item:last-child float: right; .services__item:nth-child(2) margin-left: 60px; services padding-bottom: 120; portfolio background: f7f7f7; .works margin-top: 70px; .works img float: left; .works img:nth-child(2) margin-left: 29px; .works img:last-child float: right;
Артур Таиров 3 months ago
наикрутейший канал, отчего этак не достаточно подписок(( ну-ка хотя мне же лучше)))) благодарю за то что помогаете упорядочить беспорядок в моей голове относительно вот этого вот итого)))))
Алексей Корбин 3 months ago
отчего то, что я пишу в редакторе не отображается в браузере? все сделал этак же, пути прописал. Белая страничка.
Nikita Guk 3 months ago
сбросьте код третьей секции кому не трудно
Nikita Guk 3 months ago
Ребят, помогите пж. Пишу background(там где сероватый поле на третьй секции) и делаю все будто на видео, однако backgraung становится на рисунки из 2 секции
Станислав Фурс 3 months ago
Спасибо, Андрей. С наслаждением пожал бы Вам руку! Очень тщательно и попросту о сложном (для новичков).
PINKY SPIKE 3 months ago
*Кто может посодействовать?Ищу штамп где будут рабочие кнопки возле 5 штук + доступ к PSD*
Сергей Кондулуков 3 months ago
Андрей здрасти. Я малость умею верстать веб-сайты. До этого верстал веб-сайты в конструкторе ВебСайтХ5. Но ваш задание отдал для меня весьма немало нового. Во первых разбиение итого PSD макета на секции. Я об этом не знал. Теги html5 я малость знаю, однако вы проявили их применение на практике. В третьих, чтоб набросок растягивался на всю ширину. И в конце концов извлечение картинок из PSD макета. Это отдало мне весьма немало нового. С почтением Сергей Кондулуков
Роман Чумаченко 3 months ago
Что за программка в которой ты пишешь?
дмитрий вачаев 3 months ago
Может быть Я таковой криворукий, однако далее меню продвинуться не вышло. Ссылки возникают, а на стили они ни будто не реагирую. Уже по буковкам все сравнил.
Logicall Team 3 months ago
дудки слов !видать человек искусник собственного дела
izhe4niy blia 3 months ago
Мне 13 не имею права трудиться знаю интернет-программирование, отправьте меня к програмистам
Parti3an 3 months ago
Hе могу в header добавить картину. Пишу все будто и вы. В чем вина?
Sato3 Kasatkin 3 months ago
href= css/main.css мб не указал
Gunay Alv 3 months ago
Посмотрите, не запамятовали ли вы потом 2-ух точек и img еще одинешенек символ слеша
Алексей Гусев 3 months ago
та же неувязка
memasi memasi 3 months ago
Народ, кому необходимо сделать крутой веб-сайт и раскрутить его заглядывайте сюда - apro.pri.ua Там нормас цены,по последней мере
Владимир Сафьянов 3 months ago
Хорошее видео, до этого я обучался строчить html и css стопроцентно вручную, зато знаю общую сущность чуток поглубже, чем с внедрением данного плагина =)
Dmitry Sh 3 months ago
Emmet. io не работает
Dmitry Sh 3 months ago
Emmet. io не работает
Mr. Moment 3 months ago
От 0:00 до 0:20 я задумывался ты с разума сошёл
Camilland 3 months ago
Здравствуйте, Андрей. Недавно стал вашим подписчиком и нахожу весьма полезным данную онлайн школу, реально здорово. Просьба прислать на почту приготовленную вами папку Макет , чтоб выполнить по данному уроку задание. Заранее благодарю. мейл: future@europe.com, Kamil
Alexander Schneider 3 months ago
<section> <div class= container > <div calss= title > <h2>Services</h2> <p>Proin iaculis purus consequat sem cure.</p> </div> </div> </section> .title padding-top: 200px ; .title h2 font-size: 40px ; font-weight: bold ; text-align: center ; text-transform: uppercase ; color: 800000 ; margin: 0 ; .title p color: A9A9A9 ; text-align: center ; font-size: 20px ; всё вроде нормально однако не работает. лишь если на прямую обращаться к h2 и p. хотя до этого с меню всё работало
Maror play 3 months ago
Не работает coler: fff text-transform: uppercase; text-decoration: none; что мастерить?
izvarzone 3 months ago
Еще и ; запамятовал добавить
Mariya Golovanova 3 months ago
поэтому что color
Slayer DUDE 3 months ago
1:16:48 здесь все попросту разъяснить, файл css из которого вызывается картина находится снутри папки css, а файл рисунки к которой обращается этот css находится в папке img которая является примыкающей папкой, и что бы угодить в эту папку из папки css необходимо сначала возвыситься на степень выше, другими словами необходимо выйти из папки css что и делают эти две точки в начале пути - они выходят из папки css что бы забежать в папку img.
Slayer DUDE 3 months ago
если бы css файл был бы вложен еще одну в папку, которая в свою очередность находилась бы снутри папки css, то линия бы поменялся на ././img/картина.png , т.к. необходимо было бы сходить уже из 2-ух папок, чтоб добраться до рисунки снутри папки img.
sergey kireev 3 months ago
Большое вам благодарю !!!!!! Ярославль
Ice cold 3 months ago
Здравствуйте, прошу извинить за себя и собственный проблема. У меня неувязка с версткой самого лёгкого веб-сайта. Могли бы вы посодействовать ? Не желаю докучать попросту. Я новенький попросту.
Kino Man 3 months ago
Взгляните.
Zhandarbek Muratzhanov 3 months ago
весьма рекомендую начавшим с$$ и хтмл поглядеть(ясно,верно,не достаточно воды)
Anastasia Selivanova 3 months ago
Спасибо ! Классное видео, превосходный коуч Андрей, весьма отлично разъясняет. Было бы супер дать хотя бы одинешенек (лучше 2) варианта шифровки последней секции About Us. Возможно ли это ?
Alina Kalashnyk 3 months ago
Спасибо, превосходный искусник класс!
KoTэ 3 months ago
Верстка не резиновая и не адаптивная. Так уже не верстают
Сталин 3 months ago
izvarzone можешь дать подсказку будто лучше верстать и где лучше обучаться?
izvarzone 3 months ago
Да ладнааааа.
Сталин 3 months ago
ты будто вообщем думаешь что потом нее лучше учить ?
Science Community 3 months ago
будто я понимаю, это видео для самых начинающих. а этак то нужно в поисковике строчить адаптивная верстка)
Леопольд Котов 3 months ago
Верстка вначале весьма кривая: при уменьшении экрана все полетит и это никак не подправить быстренько. Нужно попросту поновой все переделывать
Рома 3 months ago
Побольше бы таких видео с вёрсткой:)
Ирина Пурзал 3 months ago
Супер задание, изредка такое встретишь, немало полезной инфы и фишек! Мои апплодисменты.
GooDman 3 months ago
благодарю,немало чего вызнал
Pete Dunham 4 months ago
Заебываешься любой один это двоеточие устанавливать
Pete Dunham 4 months ago
Зачем устанавливать двоеточие точка с запятой в чем резон
Pete Dunham 4 months ago
Ссылка не активна либо не работает че мастерить в анкор ссылки
Денис Акамов 4 months ago
будто прирастить текст ?
Какао 4 months ago
Я лишь 1-го не понимаю, для чего разъяснять, к примеру, что такое селектор либо будто вообщем что устроено? Если человек глядит это видео, означает он уже обязан знать все эти правила, по другому что ты здесь делаешь, вот мне чёт не охото внимать те простые вещи, которые обязан знать любой, кто глядит это видео
The_Real 4 months ago
кто работу доделал, залейте поглядеть, я запуталась.!!
Margo Glinskaya 4 months ago
Не сообразила записи background: url(' ') center top / cover; Что значит косая черта? Впервые встречаю такое.
Dmytro Doloban 4 months ago
будто ты пишешь.container и у тебя сходу создается этот класс? это плагин какой то? я в самлайме не могу этак мастерить
izvarzone 3 months ago
Это именуется tab trigger, жмешь таб и создается. Можно свои основывать
IT#Developing 4 months ago
HTML и CSS необходимо не учить, читая книги и глядя уроки (Если Вы совершенно новенький, будет довольно неплохого видео со знакомством с этими языками), открываем то же видео Андрея по вёрстке с шаблонов, либо видео с английского ресурса, и переписываем текст. Заметьте, пишем сами, в комменты за полным кодом не обращаемся, в последнем случае при ошибке, которую Вам не удается отыскать. Со временем потихоньку потихоньку Вы будете переписывать код, характеристики, и уже позднее по памяти будете держать в голове теги и атрибуты будто <!DOCTYPE html>, людская память беспредельна, и может почти все запоминать, этак кроме того, что Вы будете повторять и обучается, начнёт развиваться зрительная память, а это не будет излишним :) Удачи!
izvarzone 3 months ago
Я вообщем изучал попросту копаясь в коде других веб-сайтов + Firebug. В мое пора не было видеоуроков, а текстовые уроки были отстоем, не считая css-tricks и блога Ильи Бирмана однако про их уже вызнал когда научился верстать.
Max 4 months ago
я задумывался верстать труднее оказывается весьма просто благодарю!
Evy Meri 4 months ago
привет, может ли создатель показать будто для этого макета сделать адаптивное меню бургер???благодарю
Юрий Изотов 4 months ago
Cover не работает этак будто обязан заместо этого ,при увеличении ,картина не остается того же размера , а попросту напросто обрезается снизу при этом.Не понимаю будто у создателя выходит создавать это волшебство
Andrejs Korovskis 4 months ago
шедевральный задание! благодарю огромное!
Nevashe Delo 4 months ago
Дядька похож на головного актёра из полицейский с рублёвки.конечно и положительный таковой.
JapaneseMusicSubs 4 months ago
13:45 застрял на этом моменте, не могу отыскать опции windows. кто может выручить?
asygat azamatov 4 months ago
попросту сохрани в Sublime Text будто файл html. Save as и выбираешь html
Ирина Романова 4 months ago
Очень полезное видео, пробую по нему сверстать веб-сайт, появилась неувязка с clearfix, когда писала первую секцию он сработал, однако когда вторую, то уже не работает( текст прыгает в первую секцию, это неувязка в clearfix либо еще что-то может быть? Очень надеюсь, что ответите :) Спасибо за видео, большущее!
izvarzone 3 months ago
Clearfix в 2018 до сих пор употребляют? Во времена display:flex? По мне этак даже float уже не нужен, это было животрепещуще в 2010, когда CSS3 не поддерживали многие браузеры.
Aleksandr Shvechkov 4 months ago
Андрей, подскажите в чем неувязка - стили подгружаются лишь потом обновления html странички, а при открытии их дудки.
Sam Noel 4 months ago
а макет с картинами, какой вы кидали на почту ученикам, уже нигде отыскать и скачать невозможно? По ссылке ввожу электрическую почту, однако ничего не скачивается
Lisa Lisa 4 months ago
Чувак, желаю произнести для тебя ОГРОМНОЕ СПАСИБО! Ты даешь в полностью доступной форме то, что ранее приходилось растягивать из нескончаемых и нудных спец. курсов. Самый наилучший способ обучения зарубежному языку - пристроить подопечного в среду с носителями, этак же и тут. Сразу фактически показал, поведал теорию, по ходу ответил на вопросы. Спасибо огромное и добра вам! 👍😁
Алексей Кирейчик 4 months ago
Добрый денек! Нужен ваш рекомендация, кушать psd макет 1700px-холст 1400px-рабочая доля, сетки 12 колоночной нету, будто наложить сетку, чтоб можно было верстать с помощью bootstrap. Желательно в верстке использовать bootstrap было. Заранее благодарю, опыта не достаточно, до этого макеты были стандартных размеров.
izvarzone 3 months ago
Если бы дизайнеры делали макеты веб-сайта с учетом bootstrap. Многие дизайнеры (на фрилансе) даже не знают, что такое модульная сетка либо style guide и делают всё на глаз. Даже отступы в 1 параграфе могут быть 21px а в другом 20.
Александр Александрович 4 months ago
преподаватель поучи flex, не стоит глядеть, абсурд целый
izvarzone 3 months ago
ага float в 2k18
Пердунок 4 months ago
У кого не вставляется картина first-bg.jpg , то ставьте кавычки background: url('./img/first-bg.jpg')
Олег Шинкаренко 4 months ago
Все ясно. Андрій конечноє неправильний код. Він попросту не може відображати картину у Хедері. Насправді код має бути таким: header background: url(./img/first-bg.jpg) no-repeat center top; background-size:cover; height: 600px;
Олег Шинкаренко 4 months ago
А чому first-bg.jpg не відображається? Що я тільки не роблю, перевірив все 100 одинів - немає рисунки в хедері і все.
Олег Шинкаренко 4 months ago
Код, який пише Андрій, у мене не працює. Або Андрій щось приховує, або він забув щось сказати. У мене запрацював зовсім інший код для хедера, який мені порекомендували інші люд.
Иван Ванюк 4 months ago
Олег Шинкаренко решили делему?
Critical_ops_fix !!! 5 months ago
Я не могу подключить к header картину
Иван Ванюк 4 months ago
Critical_ops_fix !!! Как решил делему?
Тофик Агазаде 5 months ago
Урок естественно весьма неплохой. Но кушать огромное НО. Вы повсевременно прописываете какие-то характеристики гласите что позже расскажете о нем однако время от времени забываете. Еще одинешенек проблема: Вы в header-е прописали float: right; чтобы позиционировать меню с права. Но если у нас в header-e меню это не заключительный блок тогда это свойство здесь по моему не подойдет не этак ли? Если я прав, то будто лучше устроиться? display: flex; ? Или flex - ом лучше не воспользоваться чтобы помощь и все дела?
Александр Достоевский 5 months ago
Вопрос: на 1:45:03 создатель прописал float: left. Почему бы попросту невозможно было задать классу menu display: inline-block?
Александр Достоевский 5 months ago
Прошёл курс у Sorax, сейчас попал сюда. Скажу этак: весьма хорошо всё поведано, не лишь для повторения понятно, однако и по сущности для исходного исследования весьма хорошо. Заложить в голове какие-то базисные представления о вёрстке, не пугая всеми этими цифрами конечно знаками у вас точно вышло.
Илья Ткач 5 months ago
Любой веб-сайт начинается с макета PSD?
izvarzone 3 months ago
Только если дизайнер и кодер – различные люд. Самому проще сходу приступить кодить, макет мастерить в Adobe Muse а не в Photoshop. Картинки сходу отрисовывать нарезанными, чтобы не делать двойную работу. Вместо макета веб-сайта лучше мастерить макет style guide. отчего-то этого большая часть не делают, на фрилансе.
Rezon Raison 5 months ago
Блин будто сделать чтобы картина была по центру, конкретно по центру, а слева либо справа текст. У меня все криво выходит, уже несколько часов на эту мелкота не могу отыскать ответа.
Rezon Raison 5 months ago
функцию child вообщем не юзал, и вот щас у меня вышло, однако пришлось мне раздельно для Картинка середина, текст слева и Картинка середина, текст справа задать различные стили. И все вышло расположить. Возможно создатель видео CSS для About мой взглянет и произнесет - как говнисто это вышло. Или даст подсказку чего. aboutus padding-bottom: 120px; .aboutus width: 930px; margin: 0 auto; padding: 50px; .aboutus img float: right; margin-right: 400px; .aboutus h4 float: left; margin: 0; padding: 0; width:300px; text-align: right; .aboutus p float: left; margin: 0 auto; padding: 0; width:300px; text-align: right; color: 777777; .aboutusr width: 930px; margin: 0 auto; padding: 50px; .aboutusr img float: left; margin-left: 348px; .aboutusr h4 float: right; margin: 0; padding: 0; width: 350px; text-align: left; .aboutusr p float: right; margin: 0; padding: 0; width:350px; text-align: left; color: 777777; ----------------------------------------------------------------------------------------------------------------------------------- <section id= aboutus > <div class= container > <div class= title > <h2> About Us </h2> <p> Proin iaculis purus consequat sem cure. </p> </div> <div class= aboutus clearfix > <img src= img/about1.jpg alt= О нас > <h4>July 2010<br> Our Humble Beginnings</h4> <p>Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.</p> </div> <div class= aboutusr clearfix > <img src= img/about2.jpg alt= О нас > <h4>January 2011<br> Facing Startup Battles</h4> <p>Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.Proin iaculis purus consequat sem cure.</p> </div> </div> </section> В данном случае он криво стоит, однако в целом труд выполнена, подправить можно. Просто интересует, как криворуко это вышло, будто его по другому можно было бы написать. Или все нормально вышло?
Rezon Raison 5 months ago
margin: 0 auto; не работает на него отчего то. По центру вышло впустить его лишь text-align: center;
Rezon Raison 5 months ago
этак вот такая же неудача, по центру я их еле будто поставил, однако из за того что текст слева и текст справа, они у меня криво вышли.
Бахтияр Башаров 5 months ago
У меня вообщем посредственный блок какой в задании по центру стоит не ставиться. Все сделал по видео. Вот код.services_item:ntn-child(2) margin-left: 60px; У тебя вышло?
SOKOLOV 5 months ago
А будто сделать этак чтобы люд смогли входить на этот веб-сайт?
Ann Stoma 5 months ago
Спасибо!
Кристина Евдокимова 5 months ago
Замечательный задание! Всё понятно, глас симпатичный, вообщем здорово))
Интро для канала Вашего канала 5 months ago
2:40:31
Евгений RD 5 months ago
за цельный час ни чего не сверстали!!!
nay40k 5 months ago
Кто доделал задание? скинте в комменты я уже 2-ой денек парюсь О_О
Юлия Казакова 5 months ago
WAYUP & Андрей Гаврилов вы ведь в курсе что такое нескончаемый цикл? Так вот сначала когда приветствуете аудиторию у ведущего этот цикл зациклился.
Ваня Зарудный 5 months ago
Когда записываю : img.logo + Tab , возникает малость иной script Не таковой будто в видео, в чём промах?
soul keeper 5 months ago
верстка это для слабаков.учите джаваскрипт
S t e l s 5 months ago
Шикарно!
Garret Grom 5 months ago
А можно стать без скачка шрифтов когда делаешь веб-сайт по макету =?
NISTAR STUDIO 5 months ago
а для чего? там же типовой шрифт - Arial