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

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

[@erictamberg5903]

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

[@EduCatterOfficial]

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

[@BlackBeltBloger]

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

[@andy_top6676]

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

[@ИринаЗеленова-ч6б]

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

[@EduCatterOfficial]

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

[@SerKrut_]

Спасибо огромное. Среди всех этих супер кодеров что-то простое как глоток свежего воздуха😊

[@DB-zz9zn]

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

[@multivitamin7579]

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

[@Смазик]

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

[@Максимус-г2е]

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

[@ВасилийФёдоров-л1г]

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

[@ДенисЕрмаков-л2б]

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

[@ЮлияВаштова-б9ю]

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

[@Delzen-y5e]

но при этом все элементы разделены на div что немножко не семантично

[@корилепа]

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

[@arinorina]

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

[@EduCatterOfficial]

Рад слышать)

[@ЕленаТрофимова-ш7е]

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

[@BlackBeltBloger]

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

[@spectator4338]

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

[@madarasan0]

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

[@indictmentpubg]

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

[@АхьмадЬакриев]

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

[@blackeducationacademy]

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

[@essentialmercli]

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

[@donchikbro4140]

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

[@СтаниславГорячев-г1ъ]

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

[@AchtungBaby_87]

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

[@EduCatterOfficial]

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

[@evgeniadanilova4135]

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

[@КаюмМоджеков]

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

[@phantasy8139]

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

[@Moonlization]

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

[@azizuk7801]

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

[@Moonlization]

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

[@azizuk7801]

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

[@azizuk7801]

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

[@EduCatterOfficial]

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

[@ИринаЗеленова-ч6б]

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

[@obivanishche]

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

[@fdsadsad44]

Пожалуй лучший обучающий видос который я находил, все так подробно и понятно, спасибо!

[@tankist521]

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

[@akislowedqq]

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

[@Lnesst]

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

[@rufuscer]

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

[@Marian_Slovianyn]

Фантастика. Спасибо большое за видео)))

[@Andrei-Veaceslavovich]

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

[@asyaaa.ka1]

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

[@verakovaleva8932]

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

[@romanpit4you361]

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

[@sw3pstandoff254]

ну как?

[@мудаксучий]

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

[@alexasanchobetherestors9962]

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

[@TOBI-qj4hw]

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

[@8lado4ka]

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

[@technomobilee]

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

[@МухаммадюсуфФозилов-и9з]

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

[@NaroXz]

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

[@port_77]

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

[@АрсенийМракобесов]

Для тех кто жалуется что слишком быстро. Господа привыкайте работать в темпе и быстро соображать. Тренируйте так сказать навык. В будущем пригодиться) Что касается меня то увидев итоговый результат, остался доволен проделанной работой) У автора она заняла 20 минут, а у меня 5 часов)

[@EduCatterOfficial]

20 минут это готовый материал, а вот час это настоящая длина)

[@anatoliy_lp]

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

[@ToFU-xx]

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

[@EduCatterOfficial]

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

[@даринабилялова-д4р]

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

[@_lambfer_831]

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

[@АлександрПольвенок]

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

[@optimistka16]

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

[@Аксватик]

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

[@surman6151]

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

[@amaydastudent]

@@surman6151так мило,что вы интересуетесь 🥹

[@ArrI888]

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

[@EduCatterOfficial]

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

[@ArrI888]

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

[@EduCatterOfficial]

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

[@T2x2Narezkii]

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

[@manasjoldoshu.3500]

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

[@manasjoldoshu.3500]

Стороны*

[@Robinhood69]

Обнули все отступы через глобальный аргумент: * margin 0 padding 0

[@sweetbunny2804]

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

[@mariko-canphantom7690]

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

[@mmamadovv]

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

[@EduCatterOfficial]

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

[@ruinxr9]

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

[@ДаниилЛаврентьев-ц7м]

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

[@superjew8171]

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

[@indictmentpubg]

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

[@kadirkazimov6499]

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

[@LosihaSosibokal]

Дружище, на будущее, отступы в +- 160px не корректно, нужно просто сделать контейнер в 1200px и паддинги в 15

[@LosihaSosibokal]

Потом адаптив геморно будет делать

[@user-op9lc3ws9z]

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

[@blacktaur]

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

[@black_bird_guitar7505]

Спасибо за контент, для самоучки соме то)

[@tengenuzui3907]

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

[@EduCatterOfficial]

Всегда буду)

[@ИгорьГлазков-с1б]

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

[@bestgamer3846]

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

[@EduCatterOfficial]

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

[@КапитанБардак-э6м]

