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

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

Рет қаралды 502,191

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

2 жыл бұрын

Привет, друг!
Это новая тематика на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты!
В этом видео я показывай шаг за шагом процесс создания сайта, на этот раз это сайт ресторана. Это только одно из множества видео, дальше будет окончательная верстка, адаптация под мобильные устройства и загрузка на хостинг. То есть мы пройдем вместе весь путь создания сайта. А чтобы не пропустить новые части подпишись!
Все ссылки:
Ссылка на шаблон: 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
Не забудь подписаться!

Пікірлер: 500

@andy_top6676 10 ай бұрын

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

@erictamberg5903 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@BlackBeltBloger Жыл бұрын

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

@DB-zz9zn Жыл бұрын

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

@user-jd9jm7mc6e Жыл бұрын

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

@rufuscer Жыл бұрын

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

@user-lm9ee1gn5p Жыл бұрын

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

@Andrei-Veaceslavovich Жыл бұрын

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

@romanpit4you361 9 ай бұрын

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

@TOBI-qj4hw Жыл бұрын

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

@SerKrut_ 12 күн бұрын

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

@uzrumors Жыл бұрын

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

@8lado4ka Жыл бұрын

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

@BlackBeltBloger Жыл бұрын

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

@user-nj8oi2bw3s Жыл бұрын

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

@user-km1ub2zb9c Ай бұрын

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

@user-zo2wq5dg1v Жыл бұрын

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

@EduCatterOfficial Жыл бұрын

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

@spectator4338 5 ай бұрын

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

@anatoliy_lp Жыл бұрын

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

@NaroXz Жыл бұрын

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

@marianslovianyn2718 16 күн бұрын

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

@user-qf7yt8rq4i 10 ай бұрын

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

@mariko-canphantom7690 6 ай бұрын

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

@evgeniadanilova4135 10 ай бұрын

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

@vladelec_allaha Жыл бұрын

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

@multivitamin7579 Жыл бұрын

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

@user-vp9lq8rt9q 5 ай бұрын

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

@verakovaleva8932 9 ай бұрын

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

@kadirkazimov6499 6 ай бұрын

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

@user-op9lc3ws9z 2 жыл бұрын

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

@user-ve7tx3ud6n Жыл бұрын

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

@user-qs5jh7dy3p Жыл бұрын

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

@optimistka16 Жыл бұрын

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

@sweetbunny2804 Жыл бұрын

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

@blacktaur Жыл бұрын

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

@arinorina 4 ай бұрын

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

@EduCatterOfficial 4 ай бұрын

Рад слышать)

@crazyworld1425 Жыл бұрын

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

@user-xz9vl8zd5i Жыл бұрын

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

@Healix909 3 ай бұрын

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

@SILCH Жыл бұрын

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

@superjew8171 Жыл бұрын

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

@_lambfer_831 Жыл бұрын

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

@justcat2077 Жыл бұрын

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

@user-ut5mh6lc4w Жыл бұрын

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

@user-fr5fq2iw6d 18 күн бұрын

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

@ButcherMoon12 Жыл бұрын

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

@technomobilee 6 ай бұрын

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

@NonaGurgen Жыл бұрын

Браво 😍😍😍

@user-bg1pv6mi6r Жыл бұрын

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

@user-iz7ih4od4y 3 ай бұрын

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

@MoskowM1 2 жыл бұрын

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

@user-zc5or8ow6d Жыл бұрын

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

@user-nv9ct5cg8y 7 ай бұрын

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

@phantasy8139 6 ай бұрын

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

@ToFU-xx 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@tengenuzui3907 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

Всегда буду)

@user-kb6ps7cu1e Жыл бұрын

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

@baurzhan1194 2 жыл бұрын

Гуд👌

@asyaaa.ka1 Жыл бұрын

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

@alikhanmakhan 8 ай бұрын

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

@dcptggroup Жыл бұрын

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

@ruinxr9 4 ай бұрын

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

@user-gz9tk9xn1j Жыл бұрын

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

@PromareGalo 9 ай бұрын

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

@damelis163 8 ай бұрын

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

@mmamadovv Жыл бұрын

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

@EduCatterOfficial Жыл бұрын

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

@user-nv6gl9bw3z 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@KravaDota Жыл бұрын

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

@alexasanchobetherestors9962 Жыл бұрын

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

@AchtungBaby-io7zl 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@tankist521 8 ай бұрын

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

@bestgamer3846 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@dumaXd_targetolog 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

Всё для вас)

@mamutkomekbaev2400 2 жыл бұрын

Респект бро👍

@EduCatterOfficial 2 жыл бұрын

спасибо)

@user-zo2wq5dg1v Жыл бұрын

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

@obivanishche 11 ай бұрын

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

@irinacher44 2 жыл бұрын

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

@user-wt6gp8hr7r 2 жыл бұрын

Это точно!!!

@elisabethkobrina Жыл бұрын

Спасибо вам

@FelixX138 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

благодарю!

@SAMANUELb 10 ай бұрын

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

@Lnesst Жыл бұрын

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

@user-fz1ch9wx3z 3 ай бұрын

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

@spilusgaru Жыл бұрын

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

@jobschannel9755 Жыл бұрын

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

@clouze4575 Жыл бұрын

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

@user-uw1ur4vs6n Жыл бұрын

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

@EduCatterOfficial Жыл бұрын

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

@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-pf3iy1md7j Жыл бұрын

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

@epicshorsviral Жыл бұрын

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

@user-li7hl5yb2t 2 жыл бұрын

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

@dimka3453 3 ай бұрын

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

@TV-yj6mz 2 жыл бұрын

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

@EduCatterOfficial 2 жыл бұрын

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

@madarasan0 Жыл бұрын

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

@indictmentpubg Жыл бұрын

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

@user-jj3pt6yx9o Жыл бұрын

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

@blackeducationacademy Жыл бұрын

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

@essentialmercli Жыл бұрын

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

@donchikbro4140 Жыл бұрын

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

@P3kinnn 9 ай бұрын

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

@user-yv2yc4fj4w Жыл бұрын

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

@qvxmpxqwevw 27 күн бұрын

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

@black_bird_guitar7505 Жыл бұрын

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

@seoonlyRU Жыл бұрын

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

@Aksvatik 9 ай бұрын

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

@surman6151 7 ай бұрын

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

@amaydastudent Ай бұрын

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

@delicioushour1959 3 ай бұрын

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

@could_lie Жыл бұрын

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

@no-distrx 2 жыл бұрын

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

@yulia_serhieieva Жыл бұрын

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

@sansandpapairus7827 2 жыл бұрын

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 2 жыл бұрын

Thank you man, good luck too)