#2 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - доделываем главную

EduCatter — Канал о Веб-Программировании

Подписаться 15 тыс.

Просмотров 101 тыс.

50% 1

Привет, друг!
Это новая тематика на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты!
В этом видео я показывай шаг за шагом процесс создания сайта, на этот раз это сайт ресторана. Это только одно из множества видео, дальше будет окончательная верстка, адаптация под мобильные устройства и загрузка на хостинг. То есть мы пройдем вместе весь путь создания сайта. А чтобы не пропустить новые части подпишись!
Все ссылки:
Ссылка на шаблон: www.figma.com/file/dVBa7wx6E0...
Ссылка на проект: drive.google.com/file/d/1iwg_...
Ссылка на шрифты: fonts.google.com/
Социальные сети:
Телеграм канал: t.me/educatter
Инстаграм: / banderrolo
ВК: banderolo
Нужен сайт? Переходи: www.catter.ru/
Поддержать канал:
boosty.to/educatter
Разработка сайтов под ключ - sitesmatch.ru
Не забудь подписаться!

Опубликовано:

21 фев 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 87

@folszeshifr3857 Год назад

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

@MadiX1X Год назад

Это я. Меня посадили на колледж професией фельдшера а я хотел програмиста. И изучаю все равно програмиста а фельдшера в жопу.

@newuser7926 22 дня назад

Спасибо за урок. Я очень благодарен. Все четко и удобно, ясно.

@user-vi8rx4kf2n Год назад

Header-suPtitle, Карл!)) лол)) Семантика конечно продолжает фэйспалмить, даже заголовок у нас - див)) Такие забавные уроки, конечно)

@XdFd-il5dm 11 месяцев назад

Урок замечательный, я вообще не знаю что такое html и css, ну точнее только сегодня этим заинтересовался, и то +- понимаю код, продолжайте в том же духе, у вас очень хорошо получается верстать сайты

@user-rp7sg6eo4b Год назад

5:46 ( делаем header-title margin-bottom 12px, но изменений не будет, потому что у header-title уже есть значение margin-top 222px). p.s. Ставим у .header-subtitle margin-bottom 12px и далее ровняем палки слева и права. Лайк за видео, так подавать материал это мастерство!

@user-to7pz9vn5n 7 месяцев назад

Спасибо тебе Илья за твоё творчество, я не такой давний подписчик, но очень тебе благодарен, надеюсь скоро догоню по выходу роликов и ещё раз спасибо большое!!!

@user-gx6gj3en2m Год назад

Спасибо за всё, учу html вместе с вами!!

@dunkanmacklaut1260 Год назад

Большое спасибо дружище. Благодаря таким людям как ты, Мир становится лучше!!!

@user-pc5sr2sg7x Год назад

спасибо за очень подробные объяснения!

@galzun4466 10 месяцев назад

5:08 Что бы получилось всё параллельно и чётенько: after top: 127; left: 56; before top: 127; right: 56;

@dt-code 2 года назад

Ты крут! Спасибо за проделанную работу, очень и очень доступно все рассказываешь.

@EduCatterOfficial 2 года назад

Спасибо, стараюсь :)

@user-bp1rj8yd2l 2 года назад

Спасибо за уроки, они супер, хорошо объясняешь и код удобно построен!

@EduCatterOfficial 2 года назад

Всегда пожалуйста)

@tekartgroup1677 Год назад

Спасибо, вдохновляешь!

@nicholasoddone2845 2 года назад

Спасибо за уроки! Сам учусь на программиста в колледже на 1 курсе, и параллельно смотрю твои ролики! Просьба одна - можно вы будете нашим информатиком)

@EduCatterOfficial 2 года назад

Очень рад, что мои видел так заходят) на счёт информатики подумаю, хех 😀

@darkinfinity1322 9 месяцев назад

На деле получился неплохой урок: 1)Видишь простейший семантические ошибки; 2)Выходишь с видео, идешь смотреть полный курс по HTML; 3)Понимаешь, что очень много ошибок; идешь досматривать курс по CSS, ввиду недоверия; 4)Заходишь на видео, берешь макет, делаешь сам. 👍

@sulejmanpovelitel1220 Год назад

подписался на ваш канал только что , самостоятельно изучаю html и сss и как раз сейчас нужна практика, вот это то что нужно , Урок супер и приближенный к реальности, ждем новых уроков!!! Смотрю с удовольствием, спасибо вам !!!!

