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

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

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

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

50% 1

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

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

17 фев 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Такое непередаваемое удовольствие испытываю, когда нахожу канал на интересующую тему, где пока, подчеркну ПОКА, нет большого количества подписчиков. Как будто к золотой жиле прикоснулся)) Спасибо за то, что Вы делаете :))

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

Eric, благодарю вас за такой приятный комментарий, не зря стараюсь)

@BlackBeltBloger Год назад

Ах ты жадина, один хочешь смотреть хороший контент

@andy_top6676 8 месяцев назад

Очень классно, когда учишься. Практика, понимаешь как в определенном случае поступать, и потом уже когда сталкиваешься - вспоминаешь и делаешь то, что повторял за автором. Спасибо!

@DB-zz9zn Год назад

Спасибо огромное автору. Ты Человек с большой буквы. Я хоть только начал изучать и для меня много не понятно зато будет живой пример, который можно так сказать пощупать

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

Спасибо большое за простой и понятный контент самое то для начинающих верстать с макетов!!! 🙂

@rufuscer Год назад

как же приятно смотреть, и слушать как ты объясняешь все детали :)

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

Спасибо за такое интересное и полезное видео. Все получается и "без воды", закрепляются полученные знания и набивается рука, с удовольствием делаю вместе с Вами этот сайт себе в портфолио:) Вы - супер!

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

Очень приятно, спасибо большое 🔥

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

Спасибо Вам огромное, быстро понятно, без воды. Смотреть одно удовольствие ☺️

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

Это лучший ютубер, который снимает обучающий контент по веб-разработке, которого я видел). Спасибо Вам за такие шикарные видосы, кратко и понятно!🥰

@BlackBeltBloger Год назад

Классно все сделал, без всяких будстрапов чистый html и css то, что нужно новичку )

@user-ut5mh6lc4w 10 месяцев назад

Пока это лучший обзор на Figma, который я нашла. Потому что у остальных сильно мудрёно. Тут как-то кратко и по делу. Спасибо автору.

@NaroXz Год назад

Стала интересна тема создания сайтов, но всё отталкивало, что будет сложно и результата ноль. Пусть и по шаблону, но это очень круто и мотивирует двигаться дальше, спасибо большое!

@Andrei-Veaceslavovich Год назад

Спасибо за шикарный урок! Приятный голос, понятное объяснение.

@multivitamin7579 Год назад

Классно все рассказываешь, без лишних слов. Все четко по делу. А то не выносимо смотреть других блогеров как они учат верстать. Пока объяснят как блоки вставить в один ряд пройдет 3 минуты, 10 секунд чисто по делу а за 2:50 мин. успевают рассказать всю свою жизнь. И это утомляет сильно и устаешь учиться. А у тебя четко все по делу. Только вот жаль, что мало видео про верстки целого сайта.

@user-vp9lq8rt9q 3 месяца назад

Ну как успехи,научились верстать ?

@romanpit4you361 7 месяцев назад

Огромное спасибо за такое подробное видео! Сейчас учу вэб-разработку, ваш контент очень помогает закрепить знания)👍👍👍👍

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

Хоть видео уже старое, но в обучении очень даже пригодилось, спасибо! Вы вернули мне желание вернутся в web

@optimistka16 Год назад

Спасибо, что делитесь своими знаниями и так хорошо объясняете. Однозначно подписка и лайк👍

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

Я начинающий ФронтЭнд разработчик, и ваш ролик действительно помог мне. При вёрстке, у меня возникли проблемы, которые вы своим примером помогли мне решить! Очень надеюсь, что в следующих роликах вы будут адаптировать его под телефоны

@8lado4ka Год назад

супер приятный голос и понятное объяснение каждого действия, кайф!

@_lambfer_831 Год назад

Привет, знаю, возможно пишу уже поздно) Но, я хочу сказать тебе большое спасибо, за такие хорошие, и понятные видео. Нету не какой воды, как у других. Продолжай снимать!

@uzrumors Год назад

Все четко ясно без лишних слов

@anatoliy_lp Год назад

Всем привет )) Спасибо большое за образец работы помогает в обучений!

@verakovaleva8932 7 месяцев назад

Прекрасно! С помощью ваших видео сделала сайт для шефа. Он давно просил.

