5:46 ( делаем header-title margin-bottom 12px, но изменений не будет, потому что у header-title уже есть значение margin-top 222px). p.s. Ставим у .header-subtitle margin-bottom 12px и далее ровняем палки слева и права. Лайк за видео, так подавать материал это мастерство!
На деле получился неплохой урок: 1)Видишь простейший семантические ошибки; 2)Выходишь с видео, идешь смотреть полный курс по HTML; 3)Понимаешь, что очень много ошибок; идешь досматривать курс по CSS, ввиду недоверия; 4)Заходишь на видео, берешь макет, делаешь сам. 👍
Спасибо за уроки! Сам учусь на программиста в колледже на 1 курсе, и параллельно смотрю твои ролики! Просьба одна - можно вы будете нашим информатиком)
подписался на ваш канал только что , самостоятельно изучаю html и сss и как раз сейчас нужна практика, вот это то что нужно , Урок супер и приближенный к реальности, ждем новых уроков!!! Смотрю с удовольствием, спасибо вам !!!!
@@unnyis нет, не делают, какой смысл каждую иконочку или картинку оборачивать в отдельный див, если можно тому же тегу img присвоить класс? Зато там где дивы будут крайне удобны, автор почему то их не использует, ну например в header line разделить элементы на два дива - left-elements и right-elements и с помощью justify-content: space-between раскидать их по краям контейнера, чтобы получилось как в макете, а потом настроить в правой части локальные отступы, автор же вообще сделал хер пойми как и никак не сходится с макетом
Необычно верстаете как я считаю. Но в случае "Дом лучшей еды" с псевдо классами можно было бы использовать vertical-align: middle; тогда линии бы были ровно по середине. Но у вас тоже всё работает, так что это уже дело вкуса :)
Урок замечательный, я вообще не знаю что такое html и css, ну точнее только сегодня этим заинтересовался, и то +- понимаю код, продолжайте в том же духе, у вас очень хорошо получается верстать сайты
Спасибо тебе Илья за твоё творчество, я не такой давний подписчик, но очень тебе благодарен, надеюсь скоро догоню по выходу роликов и ещё раз спасибо большое!!!
крутая серия роликов, но как по мне слишком много лишних классов, к примеру можно было б не создавать отдельный класс для кнокпки view menu а дать ей класс btn, который был в header-line, тогда бы и hover не пришлось переписывать)
8:09 говорите, что добавили главный заголовок, а в коде пишите вместо Это семантический косяк ваш и новички будут учиться этому же косяку а в целом ролик легок к пониманию
Спасибо за уроки! Только у меня вопрос на счет белых палок (класс header-suptitle). Значения top и left на разных форматах сьезжать не будут? Я просмотрел пока два урока, но меня этот вопрос очень заинтересовал. Буду рад есть ответите :)
Не знаю, я по-другому сделал, в итоге. Уж очень не люблю хардкод, все эти вбивания вручную отступов, поместил текст и кнопку в ещё одну прослойку, назвал хелер давн контейнером, в ней настроил позицию абсолют и выравнивание элементов.
Почему у тебя div не прижат к левому краю??? КАК! я уже 3 раза пересмотрел, так и не понял. В итоге мне всегда приходится прописывать margin-left: 100px;
Добрый день! У меня такой вопрос, а разве не нужно выравнивать все содержимое точно так же как в макете?Например, меню не совпадает по расположению, у меня установлен perfectpixel в браузере и я накладываю макет из Фигмы на верстку, вот хотелось бы узнать как сдвигать например всю навигацию правее как в проекте.
Не могу понять зачем было создавать div с class header-btn а затем сразу обращаться к классу header-button не могу понять. Если не сложно могли бы объяснить можно ж было не писать тогда класс header-btn . 6:17 таймкод
Для класса header-button мы задаем все видимые стили, фон, текст, внутренние padding и тд. А вот класс header-btn нужен чтобы у нас получилась конструкция из div`ов, мы оборачиваем его, чтобы он стал блочным на ряду со стальными блоками
данная верстка не предполагает так называемый pixel perfect, а предполагает обучение, не выполнение сайта на заказ. Если вы хотите детально прорабатывать вёрстку, то пожалуйста)
@@kadencode5347 При чем здесь высота, если он пытается обучить начинающих то надо соблюдать хоть немного соответствия с макетом, потом все начинающие будут также халатно относиться к вёрстке, простейшая навигация для десктопа и он её сделал криво, т. е . наплевал на то что бы хоть немного подогнать..... учитель твою мать...
@@СергейТемников-м8с на счёт высоты извиняюсь, после сна писал, не вникал. Имею ввиду фиксированные размеры. На счет верстки, в пиксель перфекте все занимало бы слишком много времени, да и ролик создан в образовательных, а не маразматических целях
выдержал две недели убил на эту х**** div v div блок в блоке кто так вырастает сравнивал с другими -вообще по молдаванский слева направо блин с меньшего div в больше выходит и даже в блок напрасная трата времени довёз твою только из-за того чтобы добить. PIxel Perfect???
Огромное спасибо за твои уроки , просто знай что где то в мире есть студент который учится и растет именно благодаря тебе
Это я. Меня посадили на колледж професией фельдшера а я хотел програмиста. И изучаю все равно програмиста а фельдшера в жопу.
5:46 ( делаем header-title margin-bottom 12px, но изменений не будет, потому что у header-title уже есть значение margin-top 222px).
p.s. Ставим у .header-subtitle margin-bottom 12px и далее ровняем палки слева и права.
Лайк за видео, так подавать материал это мастерство!
На деле получился неплохой урок:
1)Видишь простейший семантические ошибки;
2)Выходишь с видео, идешь смотреть полный курс по HTML;
3)Понимаешь, что очень много ошибок; идешь досматривать курс по CSS, ввиду недоверия;
4)Заходишь на видео, берешь макет, делаешь сам. 👍
Спасибо за уроки! Сам учусь на программиста в колледже на 1 курсе, и параллельно смотрю твои ролики! Просьба одна - можно вы будете нашим информатиком)
Очень рад, что мои видел так заходят) на счёт информатики подумаю, хех 😀
Большое спасибо дружище. Благодаря таким людям как ты, Мир становится лучше!!!
Header-suPtitle, Карл!)) лол))
Семантика конечно продолжает фэйспалмить, даже заголовок у нас - див)) Такие забавные уроки, конечно)
Спасибо за урок. Я очень благодарен. Все четко и удобно, ясно.
подписался на ваш канал только что , самостоятельно изучаю html и сss и как раз сейчас нужна практика, вот это то что нужно , Урок супер и приближенный к реальности, ждем новых уроков!!! Смотрю с удовольствием, спасибо вам !!!!
Привет! А скольке тебе лет можешь сказать? Это просто для меня важно для некоторых анализов.
Всё верстать на одних дивах - это супер приближенно к реальности, конечно))
@@СДЭКЛиговский так продвинутые/те, кто занимаются этим не делают?
@@unnyis нет, не делают, какой смысл каждую иконочку или картинку оборачивать в отдельный див, если можно тому же тегу img присвоить класс? Зато там где дивы будут крайне удобны, автор почему то их не использует, ну например в header line разделить элементы на два дива - left-elements и right-elements и с помощью justify-content: space-between раскидать их по краям контейнера, чтобы получилось как в макете, а потом настроить в правой части локальные отступы, автор же вообще сделал хер пойми как и никак не сходится с макетом
Были трудности с позициями и расположениями, но я справился, спасибо за видео!
Ты крут! Спасибо за проделанную работу, очень и очень доступно все рассказываешь.
Спасибо, стараюсь :)
Спасибо за уроки, они супер, хорошо объясняешь и код удобно построен!
Всегда пожалуйста)
Необычно верстаете как я считаю. Но в случае "Дом лучшей еды" с псевдо классами можно было бы использовать vertical-align: middle; тогда линии бы были ровно по середине. Но у вас тоже всё работает, так что это уже дело вкуса :)
Можно было и его использовать. Но это уже кому как :)
5:08 Что бы получилось всё параллельно и чётенько:
after
top: 127;
left: 56;
before
top: 127;
right: 56;
лол
Спасибо за всё, учу html вместе с вами!!
Урок замечательный, я вообще не знаю что такое html и css, ну точнее только сегодня этим заинтересовался, и то +- понимаю код, продолжайте в том же духе, у вас очень хорошо получается верстать сайты
Спасибо тебе Илья за твоё творчество, я не такой давний подписчик, но очень тебе благодарен, надеюсь скоро догоню по выходу роликов и ещё раз спасибо большое!!!
Спасибо, вдохновляешь!
Спасибо Илья!)
спасибо за очень подробные объяснения!
После первого урока - вообще на изи все получилось. ) Едем дальше.)
Огромное спасибо!!!
Уроки супер не останавливайтесь я подписалса
не останавливаемся)
крутая серия роликов, но как по мне слишком много лишних классов, к примеру можно было б не создавать отдельный класс для кнокпки view menu а дать ей класс btn, который был в header-line, тогда бы и hover не пришлось переписывать)
СПАСИБО ЗА урок
Спасибо за видео
не задали размер для "Наш ресторан"
Та он задал на родительский тег и на дочернем будет также работать
@@abuuww Не будет, там размер другой. На родительском 50px, а на этом должно быть 80px. Из-за этого надо Сабтайтлы переделать
почему у меня линии не появляются ? Когда контент пустой линий нету но если туда что то вписать линии будут но с текстом
лайк и подписка, спасибо большое!
Спасибо за урок
Почему когда я написал теги для нижней шапки :header-down , header-title, у меня они встали в одну линию с верхней шапкой? Как это возможно исправить
8:09 говорите, что добавили главный заголовок, а в коде пишите вместо
Это семантический косяк ваш и новички будут учиться этому же косяку
а в целом ролик легок к пониманию
так у него все в дивах у него полного косяков в плане семантики
молодец
Спасибо за уроки! Только у меня вопрос на счет белых палок (класс header-suptitle). Значения top и left на разных форматах сьезжать не будут? Я просмотрел пока два урока, но меня этот вопрос очень заинтересовал. Буду рад есть ответите :)
будут конечно, для этого есть респонсив
Хорошее видео хорошо сверстал вот я начинающий деволпер и мне нужна много рпактики
все очень классно, но блин у меня что то со шрифтами, никак не подключаются, уже много разных способов перепробовала так и не получается(
Очень странно... Возможно дело в кэше? Может с гугл фонтст чтото и они не работают в России?
@@EduCatterOfficial у нас в Body уже стоит заданный шрифт и когда подключаешь шрифт Tinos, то он не работает.
@@АртемВалерьевич-э3дти вписал в хед и в цсс
Почему ты не используешь правильные теги для некоторых кусков вёрстки типо header nav и тд специально же такие теги сделали
4:24 Почему вы написали "после" раньше чем "до"? То есть соответственно after и before
Не знаю, я по-другому сделал, в итоге. Уж очень не люблю хардкод, все эти вбивания вручную отступов, поместил текст и кнопку в ещё одну прослойку, назвал хелер давн контейнером, в ней настроил позицию абсолют и выравнивание элементов.
спасибо за отличный урок
Было бы неплохо, если бы вы отдельно выкладывали код. Потому что ни"ра не видно.
отдельно это как? под каждым видео есть ссылка на проект, где есть все файлы из видео, скачивайте и смотрите все интересующие вас файлы
Летсго!
здраствуйте ! спасибо вам за уроки !!!!! НО у меня вопрос у меня не получается " header-subtitle" ( дом лучшей еды) не получается как у вас?
Здравствуйте можно дадите этот же макет для практики? Или за это будут проблемы с заказчиком?
а можно отдельный выпуск для этого сайта чтобы он был адаптивым?
на канале уже подобное видео именно про адаптацию этого макета
Почему у тебя div не прижат к левому краю??? КАК! я уже 3 раза пересмотрел, так и не понял. В итоге мне всегда приходится прописывать margin-left: 100px;
Потому что у него в DIV container margin left стоит 165px. А сам header-down child container'a как я понял.
@@elsid16 спасибо
В какой программе верстаете?
почему у меня кнопка не отображается? я цвет прописала но ничего не видно
аой все разобралась
У меня тоже значок звонка не отображается, можете подсказать как разобрались?
А по правилам вёрстки это разве правильно,что текст лежит не в текстовых тегах,а просто в контейнере?
как таковых правил нету, но конечно можно использовать теги h и p, но это просто дело принципа)
Добрый день! У меня такой вопрос, а разве не нужно выравнивать все содержимое точно так же как в макете?Например, меню не совпадает по расположению, у меня установлен perfectpixel в браузере и я накладываю макет из Фигмы на верстку, вот хотелось бы узнать как сдвигать например всю навигацию правее как в проекте.
Думаю можно создать еще один блок div, и в CSS отредачить его
Супер... но ничего не видно ... есть где посмотреть код?
строка Наш ресторан имеет размер не 50px, а 80px. Но автор это почему то не сделал. Если потом сайт наложить на шаблон, все съедет нафиг
У меня кнопка заказ столика не работает хотя все правильно
псевдоклассы когда их использовать?
У меня как раз есть видео по этой теме:
ruclips.net/video/4Q0s1b0XgxI/видео.html
ruclips.net/video/Sa6jaBFJYF4/видео.html
:)
а как найти исследовать элемент
Правой кнопкой мыши нажимаешь на нужный элемент, и там выбираешь исследовать
Не могу понять зачем было создавать div с class header-btn а затем сразу обращаться к классу header-button не могу понять. Если не сложно могли бы объяснить можно ж было не писать тогда класс header-btn . 6:17 таймкод
Для класса header-button мы задаем все видимые стили, фон, текст, внутренние padding и тд. А вот класс header-btn нужен чтобы у нас получилась конструкция из div`ов, мы оборачиваем его, чтобы он стал блочным на ряду со стальными блоками
доступно но очень плохо видно код
исправим!
видео выпущено за день до херовых деньков
хе получаэтса
Верстка вообще не совпадает с макетом, особенно шапка...
данная верстка не предполагает так называемый pixel perfect, а предполагает обучение, не выполнение сайта на заказ. Если вы хотите детально прорабатывать вёрстку, то пожалуйста)
Ну так автор макета не предоставил дизайн для каждого разрешения экрана. Тем-более это адаптивная верстка, как тут укажешь фиксированные размеры
@@kadencode5347 При чем здесь высота, если он пытается обучить начинающих то надо соблюдать хоть немного соответствия с макетом, потом все начинающие будут также халатно относиться к вёрстке, простейшая навигация для десктопа и он её сделал криво, т. е . наплевал на то что бы хоть немного подогнать..... учитель твою мать...
@@СергейТемников-м8с на счёт высоты извиняюсь, после сна писал, не вникал. Имею ввиду фиксированные размеры. На счет верстки, в пиксель перфекте все занимало бы слишком много времени, да и ролик создан в образовательных, а не маразматических целях
О боже
выдержал две недели убил на эту х**** div v div блок в блоке кто так вырастает сравнивал с другими -вообще по молдаванский слева направо блин с меньшего div в больше выходит и даже в блок напрасная трата времени довёз твою только из-за того чтобы добить. PIxel Perfect???
3:22 я офигел не поставил ТОЧКУ. ТОЧКУУУУ😂