Объяснение Вёрстки Простого Сайта HTML+CSS

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

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

50% 1

❗️ Подписывайся на мой телеграм-канал про IT, программирование и frontend → t.me/sergeydmitrievsky
✔️ Реальный Фронтенд: курс-профессия с нуля → clck.ru/3AYjHL
✔️ Roadmap с нуля до работы в IT программистом → clck.ru/3AYjR6
✔️ Оффер в IT: тренинг как пройти собеседования и устроиться на работу в IT → clck.ru/3AYBBR
✔️ Мой телеграм-канал про личный бренд, соцсети и монетизацию → t.me/sergeyonlinebiz
Подписывайся на меня в соц. сетях:
🔽 Telegram про IT - t.me/sergeydmitrievsky
🔽 Telegram про онлайн-бизнес - t.me/sergeyonlinebiz
🔽 Instagram - / sergeydmitrievskyit
🔽 RU-vid - / @sergeydmitrievsky
📩 По вопросам сотрудничества sergey@sergeydmitrievsky.ru

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

23 июл 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sergeydmitrievsky Год назад

❗Подписывайся на мой телеграм-канал про IT, программирование и frontend → t.me/sergeydmitrievsky

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

Закрепи а то я не сразу понял где он

@sonliv3416 Год назад

В закреп)

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

есть проблема с макетом, ширина макета 1440пикселей, что означает что макет делался на ноутбуке. И если у тебя вёрстка макета отображается нормально, то на фул хд экране выглядит это не очень. И непонятно что делать с этим макетом - растягивать или не растягивать. Вообщем видно что человек работал не самый опытный над макетом, даже контейнер для контента не придумал..... Точнее контент расположил не в контейнере..

@OOOOOOOOOOOOOOOOOOOOOO333 Год назад

@@user-zh4ub6kk3t блин я начинающий только в этом деле. вроде бы все пока понятно КРОМЕ пикселей и разрешений я совсем запутался. у меня ноутбук 15.6 дюймов разрешение 3200 на 2000 как мне оталкиваться и делать правильно верстку (( ??

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

@@user-zh4ub6kk3t тоже с этим столкнулся, просто растянул под свое разрешение, потому что дальше моего пк или максимум хаба эта верстка не уйдет.

@Karrit94 Год назад

Сергей, спасибо тебе большое за урок..и вообще за твои ролики... Они очень мотивируют. У меня двое мелких😂 и муж...не дают спокойно учиться... Никто не разделяет мое стремление поменять профессию... но мое желание настолько сильное, что не лень просыпаться в 5 утра чтобы до 8 спокойно позаниматься)))) надеюсь, что всё будет не зря) спасибо ещё раз!

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

Вы вдохновили своим примером, уверена, у вас всё получится!

@Karrit94 Год назад

@@user-wh5fp3jr3o Спасибо большое) и Вам успехов в обучении!

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

@@Karrit94 как ваш прогресс? занимаетесь?

@Karrit94 Год назад

@@user-wy2zr8gn1g да, потихонечку, но стараюсь не бросать. Вот подытоживаю html css и буду переходить к js.

@CraykTV Год назад

он не адвеквод

@mychanel2601 Год назад

давно ждал такого формата! спасибо за контент 🔥🔥🔥🔥🔥

@denistankoff8181 Год назад

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

@raynelzlogs Год назад

Огонь 🔥 Жду побольше таких видео

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

🔥🔥🔥💥☄️наконец-то дождался, жду больше такого, больше обучающего контента 🔥🔥🔥

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

ПОДДЕРЖИВАЮ

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

Оооо да ... Ток вчера лазил по каналу искал такое видео ))

@alexanderbordyug5870 Год назад

Только не дольше 30 минут!

@SwishhZxckl Год назад

@@alexanderbordyug5870 Если хочешь хорошее обучающее видео, то оно будет минимум час, и то здесь сайт очень простой, поэтому вышло 50 минут. На другой бы ушло больше времени.

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

000чень крутой формат , ждем побольше обучающих видео!

@curious7287 Год назад