Но ведь шапка совсем не похожа на макет. Меню от логотипа не на том же расстоянии, что и элементы меню друг от друга, justify-content: space-around тут, очевидно, неприменимо. Контейнер задан для хедера, допустим. И есть отступы контейнера. Но почему отступы? Ведь при изменении размеров окна верстка сразу ломается. И почему только для хедера, а не для всего контента? Почему все на дивах, без логических блоков? Это сложнее, чем флексбоксы и нельзя новичку рассказать о них, а о флексах можно? Валяешь размеры как попало: "пусть тут будет столько а тут допустим примерно столько" - у тебя макет перед глазами и там есть все размеры. Куда с такими "знаниями идти"? Чему ты научил? Любой заказчик тебя мокрыми тряпками погонит и обрушит тебе рейтинг на бирже за такую верстку. Из любопытства доделаю до конца по твоей "инструкции", чтобы посмотреть что получится. Подавать подобное под видом "обучения" - это преступление.

[@JavangelionTV]

Фух, спасибо, у меня аж отлегло : ) Думал, что меня одного смутило, что всё верстается на глаз и не соответствует макету, хотя макет с точными размерами прямо перед глазами. Всё на дивах без семантики, ни слова про БЭМ. Где Visual Studio Code? Я понимаю, что это для новичков, но нельзя же так чудовищно плохо с самого начала учить, потому очень больно будет переучиваться.

[@blanksheet7]

Для начала я бы посоветовал сначала добавить папку с изображениями в саму папку с проектом, а затем скачал все изображения и перекинул их в эту папку, а так же в css написал :root {} и между фигурными скобками закинул несколько цветов с макета чтобы постоянно не заходить и не устанавливать а сразу же подключать не переходя в макет и тратив тем самым время на создание сайта по макету

[@blanksheet7]

И тем самым не тратив время на создание сайта по макету***

[@alikhanmakhan]

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

[@ДенисНекрасов-л2ю]

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

[@jobschannel9755]

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

[@P3kinnn]

Бро, слишком качественный контент!

[@Aziza-t2o]

просто супер

[@Jus0000T]

Здравствуйте,вы будете ввидео уроках по этому сайту создавать геперсссылку? можете оветить пожалуйста, буду благодарна

[@EduCatterOfficial]

К сожалению серия закрыта (

[@MoskowM1]

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

[@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)

[@worldDum]

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

[@EduCatterOfficial]

Всё для вас)

[@ИванЗверев-п8ю]

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

[@EduCatterOfficial]

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

[@ButcherMoon12]

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

[@no-distrx]

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

[@ГоссенПэксли]

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

[@alexandrf2428]

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

[@Gwizl2003]

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

[@NonaGurgen]

Браво 😍😍😍

[@dimka3453]

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

[@SILCH]

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

[@spilusgaru]

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

[@irinacher44]

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

[@СергейЧерняев-щ4о]

Это точно!!!

[@crazyworld1425]

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

[@justcat2077]

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

[@ВиталийЛукашевич-у4и]

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

[@dcptggroup]

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

[@FelixX138]

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

[@EduCatterOfficial]

благодарю!

[@daryaneznanova9964]

Здравствуйте, буду благодарна, если ответите. У меня в хедере элементы располагаются таким образом, что justify-content не выровняет их так, как нужно. Например, можно поставить space-between, но мне нужно, чтобы между одними элементами расстояние было больше, а между другими поменьше. У меня в голове миллион способов, как это сделать, но мне интересно, какой из них наиболее правильный, грамотный. Как вы это делаете?

[@webstar9241]

Добрый вечер. Если Вам нужно динамично управлять отдельными элементами в расках flex-родителя тогда Вам поможет css свойство align-self для дочернего элемента.

[@alexasanchobetherestors9962]

Я делаю так. Элементы оборачиваю в родительский div. Ему ставлю position: relative. Если мне нужно выровнять дочерние элементы, то им задаю position: absolute, это дает возможность гибко манипулировать свойствами такими, как: top, bottom, left, right. То есть, можно двигать элементы в любую сторону, на нужное количество пикселей.

[@Sltkbeaver199]

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

[@EduCatterOfficial]

Я делал данные видео как раз специально для новичка, который только что закончил курс по HTML и CSS)

[@mamutkomekbaev2400]

Респект бро👍

[@EduCatterOfficial]

спасибо)

[@AleksyGorsky]

я конечно не эксперт, но почему ? 1)лого скачивать в png. a nie B svg ? 2) почему лого просто был введен как имг без обвертки в ? 3) почему был создан первый див хеадер, а не (секция) header.header#header а далее контейнер, затем просто section.section#section так же внутри с дивом .section и в самом конце footer.footer#footer? и так по всей верстке, очень мало хорошей практики, так называемого хорошего тона верстки, где можно достичь не только более красививой верстки, но и с меньшим кол-во повторяющихся элементов.

[@КапитанБардак-э6м]

Просто чел, видимо, сам только что закончил курсы фронтенда и не имеет коммерческого опыта.

[@seoonlyRU]

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

[@sans6681]

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

[@acdmilk3870]

Это фигма

[@Информатика-ж7л]

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