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

❗️ Подписывайся на мой телеграм-канал про 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
🔽 KZbin - / @sergeydmitrievsky
📩 По вопросам сотрудничества [e-mail]

[@sergeydmitrievsky]

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

[@user-lq5re8ih3u]

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

[@sonliv3416]

В закреп)

[@user-zh4ub6kk3t]

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

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@user-vz5cn3sp8x]

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

[@denistankoff8181]

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

[@mychanel2601]

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

[@raynelzlogs]

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

[@curious7287]

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

[@AL86813]

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

[@user-gz7nk7iz3h]

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

[@LailaLaila-zw7pc]

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

[@Rin_003-_-]

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

[@Gam1ng_Tricks]

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

[@user-qc5wn3ik8y]

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

[@user-ll9zm5tv9c]

ПОДДЕРЖИВАЮ

[@user-qg3vj6nd1r]

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

[@alexanderbordyug5870]

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

[@SwishhZxckl]

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

[@Anastasiia_Kot]

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

[@tehno.maniak]

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

[@Karrit94]

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

[@user-wh5fp3jr3o]

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

[@Karrit94]

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

[@user-wy2zr8gn1g]

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

[@Karrit94]

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

[@CraykTV]

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

[@rainhard86]

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

[@upwlqwp]

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

[@user-in1pe9np1n]

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

[@user-do1ch6yp4p]

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

[@hopenew6643]

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

[@y.5068]

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

[@user-dm6mz4sl2g]

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

[@user-vs6yp5yl6h]

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

[@user-te4dj1ku7f]

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

[@leto4063]

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

[@ITXXIful]

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

[@im_zvezddd1281]

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

[@kotokmen]

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

[@RaffolYKT]

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

[@user-ur4qb7oh1e]

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

[@gugo913]

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

[@antonyfeirmont]

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

[@vitaliykalachev3978]

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

[@user-pc5sr2sg7x]

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

[@kityelaken2677]

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

[@azizbiialiev7259]

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

[@user-jh9ip6zn6e]

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

[@MrDovinche]

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

[@user-rn5cl2fr8b]

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

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@vdmt5171]

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

[@dmitriikorzin6205]

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

[@vovamorozov5545]

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

[@dramses]

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

[@dramses]

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

[@sa1lordev]

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

[@deitman682]

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

[@heromidori5800]

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

[@kissyourwife]

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

[@iwasborntomakeyouhappy]

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

[@sailbrain9087]

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

[@ruslankashapov5443]

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

[@Lindoverio]

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

[@oleksandr4750]

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

[@user-um7en5rx3v]

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

[@trendhater6527]

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

[@samstas]

благодарю!

[@alexandralexandr2997]

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

[@Timurka_10]

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

[@Alexey.Sokolovsky]

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

[@iamshoet]

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

[@kostyarevin2379]

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

[@user-oo1in1pf5o]

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

[@user-bn5xo1vh2f]

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

[@f0zanoiD]

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

[@shinlint3183]

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

[@nonomad8937]

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

[@rza5041]

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

[@user-ss3qy3zu9k]

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

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@OlegNaumov-me6yj]

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

[@mellstroyfanpage]

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

[@jackmack2.092]

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

[@luigibartolomeo6382]

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

[@Nurgazy]

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

[@AlexOsip]

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

[@dmitry_korsakov]

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

[@user-vy7cp2tt2x]

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

[@user-ml8hw4ot5i]

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

[@daviddokhoyan7830]

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

[@olegtsimfer455]

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

[@pylot-0139]

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

[@user-en3zp3ok3m]

Красавчик 👍

[@Naebuka]

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

[@Naebuka]

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

[@stszn]

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

[@Themilliarder]

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

[@thomasshelby4753]

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

[@user-vy2wn9gc1q]

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

[@wepagucci3461]

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

[@user-xy4uo6yh6b]

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

[@user-wx2mj4yz1r]

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

[@sulsanzhar]

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

[@SeregsK]

Как успехи?

[@user-oe3jc4yx7d]

Спасибо!

[@user-py7hm2mx7o]

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

[@user-tj9ql2rg7b]

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

[@afruzqodirov8468]

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

[@ocnotuda]

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

[@Mushu404]

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

[@ocnotuda]

@@Mushu404 недели 2

[@Mushu404]

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

[@ocnotuda]

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

[@dadzhi]

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

[@robertrebelovskiy3239]

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

[@user-nx4es7it2n]

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

[@mashkanasevere7391]

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

[@georgysergeev7846]

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

[@lilcolldy5725]

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

[@retransformed]

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

[@abboskhadzhimuratov5930]

🔥🔥🔥

[@user-np2ms9uk6s]

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

[@KOT3prod]

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

[@stszn]

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

[@zimaviolet3004]

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

[@user-hy5ns7pb5e]

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

[@user-py7hm2mx7o]

Так это же уже дизайн, а не верстка тогда.

[@subind.8126]

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

[@subind.8126]

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

[@kadishka]

+++++++++

[@denisenki_video]

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

[@amaterasuez7360]

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

[@vovamorozov5545]

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