[HTML/CSS] Верстаем очень простой сайт-визитку. Базовые знания для новичков. Верстка сайта с нуля.

Поделиться
HTML-код
  • Опубликовано: 3 янв 2025

Комментарии • 137

  • @mmisha22
    @mmisha22 5 лет назад +45

    Спасибо тебе добрый человек за это замечательное видео! Я не знаю почему, но ютуб выдал мне твой ролик первым по запросу "Верстка простого сайта", но это просто идеальное видео для начинающих. У тебя отлично получается доходчиво все объяснять и благодаря твоему умению я сделал первый-маленький шажок в верстке, большое спасибо еще раз ))
    С меня лайк и подписка)

  • @дэймондэймон
    @дэймондэймон 4 года назад +13

    Я охерел просто. Однозначно лайк и подписка. Увидел, как в живую все это верстается, завораживает, как автор умело быстро пишет код. Есть чему поучиться, спасибо)

    • @alexpetrov521
      @alexpetrov521 2 года назад

      На всех роликах этот комент..

  • @андрейандреев-к6о9ж
    @андрейандреев-к6о9ж 2 года назад +4

    Спасибо тебе за твою работу и за время которое ты потратил, чтобы это все сделать и рассказать, мне так помогает!!! Успеха тебе во всем!

    • @flaryos9325
      @flaryos9325 2 года назад

      привет у тебя есть код? Хотел скопировать, если есть можешь скинуть в соц.сеть?

  • @jbbaatyrbekov2739
    @jbbaatyrbekov2739 2 года назад

    Столько видео роликов посмотрел не помогло, а тут сразу пошло и HTML и CSS сомо собой. Большой респект от кыргызского начинающего девелопера)

  • @ste5aha654
    @ste5aha654 2 года назад +1

    За работу с opacity отдельная благодарочка) начал макет верстать сам, без урока, и наткнулся на такую проблему, что текст тоже прозрачным становится,я уже и отдельным элементом делал, чтобы текст не наследовал прозрачность и с z-idnex игрался, и background через rgba пробовал делать, один хрен по тому же месту) ну что же, добра тебе, дядь)

  • @Python_in_UA
    @Python_in_UA 3 года назад +4

    Добрый человек, благословений тебе по жизни.

  • @ZhanaraAitanova
    @ZhanaraAitanova Год назад

    Ты просто супер ! Ты самый идеальный для начинающего фронтендера учитель !

  • @johnnylk7966
    @johnnylk7966 4 года назад

    По моему лучшее объяснение для новичков что я встретил. Однозначно лайк

  • @usamaalrody2
    @usamaalrody2 4 года назад +1

    Да, ваше мнение правильное. Канал является хорошим дополнением ко всем создателям контента или программистам. Спасибо за отличное объяснение. Я подписался на канал

  • @seoonlyRU
    @seoonlyRU 2 года назад +1

    отличная тема! лайк от вебмастера и гуру по сео и не только СЕООНЛИ

  • @Hanna_1648
    @Hanna_1648 5 лет назад +2

    “И в итоге называется неправильным” 😅
    Спасибо за урок. Как всегда с юмором и полезностями 😁

  • @rettjaconomaili8201
    @rettjaconomaili8201 3 года назад +1

    лучшая дикция, все ясно и доходчиво, спасибо вам большое!

  • @justdead473
    @justdead473 2 года назад

    Спасибо, все просто и понятно! Установил для себя представление выстраивания )

  • @alekse7433
    @alekse7433 3 года назад

    Парень спасибо тебе огромное. Ты не представляешь какой я тупой, но у меня все получилось, делал 3 дня, ещё я узнал что есть среда для разработки вижен студио)). Очень интересно объясняешь, непонятно почему так мало подписчиков??

  • @reinaldojb8985
    @reinaldojb8985 4 года назад

    Хорошая работа, друг, без сомнения, программирование - лучшее!

  • @ВиталийПопов-м1г
    @ВиталийПопов-м1г 2 года назад

    Спасибо за видео! Узнал достаточно много нового с видео, удачи)

  • @МируМир-ш4ю
    @МируМир-ш4ю 4 года назад +1

    Блин, все объяснил понятно и коротко. Автору респект 👍

  • @egoregoroff104
    @egoregoroff104 5 лет назад +5

    Спасибо, мне как новичку очень полезно:)

  • @antresolweb
    @antresolweb 3 года назад

    Отличное видео для начинающих. Автору уважение за проделанную работу. 🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.

  • @Makswell-oo5gu
    @Makswell-oo5gu 4 года назад +4

    Спасибо за урок! Сделай еще верстку простого лэндинга, в таком же ритме, для начинающего)

    • @temofart
      @temofart  4 года назад +4

      Макс Максимыч хорошо, я думаю вернуться с подобными темами

  • @dimitrybobkov9577
    @dimitrybobkov9577 3 года назад +1

    А те сайты которые верстал по вашим видео потом можно использовать во фрилансерком портфолио ?

  • @ua7230
    @ua7230 Год назад

    Благодарю , это было познавательно 👍

  • @СофьяРощинская
    @СофьяРощинская 2 года назад

    Cпасибо! Полезно и очень понятно! Очень помогло!

  • @KaterynaFomenko-j4o
    @KaterynaFomenko-j4o 2 года назад

    40:20 почему - то не сработал а:hover меняет background только при нажатии. Почему не работает при наведении?

    • @temofart
      @temofart  2 года назад

      Может это мобильная / планшетная версия? Там такая особенность, что навести пальцем невозможно, только клик, а если в браузере эмулировать эту версию сайта то нужно только кликать. Других причин не знаю

    • @KaterynaFomenko-j4o
      @KaterynaFomenko-j4o 2 года назад

      @@temofart Спасибо за ответ.

  • @ВладиславаВасільєва
    @ВладиславаВасільєва 3 года назад +2

    Не можу загрузити зображення на .userpic , роблю все так само, хоть з іншими фонами все добре, в чому проблема?

    • @romannaumenko8292
      @romannaumenko8292 2 года назад

      Да с узерпиг чот не то. У меня блок справа не встаёт вылезает снизу.

  • @quizilizi
    @quizilizi 2 года назад

    Спасибо за классный урок !!!!

  • @wallet666
    @wallet666 2 года назад

    Хорошее видео, спасибо. Только голос чуть потише сделать стоит, а то музыку плохо слышно

  • @olegkiselev6262
    @olegkiselev6262 2 года назад

    Как у тебя поучится?

  • @ci4417
    @ci4417 2 года назад

    кинь свой плейлист

  • @АннаЗверева-б3к
    @АннаЗверева-б3к 3 года назад

    Спасибо за урок!
    PS: какой Вы красивый🙈

    • @temofart
      @temofart  3 года назад

      Спасибо☺️

  • @gerompauel
    @gerompauel 3 года назад

    Хотелось бы продолжения:)

  • @a.viktor2947
    @a.viktor2947 4 года назад

    Порядочный пример создания странички .)

  • @ill.uchiha9938
    @ill.uchiha9938 5 лет назад +4

    Чувак ты ахуенный. Надеюсь не бросишь канал, у тебя все впереди

    • @temofart
      @temofart  5 лет назад +2

      Ill.Uchiha9 Спасибо, планирую продолжать)

  • @ВиталийГорьков-з1ч
    @ВиталийГорьков-з1ч 2 года назад

    У меня почему то не включается Live Server. Подскажи, пожалуйста, почему? Плагин установил. Видео твое хорошее.

    • @temofart
      @temofart  2 года назад

      Сложно сказать, посмотри инструкции по свежим видео, может мое уже устарело

  • @СтепаШибаев
    @СтепаШибаев Год назад

    А что за редактор кода у тебя?

  • @flaryos9325
    @flaryos9325 2 года назад

    Здравствуйте
    Пишу код уже 5 час и на 46 минуте sidebar вообще не работает уже 30 минут сижу
    Как можно с вами связаться, очень устал уже 3 часа ночи

  • @sashkashibitskiy
    @sashkashibitskiy 2 года назад

    Что делать если background не работает

  • @swaga-k2q
    @swaga-k2q 2 года назад

    а это пойдет как проект на инфу? 9 класс я выбрал создание сайта с использованием кода HTML?

  • @НатальяЯблонская-к3я

    удачи вам в развитии

  • @Hol1y9
    @Hol1y9 3 года назад +1

    Подскажите, пожалуйста, что мне делать, если я меняю файл CSS обновляю и стили не применяються?

    • @hightech_edu
      @hightech_edu 3 года назад +1

      Возможно вы забыли его подключить в или по указанному пути файла его не существует

  • @borodyy
    @borodyy 2 года назад

    помоги пожалуйста, у меня в sidebare SKILLS почему то относится к .nav ul backgraund. (Название Skills с рамкой от backgraund(( я не понимаю в чем проблема ((

  • @sbmasterart1081
    @sbmasterart1081 2 года назад

    А как ещё можно вставить картинки? Просто я ставлю в html в title-block картинка та ставится но уже текст на стороне остается,а не на картинке. Подскажите пожалуйста, я хочу загруженную картинку вставлять в css ,а не через интернет.

  • @ОльгаРатникова-е9н
    @ОльгаРатникова-е9н 4 года назад

    Спасибо, все объяснил понятно и коротко!

  • @bikoza
    @bikoza 2 года назад

    Подскажите а как он тег моментально оборачивает в div и class? То есть он пишет просто nav, нажимает на кнопку и там сразу

    • @temofart
      @temofart  2 года назад +1

      Называется Emmet, встроенная фича в редакторах. У меня vs code, погугли как пользоваться

  • @wertuuughost7337
    @wertuuughost7337 3 года назад +1

    что за программа?

  • @sultankeneev8093
    @sultankeneev8093 2 года назад

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

  • @olegonkos
    @olegonkos 10 месяцев назад

    а зачем в sidebar прописывать ширину = 30%, если уже контейнеру прописал 70% ? Компутер сам посчитает

  • @Логовотестировщика

    Мощно! Благодарю!!

  • @antonmolchanov9327
    @antonmolchanov9327 3 года назад

    Ваааау! Спасибо тебе большое! Так доходчиво и не спеша все рассказал и показал! Потрясающе!

  • @serg-k
    @serg-k 3 года назад +1

    Первый сайт хоть он и простой, но я впервые сделал до конца. Потому что у блогеров в начале обьясняют что такое h1 p долго мурыжат а когда уже идет сложно, они как понос бегут и нихера не понятно, 107 часов потрачено из которых половина в пустую

  • @РоманРоманцов-д9ц
    @РоманРоманцов-д9ц 2 года назад

    Хорошее видео всё чётко только автор самое главное не указал программу на которой он работает ...

  • @Vulpes_91
    @Vulpes_91 3 года назад

    полезное видео. Пожелание - фоновую музыку потише

  • @grenadier1653
    @grenadier1653 4 года назад +1

    обязательно ли навигационные ссылки делать посредством li ?

    • @temofart
      @temofart  4 года назад

      Kolyan ссылка делается с помощью и использовать li не обязательно. Это просто оболочка которая говорит что у нас "список" таких ссылок

    • @grenadier1653
      @grenadier1653 4 года назад

      @@temofart насколько ответственно указывать размер шрифта в пикселях? Не вызовет ли это проблемы при разных экранах?

    • @temofart
      @temofart  4 года назад

      @@grenadier1653 нет, никаких проблем при использовании пикселей нет. Ознакомьтесь с этой статьей:
      medium.com/hackernoon/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f

    • @grenadier1653
      @grenadier1653 4 года назад

      @@temofart Благодарю

    • @гггг-щ9е
      @гггг-щ9е 4 года назад

      @@grenadier1653 хороший вопрос

  • @alekse7433
    @alekse7433 3 года назад

    Пишу url а он у меня не выделяется, что делать ??

  • @adrianj1703
    @adrianj1703 4 года назад +1

    Очень классно, самый наверно адекватный обзор, но почему вы остановились и не продолжили наполнять страницы и завершить данный проект? Пожалуйста, я не хочу смотреть других авторов, как создавать страницы, их наполнение, пожалуйста сделайте это.

  • @гггг-щ9е
    @гггг-щ9е 4 года назад +2

    padding:100px 0 ; в body не работает

    • @temofart
      @temofart  4 года назад

      гг гг не может быть)

    • @temofart
      @temofart  4 года назад

      Я надеюсь в коде пробела нет перед точкой с запятой ?

    • @гггг-щ9е
      @гггг-щ9е 4 года назад +1

      @@temofart я тупо conteiner дал margin:50px auto и все ,

    • @гггг-щ9е
      @гггг-щ9е 4 года назад

      @@temofart не было вроде

    • @feelyt8134
      @feelyt8134 4 года назад

      @@гггг-щ9е надо margin: 50px;

  • @dimanwostock
    @dimanwostock 4 года назад

    Спасибо
    Обьяснил все понятно.

  • @Dayrenday
    @Dayrenday 4 года назад

    Не получается как не колдовал сделать ссілку изменяющей цвет по команде .nav li a:hover, что может быть, сделал все как у вас????

    • @temofart
      @temofart  4 года назад

      DaYrEn DAYS а попробуй проинспектировать ссылку и если браузер хром то в той области где описание стилей сверху есть кнопочка :hov. Там можно вручную имитировать hover и посмотреть какие стили применяются и что не так.

  • @alphabetta3740
    @alphabetta3740 3 года назад

    Кто может скинуть на почту готовый код? Я пробывал сделать но остановился на подвале . Рамка просто не отходит от боков сайта.

  • @АлександрНазаров-т1в

    Однозначно лайк, спасибо.

  • @marvolo9770
    @marvolo9770 Год назад

    28:05 появляется новый div с классом title о котором ты не сказал, долго искал что за хуйня у меня творится...

  • @wiktorzhak2862
    @wiktorzhak2862 2 года назад

    Спасибо.🙂

  • @serg-k
    @serg-k 3 года назад

    Капец из за того что я обнуляющий поставил ниже. padding у меня и не работал, а я думаю, все же переписал а не работает )

  • @jackbutler2156
    @jackbutler2156 3 года назад

    очень круто)

  • @xlamara721
    @xlamara721 4 года назад

    в какой программе это всё делать?

    • @mark_0771
      @mark_0771 4 года назад +1

      В любом блокноте. Я использую Sublime Text3

  • @tou.f6016
    @tou.f6016 4 года назад +1

    Спасибо))

  • @evgenm4756
    @evgenm4756 4 года назад

    Спасибо

  • @TheEegmen
    @TheEegmen 4 года назад +1

    Спасибо , как раз искал что-то подходящие что бы стартануть !
    Только пришлось в "reset .css" убрать margin чтобы анимация не дергалась...не знаю почему так , но для первого раза думаю пойдет.
    mikebiryu.github.io/Mr.Cat/

    • @ВладиславЗотов-к4с
      @ВладиславЗотов-к4с 4 года назад

      Можешь скинуть готовый код архивом?

    • @TheEegmen
      @TheEegmen 4 года назад

      @@ВладиславЗотов-к4с напиши почту скину)

    • @ВладиславЗотов-к4с
      @ВладиславЗотов-к4с 4 года назад

      @@TheEegmen vladokzotov@yandex.ru

    • @kerly3116
      @kerly3116 4 года назад

      Здравствуйте, как вы сделали дополнительный переход, что бы переходить о Main info и остальным?

    • @TheEegmen
      @TheEegmen 4 года назад

      @@kerly3116 не понял о чем вы , если про открытие в новом окне , то - Ссылка откроется в новом окне

  • @Foromantik21
    @Foromantik21 4 года назад

    Классно

  • @taran22eight
    @taran22eight 3 года назад

    32:44
    ul>li*3>a
    =\

  • @gells0nd
    @gells0nd 4 года назад +2

    Кто не нашел шаблон, вот ссылка для вас - www.php-s.ru/templates/001/

  • @АнастасияМарьясова-й9ц

    спасибо!

  • @50na50strim
    @50na50strim 3 года назад +1

    одностраничники не каму не нужны дичь какая то

    • @temofart
      @temofart  3 года назад +3

      Необразованные тоже

  • @АлексейМелентьев-ч3в

    ну это прям для детей

  • @Александр-н8х7н
    @Александр-н8х7н 2 года назад

    новичкам лучше не смотреть и не запоминать как делать неграмотно
    автор даже сам это признаёт ниже

    • @temofart
      @temofart  2 года назад

      Да, лучше не смотри

    • @Александр-н8х7н
      @Александр-н8х7н 2 года назад

      @@temofart те*

    • @sbmasterart1081
      @sbmasterart1081 2 года назад

      Всё даже лёгким языком объяснил он, если вы не можете просто смотреть в видео где объяснили всё подробно то просто закройте видео и идите дальше. Не будьте душнилами.

    • @Александр-н8х7н
      @Александр-н8х7н 2 года назад

      @@sbmasterart1081 интересно через сколько лет до тебя дойдёт что автор неграмотно делает-показывает

    • @sbmasterart1081
      @sbmasterart1081 2 года назад

      @@Александр-н8х7н до вас *

  • @Vladyslav_81
    @Vladyslav_81 Год назад +1

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

    • @temofart
      @temofart  Год назад +1

      Я ж не Ванга чтобы определить) Наверняка ошибка есть, нужно видеть код. Попробуй открыть вручную в браузере тот файл html в котором пишешь код, возможно не тот открыт.

    • @Vladyslav_81
      @Vladyslav_81 Год назад +1

      @@temofart та пробовал уже 3 раза, и код по новому переписывал( Даже не знаю в чем проблема

    • @temofart
      @temofart  Год назад +1

      @@Vladyslav_81 если написать в index.html какие-то теги с текстом и открыть этот файл в браузере там по-любому что-то будет.

    • @Vladyslav_81
      @Vladyslav_81 Год назад

      @@temofart Спасибо, а как сделать для каждой кнопки разный текст?

  • @Александр-ю7щ6р
    @Александр-ю7щ6р 2 года назад +1

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

  • @angelinano903
    @angelinano903 2 года назад

    Большое спасибо

  • @mikedkry
    @mikedkry 2 года назад

    Спасибо!