25:30 В секции содержится ряд технических тегов которые нужны браузеру как инструкции, которые помогают отображать информацию. 28:57 Внутри содержится все содержимое страницы, все то, что отображается на странице. 29:40 Самые распространенные тег и почему Т.е. теги, под определенный тип контента. 31:13 заголовок 34:41 параграф . контент в 2-3 строчки. 35:21 для создания ссылки 36:56 для картинок 39:18 используется, чтобы выделить что-либо где-либо внутри текста 40:30 для переноса строки, т.к. в html нет такого, текст идет как есть 41:35 (не маркированный список) выводится как списки 47:10 Начал говорить про CSS 50:33 Подключение CSS (каскадные таблицы стилей) 52:40 Из чего вообще состоит синтаксис CSS 59:14 как давать свойства CSS отдельно каждому тегу 1:03:46 этапы после верстки, если нужно программирование, или интеграция системы управления 1:04:35 С чего начинается верстка 1:05:05 как взять картинки из макета 1:08:42 когда использовать jpeg когда png. Если под картинкой будет фон, то png, т.к. только в png возможен прозрачный фон 1:11:25 div используется там, где вы не можете охарактеризовать содержимое, где не можете применить специальный тег. Теперь вместо div тег 1:12:33 первый экран оборачивать в тег , а последний 1:13:26 class="container" 1:17:46 no-repeat - запрещаем повторение картинки(т.е. при изменении размера экрана картинка может повториться, т.к. размер картинки может быть меньше). center - положение по горизонтали. top - положение по вертикали, примкнуть к верхнему краю. / cover - (директива) чтобы картинка всегда растягивалась на всю ширину экрана 1:18:34 высота container зависит от его содержимого 1:21:25 padding для обнуления отступов 1:23:40 запрашиваем на компе пользователя шрифт Arial, если его нету то включается - sans-serif (шрифты без засечек) 1:24:55 весь процесс верстки идет сверху вниз, слева направо 1:29:00 container один раз описал в CSS и в HTML используем, чтобы не было дублирующего кода 1:32:30 border - свойство которое описывает границу элемента 1:33:00 чтобы любой элемент поставить по центру экрана 1:34:30 что такое padding - внутренний отступ текста от краев(по часовой (сверху, справа, снизу, слева)) и margin 1:36:30 чтобы длина элемента не изменялась при добавлении padding 1:39:28 margin - отступ элемента снаружи 1:41:00 меню в стандарте HTML5 принято окружать тегом , а уже внутри этого тега открывать список когда верстаем и не знаем какой будет ссылка, в атрибуте href прописывается хештег 1:43:20 работа со списками, как поставить в одну линию 1:47:00 text-decoration: none; убрать стандартное нижнее подчеркивание ссылок когда есть несколько элементов выстроенные в одну строку с помощью float-left, float-right, рекомендация - обернуть эту строку в общий контейнер 1:54:05 text-align: center; для того чтобы поставить текстовый блок по центру. 1:54:35 Логотип и меню мы обернули в один единый контейнер чтобы… из-за float-left, float-right (высота контейнера будет равно нулю) class clearfix 1:58:00 у тегов h1 и далее, по умолчанию есть отступы, чтобы их обнулить margin 0 1:58:50 (Делаем кнопки) кнопки я чаще всего делаю тегом 2:02:14 высоту секции header которую мы задали 600px - неправильно, высота должна определяться автоматически 2:03:38 Начало верстки второго экрана 2:16:20 Псевдо класс для, для того чтобы через этот класс в CSS обращаться к элементу\там в HTML, чтобы не добавлять в HTML уникальный класс. services_item:last-child 2:18:44 line-height (высота строки) подбор значения в единицах измерения (em) 2:20:03 Селектор id в HTML, обращение к нему в CSS через #.... 2:20:20 чем отличается id от class. Оба используют для обращения из CSS, но id еще можно использовать что обратиться к нему из JS (двух одинаковых (с одинаковым именем\значением) id на странице не может быть) 2:24:14 если у вас есть элементы у которых float(ы) - оберните их в контейнер и задайте clearfix 2:29:44 способ сделать границу первого экрана всегда по экрану устройства с которого зашли\просматриваем страницу 2:30:38 про clearfix объяснения что это 2:34:28 display block понятия как строчный и блочный(столбиком) элементы. Теги и другие -- они строчные. (их длина равна длине контента который внутри них) 2:36:54 Длина блочных элементов по умолчанию равна 100% доступной области. Чтобы ими управлять, задается либо float left, либо display inline block - но он может не сработать в опере 2:39:00 любой блочный элемент можно сделать строчным и наоборот 2:40:15 чтобы сделать у всех элементов границы * { border: 1px solid red; } 2:41:20 какую cms использовать ( modx ) 2:43:50 его курс - день верстальщика: про адаптивную верстку 2:45:00 дальше и до конца продажа своего коучинга
Одно из самых лучших видео которое я просмотрела по данному запросу, не скажу что прям для начинающих, но для человека знающего самые банальные азы - просто идеально, все четко понятно и самое главное без умалчивания, спасибо большое за это замечательное видео.
За всё время что искал как верстать сайты натыкался на сплошные платные курсы где всё объяснялось заумными словами и половины просто не понимал здесь всё очень на доступном языке аплодирую стоя
Это просто ПРЕВОСХОДНЫЙ мастер класс!!! Я пересмотрел несколько туториалов по верстке, но этот просто не сравним ни с одним! Тут информация подается от программиста к обычному человеку понятными для всех словами и терминами, а не как у некоторых он программиста к программисту, очень коротко и скудно (как будто мы всё знаем и понимаем и это нам не надо). Каждый пример разбирается, объясняется и сразу применяется на практике со всеми "подводными" камнями и как их устранить, это действительно правильный вектор обучения который поймут все кто имеет достаточный навык общения с ПК. Порекомендую этот курс всем кто захочет начать обучение по Web программированию!
Спасибо за видео, нформация усваивается легко. Задание на самом деле не такое уж и простое если не подгонять все c помощью margin. Использовал display:flex код получился следующий :
About Us Proin iaculis purus consequat sem cure.
July 2010 Our Humble Beginnings 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.
January 2011 Facing Startup Battles
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.
Чувак, хочу сказать тебе ОГРОМНОЕ СПАСИБО! Ты даешь в абсолютно доступной форме то, что раньше приходилось вытягивать из бесконечных и нудных спец. курсов. Самый лучший метод обучения иностранному языку - поместить "подопечного" в среду с носителями, так же и здесь. Сразу практически показал, рассказал теорию, по ходу ответил на вопросы. Спасибо большое и добра вам! 👍😁
Посмотрел 2 видео у Хауди (HTML и CSS) и половину этого видео.. и сверстал сайт, для которого сделал макет, но не знал, как сверстать. Огромное спасибо.
@@aslanaslan4394 Это всего лишь вход(пояснение) что такое HTML или CSS, что бы реально хорошо выучить HTML и CSS советую читать книги по этим двум языкам разметки, смотреть курсы, также есть хороший сайт по которому я выучил их хорошо htmlbook. Сейчас в это время очень большая хлынула волна тех кто хочет быть программистом. И по этому вход в сферу очень узок. Но если человек реально хороший программист, не гавнокодер то он понадобится всегда.
Чувааааааак...ты просто мне открыл глаза, смотрел несколько видео уроков.. уже начал унивать что я такой тупой..... Но вот чудо!!!! Я наткнулся на тебя. Меня озарение пробило. Начал изучать все как в тумане, очень много понятий и не известно от куда они взялись, а ты и историю рассказал и русскими словами объяснил все что было непонятно!!! Храни тебя Господь и пусть у тебя безошибочный код писал!!!
Друг, ты просто бесподобен. Только начинаю учить html и css, и этот урок максимально помогает во всем разобраться. Спасибо за твои старания. подписался
Насколько я знаю,в системах управления контентом ты далеко не всё сможешь сделать что мог бы сделать в html+css(их нужно учить оба 100%,они без друг-друга ничего не могут) и в придачу к этому функционал больше.Могу ошибаться тк с системами управления контентом толком не пользовался.
1) Системы управления контентом имеют ограниченный функционал и за отдельные функции и плагины придется платить либо единоразово либо ежемесячно по подписке. 2) Внутри они имеют очень много лишнего кода, так как его за вас пишет конструктор. Это видет к значительным потерям в производительности. 3) Для создания действительно сложного сайта знать HTML и CSS все же придется. И Wordpress и Drupal и любая другая CMS для этого имеют отдельные места где вставляется ваш код. Это основные минусы. Иными словами CMS - это костыль и может использоваться либо для ознакомления с веб-разработкой и быстрого тестирования, либо для создания простеньких сайтов-визиток которые будут сливаться с тысячами других.
Автор молодец! В отличии от других учителей обьясняет четко и понятно, все что пишет обьясняет, и самое главное не создает захламленную кашу в css как некоторые стримеры любят делать!
Андрей, у вас есть одно офигенное качество - вы так бескомпромиссно, емко и главное понятно объясняете, что просто одно удовольствие смотреть ваши верстки!
@@amalsuzuki9230 проблема в том, что вы по сути в это время я даже не понимал что такое программирование и верстка сайта )) сейчас же я перешёл в другую сферу )
Блин вот почему я не наткнулся на это видео в этапе обучения HTML and CSS сэкономил бы уйму времени) насколько же автор разжовывает каждый момент понятно и без лишних слов, респект таким как ты, это лучший канал из всех которые я встречал на ю тубе, в основном либо растянуто что от скуки умереть можно либо наоборот все по поля по лесам, а вы разбирайтесь сами) Спасибо за ваш труд)
Valery On html и css используются, потому что сайты, разработанные на них проще редактировать и в полном, управлять ими. На вордпрессе ты только вид редактируешь, а на этих языках сам код меняешь
Я за 3 часа вспомнил и подчерпнул нечто новое для себя, хоть крайний раз увлекался веб-программированием, версткой и веб-дизайном в далёком, лохматом 2007 году. Автор определённо молодец.
Красава, выключил музыку, раскошелился на микрофон и интеренет. Видео стало реально приятно смотреть если бы еще на чат не отвлекался я бы отнес видео к профессиональному пособию для изучения хтмл-цсс.
Прошёл курс у Sorax, теперь попал сюда. Скажу так: очень грамотно всё рассказано, не только для повторения понятно, но и по сути для начального изучения очень неплохо. Заложить в голове какие-то базовые представления о вёрстке, не пугая всеми этими цифрами да буквами у вас точно вышло.
Андрей хочу поблагодарить вас за очень хороший урок. Я немного знаком с html5 и css3. Учился на платных курсах Попова. Но в голове у меня была каша. После вашего урока всё стало на свои места. Блокнот верстальщика. Вы рекомендуете СаблаймТекст я использую Brackets плагин emmet там тоже есть всё работает. Насчёт стилей вы объяснили всё просто блестяще. У Попова в его курсе тоже есть стили, но там долго и нудно. Вы же всё объяснили просто отлично. Селектор свойство значение. Очень понравилось мне и как вы объяснили классы. Конешно это только начало CSS, дальше идут дочерние элементы и т.д и т.п но основа преподана блестяще. Насчёт экспорта картинок из макета есть и другой способ. Инструментом перемещение кликаете по картинке левой кнопкой мыши два раза. ОТкрывается слой с картинкой. Кликаете по нему уже правой кнопкой мыши. Выбираете опцию быстрый экспорт в png и сохраняете в нужную папку. Быстро и удобно :-)
это отличный урок не для чайников, а для тех, кто вроде-бы что-то умеет верстать, но по факту целой, красивой и современной строночки сверстать не может, потому что просто не понимает какой последовательностью это делает. Еще он полезен тем новичкам, кто несколько месяцев назад бросил, и сейчас наверстывает
Те, кто умеет верстать, знают что есть display:flex или inline-block вместо float:left и .clearfix В то время как новички будут продолжать мучаться с флоатами.
Сам только начинаю в эту сферу входить...много видел материала в ютубе по HTML\CSS и обычно о всем и не о чем)) Тут же Андрей все по полочкам разложил))Супер! Автору респект) А с меня лайк и подписка)
Крутой урок. Я его первый раз увидел 3 месяца назад, но тогда мой багаж знаний был совсем poor и последнюю секцию на ДЗ у меня так и не получилось сделать на флотах, но сейчас немного научился, многое стал понимать. И вот вчера я решил сверстать этот макет заново на Флексах. Последняя секция опять заставила задуматься - но вроде вышло. В следующий раза заверстаю его на Гридах Ловите ссылку на макет и код. - opan85.github.io/Projects/golden%20adaptiv/ github.com/Opan85/Projects/blob/master/golden%20adaptiv/index.html github.com/Opan85/Projects/blob/master/golden%20adaptiv/css/style.css Спасибо Андрей
Спасибо за видео,очень толково,на самом деле новичкам очень важно озвучивание и расшифровка каждого на написания и это дает больший рывок,чем чтение различной литературы,раньше думал,что долго буду изучать HTML,а тут уже на третьей неделе осваиваю CSS и JS.
Владислав Дидковский нтчего гениального. В Хтмл и css достаточно синтаксиса знать. А дальше просто гуглить правила/теги. Типа Как убрать подчеркивание у ссылки? И тд.
Здравствуйте Уважаемый Андрей. Передаю Вам свой привет из Азербайджана , из Солнечного Баку. Выражаю Вам свою глубокую благодарность за проделанную Вами такую кропотливую работу. Очень редко оставляю свой отзыв, но на этот не смог удержаться. Материал вёрстки был настолько разжёван и преподнесён до зрителя, что даже такой начинающий как я, всё превосходно осилил. Вы постарались максимально подробно, но при этом максимально кратко довести материал до зрителя и по моему личному мнению, это у Вас удалось очень хорошо. Но меня невольно возмущало то, что некоторые онлайн учащиеся предьявляли Вам какие-то претензии, типа очень долго, очень поздно и т.д. и т.п. Так вот хочу обратиться к ним, Уважаемые зрители автор нацелен довести контент материала для всех, ведь среди нас каждый имеет определённый уровень знаний, у кого-то начинающий у кого-то средний и если он будет обьяснять это на уровне зрителя со средним или более высоким уровнем, то остальная часть просто потеряет 3 часа времени на просмотр так и не освоив материал. Плюс ко всему Автор делает это БЕСПЛАТНО, не понимаю какие могут тут быть к нему претензии ? Он нам ничего не ДОЛЖЕН. Ходите на платные курсы в удобное для Вас время. С Уважением Гасан Джафаров.
Училась с нуля, всё поняла. Самое понятное видео из всех, что я пока видела на ютюбе. Спасибо большое автору видео) по последнему видео про лого и фриланс поняла, что Андрей хватался за вообще любую работу, вне зависимости умеет или нет (как я сейчас), и как классно, что он так с пониманием относится к начинающим дизайнерам/верстальщикам ^,^
В css последних версий пишется так: header{ background: url(./img/first-bg.jpg) no-repeat center top / cover; height: 600px; } а не с двоеточием:"url(../img/first-bg.jpg)" иначе фоновою картинку не найдет
@@АлексейМаксимов-о5й у меня оба варианта не работают. body, header { background: url(../img/first-bg.jpg) no-repeat center top / cover; height: 600 px; } только так
Отличная подача, спасибо за урок. Я еще порылся в интернете насчет Emmet'а. Нашел то, что в css он работает таким образом: w20 = width: 20px; bg = background: #000; db = display: block; Очень понравился плагин, теперь только с ним учусь)
Ага, тоже так, уже 4:10утра, а я на 2:18:22 на видео, пытаюсь разобраться, почему во втором "section" последнее лого закинуло на край страницы... И все уже проверил, все в точности делаю и ни фига..
@@dimitrijsosnovsky1851 у тебя возможно либо clearfix неправильно прописан либо .соntainer либо если там position absolute значит там ошибка P.s float устарел давно, на будущее, забудь про флоат учи флексбокс и грид
unstoppable ` буду сегодня, на свежую голову смотреть. Открывал через консоль, там задан разный контейнер, разные параметры на первую секцию и на вторую. Не знаю с чем это связано, но буду пробовать исправить. Спасибо)
@@dimitrijsosnovsky1851 я всегда при проблеме верстку в devtools проверяю, ф12 в браузере, сразу все понятно становится, если не знал посмотри, там много функций и все полезны и их легко понять
Спасибо Андрей! Очень хорошо все рассказано было. Я за эти три часа, больше понял, чем за целый курс HTML что я ходил 8 дней по три часа )) И сделал сайт по этому видео, а на курсах так ничего и не получалось. Конечно не знаю как вашим ребятам онлайн было, а я постоянно на паузу ставил и проверял код на наличие ошибок.
В институте по предмету к концу семестра надо сделать сайт, а как их писать ничерта не учат, благодаря данному видео всё понятно стало, огромного спасибо!
*Важное:* background: url(../img.png) no-repeat center top / cover; sans-serif - любой другой подходящий шрифт margin: 0 auto; - элемент всегда по центру
@@kubiknoobik7856 тогда auto применяется к всем значениям, и к top и к bottom, и к left, а что бы сделать контейнер по центру екрана достаточно сделать равный отступ с лева и справа, а сверху и с низу по 0
Огромное спасибо ,2 дня пытаюсь понять что к чему,по видосам и т.п,но не получалось. Решил посмотреть как на практике верстают сайт, и наткнулся на этот стрим. Автору благодарность,азы выучил!
July 2010 Our Humble Beginnings 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.
January 2011 Our Humble Beginnings 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.
December 2012 Enter The Dark Days 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.
february 2014 Our Triumph 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.
Крайне плохой подход, выравнивать 3 блока по центру через флоаты и мержины (костыли полнейшие). Достаточно родителю прописать: display: flex; justify-content: space-between; align-items: center; Я понимаю что я с 2018, но видео залито в 2017, а значит браузеры прекрасно его понимают. Зачем заведомо учить делать плохо? + Отпадают все флоаты + Отпадают все фиксы багов + В дальнейшем легко адаптируется под мобильные и т.п + Намного меньше кода + Уверенность в том что блок стоит идеально по центру
Кто-то: Ютюб , а ты разнообразен? Ютюб :\хауди хо: как выучить html за час Второе видео : как выучить css за час Wayp: как выучить html и css за два часа
Годный контент Я уже много раз начинаю учить верстку сайтов Постоянно начинал и постоянно бросал Сделаю всё чтоб не бросить в этот раз Верстка сайтов это крутое достойное занятие . Которые приносит приличный доход !
Ролик хороший, познавательный и хорошо изложенный. Для новичков будет понятна общая концепция верстки, но на протяжении всего ролика было столько мелких нюансов про float'ы рассказано, что проще и правильнее было бы объяснить и научить строить сетку на flex'ах. А float'ы оставить уже в покое и использовать их только по назначению( для тех кто не вкурсе это обтекание текста вокруг зафлоаченого блока). Не претендую на автора ролика лучше чем этот, просто немного обоснованной критики. Спасибо за твои работы, сам поднимал свои знания в веб-дизайне по твоим роликам.
Алексею огромное спасибо. Выложу и я свой вариант последнего блока (как и говорил Алексей, все удалось реализовать с помощь знаний, изложенных в ролике): HTML:
About us
Proin iaculis purus consequat sem cure.
July 2010Our Humble Beginnings
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.
January 2011Facing Startup Battles
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 aenean rhoncus posuere odio in tincidunt.
December 2012Enter The Dark Days
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.
February 2014Our Triumph
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 aenean.
1:07 - экспорт img из Adobe, изначально преобразовывая в смарт объект 1:16:00 - оформление header 1:21:22 - обнуление отступов у body 1:40:13 - logo 1:40:56 - header menu 1:54:30 - clearfix 1:58:48 - button in header
Андрей, спасибо Вам огромное! Верстала за вами свой первый в жизни лендинг в Visual Studio Code)) Это агонь, все четко, понятно, доступно и круто! Спасибо что прокачали мой мозг!))
+ была такая же проблема, работаю на маке, думал из-за того что путь как то не правильно указал - оказалось все проще. Т.к. я скачал архив к видео-уроку, я из этого архива скопировал картинки в папку на рабочий стол, и получилось так что одинаковые файлы с одинаковыми названиями были в 2-х разных местах ) надо просто указывать картинку, чтобы она была одна с таким названием и в одной определенной папке. У меня все получилось ;)
Мне кажется не стоит заверстывать первый экран в . Правильнее такая структура section>container>header Section>container Section>container Section>container footer>container
НЕ РАБОТАЕТ 1) Ошибка №1 .clearfix:after { content: ""; display: table; width: 100%; clear: both; НАДПИСЬ: "Welcome To Our Studio!" прилипает сверху! Потратил несколько часов, переписал код дважды. Я не знаю почему автор пишет эти данные в класс ".clearfix" и по какой причине оно у него работает! По факту класс ".clearfix" вобще не нужен. 2) Ошибка №2 Спустя пару часов, когда я разобрался с первой ошибкой, через 30 секунд я столкнулся со следующей Ты добаляешь в ".titles__first" - margin-top: 180px; и у тебя текст сдвигается вниз. На самом деле он нехуя не сдвигается, а стоит как раньше. Короче на 1:57:54 если повторять все за тобой не работает ничего, делайте так: .titles__first { color: white; font-size: 40px; text-transform: uppercase; text-align: center; margin-top: 175px; } .titles { content: ""; display: table; width: 100%; clear: both; }
Почему я не смог добавить вашу картинку (first-bg.img) в свой index.html/main.css. Я создавал их в самом начале, уже только потом скачал материалы проекта чтобы взять от туда картинки. Я пробовал просто добавить их в папку img, пробовал перезапускать/перезаписывать файлы по новой. Но картинки я в браузере так и не увидел. Меня просто бомбануло. Почему так? Взяв файлы индекса и ксс с вашего проекта картинка появилась. Но так там код один и тот же, все папки, так же само, те же...
Перебрал много видео на эту тему. В этом, самое доступное изложение, минимум слов паразитов, проф. сленга и т.д.. Автору безмерное спасибо за титаническую работу.
у тебя блоки разной высоты явно заданные. мне кажется луше если они будут определяться по содержимому либо иметь все фиксированную но одинаковую высоту. куча разных отступов для всех елементов. обрати внимание на то, что картинки нужно выровнять по центру и задавать им отступ то слева то справа не очень хорошо. желательно вникать в суть а не просто добиться идентичного отображения. Можешь глянуть и раскритиковать что получилось у меня, очется услышать мнение со стороны HTML
About Us Proin iaculis purus consequat sem cure.
July 2010 Our Humble Beginnings 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.
January 2011 Facing Startup Battles 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.
December 2012 Enter The Dark Days 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.
february 2014 Our Triumph 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.
July 2010 Our Humble Beginnings 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.
January 2011 Facing Startup Battles 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.
December 2012 Enter The Dark Days 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.
february 2014 Our Triumph 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.
Занятие очень хорошее. Давно учила верстку в универе и ШАГе долго и нудно, а тут раз и все это за 3 часа и практика и готовый код и все сразу и без устаревших таблиц. Супер, спасибо, мне очень понравилось
Блин вот честно, лучше бы это дз он сам проделал, потому как на мой взгляд это новые принципы позиционирования, о которых не указывалось ранее. Лучше бы он это рассказал, а домашним заданием дал те 3 картинки которые он последние делал. Сейчас сижу и мучаюсь как это сделать картинку по центру, да так чтобы ее текст обвивал с разных сторон. Потому как text-aling: center и float: left совместно не работают
Честно говоря, думал будет очередное унылое.... повествование. И так и было 1-й час. Но зато потом пошло золото. Очень понравилось. Правда, затянуто очень.... И про рабочих, и про перерыв можно было вырезать напрочь..... Лайкосег. Прошёл платный курс по HTML/CSS и всё равно в этом видео узнаю МНОГО нового. Как то знания структурируюся. Но норм видео на ютубе немного. Нужно копаться, чтобы найти что то ДЕЙСТВИТЕЛЬНО дельное.
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](http://i.ytimg.com/vi/357_BAchn4w/mqdefault.jpg)
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](/img/tr.png)
25:30 В секции содержится ряд технических тегов которые нужны браузеру как инструкции, которые помогают отображать информацию.
28:57 Внутри содержится все содержимое страницы, все то, что отображается на странице.
29:40 Самые распространенные тег и почему
Т.е. теги, под определенный тип контента.
31:13 заголовок
34:41 параграф . контент в 2-3 строчки.
35:21 для создания ссылки
36:56 для картинок
39:18 используется, чтобы выделить что-либо где-либо внутри текста
40:30 для переноса строки, т.к. в html нет такого, текст идет как есть
41:35 (не маркированный список) выводится как списки
47:10 Начал говорить про CSS
50:33 Подключение CSS (каскадные таблицы стилей)
52:40 Из чего вообще состоит синтаксис CSS
59:14 как давать свойства CSS отдельно каждому тегу
1:03:46 этапы после верстки, если нужно программирование, или интеграция системы управления
1:04:35 С чего начинается верстка
1:05:05 как взять картинки из макета
1:08:42 когда использовать jpeg когда png. Если под картинкой будет фон, то png, т.к. только в png возможен прозрачный фон
1:11:25 div используется там, где вы не можете охарактеризовать содержимое, где не можете применить специальный тег. Теперь вместо div тег
1:12:33 первый экран оборачивать в тег , а последний
1:13:26 class="container"
1:17:46 no-repeat - запрещаем повторение картинки(т.е. при изменении размера экрана картинка может повториться, т.к. размер картинки может быть меньше). center - положение по горизонтали.
top - положение по вертикали, примкнуть к верхнему краю. / cover - (директива) чтобы картинка всегда растягивалась на всю ширину экрана
1:18:34 высота container зависит от его содержимого
1:21:25 padding для обнуления отступов
1:23:40 запрашиваем на компе пользователя шрифт Arial, если его нету то включается - sans-serif (шрифты без засечек)
1:24:55 весь процесс верстки идет сверху вниз, слева направо
1:29:00 container один раз описал в CSS и в HTML используем, чтобы не было дублирующего кода
1:32:30 border - свойство которое описывает границу элемента
1:33:00 чтобы любой элемент поставить по центру экрана
1:34:30 что такое padding - внутренний отступ текста от краев(по часовой (сверху, справа, снизу, слева)) и margin
1:36:30 чтобы длина элемента не изменялась при добавлении padding
1:39:28 margin - отступ элемента снаружи
1:41:00 меню в стандарте HTML5 принято окружать тегом , а уже внутри этого тега открывать список
когда верстаем и не знаем какой будет ссылка, в атрибуте href прописывается хештег
1:43:20 работа со списками, как поставить в одну линию
1:47:00 text-decoration: none; убрать стандартное нижнее подчеркивание ссылок
когда есть несколько элементов выстроенные в одну строку с помощью float-left, float-right, рекомендация - обернуть эту строку в общий контейнер
1:54:05 text-align: center; для того чтобы поставить текстовый блок по центру.
1:54:35 Логотип и меню мы обернули в один единый контейнер чтобы… из-за float-left, float-right (высота контейнера будет равно нулю) class clearfix
1:58:00 у тегов h1 и далее, по умолчанию есть отступы, чтобы их обнулить margin 0
1:58:50 (Делаем кнопки) кнопки я чаще всего делаю тегом
2:02:14 высоту секции header которую мы задали 600px - неправильно, высота должна определяться автоматически
2:03:38 Начало верстки второго экрана
2:16:20 Псевдо класс для, для того чтобы через этот класс в CSS обращаться к элементу\там в HTML, чтобы не добавлять в HTML уникальный класс. services_item:last-child
2:18:44 line-height (высота строки) подбор значения в единицах измерения (em)
2:20:03 Селектор id в HTML, обращение к нему в CSS через #....
2:20:20 чем отличается id от class. Оба используют для обращения из CSS, но id еще можно использовать что обратиться к нему из JS (двух одинаковых (с одинаковым именем\значением) id на странице не может быть)
2:24:14 если у вас есть элементы у которых float(ы) - оберните их в контейнер и задайте clearfix
2:29:44 способ сделать границу первого экрана всегда по экрану устройства с которого зашли\просматриваем страницу
2:30:38 про clearfix объяснения что это
2:34:28 display block понятия как строчный и блочный(столбиком) элементы. Теги и другие -- они строчные. (их длина равна длине контента который внутри них)
2:36:54 Длина блочных элементов по умолчанию равна 100% доступной области. Чтобы ими управлять, задается либо float left, либо display inline block - но он может не сработать в опере
2:39:00 любой блочный элемент можно сделать строчным и наоборот
2:40:15 чтобы сделать у всех элементов границы * { border: 1px solid red; }
2:41:20 какую cms использовать ( modx )
2:43:50 его курс - день верстальщика: про адаптивную верстку
2:45:00 дальше и до конца продажа своего коучинга
спасибо, очень помогло)
🙏
ого))) вот это труд))) А на счет конструкторов он прав?) или инфа уже устарела? 2:32:00
Ты 👏 супер ) респект
Огромное спасибо!
Прошло уже 2 года, а тебе все респектуют чувак.
ДА ХРАНИ ТЕБЯ ГОСПОДЬ, ДАЙ БОЖЕ
на 2020г. конечно костыльная вёртстка в какой то степени, но смотрю от начала и до конца.
@@dinir1000 а чем она костыльная? Я новичек, как я знаю float давно устарел, вместо него можно использовать display
@587 да, я это имел ввиду
Для начинающих в 2021, это будет актуально?
Автор все дает бесплатно, с картинками и примерами. Ну просто без слов ОГРОМНОЕ СПАСИБО!
Годный контент
Вот это тут и безценно!
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
Одно из самых лучших видео которое я просмотрела по данному запросу, не скажу что прям для начинающих, но для человека знающего самые банальные азы - просто идеально, все четко понятно и самое главное без умалчивания, спасибо большое за это замечательное видео.
За всё время что искал как верстать сайты натыкался на сплошные платные курсы где всё объяснялось заумными словами и половины просто не понимал здесь всё очень на доступном языке аплодирую стоя
Это просто ПРЕВОСХОДНЫЙ мастер класс!!! Я пересмотрел несколько туториалов по верстке, но этот просто не сравним ни с одним! Тут информация подается от программиста к обычному человеку понятными для всех словами и терминами, а не как у некоторых он программиста к программисту, очень коротко и скудно (как будто мы всё знаем и понимаем и это нам не надо). Каждый пример разбирается, объясняется и сразу применяется на практике со всеми "подводными" камнями и как их устранить, это действительно правильный вектор обучения который поймут все кто имеет достаточный навык общения с ПК. Порекомендую этот курс всем кто захочет начать обучение по Web программированию!
Спасибо за видео, нформация усваивается легко. Задание на самом деле не такое уж и простое если не подгонять все c помощью margin. Использовал display:flex код получился следующий :
About Us
Proin iaculis purus consequat sem cure.
July 2010
Our Humble Beginnings
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.
January 2011
Facing Startup Battles
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.
CSS:
#about-us {
margin-bottom: 100px;
}
.about-us-block h3 {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.about-us-block h4 {
font-size: 18px;
font-weight: bold;
text-transform: capitalize;
margin-bottom: 10px;
margin-top: 0px;
}
.about-us-block p {
color: #777777;
font-size: 14px;
}
.about-us-block {
margin-bottom: 100px;
display: flex;
justify-content: space-around;
}
.about-us-block-1-3-text {
width: 300px;
text-align: right;
}
.about-us-block-1-3-pic {
text-align: center;
}
.about-us-block-1-3-box {
width: 300px;
}
.about-us-block-2-4-pic {
flex:1;
order:2;
text-align: center;
}
.about-us-block-2-4-text {
flex:1;
order:3;
text-align: left;
margin-right: 0px;
}
.about-us-block-2-4-box {
width:300px;
}
Чувак, хочу сказать тебе ОГРОМНОЕ СПАСИБО! Ты даешь в абсолютно доступной форме то, что раньше приходилось вытягивать из бесконечных и нудных спец. курсов. Самый лучший метод обучения иностранному языку - поместить "подопечного" в среду с носителями, так же и здесь. Сразу практически показал, рассказал теорию, по ходу ответил на вопросы. Спасибо большое и добра вам! 👍😁
Посмотрел 2 видео у Хауди (HTML и CSS) и половину этого видео.. и сверстал сайт, для которого сделал макет, но не знал, как сверстать. Огромное спасибо.
Если ты будешь смотреть видео где учат
по часу, то не быть тебе программистом(
@@kirillbusted4279 а какие видео надо?
@@aslanaslan4394 Это всего лишь вход(пояснение) что такое HTML или CSS, что бы реально хорошо выучить HTML и CSS советую читать книги по этим двум языкам разметки, смотреть курсы, также есть хороший сайт по которому я выучил их хорошо htmlbook. Сейчас в это время очень большая хлынула волна тех кто хочет быть программистом. И по этому вход в сферу очень узок. Но если человек реально хороший программист, не гавнокодер то он понадобится всегда.
Чувааааааак...ты просто мне открыл глаза, смотрел несколько видео уроков.. уже начал унивать что я такой тупой..... Но вот чудо!!!! Я наткнулся на тебя. Меня озарение пробило. Начал изучать все как в тумане, очень много понятий и не известно от куда они взялись, а ты и историю рассказал и русскими словами объяснил все что было непонятно!!! Храни тебя Господь и пусть у тебя безошибочный код писал!!!
Друг, ты просто бесподобен.
Только начинаю учить html и css, и этот урок максимально помогает во всем разобраться.
Спасибо за твои старания.
подписался
Как успехи?)
Автору огромное спасибо! По теме верстки пока не видел более подробного видео, где всё так хорошо объясняется. Все просто и понятно.
1:04:23 - конец теории, начало верстки
твоё место в раю, приятель !
Сяб,братан
Насколько я знаю,в системах управления контентом ты далеко не всё сможешь сделать что мог бы сделать в html+css(их нужно учить оба 100%,они без друг-друга ничего не могут) и в придачу к этому функционал больше.Могу ошибаться тк с системами управления контентом толком не пользовался.
Если не знаешь HTML и CSS не сверстаешь сайт, даже шаблонный. Т.к html и css самое изичное
1) Системы управления контентом имеют ограниченный функционал и за отдельные функции и плагины придется платить либо единоразово либо ежемесячно по подписке.
2) Внутри они имеют очень много лишнего кода, так как его за вас пишет конструктор. Это видет к значительным потерям в производительности.
3) Для создания действительно сложного сайта знать HTML и CSS все же придется. И Wordpress и Drupal и любая другая CMS для этого имеют отдельные места где вставляется ваш код.
Это основные минусы.
Иными словами CMS - это костыль и может использоваться либо для ознакомления с веб-разработкой и быстрого тестирования, либо для создания простеньких сайтов-визиток которые будут сливаться с тысячами других.
Автор молодец! В отличии от других учителей обьясняет четко и понятно, все что пишет обьясняет, и самое главное не создает захламленную кашу в css как некоторые стримеры любят делать!
Андрей, у вас есть одно офигенное качество - вы так бескомпромиссно, емко и главное понятно объясняете, что просто одно удовольствие смотреть ваши верстки!
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
@@amalsuzuki9230 проблема в том, что вы по сути в это время я даже не понимал что такое программирование и верстка сайта )) сейчас же я перешёл в другую сферу )
@@jurassicnick6962 получается вы смотрели и ничего не понимала? В какой сфере вы работаете?
Блин вот почему я не наткнулся на это видео в этапе обучения HTML and CSS сэкономил бы уйму времени) насколько же автор разжовывает каждый момент понятно и без лишних слов, респект таким как ты, это лучший канал из всех которые я встречал на ю тубе, в основном либо растянуто что от скуки умереть можно либо наоборот все по поля по лесам, а вы разбирайтесь сами) Спасибо за ваш труд)
автор огромный молодец, очень доступно объяснил)) спасибо
куку
Асхаб Такаев и почему же?
Что случилось? Расскажи, пожалуйста.
еще добавь что он правильно написал название за 2 часа. бо длилось бля долго
Valery On html и css используются, потому что сайты, разработанные на них проще редактировать и в полном, управлять ими.
На вордпрессе ты только вид редактируешь, а на этих языках сам код меняешь
Я за 3 часа вспомнил и подчерпнул нечто новое для себя, хоть крайний раз увлекался веб-программированием, версткой и веб-дизайном в далёком, лохматом 2007 году. Автор определённо молодец.
какой же автор молодец! все понятно и четко, крепкого тебе здоровья, доброе дело делаешь!!! таким людям всегда в жизни вознаграждается их добро!!!
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
Очень боялся верстки и CSS в частности. Но так хорошо объяснили, что теперь хоть знаю, что делать, что тыкать, и что гуглить.
Спасибо.
Красава, выключил музыку, раскошелился на микрофон и интеренет. Видео стало реально приятно смотреть если бы еще на чат не отвлекался я бы отнес видео к профессиональному пособию для изучения хтмл-цсс.
П
Прошёл курс у Sorax, теперь попал сюда. Скажу так: очень грамотно всё рассказано, не только для повторения понятно, но и по сути для начального изучения очень неплохо. Заложить в голове какие-то базовые представления о вёрстке, не пугая всеми этими цифрами да буквами у вас точно вышло.
Спасибо Андрей, очень профессионально и грамотно объясняешь! Будем ждать твоих новых видео кастов
Андрей хочу поблагодарить вас за очень хороший урок. Я немного знаком с html5 и css3. Учился на платных курсах Попова. Но в голове у меня была каша. После вашего урока всё стало на свои места. Блокнот верстальщика. Вы рекомендуете СаблаймТекст я использую Brackets плагин emmet там тоже есть всё работает. Насчёт стилей вы объяснили всё просто блестяще. У Попова в его курсе тоже есть стили, но там долго и нудно. Вы же всё объяснили просто отлично. Селектор свойство значение. Очень понравилось мне и как вы объяснили классы. Конешно это только начало CSS, дальше идут дочерние элементы и т.д и т.п но основа преподана блестяще. Насчёт экспорта картинок из макета есть и другой способ. Инструментом перемещение кликаете по картинке левой кнопкой мыши два раза. ОТкрывается слой с картинкой. Кликаете по нему уже правой кнопкой мыши. Выбираете опцию быстрый экспорт в png и сохраняете в нужную папку. Быстро и удобно :-)
это отличный урок не для чайников, а для тех, кто вроде-бы что-то умеет верстать, но по факту целой, красивой и современной строночки сверстать не может, потому что просто не понимает какой последовательностью это делает. Еще он полезен тем новичкам, кто несколько месяцев назад бросил, и сейчас наверстывает
Те, кто умеет верстать, знают что есть display:flex или inline-block вместо float:left и .clearfix
В то время как новички будут продолжать мучаться с флоатами.
@@izvarzone Жизнь - это страдания, только через мучения мы можем познать истину и заслужить лучшую жизнь.
@@izvarzone 2:38:06 послушай минуту мнение автора на этот счет)
Вроде такая игра слов, да?
Наверстывает верстку
Макс, ну ты прям предложение про меня написал)
Сам только начинаю в эту сферу входить...много видел материала в ютубе по HTML\CSS и обычно о всем и не о чем)) Тут же Андрей все по полочкам разложил))Супер! Автору респект) А с меня лайк и подписка)
Крутой урок. Я его первый раз увидел 3 месяца назад, но тогда мой багаж знаний был совсем poor и последнюю секцию на ДЗ у меня так и не получилось сделать на флотах, но сейчас немного научился, многое стал понимать. И вот вчера я решил сверстать этот макет заново на Флексах. Последняя секция опять заставила задуматься - но вроде вышло. В следующий раза заверстаю его на Гридах Ловите ссылку на макет и код. - opan85.github.io/Projects/golden%20adaptiv/
github.com/Opan85/Projects/blob/master/golden%20adaptiv/index.html
github.com/Opan85/Projects/blob/master/golden%20adaptiv/css/style.css
Спасибо Андрей
зачем ссылка на макет и код? оО
Ты не адаптировал под мобильные телефоны, советую доделать проект до конца.
@Анна Горностаева люди без терпения оплатите курс, люди без навыков делайте на похожем своем (скачанном) макете
Этот чувак входит в топ с двух ног, мало кто умеет так четко преподносить материал) Смотреть и слушать тебя, одно удовольствие
Спасибо за видео,очень толково,на самом деле новичкам очень важно озвучивание и расшифровка каждого на написания и это дает больший рывок,чем чтение различной литературы,раньше думал,что долго буду изучать HTML,а тут уже на третьей неделе осваиваю CSS и JS.
Ты гений.
Ну как теперь успехи?)
Владислав Дидковский нтчего гениального. В Хтмл и css достаточно синтаксиса знать. А дальше просто гуглить правила/теги. Типа Как убрать подчеркивание у ссылки? И тд.
А позиционирование? Адаптивность? Простого знания тегов недостаточно, нужно глубоко понимать все.
Guru Dk в идеале вообще в программировании шарить, чтобы js не наказал потом очень сильно)
Неплохо!) это пока лучшее видео, которое я нашла в интернете) очень доступно и понятно)
я за эти 3 часа не только все повторил, но еще и много чего выучил/понял.... Апплодирую стоя.
Valery On до самого недоходит
Для начала скачай программу, в которой будешь верстать.
Потом выучи html, css. Ну а позже пробуй!)
Удачи!)
Скиньте макет! Именно такой как на видео у кого есть)? Пожалуйста
Скиньте макет! Именно такой как на видео у кого есть)? Пожалуйст
Al Lu
только что
omd1982@yandex.by
На моём канале тоже есть уроки по css! Зайди поглядите! Может подпишитесь
нереально помогло.... лучше чем все уроки и курсы вместе взятые
Спасибо за прекрасный материал, очень доходчиво
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
Огромный респект тебе автор! Еще не видел таких потрясающих обучающих видео с подробным разжевыванием. Столько вещей прояснилось.
Первые 5 минут: - Привет ребята ... привет, привет, ребя-тааа, привет! Аааааа-ааааааааа
Здравствуйте Уважаемый Андрей. Передаю Вам свой привет из Азербайджана , из Солнечного Баку.
Выражаю Вам свою глубокую благодарность за проделанную Вами такую кропотливую работу.
Очень редко оставляю свой отзыв, но на этот не смог удержаться.
Материал вёрстки был настолько разжёван и преподнесён до зрителя, что даже такой начинающий как я, всё превосходно осилил.
Вы постарались максимально подробно, но при этом максимально кратко довести материал до зрителя и по моему личному мнению, это у Вас удалось очень хорошо.
Но меня невольно возмущало то, что некоторые онлайн учащиеся предьявляли Вам какие-то претензии, типа очень долго, очень поздно и т.д. и т.п.
Так вот хочу обратиться к ним, Уважаемые зрители автор нацелен довести контент материала для всех, ведь среди нас каждый имеет определённый уровень знаний, у кого-то начинающий у кого-то средний и если он будет обьяснять это на уровне зрителя со средним или более высоким уровнем, то остальная часть просто потеряет 3 часа времени на просмотр так и не освоив материал.
Плюс ко всему Автор делает это БЕСПЛАТНО, не понимаю какие могут тут быть к нему претензии ? Он нам ничего не ДОЛЖЕН. Ходите на платные курсы в удобное для Вас время.
С Уважением Гасан Джафаров.
Блин спасибо, благодаря тебе я пишу простенькие сайты)
Училась с нуля, всё поняла. Самое понятное видео из всех, что я пока видела на ютюбе. Спасибо большое автору видео) по последнему видео про лого и фриланс поняла, что Андрей хватался за вообще любую работу, вне зависимости умеет или нет (как я сейчас), и как классно, что он так с пониманием относится к начинающим дизайнерам/верстальщикам ^,^
то чувство, когда смотрел урок и на одном моменте взял и до верстал сам до конца :)
Золотой ты человек. Спустя столько лет видео твоё лучшее. Надеюсь ты получаешь от TH-cam вознаграждение от количества просмотров.
Интересует розработка сайтов? Тогда тебе на neoseo.com.ua
В css последних версий пишется так:
header{
background: url(./img/first-bg.jpg) no-repeat center top / cover;
height: 600px;
}
а не с двоеточием:"url(../img/first-bg.jpg)" иначе фоновою картинку не найдет
Огромное спасибо. Я столько мучался с этой ерундой
спс,помог.
@@АлексейМаксимов-о5й у меня оба варианта не работают.
body,
header {
background: url(../img/first-bg.jpg) no-repeat center top / cover;
height: 600 px;
}
только так
@@АнжелікаДубовіченко нашли решение?
./ - если файл в этой же папке , ../- выйти на уровень выше. А не css последней версии
лучший урок по верстке для начинающих!!!!! Спасибо!!!
Хороший информативный материал. Честно! На коучинг, конечно же, не запишусь)))
Автор у вас талант объяснять! Очень много нового почерпнула для себя. Огромнейшее Вам спасибо!
Отличная подача, спасибо за урок. Я еще порылся в интернете насчет Emmet'а. Нашел то, что в css он работает таким образом:
w20 = width: 20px;
bg = background: #000;
db = display: block;
Очень понравился плагин, теперь только с ним учусь)
спасибо )
Супер урок, редко такое встретишь, много полезной инфы и фишек! Мои апплодисменты.
Сижу в 3 ночи учусь верстать)) делать то больше нечего в это время)
Ага, тоже так, уже 4:10утра, а я на 2:18:22 на видео, пытаюсь разобраться, почему во втором "section" последнее лого закинуло на край страницы...
И все уже проверил, все в точности делаю и ни фига..
@@dimitrijsosnovsky1851 у тебя возможно либо clearfix неправильно прописан либо .соntainer либо если там position absolute значит там ошибка
P.s float устарел давно, на будущее, забудь про флоат учи флексбокс и грид
unstoppable ` буду сегодня, на свежую голову смотреть.
Открывал через консоль, там задан разный контейнер, разные параметры на первую секцию и на вторую.
Не знаю с чем это связано, но буду пробовать исправить. Спасибо)
@@dimitrijsosnovsky1851 я всегда при проблеме верстку в devtools проверяю, ф12 в браузере, сразу все понятно становится, если не знал посмотри, там много функций и все полезны и их легко понять
Я просто не могу спать, а учиться надо
Спасибо Андрей! Очень хорошо все рассказано было. Я за эти три часа, больше понял, чем за целый курс HTML что я ходил 8 дней по три часа )) И сделал сайт по этому видео, а на курсах так ничего и не получалось. Конечно не знаю как вашим ребятам онлайн было, а я постоянно на паузу ставил и проверял код на наличие ошибок.
Пока если вы до конца не понимаете, просто поймите(с)
1:14:06
Великие фразы )))
полчаса смеялся
вырвано из контекста
Oo qartveli?
Зашел в тупик по CSS, опустились руки. После видео беру курс только вперед! Спасибо большое!
Отличное видео, большое спасибо тебе за это!
В институте по предмету к концу семестра надо сделать сайт, а как их писать ничерта не учат, благодаря данному видео всё понятно стало, огромного спасибо!
*Важное:*
background: url(../img.png) no-repeat center top / cover;
sans-serif - любой другой подходящий шрифт
margin: 0 auto; - элемент всегда по центру
а зачем тут "0", если можно просто прописать margin: auto;???тоже самое же
@@kubiknoobik7856 тогда auto применяется к всем значениям, и к top и к bottom, и к left, а что бы сделать контейнер по центру екрана достаточно сделать равный отступ с лева и справа, а сверху и с низу по 0
Огромное спасибо ,2 дня пытаюсь понять что к чему,по видосам и т.п,но не получалось.
Решил посмотреть как на практике верстают сайт, и наткнулся на этот стрим.
Автору благодарность,азы выучил!
Если кто уже в базисе чуть шарит, мотайте на 1:13:05
спасибо))
Это просто офигенно.
Здоровья и всех благ, а главное удачи!
Конечно кайф когда зашёл на этот видос в 2к19 , а тут позиционируется через float когда есть flexbox или та же grid system
а ничего что они все опционально необходимы?
@@noname7753 а ничего что в данный момент вы не увидите сайт который будет сделан на float ?
@@noname7753 Лучше вообще на таблицах верстать
Огромное спасибо!!! это круто) прекрасный материал, отличная подача, дикция и все вообще супер
самостоятельную часть сделал так:
About Us
Proin iaculis purus consequat sem cure.
July 2010
Our Humble Beginnings
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.
January 2011
Our Humble Beginnings
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.
December 2012
Enter The Dark Days
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.
february 2014
Our Triumph
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.
© Copyright 2014 FreebiesXpress.com
>
//////////////////////////////////////////////////////////////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;
}
Премного благодарен!
Спасибо!
Чучуть доправил для текстов
.about {
padding-top: 80px;
width: 1000px;
margin-left: 260px;
}
.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;
}
@@Володимир-ж3й9в чучуть не так в 2019 есть flex u grid с ним лучше работать и забудь про display:inline-block
@@matthe1308 В ютубе😁
я за час теории выучил больше чем за 1 день чтения книжки по html))Большое спосибо!
Крайне плохой подход, выравнивать 3 блока по центру через флоаты и мержины (костыли полнейшие). Достаточно родителю прописать:
display: flex;
justify-content: space-between;
align-items: center;
Я понимаю что я с 2018, но видео залито в 2017, а значит браузеры прекрасно его понимают. Зачем заведомо учить делать плохо?
+ Отпадают все флоаты
+ Отпадают все фиксы багов
+ В дальнейшем легко адаптируется под мобильные и т.п
+ Намного меньше кода
+ Уверенность в том что блок стоит идеально по центру
Молодец хоть тут есть нормальные
спасибо
А подскажите пожалуйста глупому человеку...куда конкретно это прописывать, а то что уже только не делала, точнее куда уже только это не копировала..:(
@@lidawool3151 та очень долго
@@lidawool3151 напиши в ютуб сss flex
Круто. На понятном языке, что сейчас не часто встретишь на просторах ютуба. ЛАЙК и ПОДПИСКА!
Хз зачем смотрю, ибо нихерашечки не понимаю. Но лайк поставил
Зачем смотрю если и так пишу сайты с нуля... но для новичков инфа годная. Молодец.
Иногда полезно посмотреть такие видео даже опытным верстальщикм)
Кто-то: Ютюб , а ты разнообразен?
Ютюб :\хауди хо: как выучить html за час
Второе видео : как выучить css за час
Wayp: как выучить html и css за два часа
Годный контент
Я уже много раз начинаю учить верстку сайтов
Постоянно начинал и постоянно бросал
Сделаю всё чтоб не бросить в этот раз
Верстка сайтов это крутое достойное занятие .
Которые приносит приличный доход !
Ролик хороший, познавательный и хорошо изложенный. Для новичков будет понятна общая концепция верстки, но на протяжении всего ролика было столько мелких нюансов про float'ы рассказано, что проще и правильнее было бы объяснить и научить строить сетку на flex'ах. А float'ы оставить уже в покое и использовать их только по назначению( для тех кто не вкурсе это обтекание текста вокруг зафлоаченого блока). Не претендую на автора ролика лучше чем этот, просто немного обоснованной критики.
Спасибо за твои работы, сам поднимал свои знания в веб-дизайне по твоим роликам.
лол, я как раз смотрю этот ролик из-за того что тут не по сеткам, так как на bootstrap умею а с float нет, так что основы бл
Не то слово - умница!!!!!!! Спасибо большое))) всё чётко, понятно, без заумностей))))
Кто смог доделать концовку? я не знаю как расставить все картинки по центра и по краям поставить текст слева и справа
Алексею огромное спасибо.
Выложу и я свой вариант последнего блока (как и говорил Алексей, все удалось реализовать с помощь знаний, изложенных в ролике):
HTML:
About us
Proin iaculis purus consequat sem cure.
July 2010Our Humble Beginnings
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.
January 2011Facing Startup Battles
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 aenean rhoncus posuere odio in tincidunt.
December 2012Enter The Dark Days
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.
February 2014Our Triumph
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 aenean.
© Copyright 2014 FreebiesXpress.com
CSS:
.about__us {
margin-top: 80px;
}
.text {
text-transform: uppercase;
}
.about__left {
float: right;
margin-top: 15px;
margin-left: 45px;
margin-bottom: 86px;
}
.about__us__facts__left {
width: 555px;
float: left;
text-align: right;
}
.about__us__facts__left h3 {
font-size: 18px;
margin-bottom: 5px;
}
.about__us__facts__left p {
color: #777777;
font-size: 14px;
line-height: 1.55em;
}
.about__right {
float: left;
margin-top: 15px;
margin-right: 45px;
margin-bottom: 86px;
}
.about__us__facts__right {
width: 555px;
float: right;
text-align: left;
}
.about__us__facts__right h3 {
font-size: 18px;
margin-bottom: 5px;
}
.about__us__facts__right p {
color: #777777;
font-size: 14px;
line-height: 1.55em;
}
.copyright {
font-size: 14px;
color: #777777;
text-align: center;
margin-top: 50px;
padding-bottom: 50px
}
*Отличное пособие для новичка!*
Так же и у меня на канале есть пособие для новчиков ;)
Вообще, автор волшебник и хороший человек! Дай бог тебе здоровья! За то что делишься знаниями и так внятно, расстоновочно объясняешь.
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
1:45:00 можно было не display: block; и float: left; записать, а просто display: inline-block;
1:07 - экспорт img из Adobe, изначально преобразовывая в смарт объект
1:16:00 - оформление header
1:21:22 - обнуление отступов у body
1:40:13 - logo
1:40:56 - header menu
1:54:30 - clearfix
1:58:48 - button in header
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
About Us
Proin iaculis purus consequat sem cure.
July 2010
Our Humble Beginnings
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.
January 2011
Facing Startup Battles
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.
December 2012
Enter The Dark Days
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.
February 2014
Our Triumph
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.
//////////CSS//////////
.story {
padding-top: 80px;
}
span {
text-transform: uppercase;
}
.story_item {
position: relative;
display: block;
text-align: center;
margin-bottom: 93px;
}
.story_item .content {
display: inline-block;
line-height: 1.5em;
position: absolute;
top: 8px;
width: 290px;
}
#con_lft {
text-align: left;
}
#con_rght {
text-align: right;
}
.title_h3 h3{
margin-bottom: 8px;
font-size: 18px
}
.story_item p {
color: #777;
font-size: 14px;
}
.story_item:nth-child(odd) .content {
right: 50%;
margin-right: 130px;
}
.story_item:nth-child(even) .content {
left: 50%;
margin-left: 130px;
}
Проанализировал, грамотно.
спасибо большое
@@dinir1000 подтверждаю
Спасибо огромное!)
Спасибо большое все стало понятно!!!!
Спасибо огромное ты лучше всех объяснил в ютубе )))) наконец понял что за что отвечает 500 лайков тебе :)))
Присосан xDD За видео спасибо, очень доходчиво, а самое главное без всякой мишуры типа Бутстрап и прочей лабуды
Андрей, спасибо Вам огромное! Верстала за вами свой первый в жизни лендинг в Visual Studio Code)) Это агонь, все четко, понятно, доступно и круто! Спасибо что прокачали мой мозг!))
Как ставить фигурную скобку в css???
@@sorrel40 {} - на, скопируй
Хэйт - это ненависть, хайт - высота.
Антихайп
прошло уже три года а контент до сих пор четкий большое спасибо
Hе могу в header добавить картинку. Пишу все как и вы. В чем причина?
Посмотрите, не забыли ли вы после двух точек и img еще один знак слеша
+ была такая же проблема, работаю на маке, думал из-за того что путь как то не правильно указал - оказалось все проще. Т.к. я скачал архив к видео-уроку, я из этого архива скопировал картинки в папку на рабочий стол, и получилось так что одинаковые файлы с одинаковыми названиями были в 2-х разных местах ) надо просто указывать картинку, чтобы она была одна с таким названием и в одной определенной папке. У меня все получилось ;)
У меня была такая ошибка при использовании знака ' в слове don't (в названии картинки),изменил название картнки и все заработало,попробуй
уберите types с содержимым в html, в строке link
Наберите текст во всех дивах
С первых минут всё понятно, доходчиво! Спасибо огромное за подачу материала!
Здравствуйте, если сделали 4 блок не могли бы поделиться кодом?)) Спасибо
Мне кажется не стоит заверстывать первый экран в . Правильнее такая структура
section>container>header
Section>container
Section>container
Section>container
footer>container
Добрый день. Очень методичное, логичное и качественное изложение материала. Спасибо за ваш труд.
Ну что как ты там? Спустя столько лет чему ты научился? Начал ли ты зарабатывать?
Андрей, а ты сделаешь еще мастер класс по вёрстке, только на примере сайта?
Олександр Товмаченко да, есть, уже один такой: "Блог За 4 Часа" - гляньте на канале)
Пытаюсь скачать макет, нажимаю на ссыль а мне пишет страница не доступна, Сайт wayup.in пока не может обработать этот запрос.
Coi 175 сейчас все ок)
WAYUP & Андрей Гаврилов
Боже мой, всё понятно и самые главные правила объяснил, спасибо большое
НЕ РАБОТАЕТ
1) Ошибка №1
.clearfix:after {
content: "";
display: table;
width: 100%;
clear: both;
НАДПИСЬ: "Welcome To Our Studio!" прилипает сверху!
Потратил несколько часов, переписал код дважды.
Я не знаю почему автор пишет эти данные в класс ".clearfix" и по какой причине оно у него работает!
По факту класс ".clearfix" вобще не нужен.
2) Ошибка №2
Спустя пару часов, когда я разобрался с первой ошибкой, через 30 секунд я столкнулся со следующей
Ты добаляешь в ".titles__first" - margin-top: 180px; и у тебя текст сдвигается вниз.
На самом деле он нехуя не сдвигается, а стоит как раньше.
Короче на 1:57:54 если повторять все за тобой не работает ничего, делайте так:
.titles__first {
color: white;
font-size: 40px;
text-transform: uppercase;
text-align: center;
margin-top: 175px;
}
.titles {
content: "";
display: table;
width: 100%;
clear: both;
}
Потому шо ты добавил второй ненужный класс, когда первый не использовался. Леолс.
Хоть ты и написал этот комент год назад , но огромное спасибо!!!
Лучший урок из всех которые смотрел в ютюбе. Спасибо!
Почему я не смог добавить вашу картинку (first-bg.img) в свой index.html/main.css. Я создавал их в самом начале, уже только потом скачал материалы проекта чтобы взять от туда картинки. Я пробовал просто добавить их в папку img, пробовал перезапускать/перезаписывать файлы по новой. Но картинки я в браузере так и не увидел. Меня просто бомбануло. Почему так? Взяв файлы индекса и ксс с вашего проекта картинка появилась. Но так там код один и тот же, все папки, так же само, те же...
Точно такая проблема(
я так добавиль
так у тебя косая черта не в ту сторону
Огромное спасибо очень хороший урок и главное без рекламы что сейчас редкость
Андрей,почему не получается clearfix? все делаю по видео...спасибо за урок!
Елена Никитина тоже
Перебрал много видео на эту тему. В этом, самое доступное изложение, минимум слов паразитов, проф. сленга и т.д.. Автору безмерное спасибо за титаническую работу.
скажите, кто доверстал последний блок? Покажите плиз как выглядит верстака и CSS файл?
и я не смог... вы нашли решение?
#end{
margin-bottom: 120px;
}
.about{
margin-top: 40px;
}
.about_img{
float: right;
padding-right: 375px;
padding-left: 20px;
}
.about{
float: left;
}
.about_right{
float: left;
padding-left: 375px;
padding-right: 20px;
}
footer{
clear: both;
text-align: center;
}
footer p{
font-size: 24px;
font-weight: bold;
}
у тебя блоки разной высоты явно заданные. мне кажется луше если они будут определяться по содержимому либо иметь все фиксированную но одинаковую высоту. куча разных отступов для всех елементов. обрати внимание на то, что картинки нужно выровнять по центру и задавать им отступ то слева то справа не очень хорошо.
желательно вникать в суть а не просто добиться идентичного отображения.
Можешь глянуть и раскритиковать что получилось у меня, очется услышать мнение со стороны
HTML
About Us
Proin iaculis purus consequat sem cure.
July 2010
Our Humble Beginnings
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.
January 2011
Facing Startup Battles
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.
December 2012
Enter The Dark Days
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.
february 2014
Our Triumph
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.
© Copyright 2014 FreebiesXpress.com
CSS
.about-item {
margin-top: 60px;
}
.about-descr {
width: 33%;
min-height: 100px;
margin: 10px 30px;
}
.about-descr .date {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
color: #000000;
margin-bottom: 10px;
}
.about-descr h3 {
font-size: 18px;
margin-bottom: 15px;
}
.about-descr p {
font-size: 14px;
margin-bottom: 15px;
color: #777777;
line-height: 1.5em;
}
.about-item img {
margin: 10px 5px;
}
.right {
text-align: left;
float: right;
}
.left {
text-align: right;
float: left;
}
#about {
padding-bottom: 80px;
}
footer {
background-color: #f7f7f7;
height: 40px;
text-align: center;
padding: 30px;
font-size: 14px;
color: #555555;
}
HTML
Services
Proin iaculis purus consequat sem cure.
July 2010
Our Humble Beginnings
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.
January 2011
Facing Startup Battles
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.
December 2012
Enter The Dark Days
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.
february 2014
Our Triumph
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.
CSS
.about_us {
font-size: 14px;
margin-top: 80px;
}
.about_us h3 {
margin-top: 0;
font-size: 18px;
}
.about_us_item {
width: 515px;
margin: 0 44px 90px 44px;
}
.about_us_item:nth-child(2n) {
float: right;
}
.about_us_item:nth-child(2n+1) {
float: left;
}
.about_us_item p {
line-height: 1.55em;
}
.floatL {
float: left;
text-align: right;
padding-right: 30px;
}
.floatR {
float: right;
text-align: left;
padding-left: 30px;
}
#date {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
font-size: 18px;
}
footer {
text-align: center;
padding: 0 0 110px 0;
font-size: 14px;
color: #555555;
}
www.sendspace.com/file/xo46pq Вот моя работа,решил написать без помощи как более менее понял что то :D вроде написал и даже вместе с дз
Очень крутой МК. Много полезной инфы, собранной вместе. Респектище автору!
Кто доверстал, скиньте код. А то сижу чайник-чайником, не сходится айтемы тайтлам =)
Занятие очень хорошее. Давно учила верстку в универе и ШАГе долго и нудно, а тут раз и все это за 3 часа и практика и готовый код и все сразу и без устаревших таблиц. Супер, спасибо, мне очень понравилось
Да, многие к счастью или к сожалению из ШАГа идут ко мне...) Кстати, тут мой ученик рассказывает об обучении: th-cam.com/video/NudP8n5UY7E/w-d-xo.html
Спасибо за ответ, это очень здорово и приятно когда есть обратная связь.
Блин вот честно, лучше бы это дз он сам проделал, потому как на мой взгляд это новые принципы позиционирования, о которых не указывалось ранее. Лучше бы он это рассказал, а домашним заданием дал те 3 картинки которые он последние делал. Сейчас сижу и мучаюсь как это сделать картинку по центру, да так чтобы ее текст обвивал с разных сторон. Потому как text-aling: center и float: left совместно не работают
Согласна, я сделала картинки, а вот с текстом пока еще сложно. Будет проще ориентироваться, если бы был образец кода
Я хз как текст прикрепапить с лева и право
Вы решили проблему? Несколько часов бьюсь над задачей. пробовала все картинки выставить по центру в css, а текст выравнивать через html - не вышло...
Думаю text-align:center;
текст нужно через css выравнивать
это самый лучший урок который я видел!!! обязательно к просмотру!
То самое чувство, когда тебе вот так вот просто объясняют то, над чем ты е... возился целую неделю.
Честно говоря, думал будет очередное унылое.... повествование.
И так и было 1-й час.
Но зато потом пошло золото.
Очень понравилось.
Правда, затянуто очень....
И про рабочих, и про перерыв можно было вырезать напрочь.....
Лайкосег.
Прошёл платный курс по HTML/CSS и всё равно в этом видео узнаю МНОГО нового. Как то знания структурируюся.
Но норм видео на ютубе немного. Нужно копаться, чтобы найти что то ДЕЙСТВИТЕЛЬНО дельное.