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