Объяснение Вёрстки Простого Сайта HTML+CSS
Vložit
- čas přidán 23. 07. 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
🔽 CZcams - / @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.
он не адвеквод
Сергей, большое спасибо! круто наблюдать за версткой, параллельно ее изучая. Получаешь колоссальный опыт конкретно из последовательности и структурированности твоих действий!
Вооо!!! Супер!!!
На самом деле нагляднее, когда ты демонстрируешь творческий процесс вживую а не с подготовкой, тогда можно лицезреть сам процесс и идеи для реализации проекта!!! Спасибо за видео!!! Очень годный контент!!! 👍👍👍
Сергей, благодарен за столь полезный урок верстки. Потратил 8 часов на лэндинг по часовому видео. Спасибо тебе за твои практические уроки на живом примере. Жду ещё подобных видео!
🔥🔥🔥💥☄️наконец-то дождался, жду больше такого, больше обучающего контента 🔥🔥🔥
ПОДДЕРЖИВАЮ
Оооо да ... Ток вчера лазил по каналу искал такое видео ))
Только не дольше 30 минут!
@@alexanderbordyug5870 Если хочешь хорошее обучающее видео, то оно будет минимум час, и то здесь сайт очень простой, поэтому вышло 50 минут. На другой бы ушло больше времени.
Огромное спасибо ! Очень хочется больше таких практических видео! Очень помогает в учебе, особенно такому новичку как я)
Очень круто! Хотелось бы увидеть продолжение вёрстки этого макета в адаптиве
Отличное видео! Все доходчиво и понятно! Можно еще несколько проектов различной тематики реализовать с применением только HTML&CSS, а потом можно и JS понемногу подключать. И я думаю многие втянутся и изменят свою жизнь )))
давно ждал такого формата! спасибо за контент 🔥🔥🔥🔥🔥
Спасибо за труд, завтра буду пробовать хотя уже и забыл как и что в вёрстке,
Каждое именно такое видео с практикой призывает к действию
Спасибо, Сергей за это видео. Формат понравился. Непонятные вещи, которы встретил в практическом задании оставил для самостоятельного разбора. Мне очень понравилось делать верстку.
Привет👋
Ролик отличный, как и весь твой контент
Как пожелание, хочется больше подобных роликов с практикой, как html/css, так и js и других технологий
Спасибо за твой труд🙂
Огонь 🔥
Жду побольше таких видео
000чень крутой формат , ждем побольше обучающих видео!
Большое спасибо за ваш труд!Успехов вам! Без воды, доступно, понятно.
шикарно. огромное вам спасибо за такое полезнейшее видео!!! можно побольше таких, пожалуйста!🙏❤
Спасибо большое! Грамотно и просто! Без всякой воды и "тягомотины" как на других курсах, просто пример как легко начать верстать сайт! Легко! Теперь только учить команды и вливаться
Отличное обучающее видео, всё понятно, повторяла шаг за шагом. И конечно же хочется больше таких полезных туториалов 💥
Спасибо огромное за видео, верстал вместе с тобой на одном дыхании. Про практику в конце очень верно подметил, я еще не до конца прошел курс css html, но благодаря твоему видео подчерпнул новые знания. Побольше бы такого!!))
А где вы проходите данный курс?
Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
@@vovamorozov5545 Прошло много времени,думаю вы уже многому научились,но можете подсказать курсы для обучения?
Спасибо за работу!
На мой взгляд, даже лучше, что без особой подготовки: можно проследить "вживую" ход рассуждений при выборе тех или иных элементов разметки или стилей.
А то обычно пролетают галлопом, мол, и так все понятно и очевидно.
Очень нравится такой формат. Безумно мотивирует, узнаю много нового. Очень жду ещё больше такого формата!!!
Очень классный и полезный формат
(Хожу на курсы но по этому ролику узнал больше чем на курсах :)
Спасибо за видео, хотелось бы еще подобных видосов с версткой, с нарастанием сложности
Отличное пособие для меня, как только начинающего верстальщика!!!по этому алгоритму буду пробовать создавать свою страничку с другим товаром. Зачёт!!!
Спасибо большое, отличное видео! Повторял все следом за тобой. И не поленился Sw12 сделать также как на макете :) Узнал новые вещи для себя, очень понравилась подача.
Сергей, большое спасибо за видео. Я строчка за строчкой повторял. Мне было очень полезно. Буду рад новым похожим видео
Спасибо тебе за видео!
Жду побольше подобных разборов)
Видос понравился. Ждём от тебя курс форнтендера. Сил и времени!)
Спасибо! Отличный формат видео!
спасибо за Ваш труд! повторяла практически все пошагово, что то не вышло, но в целом макет получился похожим, очень рада :)
Привет , недавно начал интересоваться сферой IT , думал что это не мое смотрел видео уроки в итоге понял что это-то что меня интересует.
Мне это нравиться! Начал с большим увлечением этим заниматься купил книгу" HTML и CSS".
По видео ролику все понятно отлично объясняешь , нет лишних слов до того как изучал все что для меня было необходимо было ничего не понятно , но после просмотра твоего видео ролика мне все стало ясно.
Спасибо большое. Жду следующих макетов )))
Спасибо большое, ждём больше обучающих видео
Спасибо огромное. Все получилось. Ждём следующего👌👌👌👌
Отличный видос! Мастер-класс от профессионала. Все на дивчиках))) Кстати, интересный лайфхак про выравнивание по кертикали. Спасибо!
побольше бы таких видео для новичков используя только html и css
@@raufauf3979 выучить то я выучил, а когда пытаюсь сам сверстать, то у меня ступор, мне кажется нужна практика и очень много
@@Naebuka потому что не учил а тупо смотрел видео на ютубе, все нужно делать на практике и не думать что запомнил, хотя по факту через 10 минут забыл
Класс! Спасибо большое! Буду делать!
Вау!!! Огромное спасибо за такой видеоролик!
Огромное спасибо за видео! Очень полезно!
Нужно, чтобы ещё с JS что-то было)
Спасибо большое за урок, час пролетел и не заметил.. дома буду попробую повторить..
Спасибо за полезный контент и интересные видосы...Респект!
44:02 - сказал, что дальше выше будет с маленькой буквы и посмотрел наверх😆. Спасибо за классный урок)))
Полосу забыл) Нужно после product description добавить тег 'hr' и стилизовать его: margin-top: -50px; width: 180px; color: #707070; margin-bottom: 50px; Либо избавиться от отрицательного отступа сверху, но придется редактировать отступ у предыдущего элемента.
специально полез искать подобный комментарий и нашел :) Дай бог тебе здоровья!
благодарю!
еще фото часов не поменял
Почти отлично!) Очень полезное видео, но горизонтальный скрол конечно смущает. Под конец немного отошли от макета, line-height кажется уже игнорировал. Но буду дальше смотреть, побольше бы таких вёрсток, классно получается)
Я считаю что ролик очень познавательный для новичков, можно было бы сделать 2 часть, но с более сложной версией макета)
Очень даже понравилось. Спасибо !
Спасибо, повторил. хоть и под копирку, но все равно рад тому, что хоть с чего то начал. в голове что-то да есть теперь
Все отлично, спасибо за практический урок по верстке)
Спасибо тебе за твой труд и твое видео.
Благодарю за видео, уже не первый месяц учу фронтенд но мои знания довольно хаотичны и не структурированы, уже с NPM, NVM и TypeScript работаю а вёрстка очень слабая и пробелов много а этот ролик дал ответы на многие терзавшие меня вопросы
Спасибо, классное и полезное видео!)
отличный формат ) можно еще
Привет, всё очень классно. Есть одно но когда работаешь убери себя от часть экрана, было бы лучше.
Очень полезно.Нет, максимально полезно! Спасибо за старания!
Плиииз больше такого контента и роликов с версткой! Для новичков просто сокровище 🙏
Пушка, гонка, петарда.
Не переживай что видео немного затягивается. Я сидел и за тобой всё повторял, час пролетел абсолютно незаметно!
Вот это будет полезно, спасибо
Твой канал нереееееееееееееееееееееееааааааааааааааально ахиренен, дружище
Спасибо Вам огромное за это видео!
Спасибо большое за видео))
Спасибо , Сергей !
Крутое видео! Большое спасибо!
Ну вот, полезные видосики пошли)))
Спасибо! Очень полезно!
Лайк за труд и красные глаза
Подскажите пожалуйста, зачем он в header поместил контейнер потом ? я так и не понял если все равно он потом контейнер растянул на ширину header...
Здравствуйте , я начал изучать JS front end ровно как месяц. Очень понравился формат как раз только закончили Html/css и ваше видео зашло на 200% . Продолжайте , с меня лайк + подписка !
чему еще научился за 2 месяца, как закончил html/css? оч интересно
Как успехи?
Мужик обожаем тебя 😩💙💙💙💜💕🇰🇬
Просто пиши комент, хули флаг ставишь?
Спасибо за урок!)
Очень хорошо рассказываешь будешь моим учителем😀
Серёга! Очень круто, но торопишься, для тех кто слабоват в CSS сложно уловить мысль. у меня всё получилось, сверстал как у тебя, но в некоторые моменты просто не вникал, а просто повторял по твоему коду. было бы хорошо, если бы проговаривал по ходу написания названия тегов, так бы хоть откладывалось!
Спасибо большое! Это первый макет который я сверстал и я сделал это с твоей помощью))
Топ 🔥🔥🔥
Это мой первый сайт на html!
Спасибо бро очень помог, здоровья тебе ! 😉
Формат классный мне реально интересно стало.
Формат прекрасен!
Бро,класне відео,давай побільше таких відео ,давай на цей раз середній рівень верстки,щоб ми змогли закріпити знання 💯
Прикольно снимаешь, продолжай в том же духе
Спасибо за видео)
Сергей, привет! Супер видео! Подскажи, пожалуйста, можно ли блок main сделать через Flex column ?
Спасибо!!!
за очень полезный контент I highly appreciate your effort
блин круто!
я как раз изучил основы html css и начал делать лендинг с помощью фигмы и vs code, сделал уже больше половины за несколько вечеров, сейчас посмотрю видео проведу работу над ошибками)
спасибо!
Долго изучал вёрстку?)
@@Mushu404 недели 2
@@ocnotuda а ты по каким-то видосам учился или как?) а то тоже начал изучать вёрстку, порой такая каша в голове...
@@Mushu404 сначала структуру html потом css, тут важно по чуть чуть набирать знания а потом просто практиковать, я почти сразу начал идеи записывать и начал лендинг верстать даже многое изучая параллельно, поэтому каша это нормально
@@Mushu404 Уменя также,в голове каша. Но думаю в начале главное просто верстать как нужно.
щас попробую с тобой вместе сверстать шаблончик, кстати советую всем делать дубль в фигме, а то столько пользователей подключаеться что уж очень это мешает
Круть, очень понятно!!!
Про БЭМ все верно сказал. Новичку в начале лучше не заострять на этом внимание и сосредоточиться на понятном названии классов. Со временем можно будет и БЭМ начать применять. В любом случае все прийдёт с опытом)
бэм бэмом
но зачем создавать отдельные классы для тегов... и просто описывать селектором
а не проще сразу учиться и понимать всю суть бэма, а не потом все это доучивать и переучиваться чтобы правильно его применять?
Спасибо , очень круто , все четко и ясно , так еще на днях решил пощупать Фигму и тут твое видео )
и еще совет сделать видео там где не посредственно ты на фоне верстки , в круглом формате,так будет меньше закрывать сам процес верстки и Figma.
Видео класс 🔥🔥🔥🔥🔥
Лучший!!! Продолжай !!!!
Очень хороший формат. Я обычно сначала смотрю, потом смотрю и повторяю. Правда, в данном случае, я не все тэги и атрибуты знаю, из-за этого многого не понимаю. Я только начал изучать.
Спасибо!
Крутой видос
Давай ещё!!!!!
Лайк поставил
Больше примеров приложений на JS с подробным объяснением)
Слушай, ну с этим мне кажется немного рановато на js переходить, у HTML ещё полно тегов, тот же | или | встречаются почти на каждой странице.
Но признаю, урок действительно хороший и достаточно познавательный
Можно не переходить))) но изучение разработки итеративный процесс. Ты никогда не будешь знать одну тему на 100%.
Спасибо, давай что нибудь и посерьёзнее, чтоб JS нормально показать
Предлагаю сделать часть2 видео. Нужен адаптив, ну и по мелочи, фото поменять, линию горизонтальную сделать.
Страничка без адаптива - это не результат) давай сразу правильно делать.
Полезное видео.😊
привет, спасибо за видео!
Только почему не добавил линию и почему ширина текста не такая как в дизайне?
Привет, поскажи, пожалуйста, сложно ли верстать если я как дизайнер буду использовать не сетку, а просто все выравнивать относительно центра? например карточка относительно внешнего фрейма по центру, потом внутри нее кнопка(тоже фрейм) снова по центру относительно внешнего фрейма и т п?
Попробовал img часов на главной странице подогнать через position: absolute + top, left, right, bottom по пикселям. Получилось вроде лучше, чем через отрицательный margin, один в один с макетом...
Такие вещи можно делать через position?
спасибо за видео очень информативно без опыта и без супер зубрешки скучной теорий можешь на практике сделать свой первый сайт и сразу увидеть результат спасибо за видео еще раз )
Как по мне, такой видеоматериал хорош в совокупности с совместным изучением текстовых курсов(в которых есть практика).
Прохожу курс, делаю задания, на ночь смотрю это. С каждым днём понимания все больше, для чего нужно каждое действие, особенно с такой подачей