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

[@erictamberg5903]

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

[@EduCatterOfficial]

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

[@BlackBeltBloger]

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

[@andy_top6676]

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

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

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

[@EduCatterOfficial]

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

[@DB-zz9zn]

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

[@SerKrut_]

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

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

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

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

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

[@Delzen-y5e]

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

[@multivitamin7579]

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

[@Смазик]

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

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

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

[@spectator4338]

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

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

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

[@evgeniadanilova4135]

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

[@BlackBeltBloger]

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

[@asyaaa.ka1]

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

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

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

[@phantasy8139]

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

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

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

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

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

[@rufuscer]

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

[@fdsadsad44]

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

[@корилепа]

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

[@romanpit4you361]

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

[@sw3pstandoff254]

ну как?

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

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

[@EduCatterOfficial]

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

[@verakovaleva8932]

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

[@Andrei-Veaceslavovich]

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

[@NaroXz]

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

[@madarasan0]

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

[@dm_nechaev]

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

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

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

[@blackeducationacademy]

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

[@essentialmercli]

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

[@donchikbro4140]

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

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

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

[@obivanishche]

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

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

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

[@technomobilee]

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

[@AchtungBaby_87]

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

[@EduCatterOfficial]

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

[@Lnesst]

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

[@JsixjsnHhGsbbe]

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

[@akislowedqq]

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

[@8lado4ka]

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

[@alexasanchobetherestors9962]

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

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

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

[@vitamins-g2d]

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

[@arinorina]

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

[@EduCatterOfficial]

Рад слышать)

[@optimistka16]

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

[@TOBI-qj4hw]

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

[@port_77]

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

[@Аксватик]

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

[@surman6151]

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

[@amaydastudent]

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

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

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

[@tankist521]

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

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

[@ArrI888]

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

[@EduCatterOfficial]

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

[@ArrI888]

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

[@EduCatterOfficial]

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

[@mmamadovv]

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

[@EduCatterOfficial]

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

[@Marian_Slovianyn]

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

[@Moonlization]

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

[@azizuk7801]

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

[@Moonlization]

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

[@azizuk7801]

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

[@azizuk7801]

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

[@EduCatterOfficial]

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

[@_lambfer_831]

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

[@sweetbunny2804]

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

[@mariko-canphantom7690]

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

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

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

[@jobschannel9755]

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

[@superjew8171]

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

[@ToFU-xx]

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

[@EduCatterOfficial]

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

[@alikhanmakhan]

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

[@tengenuzui3907]

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

[@EduCatterOfficial]

Всегда буду)

[@prod.goldtaur]

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

[@kadirkazimov6499]

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

[@ruinxr9]

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

[@dimka3453]

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

[@seoonlyRU]

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

[@user-op9lc3ws9z]

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

[@bestgamer3846]

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

[@EduCatterOfficial]

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

[@sans6681]

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

[@acdmilk3870]

Это фигма

[@MoskowM1]

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

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

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

[@dm_nechaev]

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

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

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

[@EduCatterOfficial]

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

[@worldDum]

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

[@EduCatterOfficial]

Всё для вас)

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

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

[@clouze4575]

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

[@TV-yj6mz]

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

[@EduCatterOfficial]

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

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

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

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

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

[@spilusgaru]

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

[@blanksheet7]

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

[@blanksheet7]

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

[@ButcherMoon12]

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

[@irinacher44]

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

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

Это точно!!!

[@NonaGurgen]

Браво 😍😍😍

[@SILCH]

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

[@delicioushour1959]

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

[@ErthSunOfPlanet]

Для начинающих сложно. А когда ты уже сверстал штук 10 макетов, один сложнее другого. Вот тогда, для тебя верстка это, явная верстка. А когда ты начинаешь делать CSS анимации потом 3д анимации на css. А когда после такой практики переходишь в js и делаешь её это вообще. Бог Фронта. На этом этапе изучаешь фреймворки, для верстки и js, далее начинаешь с малого, с формы обратной связи, на js или ином языке бля Бэка, а уже sql, а том монгоДБ или подобное в итоге. За 2 месяца ты становишься Джуном. Хорошим джуном. Которую всего лишь необходимо подтянуть теорию и паттерны. Крч Бог ФуллСтак, тобиж Я вернулся!

[@ФехтовальщикДранглика]

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

[@P3kinnn]

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

[@crazyworld1425]

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

[@dcptggroup]

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

[@StasAndreev-v9k]

Видео супер!!! На уровне, все четко и красиво, то что надо после основ хтмл, вот только вопрос есть. У меня комп thinkpad lenovo, и экран гораздо меньше твоего, и из-за этого шаблон не соответствует с габаритами текста, и фоновой картинки ( например у меня номер телефона очень упирается вправо) , что делать в таком случае ??

[@EduCatterOfficial]

Можно просто тогда подгонять вёрстку под свой размер экрана и все) или пользоваться медиа-запросами тобишь для каждой ширины экрана мы что-то меняем. Подробнее про медиа-запросы вот тут: kzbin.info/www/bejne/f4iqeqyFq6-hZ68

[@alexandrf2428]

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

[@ТимофейЛогинов-ч1и]

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

[@PromareGalo]

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

[@Aziza-t2o]

просто супер

[@LosihaSosibokal]

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

[@LosihaSosibokal]

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

[@FelixX138]

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

[@EduCatterOfficial]

благодарю!

[@KravaDota]

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

[@justcat2077]

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

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

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

[@daryaneznanova9964]

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

[@webstar9241]

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

[@alexasanchobetherestors9962]

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

[@damelis163]

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