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

[@sergeydmitrievsky]

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

[@ВладимирСимоненко-э3ж]

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

[@sonliv3416]

В закреп)

[@절단날]

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

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@ГлебПухальский-б5у]

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

[@Karrit94]

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

[@вестааа]

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

[@Karrit94]

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

[@Lizavetta-v7h]

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

[@Karrit94]

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

[@CraykTV]

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

[@РусланГаллямов-ь5е]

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

[@ДмитрийЖуков-у6с]

ПОДДЕРЖИВАЮ

[@ЮрийСачук]

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

[@alexanderbordyug5870]

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

[@SwishhZxckl]

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

[@curious7287]

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

[@kityelaken2677]

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

[@СыктымКутакбаев]

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

[@trendhater6527]

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

[@samstas]

благодарю!

[@alexandralexandr2997]

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

[@RaffolYKT]

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

[@denistankoff8181]

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

[@raynelzlogs]

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

[@Blezov]

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

[@ДимаБалашук-ж2н]

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

[@rza5041]

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

[@ocnotuda]

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

[@Mushu404]

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

[@ocnotuda]

@@Mushu404 недели 2

[@Mushu404]

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

[@ocnotuda]

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

[@dadzhi]

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

[@НиколайЛукин-б1й]

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

[@KOT3prod]

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

[@stszn]

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

[@thomasshelby4753]

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

[@kotokmen]

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

[@dmitriikorzin6205]

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

[@vovamorozov5545]

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

[@dramses]

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

[@dramses]

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

[@ЕвгенийТ-ч8в]

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

[@rainhard86]

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

[@AL86813]

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

[@Naebuka]

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

[@Naebuka]

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

[@stszn]

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

[@Cline67-s7d]

@@NaebukaНу что, если не секрет, уже верстать спокойно можешь?

[@Cherrtov]

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

[@Anastasiia_Kot]

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

[@ktklife8803]

Слушай, ну с этим мне кажется немного рановато на js переходить, у HTML ещё полно тегов, тот же | или | встречаются почти на каждой странице.

[@ktklife8803]

Но признаю, урок действительно хороший и достаточно познавательный

[@sergeydmitrievsky]

Можно не переходить))) но изучение разработки итеративный процесс. Ты никогда не будешь знать одну тему на 100%.

[@ЭнакентийБест]

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

[@ЕвгенийСеменов-н6н]

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

[@ruslankashapov5443]

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

[@dmitry_korsakov]

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

[@mychanel2601]

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

[@kostyarevin2379]

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

[@OlegNaumov-me6yj]

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

[@robertrebelovskiy3239]

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

[@user-nx4es7it2n]

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

[@winwithone]

​@@user-nx4es7it2nА тебя это ебать не должно мне кажется

[@Ванна-с6ш]

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

[@ITXXIful]

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

[@vitaliykalachev3978]

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

[@hopenew6643]

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

[@СашаГусева-п9ч]

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

[@ВаружанГригорян-н9е]

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

[@AlexOsip]

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

[@y.5068]

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

[@im_zvezddd1281]

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

[@Rin_003-_-]

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

[@Themilliarder]

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

[@МихаилМишин-т3ъ]

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

[@Gam1ng_Tricks]

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

[@upwlqwp]

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

[@deitman682]

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

[@АндрейШирнин-ы6б]

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

[@МедерДюшекеев-л7л]

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

[@sulsanzhar]

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

[@SeregsK]

Как успехи?

[@tehno.maniak]

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

[@antonyfeirmont]

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

[@ДавидЛукашевич-т9ж]

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

[@wepagucci3461]

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

[@gugo913]

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

[@Lindoverio]

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

[@subind.8126]

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

[@kadishka]

+++++++++

[@АнастасияБаранова-т4х]

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

[@LailaLaila-zw7pc]

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

[@Zakirov2004_Edu]

Попробовал img часов на главной странице подогнать через position: absolute + top, left, right, bottom по пикселям. Получилось вроде лучше, чем через отрицательный margin, один в один с макетом... Такие вещи можно делать через position?

[@azizbiialiev7259]

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

[@vdmt5171]

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

[@MrDovinche]

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

[@afruzqodirov8468]

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

[@olegtsimfer455]

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

[@heromidori5800]

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

[@sailbrain9087]

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

[@sa1lordev]

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

[@СмирновИван-щ9ц]

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

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@Alexey.Sokolovsky]

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

[@leto4063]

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

[@ЕленаКуприенко-ы7й]

А как сделать чтобы быстро перемещаться из редактора в браузер как у автора. Спасибо.

[@OOOOOOOOOOOOOOOOOOOOOO333]

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

[@КостяГудзев-ю7о]

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

[@МаргаритаБезносова-щ9т]

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

[@za2oopa]

23:17 - если мы напишем .padding: Apx Bpx Cpx Dpx; вместо top,right,bottom,left это хорошо или плохо?)

[@GameWithStylus]

ждем видео с адаптивом данной верстки не получается адаптировать это

[@DmytroRehalov]

Скажите пожалуйста где взять этот макет

[@МирбиМура]

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

[@zzakhar4595]

Какие горячие клавиши помогают делать такую табуляцию, чтобы текст не удалялся? 24:05 Спасибо за видео)👍

[@ДавидПирог-о2е]

В VS Code выделяешь текст и нажимаешь Tab. Чтобы сделать обратную табуляцию - Shift + Tab

[@zzakhar4595]

@@ДавидПирог-о2е спасибо

[@ХтосьЄ-д7ч]

@@ДавидПирог-о2е дякую

[@oleksandr4750]

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

[@f0zanoiD]

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

[@Nurgazy]

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

[@nonomad8937]

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

[@iamshoet]

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

[@a_nik5744]

Все классно, но только не понял заморочку с 2x img

[@seoonlyRU]

ну этому видео точно лайк от известнейшего СЕООНЛИ

[@ИванИлющенко-ш6с]

что бы смотрелось норм на бОльших экранах: в html после строки добавляем и внизу перед body добавляем в css добавляем после слова body { background: #CECECE; } .center-div { margin: auto; width: 1440px; }

[@lilcolldy5725]

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

[@ЯрославОльшанский-к4с]

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

[@zimaviolet3004]

35:00 Повторяю все за роликом. Селектор .price ни в какую не хочет видеть стиль, что только не пытался сделать... Пришлось просто в тег прописать style и вставить туда все свойства, все заработало. Так и не смог понять, в чем дело?

[@Александрраз-н8ф]

Спасибо, давай что нибудь и посерьёзнее, чтоб JS нормально показать

[@luigibartolomeo6382]

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

[@keystas]

Как сдвигать двигать выделенный код влево и вправо?

[@Krinzhoboy]

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

[@subind.8126]

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

[@АндрейИванов-ч4о5и]

Спасибо!

[@videoforkidstoday]

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

[@amaterasuez7360]

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

[@vovamorozov5545]

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

[@cheesedake_1522]

что делает если картинки с часами очень большое?

[@teath]

Посмотрел по 15 минут ввод про html и css, сделал пару стилизованных страничек как дз. Смотрю это видео и как будто уже все знаю, тут вот узнал что можно стилизовать не все h1 h2 а по отдельности классы, надо будет повторить этот макет и что то свое для закрепа.

[@teath]

Получается вот так за час времени я научился html и css? Или нужно подробнее вникнуть прочитать разметку от мозилы и еще что то