@TOBI-qj4hw Год назад

Самый лучший туториал! Все, что раньше не выходило, получилось!

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

Очень просто и понятно спасибо вам автор

@user-qf7yt8rq4i 8 месяцев назад

Видео шикарное. На этапе, когда не полностью изучил HTML и CSS, вполне всë понятно и наглядно

@superjew8171 Год назад

Это шикарно! Автор, спасибо Вам за такое крутое видео, один из лучших канал на ютубе по коду!

@evgeniadanilova4135 8 месяцев назад

Офигеть! У меня получилось!!! А то вначале самом вроде все как у вас делала, а получалась какая-то ерунда. Потом посмотрела на ваш код повнимательнее, сравнила со своим и нашла косяк. Спасибо, классное видео, очень полезное!

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

спасибо! отличный урок! продолжайте в том же духе а мы зрители будем только лайкать и лайкать!

@sweetbunny2804 Год назад

Отлично видео! Сейчас буду пробовать по своему макету. Огромное спасибо и подписка!:)

@AchtungBaby-io7zl Год назад

сверстал вместе! очень доходчиво. единственное просьба, выделять теме построения divов заранее минутку, а не по ходу. чтобы сразу было понимание что в какие дивы объединять будем. а так все огонь!

@EduCatterOfficial Год назад

Хорошо, учту в будущем)

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

Спасибо огромное за ваш труд!

@alexasanchobetherestors9962 Год назад

В общем, довел до результата шапку, как на макете. Немного утомился, так как пробую верстать первый сайт такого уровня. Пришлось немного повозиться с блоком контактов (трубка, номер, подпись), однако все получилось. Буду продолжать.)

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

Мне очень понравилось как Вы объясняете, буду теперь свой сайт делать пытаться ❤

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

Спасибо за Ваш труд.

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

Спасибо! Супер! Все понятно

@mariko-canphantom7690 4 месяца назад

Спасибо. Самое лучшее, то что нужно для начинания

@user-iz7ih4od4y Месяц назад

Просто лучший братан, люблю, я проходил вонючий курс, который был мне не интересен из 60 серий, и я не любил объяснение и что-то учить и вчегда откладывал на потом, он просто объяснял и писал без сайта какого-то, а тут я писал сайт и я настолько влюбился в это, что я мог сидеть хоть по 3 часа, а не как обычно быстрее бы изучить за 10 мин и уйти ахахаха и запомнил абсолютно много информации и если я пол сайта писал с тобой, то сейчас я его сам доделываю и все понимаю

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

Я новичок в этой теме мне очень щас все понятно. Спасибо огромное. За один просмотр

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

Супер контент для пошагового повторения Благодарю

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

Очень полезное видео для начинающих. Спасибо большое

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

я так люблю такие видео 😭😭 спасибо большое!

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

Рад слышать)

@PromareGalo 7 месяцев назад

Спасибо большое просто лучший

@user-nv9ct5cg8y 5 месяцев назад

Мне очень понравилось, вот то что я искал. Я уже базово знаю html и css, но фантазии не хватает чтобы практиковаться. И благодаря этому видио я практикуюсь. Спасибо 🙂

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

@@blckwd0 html и css это не программирование и элементарщина которую можно за 2 недели выучить спокойно.

@crazyworld1425 Год назад

Очень доходчиво и интересно 👍

@justcat2077 Год назад

Спасибо! Очень помог 💜

@SILCH Год назад

Очень круто! Спасибо )

@madarasan0 Год назад

Великолепная верстка, но это видео явно не для начинающих. Это нагромождение блоков, даже опытный не сразу разберется, нужно больше видео с такой версткой для начинающих

@indictmentpubg Год назад

А это, разве, так сложно, понять в голове схему этих всех блоков? Концептуально - html и css не труднее сбора Лего, даже не Лего, а просто пакет с пакетами, только выглядит страшно, со стороны может показаться что вы программист))

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

Я о том же , сам в начале не понимал

@blackeducationacademy Год назад

Я ни в css ни в html не шарю, но принцип понял, что сложного?

@essentialmercli Год назад

Ну не знаю, я начинающий и я многое понял )

@donchikbro4140 Год назад

2 недели начал учить и разобрал все, так же исключил div и оставил по минимуму и все работает 😉