@MadiX1X Год назад

Привет! А скольке тебе лет можешь сказать? Это просто для меня важно для некоторых анализов.

@user-vi8rx4kf2n Год назад

Всё верстать на одних дивах - это супер приближенно к реальности, конечно))

@unnyis Год назад

@@user-vi8rx4kf2n так продвинутые/те, кто занимаются этим не делают?

@alexasanchobetherestors9962 Год назад

После первого урока - вообще на изи все получилось. ) Едем дальше.)

@MyFdfg Год назад

Огромное спасибо!!!

@dmaberlin Год назад

Спасибо Илья!)

@user-hg6cu8bo7i Год назад

Спасибо за видео

@Parker9696 Год назад

не задали размер для "Наш ресторан"

@hannaLY Год назад

лайк и подписка, спасибо большое!

@ruinxr9 3 месяца назад

Спасибо за урок

@belovmihan Год назад

Необычно верстаете как я считаю. Но в случае "Дом лучшей еды" с псевдо классами можно было бы использовать vertical-align: middle; тогда линии бы были ровно по середине. Но у вас тоже всё работает, так что это уже дело вкуса :)

@EduCatterOfficial Год назад

Можно было и его использовать. Но это уже кому как :)

@crazycrazy5759 Год назад

Хорошее видео хорошо сверстал вот я начинающий деволпер и мне нужна много рпактики

@baurzhan1194 2 года назад

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

@EduCatterOfficial 2 года назад

не останавливаемся)

@namik_mdm Год назад

крутая серия роликов, но как по мне слишком много лишних классов, к примеру можно было б не создавать отдельный класс для кнокпки view menu а дать ей класс btn, который был в header-line, тогда бы и hover не пришлось переписывать)

@user-fr6qx1no5v Год назад

почему у меня линии не появляются ? Когда контент пустой линий нету но если туда что то вписать линии будут но с текстом

@user-xk9qy4ts1q 4 месяца назад

Почему когда я написал теги для нижней шапки :header-down , header-title, у меня они встали в одну линию с верхней шапкой? Как это возможно исправить

@askvesevgidune7006 Год назад

здраствуйте ! спасибо вам за уроки !!!!! НО у меня вопрос у меня не получается " header-subtitle" ( дом лучшей еды) не получается как у вас?

@MadiX1X Год назад

Здравствуйте можно дадите этот же макет для практики? Или за это будут проблемы с заказчиком?

@Wadvet Год назад

Спасибо за уроки! Только у меня вопрос на счет белых палок (класс header-suptitle). Значения top и left на разных форматах сьезжать не будут? Я просмотрел пока два урока, но меня этот вопрос очень заинтересовал. Буду рад есть ответите :)

@HEIT_CHANNEL Год назад

будут конечно, для этого есть респонсив

@epicshorsviral Год назад

Летсго!

@indictmentpubg Год назад

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

@Parker9696 Год назад

8:09 говорите, что добавили главный заголовок, а в коде пишите вместо Это семантический косяк ваш и новички будут учиться этому же косяку а в целом ролик легок к пониманию

@VoicEOfDARKNESS2 Год назад

так у него все в дивах у него полного косяков в плане семантики

@bulatozavrjuniorvoice4679 Месяц назад

Почему у тебя div не прижат к левому краю??? КАК! я уже 3 раза пересмотрел, так и не понял. В итоге мне всегда приходится прописывать margin-left: 100px;

@yygdr- Месяц назад

4:24 Почему вы написали "после" раньше чем "до"? То есть соответственно after и before

@user-ep9bn4ud3f 11 месяцев назад

Добрый день! У меня такой вопрос, а разве не нужно выравнивать все содержимое точно так же как в макете?Например, меню не совпадает по расположению, у меня установлен perfectpixel в браузере и я накладываю макет из Фигмы на верстку, вот хотелось бы узнать как сдвигать например всю навигацию правее как в проекте.

@_dipdepl 4 месяца назад

Думаю можно создать еще один блок div, и в CSS отредачить его

@vadimmejinschii3442 5 месяцев назад

спасибо за отличный урок

@user-it7wr9po4p 7 месяцев назад

В какой программе верстаете?

@Keduvar Год назад

У меня кнопка заказ столика не работает хотя все правильно

@user-cx3qy6ri8h 2 года назад

А по правилам вёрстки это разве правильно,что текст лежит не в текстовых тегах,а просто в контейнере?

@EduCatterOfficial 2 года назад

