Объяснение Вёрстки Простого Сайта HTML+CSS
❗️ Подписывайся на мой телеграм-канал про IT → t.me/sergeydmitrievsky
✔️ Бесплатная пробная неделя курса для начинающих IT СТАРТ → clck.ru/3ANHMh
✔️ Бесплатный гайд: пошаговый план с нуля до работы в IT → clck.ru/3ARbLj
✔️ Секреты Трудоустройства: как пройти собеседование в it-компанию и получить оффер → clck.ru/3ARb4T
✔️ Мой телеграм-канал про деньги на продаже своих продуктов и услуг в соцсетях → t.me/sergeyonlinebiz
✅ Подписывайся на канал: / @sergeydmitrievsky
Подписывайся на меня в соц. сетях:
🔽 Telegram про IT - t.me/sergeydmitrievsky
🔽 Telegram про соцсети - t.me/sergeyonlinebiz
🔽 Instagram - / sergeydmitrievskyit
📩 По вопросам сотрудничества sergey@sergeydmitrievsky.ru
Пікірлер: 297
❗Подписывайся на мой телеграм-канал про IT → t.me/sergeydmitrievsky Бесплатная пробная неделя курса для начинающих IT СТАРТ → clck.ru/3ANHMh
@user-lq5re8ih3u
Жыл бұрын
Закрепи а то я не сразу понял где он
@sonliv3416
Жыл бұрын
В закреп)
@user-zh4ub6kk3t
Жыл бұрын
есть проблема с макетом, ширина макета 1440пикселей, что означает что макет делался на ноутбуке. И если у тебя вёрстка макета отображается нормально, то на фул хд экране выглядит это не очень. И непонятно что делать с этим макетом - растягивать или не растягивать. Вообщем видно что человек работал не самый опытный над макетом, даже контейнер для контента не придумал..... Точнее контент расположил не в контейнере..
@OOOOOOOOOOOOOOOOOOOOOO333
Жыл бұрын
@@user-zh4ub6kk3t блин я начинающий только в этом деле. вроде бы все пока понятно КРОМЕ пикселей и разрешений я совсем запутался. у меня ноутбук 15.6 дюймов разрешение 3200 на 2000 как мне оталкиваться и делать правильно верстку (( ??
@user-vz5cn3sp8x
Жыл бұрын
@@user-zh4ub6kk3t тоже с этим столкнулся, просто растянул под свое разрешение, потому что дальше моего пк или максимум хаба эта верстка не уйдет.
Сергей, большое спасибо! круто наблюдать за версткой, параллельно ее изучая. Получаешь колоссальный опыт конкретно из последовательности и структурированности твоих действий!
давно ждал такого формата! спасибо за контент 🔥🔥🔥🔥🔥
Огонь 🔥 Жду побольше таких видео
Вооо!!! Супер!!! На самом деле нагляднее, когда ты демонстрируешь творческий процесс вживую а не с подготовкой, тогда можно лицезреть сам процесс и идеи для реализации проекта!!! Спасибо за видео!!! Очень годный контент!!! 👍👍👍
000чень крутой формат , ждем побольше обучающих видео!
Спасибо тебе за видео! Жду побольше подобных разборов)
Спасибо большое. Жду следующих макетов )))
Огромное спасибо ! Очень хочется больше таких практических видео! Очень помогает в учебе, особенно такому новичку как я)
Очень круто! Хотелось бы увидеть продолжение вёрстки этого макета в адаптиве
Сергей, благодарен за столь полезный урок верстки. Потратил 8 часов на лэндинг по часовому видео. Спасибо тебе за твои практические уроки на живом примере. Жду ещё подобных видео!
Большое спасибо за ваш труд!Успехов вам! Без воды, доступно, понятно.
Сергей, спасибо тебе большое за урок..и вообще за твои ролики... Они очень мотивируют. У меня двое мелких😂 и муж...не дают спокойно учиться... Никто не разделяет мое стремление поменять профессию... но мое желание настолько сильное, что не лень просыпаться в 5 утра чтобы до 8 спокойно позаниматься)))) надеюсь, что всё будет не зря) спасибо ещё раз!
@user-wh5fp3jr3o
Жыл бұрын
Вы вдохновили своим примером, уверена, у вас всё получится!
@Karrit94
Жыл бұрын
@@user-wh5fp3jr3o Спасибо большое) и Вам успехов в обучении!
@user-wy2zr8gn1g
Жыл бұрын
@@Karrit94 как ваш прогресс? занимаетесь?
@Karrit94
Жыл бұрын
@@user-wy2zr8gn1g да, потихонечку, но стараюсь не бросать. Вот подытоживаю html css и буду переходить к js.
@CraykTV
Жыл бұрын
он не адвеквод
шикарно. огромное вам спасибо за такое полезнейшее видео!!! можно побольше таких, пожалуйста!🙏❤
Спасибо! Отличный формат видео!
Спасибо большое, ждём больше обучающих видео
Вау!!! Огромное спасибо за такой видеоролик!
Спасибо огромное. Все получилось. Ждём следующего👌👌👌👌
Спасибо за труд, завтра буду пробовать хотя уже и забыл как и что в вёрстке, Каждое именно такое видео с практикой призывает к действию
Очень классный и полезный формат (Хожу на курсы но по этому ролику узнал больше чем на курсах :)
Видос понравился. Ждём от тебя курс форнтендера. Сил и времени!)
Спасибо за видео, хотелось бы еще подобных видосов с версткой, с нарастанием сложности
Привет👋 Ролик отличный, как и весь твой контент Как пожелание, хочется больше подобных роликов с практикой, как html/css, так и js и других технологий Спасибо за твой труд🙂
Спасибо, Сергей за это видео. Формат понравился. Непонятные вещи, которы встретил в практическом задании оставил для самостоятельного разбора. Мне очень понравилось делать верстку.
Огромное спасибо за видео! Очень полезно!
Отличное обучающее видео, всё понятно, повторяла шаг за шагом. И конечно же хочется больше таких полезных туториалов 💥
Класс! Спасибо большое! Буду делать!
Спасибо тебе за твой труд и твое видео.
Спасибо за полезный контент и интересные видосы...Респект!
Спасибо большое! Грамотно и просто! Без всякой воды и "тягомотины" как на других курсах, просто пример как легко начать верстать сайт! Легко! Теперь только учить команды и вливаться
Спасибо, классное и полезное видео!)
Отличное видео! Все доходчиво и понятно! Можно еще несколько проектов различной тематики реализовать с применением только HTML&CSS, а потом можно и JS понемногу подключать. И я думаю многие втянутся и изменят свою жизнь )))
Очень даже понравилось. Спасибо !
Спасибо , Сергей !
Очень нравится такой формат. Безумно мотивирует, узнаю много нового. Очень жду ещё больше такого формата!!!
Спасибо большое за видео))
Спасибо Вам огромное за это видео!
Спасибо большое, отличное видео! Повторял все следом за тобой. И не поленился Sw12 сделать также как на макете :) Узнал новые вещи для себя, очень понравилась подача.
Крутое видео! Большое спасибо!
Ну вот, полезные видосики пошли)))
Вот это будет полезно, спасибо
Сергей, большое спасибо за видео. Я строчка за строчкой повторял. Мне было очень полезно. Буду рад новым похожим видео
спасибо за Ваш труд! повторяла практически все пошагово, что то не вышло, но в целом макет получился похожим, очень рада :)
Отличное пособие для меня, как только начинающего верстальщика!!!по этому алгоритму буду пробовать создавать свою страничку с другим товаром. Зачёт!!!
Топ 🔥🔥🔥 Это мой первый сайт на html!
Спасибо за урок!)
Спасибо, повторил. хоть и под копирку, но все равно рад тому, что хоть с чего то начал. в голове что-то да есть теперь
Спасибо большое за урок, час пролетел и не заметил.. дома буду попробую повторить..
🔥🔥🔥💥☄️наконец-то дождался, жду больше такого, больше обучающего контента 🔥🔥🔥
@user-ll9zm5tv9c
Жыл бұрын
ПОДДЕРЖИВАЮ
@user-qg3vj6nd1r
Жыл бұрын
Оооо да ... Ток вчера лазил по каналу искал такое видео ))
@alexanderbordyug5870
Жыл бұрын
Только не дольше 30 минут!
@SwishhZxckl
Жыл бұрын
@@alexanderbordyug5870 Если хочешь хорошее обучающее видео, то оно будет минимум час, и то здесь сайт очень простой, поэтому вышло 50 минут. На другой бы ушло больше времени.
Формат прекрасен!
Отличный видос! Мастер-класс от профессионала. Все на дивчиках))) Кстати, интересный лайфхак про выравнивание по кертикали. Спасибо!
Спасибо за работу! На мой взгляд, даже лучше, что без особой подготовки: можно проследить "вживую" ход рассуждений при выборе тех или иных элементов разметки или стилей. А то обычно пролетают галлопом, мол, и так все понятно и очевидно.
Очень полезно.Нет, максимально полезно! Спасибо за старания!
Спасибо за видео)
Пушка, гонка, петарда. Не переживай что видео немного затягивается. Я сидел и за тобой всё повторял, час пролетел абсолютно незаметно!
отличный формат ) можно еще
Прикольно снимаешь, продолжай в том же духе
Твой канал нереееееееееееееееееееееееааааааааааааааально ахиренен, дружище
Видео класс 🔥🔥🔥🔥🔥
Лучший!!! Продолжай !!!!
Круть, очень понятно!!!
Привет , недавно начал интересоваться сферой IT , думал что это не мое смотрел видео уроки в итоге понял что это-то что меня интересует. Мне это нравиться! Начал с большим увлечением этим заниматься купил книгу" HTML и CSS". По видео ролику все понятно отлично объясняешь , нет лишних слов до того как изучал все что для меня было необходимо было ничего не понятно , но после просмотра твоего видео ролика мне все стало ясно.
Спасибо! Очень полезно! Лайк за труд и красные глаза
@OOOOOOOOOOOOOOOOOOOOOO333
Жыл бұрын
Подскажите пожалуйста, зачем он в header поместил контейнер потом ? я так и не понял если все равно он потом контейнер растянул на ширину header...
Спасибо огромное за видео, верстал вместе с тобой на одном дыхании. Про практику в конце очень верно подметил, я еще не до конца прошел курс css html, но благодаря твоему видео подчерпнул новые знания. Побольше бы такого!!))
@vovamorozov5545
Жыл бұрын
А где вы проходите данный курс?
@dramses
8 ай бұрын
Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
@dramses
8 ай бұрын
@@vovamorozov5545 Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
Формат классный мне реально интересно стало.
Очень хорошо рассказываешь будешь моим учителем😀
Крутой видос Давай ещё!!!!! Лайк поставил
Плиииз больше такого контента и роликов с версткой! Для новичков просто сокровище 🙏
Красавчик 👍
Я считаю что ролик очень познавательный для новичков, можно было бы сделать 2 часть, но с более сложной версией макета)
Все отлично, спасибо за практический урок по верстке)
Нужно, чтобы ещё с JS что-то было)
Спасибо!
Благодарю за видео, уже не первый месяц учу фронтенд но мои знания довольно хаотичны и не структурированы, уже с NPM, NVM и TypeScript работаю а вёрстка очень слабая и пробелов много а этот ролик дал ответы на многие терзавшие меня вопросы
Спасибо бро очень помог, здоровья тебе ! 😉
Полезное видео.😊
Полосу забыл) Нужно после product description добавить тег 'hr' и стилизовать его: margin-top: -50px; width: 180px; color: #707070; margin-bottom: 50px; Либо избавиться от отрицательного отступа сверху, но придется редактировать отступ у предыдущего элемента.
@trendhater6527
Жыл бұрын
специально полез искать подобный комментарий и нашел :) Дай бог тебе здоровья!
@samstas
Жыл бұрын
благодарю!
@alexandralexandr2997
Жыл бұрын
еще фото часов не поменял
44:02 - сказал, что дальше выше будет с маленькой буквы и посмотрел наверх😆. Спасибо за классный урок)))
🔥🔥🔥
Спасибо большое
Почти отлично!) Очень полезное видео, но горизонтальный скрол конечно смущает. Под конец немного отошли от макета, line-height кажется уже игнорировал. Но буду дальше смотреть, побольше бы таких вёрсток, классно получается)
Урааа, Я хотябы понял как верстать , спасибо за урок
Бро,класне відео,давай побільше таких відео ,давай на цей раз середній рівень верстки,щоб ми змогли закріпити знання 💯
побольше бы таких видео для новичков используя только html и css
@Naebuka
Жыл бұрын
@@raufauf3979 выучить то я выучил, а когда пытаюсь сам сверстать, то у меня ступор, мне кажется нужна практика и очень много
@stszn
Жыл бұрын
@@Naebuka потому что не учил а тупо смотрел видео на ютубе, все нужно делать на практике и не думать что запомнил, хотя по факту через 10 минут забыл
Привет, всё очень классно. Есть одно но когда работаешь убери себя от часть экрана, было бы лучше.
Здравствуйте , я начал изучать JS front end ровно как месяц. Очень понравился формат как раз только закончили Html/css и ваше видео зашло на 200% . Продолжайте , с меня лайк + подписка !
@sulsanzhar
Жыл бұрын
чему еще научился за 2 месяца, как закончил html/css? оч интересно
@SeregsK
Жыл бұрын
Как успехи?
Серёга! Очень круто, но торопишься, для тех кто слабоват в CSS сложно уловить мысль. у меня всё получилось, сверстал как у тебя, но в некоторые моменты просто не вникал, а просто повторял по твоему коду. было бы хорошо, если бы проговаривал по ходу написания названия тегов, так бы хоть откладывалось! Спасибо большое! Это первый макет который я сверстал и я сделал это с твоей помощью))
спасибо / говорю как новичок / мне помогло данное видео
щас попробую с тобой вместе сверстать шаблончик, кстати советую всем делать дубль в фигме, а то столько пользователей подключаеться что уж очень это мешает
Спасибо , очень круто , все четко и ясно , так еще на днях решил пощупать Фигму и тут твое видео )
блин круто! я как раз изучил основы html css и начал делать лендинг с помощью фигмы и vs code, сделал уже больше половины за несколько вечеров, сейчас посмотрю видео проведу работу над ошибками) спасибо!
@Mushu404
Жыл бұрын
Долго изучал вёрстку?)
@ocnotuda
Жыл бұрын
@@Mushu404 недели 2
@Mushu404
Жыл бұрын
@@ocnotuda а ты по каким-то видосам учился или как?) а то тоже начал изучать вёрстку, порой такая каша в голове...
@ocnotuda
Жыл бұрын
@@Mushu404 сначала структуру html потом css, тут важно по чуть чуть набирать знания а потом просто практиковать, я почти сразу начал идеи записывать и начал лендинг верстать даже многое изучая параллельно, поэтому каша это нормально
@dadzhi
Жыл бұрын
@@Mushu404 Уменя также,в голове каша. Но думаю в начале главное просто верстать как нужно.
Спасибо!!! за очень полезный контент I highly appreciate your effort
Мужик обожаем тебя 😩💙💙💙💜💕🇰🇬
@user-nx4es7it2n
Жыл бұрын
Просто пиши комент, хули флаг ставишь?
Больше примеров приложений на JS с подробным объяснением)
Сергей, привет! Супер видео! Подскажи, пожалуйста, можно ли блок main сделать через Flex column ?
Дружище, спасибо тебе большое за этот ролик! Только ты в конце линию забыл сделать, по тебе видно было, что ты какой-то тут уставший(
Про БЭМ все верно сказал. Новичку в начале лучше не заострять на этом внимание и сосредоточиться на понятном названии классов. Со временем можно будет и БЭМ начать применять. В любом случае все прийдёт с опытом)
@KOT3prod
Жыл бұрын
бэм бэмом но зачем создавать отдельные классы для тегов... и просто описывать селектором
@stszn
Жыл бұрын
а не проще сразу учиться и понимать всю суть бэма, а не потом все это доучивать и переучиваться чтобы правильно его применять?
ну этому видео точно лайк от известнейшего СЕООНЛИ
и еще совет сделать видео там где не посредственно ты на фоне верстки , в круглом формате,так будет меньше закрывать сам процес верстки и Figma.
Круто! А будут туториалы по JS ?
@kadishka
Жыл бұрын
+++++++++