@alikhanmakhan 6 месяцев назад

Братан спасибо тебе, делал сайт для школьного проекта, твое видео сильно помогло

@Lnesst Год назад

рассказываешь круто! НО, не использую header и nav в классе div'a, тк в HTML5 для них уже есть отдельные теги, и достаточно просто писать и

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

очень приятно и понятно, продолжай верстать сайты, и пожалуйста начни урок по JS

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

Спасибо, обязательно начну!)

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

@@EduCatterOfficial В добавок, я заметил что в шаблоне nav и остальные отделены от логотипа, т.е лого слева а остальные справа. Я сделал так, в html после логотипа все остальные добавил в div с классом header-inner и придал к нему свойста display: flex; justify-content: flex-end; align-items: center; Так выглядит более подходящий

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

@@ArrI888 вооо, классно! так ведь тоже можно)

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

Всё очень круто, доступно объясняете, но я согласна с одним из комментариев, не мешало больше тэгов HTML, таких как , , , , и . Потом немного доработаю у себя Вашу верстку. Но в целом, очень всё здорово. Закрепляются знания и появляется понимание, как из макета делать вёрстку и стили css. Cпасибо огромное, обязательно доделаю сайт до конца с Вами!

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

согласен, все неплохо, но отсутствие семантики и БЭМ наименования классов в обучающем видео огорчает.

@SAMANUELb 8 месяцев назад

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

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

Спасибо за труд

@asyaaa.ka1 Год назад

пишем в школе сайт на экзамен. css вообще не объясняли. говорили: "в свою проектную работу на экзамен можете просто из справочника по html копировать образцы css и вставлять в работу, но каждый тэг ОБЪЯСНИТЬ ДОЛЖНЫ!!!" не вижу логики, потому что даже понятия не имела, как работает это css и какие тэги у него есть. На вашем примере, на котором все понятно объясняете, я теперь хотя бы понимаю, что из себя представляет этот css и зачем он нужен! Спасибо вам огромное! От души!

@user-fz1ch9wx3z Месяц назад

Быстровато - еле успеваю, но это даже хорошо. Через мучения эффективность обучения повышается.

@ToFU-xx 2 года назад

Хороший канал, хорошо толкует☺

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

спасибо за отзыв!)

@mmamadovv Год назад

Я посмотрел куча видео по верстке но ты самый лучший)

@EduCatterOfficial Год назад

Очень приятно))

@jobschannel9755 Год назад

А что отлично спасибо за ролик. они когда-нибудь будут снимать как предположим сделать форум, а не сайт

@tengenuzui3907 Год назад

спасибо что вы есть💪💪

@EduCatterOfficial Год назад

Всегда буду)

@ButcherMoon12 Год назад

Очень годно, Спасибо

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

Доходчиво и понятно всё,у вас круто получается,но в макете меню не просто через space-around раздвигается!

@Gwizl2003 8 месяцев назад

Скажите, какой веб-редактор HTML CSS вы используете? Atom?

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

Посмотрел выпуск, в принципе неплохо, но есть следующие проблемы 1. Border, display, position и так далее, это не селекторы, а CSS свойства. 2. Отстуствие семантической вёрстки. Везде использовать div в современной web-разработке это не круто. Советую ознакомиться с семантическими тэгами HTML5. В остальном всё классно, подача мне нравится советую продолжать

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

Но говорю честно для новичков как я очень понятно без семантической вёрстки

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

@@azizuk7801 я ничего и не писал про «понятность» для новичков, с этим у автора проблем нет, я лишь описал недочеты, которые можно исправить, чтобы подавать самый современный материал:)

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

@@Moonlization спасибо вам большое брат

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

@@Moonlization брат ещё кого вы посоветовали?из каналов

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

спасибо, учту это)

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

Как всегда молодец

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

Спасибо! Большое спасибо!

@EduCatterOfficial Год назад

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

@tankist521 6 месяцев назад

по идеи надо ставить тэг "nav" а не div с классом nav.так же по моему надо писать теги Header,main,footer.

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

Благодарю за урок

@damelis163 6 месяцев назад

Спасибо большое 😍

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

Подскажте, по какому принципу формировать это множество один в другом? , потом еще и так до куда эту матрешку делать? И как запомнить великое множество алгоритмов и понять, какой из них конкретно использовать?

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

