Объяснение Вёрстки Простого Сайта HTML+CSS
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2022
- ✔️ Программист: курс-профессия с нуля по моей методике → clck.ru/3AYjHL
📲 Пиши "план" мне в телеграм, и узнай как тебе стать программистом →
t.me/sergeydmitrievskydm
Подписывайся на меня в соц. сетях:
🔽 Telegram - t.me/sergeydmitrievsky
🔽 Instagram - / sergeydmitrievskyit
🔽 TH-cam - / @sergeydmitrievsky
📩 По вопросам сотрудничества sergey@sergeydmitrievsky.ru
❗Подписывайся на мой телеграм-канал про IT, программирование и frontend → t.me/sergeydmitrievsky
Закрепи а то я не сразу понял где он
В закреп)
есть проблема с макетом, ширина макета 1440пикселей, что означает что макет делался на ноутбуке. И если у тебя вёрстка макета отображается нормально, то на фул хд экране выглядит это не очень. И непонятно что делать с этим макетом - растягивать или не растягивать. Вообщем видно что человек работал не самый опытный над макетом, даже контейнер для контента не придумал..... Точнее контент расположил не в контейнере..
@@user-zh4ub6kk3t блин я начинающий только в этом деле. вроде бы все пока понятно КРОМЕ пикселей и разрешений я совсем запутался. у меня ноутбук 15.6 дюймов разрешение 3200 на 2000 как мне оталкиваться и делать правильно верстку (( ??
@@user-zh4ub6kk3t тоже с этим столкнулся, просто растянул под свое разрешение, потому что дальше моего пк или максимум хаба эта верстка не уйдет.
🔥🔥🔥💥☄️наконец-то дождался, жду больше такого, больше обучающего контента 🔥🔥🔥
ПОДДЕРЖИВАЮ
Оооо да ... Ток вчера лазил по каналу искал такое видео ))
Только не дольше 30 минут!
@@alexanderbordyug5870 Если хочешь хорошее обучающее видео, то оно будет минимум час, и то здесь сайт очень простой, поэтому вышло 50 минут. На другой бы ушло больше времени.
давно ждал такого формата! спасибо за контент 🔥🔥🔥🔥🔥
Сергей, спасибо тебе большое за урок..и вообще за твои ролики... Они очень мотивируют. У меня двое мелких😂 и муж...не дают спокойно учиться... Никто не разделяет мое стремление поменять профессию... но мое желание настолько сильное, что не лень просыпаться в 5 утра чтобы до 8 спокойно позаниматься)))) надеюсь, что всё будет не зря) спасибо ещё раз!
Вы вдохновили своим примером, уверена, у вас всё получится!
@@user-wh5fp3jr3o Спасибо большое) и Вам успехов в обучении!
@@Karrit94 как ваш прогресс? занимаетесь?
@@user-wy2zr8gn1g да, потихонечку, но стараюсь не бросать. Вот подытоживаю html css и буду переходить к js.
он не адвеквод
Огонь 🔥
Жду побольше таких видео
Сергей, большое спасибо! круто наблюдать за версткой, параллельно ее изучая. Получаешь колоссальный опыт конкретно из последовательности и структурированности твоих действий!
Вооо!!! Супер!!!
На самом деле нагляднее, когда ты демонстрируешь творческий процесс вживую а не с подготовкой, тогда можно лицезреть сам процесс и идеи для реализации проекта!!! Спасибо за видео!!! Очень годный контент!!! 👍👍👍
000чень крутой формат , ждем побольше обучающих видео!
Очень круто! Хотелось бы увидеть продолжение вёрстки этого макета в адаптиве
Спасибо большое. Жду следующих макетов )))
Спасибо! Отличный формат видео!
Сергей, благодарен за столь полезный урок верстки. Потратил 8 часов на лэндинг по часовому видео. Спасибо тебе за твои практические уроки на живом примере. Жду ещё подобных видео!
Огромное спасибо ! Очень хочется больше таких практических видео! Очень помогает в учебе, особенно такому новичку как я)
Спасибо тебе за видео!
Жду побольше подобных разборов)
Спасибо огромное. Все получилось. Ждём следующего👌👌👌👌
Вау!!! Огромное спасибо за такой видеоролик!
Спасибо большое, ждём больше обучающих видео
Класс! Спасибо большое! Буду делать!
шикарно. огромное вам спасибо за такое полезнейшее видео!!! можно побольше таких, пожалуйста!🙏❤
Большое спасибо за ваш труд!Успехов вам! Без воды, доступно, понятно.
Видос понравился. Ждём от тебя курс форнтендера. Сил и времени!)
Огромное спасибо за видео! Очень полезно!
Очень классный и полезный формат
(Хожу на курсы но по этому ролику узнал больше чем на курсах :)
Привет👋
Ролик отличный, как и весь твой контент
Как пожелание, хочется больше подобных роликов с практикой, как html/css, так и js и других технологий
Спасибо за твой труд🙂
Спасибо за труд, завтра буду пробовать хотя уже и забыл как и что в вёрстке,
Каждое именно такое видео с практикой призывает к действию
Спасибо за видео, хотелось бы еще подобных видосов с версткой, с нарастанием сложности
Отличное видео! Все доходчиво и понятно! Можно еще несколько проектов различной тематики реализовать с применением только HTML&CSS, а потом можно и JS понемногу подключать. И я думаю многие втянутся и изменят свою жизнь )))
Отличное обучающее видео, всё понятно, повторяла шаг за шагом. И конечно же хочется больше таких полезных туториалов 💥
Спасибо, Сергей за это видео. Формат понравился. Непонятные вещи, которы встретил в практическом задании оставил для самостоятельного разбора. Мне очень понравилось делать верстку.
Спасибо за полезный контент и интересные видосы...Респект!
Ну вот, полезные видосики пошли)))
Спасибо, классное и полезное видео!)
Очень даже понравилось. Спасибо !
Спасибо тебе за твой труд и твое видео.
Очень нравится такой формат. Безумно мотивирует, узнаю много нового. Очень жду ещё больше такого формата!!!
Спасибо большое! Грамотно и просто! Без всякой воды и "тягомотины" как на других курсах, просто пример как легко начать верстать сайт! Легко! Теперь только учить команды и вливаться
Спасибо большое за видео))
Вот это будет полезно, спасибо
Отличное пособие для меня, как только начинающего верстальщика!!!по этому алгоритму буду пробовать создавать свою страничку с другим товаром. Зачёт!!!
Крутое видео! Большое спасибо!
Спасибо большое, отличное видео! Повторял все следом за тобой. И не поленился Sw12 сделать также как на макете :) Узнал новые вещи для себя, очень понравилась подача.
отличный формат ) можно еще
спасибо за Ваш труд! повторяла практически все пошагово, что то не вышло, но в целом макет получился похожим, очень рада :)
Спасибо , Сергей !
Сергей, большое спасибо за видео. Я строчка за строчкой повторял. Мне было очень полезно. Буду рад новым похожим видео
Твой канал нереееееееееееееееееееееееааааааааааааааально ахиренен, дружище
Спасибо большое за урок, час пролетел и не заметил.. дома буду попробую повторить..
Топ 🔥🔥🔥
Это мой первый сайт на html!
Очень полезно.Нет, максимально полезно! Спасибо за старания!
побольше бы таких видео для новичков используя только html и css
@@raufauf3979 выучить то я выучил, а когда пытаюсь сам сверстать, то у меня ступор, мне кажется нужна практика и очень много
@@Naebuka потому что не учил а тупо смотрел видео на ютубе, все нужно делать на практике и не думать что запомнил, хотя по факту через 10 минут забыл
Отличный видос! Мастер-класс от профессионала. Все на дивчиках))) Кстати, интересный лайфхак про выравнивание по кертикали. Спасибо!
Спасибо Вам огромное за это видео!
Спасибо за работу!
На мой взгляд, даже лучше, что без особой подготовки: можно проследить "вживую" ход рассуждений при выборе тех или иных элементов разметки или стилей.
А то обычно пролетают галлопом, мол, и так все понятно и очевидно.
Прикольно снимаешь, продолжай в том же духе
Спасибо за урок!)
Спасибо огромное за видео, верстал вместе с тобой на одном дыхании. Про практику в конце очень верно подметил, я еще не до конца прошел курс css html, но благодаря твоему видео подчерпнул новые знания. Побольше бы такого!!))
А где вы проходите данный курс?
Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
@@vovamorozov5545 Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
Пушка, гонка, петарда.
Не переживай что видео немного затягивается. Я сидел и за тобой всё повторял, час пролетел абсолютно незаметно!
Спасибо, повторил. хоть и под копирку, но все равно рад тому, что хоть с чего то начал. в голове что-то да есть теперь
Очень хорошо рассказываешь будешь моим учителем😀
Привет , недавно начал интересоваться сферой IT , думал что это не мое смотрел видео уроки в итоге понял что это-то что меня интересует.
Мне это нравиться! Начал с большим увлечением этим заниматься купил книгу" HTML и CSS".
По видео ролику все понятно отлично объясняешь , нет лишних слов до того как изучал все что для меня было необходимо было ничего не понятно , но после просмотра твоего видео ролика мне все стало ясно.
Круто! А будут туториалы по JS ?
+++++++++
Формат классный мне реально интересно стало.
Спасибо! Очень полезно!
Лайк за труд и красные глаза
Подскажите пожалуйста, зачем он в header поместил контейнер потом ? я так и не понял если все равно он потом контейнер растянул на ширину header...
Плиииз больше такого контента и роликов с версткой! Для новичков просто сокровище 🙏
Все отлично, спасибо за практический урок по верстке)
Спасибо за видео)
Видео класс 🔥🔥🔥🔥🔥
Формат прекрасен!
Крутой видос
Давай ещё!!!!!
Лайк поставил
Круть, очень понятно!!!
Лучший!!! Продолжай !!!!
Привет, всё очень классно. Есть одно но когда работаешь убери себя от часть экрана, было бы лучше.
Я считаю что ролик очень познавательный для новичков, можно было бы сделать 2 часть, но с более сложной версией макета)
Красавчик 👍
Нужно, чтобы ещё с JS что-то было)
Мужик обожаем тебя 😩💙💙💙💜💕🇰🇬
Просто пиши комент, хули флаг ставишь?
44:02 - сказал, что дальше выше будет с маленькой буквы и посмотрел наверх😆. Спасибо за классный урок)))
Спасибо бро очень помог, здоровья тебе ! 😉
Полосу забыл) Нужно после product description добавить тег 'hr' и стилизовать его: margin-top: -50px; width: 180px; color: #707070; margin-bottom: 50px; Либо избавиться от отрицательного отступа сверху, но придется редактировать отступ у предыдущего элемента.
специально полез искать подобный комментарий и нашел :) Дай бог тебе здоровья!
благодарю!
еще фото часов не поменял
Бро,класне відео,давай побільше таких відео ,давай на цей раз середній рівень верстки,щоб ми змогли закріпити знання 💯
Полезное видео.😊
Почти отлично!) Очень полезное видео, но горизонтальный скрол конечно смущает. Под конец немного отошли от макета, line-height кажется уже игнорировал. Но буду дальше смотреть, побольше бы таких вёрсток, классно получается)
Спасибо!
Благодарю за видео, уже не первый месяц учу фронтенд но мои знания довольно хаотичны и не структурированы, уже с NPM, NVM и TypeScript работаю а вёрстка очень слабая и пробелов много а этот ролик дал ответы на многие терзавшие меня вопросы
Урааа, Я хотябы понял как верстать , спасибо за урок
щас попробую с тобой вместе сверстать шаблончик, кстати советую всем делать дубль в фигме, а то столько пользователей подключаеться что уж очень это мешает
блин круто!
я как раз изучил основы html css и начал делать лендинг с помощью фигмы и vs code, сделал уже больше половины за несколько вечеров, сейчас посмотрю видео проведу работу над ошибками)
спасибо!
Долго изучал вёрстку?)
@@Mushu404 недели 2
@@ocnotuda а ты по каким-то видосам учился или как?) а то тоже начал изучать вёрстку, порой такая каша в голове...
@@Mushu404 сначала структуру html потом css, тут важно по чуть чуть набирать знания а потом просто практиковать, я почти сразу начал идеи записывать и начал лендинг верстать даже многое изучая параллельно, поэтому каша это нормально
@@Mushu404 Уменя также,в голове каша. Но думаю в начале главное просто верстать как нужно.
🔥🔥🔥
Спасибо , очень круто , все четко и ясно , так еще на днях решил пощупать Фигму и тут твое видео )
Больше примеров приложений на JS с подробным объяснением)
Здравствуйте , я начал изучать JS front end ровно как месяц. Очень понравился формат как раз только закончили Html/css и ваше видео зашло на 200% . Продолжайте , с меня лайк + подписка !
чему еще научился за 2 месяца, как закончил html/css? оч интересно
Как успехи?
Сергей, привет! Супер видео! Подскажи, пожалуйста, можно ли блок main сделать через Flex column ?
Серёга! Очень круто, но торопишься, для тех кто слабоват в CSS сложно уловить мысль. у меня всё получилось, сверстал как у тебя, но в некоторые моменты просто не вникал, а просто повторял по твоему коду. было бы хорошо, если бы проговаривал по ходу написания названия тегов, так бы хоть откладывалось!
Спасибо большое! Это первый макет который я сверстал и я сделал это с твоей помощью))
Спасибо большое
Предлагаю сделать часть2 видео. Нужен адаптив, ну и по мелочи, фото поменять, линию горизонтальную сделать.
Страничка без адаптива - это не результат) давай сразу правильно делать.
Спасибо за видео! Прикрепи, пожалуйста, ссылку на видео, о котором ты в конце ролика говоришь про Todolist.
спасибо за видео очень информативно без опыта и без супер зубрешки скучной теорий можешь на практике сделать свой первый сайт и сразу увидеть результат спасибо за видео еще раз )
Как по мне, такой видеоматериал хорош в совокупности с совместным изучением текстовых курсов(в которых есть практика).
Прохожу курс, делаю задания, на ночь смотрю это. С каждым днём понимания все больше, для чего нужно каждое действие, особенно с такой подачей
давайте побольше про Js)
и еще совет сделать видео там где не посредственно ты на фоне верстки , в круглом формате,так будет меньше закрывать сам процес верстки и Figma.
Спасибо!!!
за очень полезный контент I highly appreciate your effort