Вооо!!! Супер!!! На самом деле нагляднее, когда ты демонстрируешь творческий процесс вживую а не с подготовкой, тогда можно лицезреть сам процесс и идеи для реализации проекта!!! Спасибо за видео!!! Очень годный контент!!! 👍👍👍

@Gam1ng_Tricks Год назад

Спасибо большое. Жду следующих макетов )))

@Anastasiia_Kot Год назад

Очень круто! Хотелось бы увидеть продолжение вёрстки этого макета в адаптиве

@AL86813 Год назад

Огромное спасибо ! Очень хочется больше таких практических видео! Очень помогает в учебе, особенно такому новичку как я)

@rainhard86 Год назад

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

@tehno.maniak Год назад

Спасибо тебе за видео! Жду побольше подобных разборов)

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

Спасибо! Отличный формат видео!

@LailaLaila-zw7pc Год назад

шикарно. огромное вам спасибо за такое полезнейшее видео!!! можно побольше таких, пожалуйста!🙏❤

@upwlqwp Год назад

Спасибо большое, ждём больше обучающих видео

@Rin_003-_- Год назад

Большое спасибо за ваш труд!Успехов вам! Без воды, доступно, понятно.

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

Спасибо за труд, завтра буду пробовать хотя уже и забыл как и что в вёрстке, Каждое именно такое видео с практикой призывает к действию

@im_zvezddd1281 Год назад

Вау!!! Огромное спасибо за такой видеоролик!

@ITXXIful Год назад

Спасибо за видео, хотелось бы еще подобных видосов с версткой, с нарастанием сложности

@hopenew6643 Год назад

Очень классный и полезный формат (Хожу на курсы но по этому ролику узнал больше чем на курсах :)

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

Спасибо огромное. Все получилось. Ждём следующего👌👌👌👌

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

Огромное спасибо за видео! Очень полезно!

@vitaliykalachev3978 Год назад

Класс! Спасибо большое! Буду делать!

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

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

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

Видос понравился. Ждём от тебя курс форнтендера. Сил и времени!)

@leto4063 Год назад

Привет👋 Ролик отличный, как и весь твой контент Как пожелание, хочется больше подобных роликов с практикой, как html/css, так и js и других технологий Спасибо за твой труд🙂

@y.5068 Год назад

Спасибо, Сергей за это видео. Формат понравился. Непонятные вещи, которы встретил в практическом задании оставил для самостоятельного разбора. Мне очень понравилось делать верстку.

@MrDovinche Год назад

Спасибо тебе за твой труд и твое видео.

@kotokmen Год назад

Отличное видео! Все доходчиво и понятно! Можно еще несколько проектов различной тематики реализовать с применением только HTML&CSS, а потом можно и JS понемногу подключать. И я думаю многие втянутся и изменят свою жизнь )))

@gugo913 Год назад

Спасибо за полезный контент и интересные видосы...Респект!

@RaffolYKT Год назад

Спасибо большое! Грамотно и просто! Без всякой воды и "тягомотины" как на других курсах, просто пример как легко начать верстать сайт! Легко! Теперь только учить команды и вливаться

@sailbrain9087 Год назад

Спасибо большое за видео))

@OOOOOOOOOOOOOOOOOOOOOO333 Год назад

Очень даже понравилось. Спасибо !

@Lindoverio Год назад

Вот это будет полезно, спасибо

@heromidori5800 Год назад

Спасибо , Сергей !

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

Очень нравится такой формат. Безумно мотивирует, узнаю много нового. Очень жду ещё больше такого формата!!!

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

спасибо за Ваш труд! повторяла практически все пошагово, что то не вышло, но в целом макет получился похожим, очень рада :)

@oleksandr4750 Год назад

Крутое видео! Большое спасибо!

@azizbiialiev7259 Год назад

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

@antonyfeirmont Год назад

Спасибо большое, отличное видео! Повторял все следом за тобой. И не поленился Sw12 сделать также как на макете :) Узнал новые вещи для себя, очень понравилась подача.

@ruslankashapov5443 Год назад

Ну вот, полезные видосики пошли)))

@sa1lordev Год назад