Молодец! Спасибо!!!!!!!!!!

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

Все работает, спасибо.

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

Все замечательно, особенно бутОн

@Aksvatik 7 месяцев назад

Очень редко пишу комментарии, но в этом случае ну очень хочется написать. Спасибо тебе большое за ролик. Сам только начинаю изучать верстку, ну уж очень хотелось попробовать сделать, что-то больше, чем просто читать htmlbook с их введением в html и css, и переписывать теги и свойства, хотелось посмотреть на практике, как они работают. Хоть и большинство свойств css в этом ролике я пока не знаю , но все равно было очень интересно посмотреть, как это происходит на реальном макете psd. Надеюсь, что когда вернусь к перепросмотру этого ролика уже буду знать большинство

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

Здравствуй, как успехи?

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

Супер! Понятно и красочно!👌🎉

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

Это точно!!!

@NonaGurgen Год назад

Браво 😍😍😍

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

Видео обалденное

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

Спасибо, стараемся)

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

Благодарю, на время забросил веб щас вернулся но в голове было пусто. Сейчас все вспомнил да и фичи подбросил)

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

Благодарю за видео! Подскажите почему не используете семантические теги? типо там где абзац (p), вы создаете div. это Дивянка получается?)

@dumaXd_targetolog Год назад

Спасибо тебе братка 🫡🫡

@EduCatterOfficial Год назад

Всё для вас)

@spilusgaru Год назад

Спасибо за ролики! Подскажите, а стоит верстать с бутсрапом или лучше без него?

@sansandpapairus7827 Год назад

When i wanted to update the site and see if there was a logo there, the site was just a white screen, I went from all search engines, the result was the same. But the video is good, good luck in life

@EduCatterOfficial Год назад

Thank you man, good luck too)

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

Спасибо вам

@sans6681 Год назад

Очень приятное и полезное видео ! Было приятно смотреть со стороны на работу профессионала. Если вам не трудно можете сказать название приложения с которым вы измеряли размеры текста, отступы и т.д.

@acdmilk3870 Год назад

Это фигма

@no-distrx 2 года назад

Интересно , но разметка не семантичная . Удачи в продвижении канала !

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

классное видео, доступное объяснение. 1 вопрос на какой программе кодирует?

@dcptggroup Год назад

очень круто )))))

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

Отличное видео!

@videofox6549 Год назад

Лайк за "Бутон" )))

@seoonlyRU Год назад

лукас от СЕООНЛИ

@yulia_serhieieva Год назад

Здравствуйте! Скажите пожалуйста, почему кнопки вы прописывали через тег , а не ?

@FelixX138 Год назад

Полезнейшее видео =)))

@EduCatterOfficial Год назад

благодарю!

@could_lie Год назад

здравствуйте, какой инструмент вы используете для измерения расстояния в писклях ?

@indictmentpubg Год назад

По поводу разделителя. Решение выглядит как какой-то костыль, не должно так быть по-хорошему. Я просто добавил див, высотой 50 и шириной 1, так намного логичнее, чем хардкодить значения. И не нравится то, что приходится отдавать на волю судьбе отступы от разделителя до дива с телефоном, завернул это ещё в блоки и внутри них свои отступы сделал. Пишу изначально на плюсах, прям корежит от такого

@epicshorsviral Год назад

Нус, поехалис.

@mamutkomekbaev2400 Год назад

Респект бро👍

@EduCatterOfficial Год назад

спасибо)

@TV-yj6mz Год назад

Класс! круто, хорошо объясняешь ,все доходчиво и что важно быстро! лави лайкосик!

@EduCatterOfficial Год назад

Благодарю за такой комментарий!

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

Мне больно, а можно в следующий раз создать папку для изображений? А так верстка классная😊

@alexandrf2428 6 месяцев назад

привет спасибо за уроки. Вопрос от нуба ) а почему ты не используешь теги header и section?

@evgenykonstantinov8414 Год назад

Все хорошо! Можно только шрифт кода увеличить

@EduCatterOfficial Год назад

шрифт более чёткий стал в следующих видео)

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

Спасибо огромное за видео! хтмл ксс выучил но не практиковался:) только у меня вопрос один, 12:38 почему не получается использовать align-items: center; в классе cart ?