как таковых правил нету, но конечно можно использовать теги h и p, но это просто дело принципа)

@beeprodaction9601 Год назад

Супер... но ничего не видно ... есть где посмотреть код?

@vladyslavkhasanov 2 года назад

Было бы неплохо, если бы вы отдельно выкладывали код. Потому что ни"ра не видно.

@EduCatterOfficial 2 года назад

отдельно это как? под каждым видео есть ссылка на проект, где есть все файлы из видео, скачивайте и смотрите все интересующие вас файлы

@user-zm2cf8ge7g Год назад

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

@EduCatterOfficial Год назад

Очень странно... Возможно дело в кэше? Может с гугл фонтст чтото и они не работают в России?

@user-wp4jv5nw6e 11 месяцев назад

@@EduCatterOfficial у нас в Body уже стоит заданный шрифт и когда подключаешь шрифт Tinos, то он не работает.

@boltua2023 10 месяцев назад

@@user-wp4jv5nw6eти вписал в хед и в цсс

@mmi3667 2 года назад

а можно отдельный выпуск для этого сайта чтобы он был адаптивым?

@EduCatterOfficial 2 года назад

на канале уже подобное видео именно про адаптацию этого макета

@trepemz9034 Год назад

Не могу понять зачем было создавать div с class header-btn а затем сразу обращаться к классу header-button не могу понять. Если не сложно могли бы объяснить можно ж было не писать тогда класс header-btn . 6:17 таймкод

@EduCatterOfficial Год назад

Для класса header-button мы задаем все видимые стили, фон, текст, внутренние padding и тд. А вот класс header-btn нужен чтобы у нас получилась конструкция из div`ов, мы оборачиваем его, чтобы он стал блочным на ряду со стальными блоками

@dianamazhitkyzy490 2 месяца назад

почему у меня кнопка не отображается? я цвет прописала но ничего не видно

@dianamazhitkyzy490 2 месяца назад

аой все разобралась

@n.gee_2275 Год назад

псевдоклассы когда их использовать?

@EduCatterOfficial Год назад

У меня как раз есть видео по этой теме: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4Q0s1b0XgxI.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Sa6jaBFJYF4.html :)

@user-gk2jg6gy6u Год назад

а как найти исследовать элемент

@vladimirchshekuteyev6322 Год назад

Правой кнопкой мыши нажимаешь на нужный элемент, и там выбираешь исследовать

@gost9945 11 месяцев назад

строка Наш ресторан имеет размер не 50px, а 80px. Но автор это почему то не сделал. Если потом сайт наложить на шаблон, все съедет нафиг

@Vladimir-zp4kw 2 года назад

доступно но очень плохо видно код

@EduCatterOfficial 2 года назад

исправим!

@Hovik46 9 месяцев назад

хе получаэтса

@user-cs8jp5yy5c Год назад

видео выпущено за день до херовых деньков

@trener_win Год назад

О боже

@oleksandrdemchenko482 Год назад

выдержал две недели убил на эту х**** div v div блок в блоке кто так вырастает сравнивал с другими -вообще по молдаванский слева направо блин с меньшего div в больше выходит и даже в блок напрасная трата времени довёз твою только из-за того чтобы добить. PIxel Perfect???

@user-qp3sm1gl1w 2 года назад

Верстка вообще не совпадает с макетом, особенно шапка...

@EduCatterOfficial 2 года назад

данная верстка не предполагает так называемый pixel perfect, а предполагает обучение, не выполнение сайта на заказ. Если вы хотите детально прорабатывать вёрстку, то пожалуйста)

@kadencode5347 2 года назад

Ну так автор макета не предоставил дизайн для каждого разрешения экрана. Тем-более это адаптивная верстка, как тут укажешь фиксированные размеры

@user-qp3sm1gl1w 2 года назад

@@kadencode5347 При чем здесь высота, если он пытается обучить начинающих то надо соблюдать хоть немного соответствия с макетом, потом все начинающие будут также халатно относиться к вёрстке, простейшая навигация для десктопа и он её сделал криво, т. е . наплевал на то что бы хоть немного подогнать..... учитель твою мать...

@kadencode5347 2 года назад

@@user-qp3sm1gl1w на счёт высоты извиняюсь, после сна писал, не вникал. Имею ввиду фиксированные размеры. На счет верстки, в пиксель перфекте все занимало бы слишком много времени, да и ролик создан в образовательных, а не маразматических целях