Спасибо, классное и полезное видео!)

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

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

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

Отличное пособие для меня, как только начинающего верстальщика!!!по этому алгоритму буду пробовать создавать свою страничку с другим товаром. Зачёт!!!

@iamshoet Год назад

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

@kostyarevin2379 Год назад

отличный формат ) можно еще

@f0zanoiD Год назад

Формат прекрасен!

@kissyourwife Год назад

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

@shinlint3183 Год назад

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

@vdmt5171 Год назад

Отличный видос! Мастер-класс от профессионала. Все на дивчиках))) Кстати, интересный лайфхак про выравнивание по кертикали. Спасибо!

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

Топ 🔥🔥🔥 Это мой первый сайт на html!

@dmitriikorzin6205 Год назад

Спасибо огромное за видео, верстал вместе с тобой на одном дыхании. Про практику в конце очень верно подметил, я еще не до конца прошел курс css html, но благодаря твоему видео подчерпнул новые знания. Побольше бы такого!!))

@vovamorozov5545 Год назад

А где вы проходите данный курс?

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

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

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

@@vovamorozov5545 Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?

@deitman682 Год назад

Спасибо, повторил. хоть и под копирку, но все равно рад тому, что хоть с чего то начал. в голове что-то да есть теперь

@jackmack2.092 Год назад

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

@rza5041 Год назад

Твой канал нереееееееееееееееееееееееааааааааааааааально ахиренен, дружище

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

Привет , недавно начал интересоваться сферой IT , думал что это не мое смотрел видео уроки в итоге понял что это-то что меня интересует. Мне это нравиться! Начал с большим увлечением этим заниматься купил книгу" HTML и CSS". По видео ролику все понятно отлично объясняешь , нет лишних слов до того как изучал все что для меня было необходимо было ничего не понятно , но после просмотра твоего видео ролика мне все стало ясно.

@Alexey.Sokolovsky Год назад

Очень полезно.Нет, максимально полезно! Спасибо за старания!

@nonomad8937 Год назад

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

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

Видео класс 🔥🔥🔥🔥🔥

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

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

@daviddokhoyan7830 Год назад

Лучший!!! Продолжай !!!!

@pylot-0139 Год назад

Круть, очень понятно!!!

@Nurgazy Год назад

Формат классный мне реально интересно стало.

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

Полосу забыл) Нужно после product description добавить тег 'hr' и стилизовать его: margin-top: -50px; width: 180px; color: #707070; margin-bottom: 50px; Либо избавиться от отрицательного отступа сверху, но придется редактировать отступ у предыдущего элемента.

@trendhater6527 Год назад

специально полез искать подобный комментарий и нашел :) Дай бог тебе здоровья!

@samstas Год назад

благодарю!

@alexandralexandr2997 Год назад

еще фото часов не поменял

@thomasshelby4753 Год назад

Бро,класне відео,давай побільше таких відео ,давай на цей раз середній рівень верстки,щоб ми змогли закріпити знання 💯

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

Крутой видос Давай ещё!!!!! Лайк поставил

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

Спасибо! Очень полезно! Лайк за труд и красные глаза

@OOOOOOOOOOOOOOOOOOOOOO333 Год назад

Подскажите пожалуйста, зачем он в header поместил контейнер потом ? я так и не понял если все равно он потом контейнер растянул на ширину header...

@Naebuka Год назад

побольше бы таких видео для новичков используя только html и css

@Naebuka Год назад

@@raufauf3979 выучить то я выучил, а когда пытаюсь сам сверстать, то у меня ступор, мне кажется нужна практика и очень много

@stszn Год назад

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

@luigibartolomeo6382 Год назад

Очень хорошо рассказываешь будешь моим учителем😀

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

Нужно, чтобы ещё с JS что-то было)

@OlegNaumov-me6yj 5 месяцев назад

Все отлично, спасибо за практический урок по верстке)

@iwasborntomakeyouhappy Год назад

Плиииз больше такого контента и роликов с версткой! Для новичков просто сокровище 🙏

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

Я считаю что ролик очень познавательный для новичков, можно было бы сделать 2 часть, но с более сложной версией макета)

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

Красавчик 👍

@Themilliarder Год назад

Привет, всё очень классно. Есть одно но когда работаешь убери себя от часть экрана, было бы лучше.

@dmitry_korsakov Год назад

44:02 - сказал, что дальше выше будет с маленькой буквы и посмотрел наверх😆. Спасибо за классный урок)))

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

Спасибо!

@olegtsimfer455 Год назад

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

@AlexOsip Год назад

Благодарю за видео, уже не первый месяц учу фронтенд но мои знания довольно хаотичны и не структурированы, уже с NPM, NVM и TypeScript работаю а вёрстка очень слабая и пробелов много а этот ролик дал ответы на многие терзавшие меня вопросы

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

Спасибо бро очень помог, здоровья тебе ! 😉

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

Полезное видео.😊

@abboskhadzhimuratov5930 Год назад

🔥🔥🔥

@robertrebelovskiy3239 Год назад

Мужик обожаем тебя 😩💙💙💙💜💕🇰🇬

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

Просто пиши комент, хули флаг ставишь?

@retransformed Год назад

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

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

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

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

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

@ocnotuda Год назад

блин круто! я как раз изучил основы html css и начал делать лендинг с помощью фигмы и vs code, сделал уже больше половины за несколько вечеров, сейчас посмотрю видео проведу работу над ошибками) спасибо!

@Mushu404 Год назад

Долго изучал вёрстку?)

@ocnotuda Год назад

@@Mushu404 недели 2

@Mushu404 Год назад

@@ocnotuda а ты по каким-то видосам учился или как?) а то тоже начал изучать вёрстку, порой такая каша в голове...

@ocnotuda Год назад

@@Mushu404 сначала структуру html потом css, тут важно по чуть чуть набирать знания а потом просто практиковать, я почти сразу начал идеи записывать и начал лендинг верстать даже многое изучая параллельно, поэтому каша это нормально

@dadzhi Год назад

@@Mushu404 Уменя также,в голове каша. Но думаю в начале главное просто верстать как нужно.

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

Урааа, Я хотябы понял как верстать , спасибо за урок

@subind.8126 Год назад

Круто! А будут туториалы по JS ?

@kadishka Год назад

+++++++++

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

Здравствуйте , я начал изучать JS front end ровно как месяц. Очень понравился формат как раз только закончили Html/css и ваше видео зашло на 200% . Продолжайте , с меня лайк + подписка !

@sulsanzhar Год назад

чему еще научился за 2 месяца, как закончил html/css? оч интересно

@SeregsK Год назад

Как успехи?

@mashkanasevere7391 Год назад

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

@subind.8126 Год назад

и еще совет сделать видео там где не посредственно ты на фоне верстки , в круглом формате,так будет меньше закрывать сам процес верстки и Figma.

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

Спасибо , очень круто , все четко и ясно , так еще на днях решил пощупать Фигму и тут твое видео )

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

Про БЭМ все верно сказал. Новичку в начале лучше не заострять на этом внимание и сосредоточиться на понятном названии классов. Со временем можно будет и БЭМ начать применять. В любом случае все прийдёт с опытом)

@KOT3prod Год назад

бэм бэмом но зачем создавать отдельные классы для тегов... и просто описывать селектором

@stszn Год назад

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

@denisenki_video Год назад

Больше примеров приложений на JS с подробным объяснением)

@Oevka Год назад

Спасибо за видео! Прикрепи, пожалуйста, ссылку на видео, о котором ты в конце ролика говоришь про Todolist.

@zimaviolet3004 Год назад

Дружище, спасибо тебе большое за этот ролик! Только ты в конце линию забыл сделать, по тебе видно было, что ты какой-то тут уставший(

@afruzqodirov8468 Год назад

Спасибо!!! за очень полезный контент I highly appreciate your effort

@amaterasuez7360 Год назад

спасибо за видео очень информативно без опыта и без супер зубрешки скучной теорий можешь на практике сделать свой первый сайт и сразу увидеть результат спасибо за видео еще раз )

@vovamorozov5545 Год назад

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