HTML & CSS практика | Верстаем меню сайта

Поділитися
Вставка
  • Опубліковано 20 сер 2024
  • Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to...
    Верстаем типичное меню для сайта. Меню бывает разное, но это база для всех вариантов.
    Не понял какой-то CSS свойство? - ищи его в справочнике и читай о нём: webref.ru/css
    ❗ Шаблон для старта из видео: github.com/avi...
    ========================================
    avis-agency.ru - создание сайтов под ключ
    rah-emil.ru - мой сайт и соц. сети

КОМЕНТАРІ • 140

  • @TheFrostaill
    @TheFrostaill 2 роки тому +51

    Реально, без преувеличений, глоток свежего воздуха. Спасибо тебе

    • @max_peyn5305
      @max_peyn5305 11 місяців тому

      А у меня проблема почему-то html&css по центру а ссылки чуть ниже несмотря на то что я в точности повторял за автором а и що обратная связь тоже только више html &css

    • @Said-qg8jf
      @Said-qg8jf 2 дні тому +1

      @@max_peyn5305 у меня также, нужна .navbar-menu задать margin 0

  • @user-xt5yx4gi8e
    @user-xt5yx4gi8e 2 роки тому +10

    Мне как начинающему понравилось то что все четко объяснили, без лишнего "мусора" который пока для новичка был бы лишним. подписка и лайк однозначно

  • @mifaress
    @mifaress 2 роки тому +9

    КЛАСС. Наконец-то нашел то, что хотел. Только полезная инфа, никакой воды. Не теряешь времени на объяснении малозначимых действий, а пишешь "субтитры". Лучший!

  • @mr.theTrue
    @mr.theTrue 2 роки тому +19

    Классно, мало таких уроков. Пожалуйста продолжай свою работу!!! Спасибо.

  • @romanminich118
    @romanminich118 Рік тому +5

    Отличная подача материала по созданию хедера ! 👍 Всё до беспредела последовательно и понятно. 🥇

  • @s-m715
    @s-m715 Рік тому +3

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

  • @lenasmirnova6231
    @lenasmirnova6231 3 роки тому +6

    Самый лучший урок на ютубчике. Хочу ещё видео, про js!

    • @FuckOF...
      @FuckOF... 2 роки тому +1

      ​@@AVISTV да ну!?)

  • @user-xk3iz2bx8x
    @user-xk3iz2bx8x Рік тому +2

    Это что-то нереальное , именно то что я искал !!!! Спасибо ☺️

  • @rainstorm1157
    @rainstorm1157 Рік тому +1

    Спасибо большое, еще и проорала с неожиланных вставок :D

  • @user-tl5iw6np5e
    @user-tl5iw6np5e Місяць тому

    ну это супер! А фаза "элемент либо никакой либо не такой как хотелось" - философия...

  • @osm1939
    @osm1939 2 роки тому +4

    Привет спасибо за видео, все очень понятно, за что отдельный респект!)

  • @juliadmitrivna1219
    @juliadmitrivna1219 2 роки тому +4

    Отличное видео: все по существу и с освещением всех нюансов.

  • @vikaKim1919
    @vikaKim1919 Рік тому +1

    простым человеческим языком респект...

  • @dobrMAV
    @dobrMAV 3 роки тому +8

    Спасибо!Отличный урок!Мне как начинающему очень понравилось!

    • @sizer0939
      @sizer0939 3 місяці тому

      Как твой прогресс спустя 3 года?)

  • @chupik1050
    @chupik1050 Рік тому

    Спасибо большое за видео, очень круто объяснил, без воды, просто по факту. Очень помогло, удачи тебе!

  • @FuckOF...
    @FuckOF... 2 роки тому +1

    Ляяя, я таких костылей наделал😂😂😂, но благодаря тебе переделаю всё по феншую, спасибо)

  • @kardenis4437
    @kardenis4437 Рік тому

    Спасибо тебе за такой короткий и очень продуктивный ролик! Помог

  • @user-gs5sf8ou9r
    @user-gs5sf8ou9r 2 роки тому

    Спасибо! Урок класс, музычка тоже в тему. От "госпади!" смеялась сильно)))

  • @user-vk1ng7mx6e
    @user-vk1ng7mx6e 2 роки тому +2

    Благодарю Тебя. Очень здорово объяснил. Огромное спасибо!!!!!

  • @andreyyakovlev3326
    @andreyyakovlev3326 Рік тому

    лучшая обучалка, которую смотрел

  • @catvrednyy7427
    @catvrednyy7427 2 роки тому +2

    Спасибо, всё помогло и вполне доходчиво объяснил

  • @rage_wg
    @rage_wg Рік тому

    Огосподи, я в своем тестовом проекте делал увеличение кнопки через увеличение значения отступов, так кнопка увеличивалась, но только вниз. Спасибо тебе за transform: scale, так выглядит намного лучше. Буду продолжать учиться

  • @nikaevil9227
    @nikaevil9227 Місяць тому

    чтоб я без тебя делала)
    спасибо

  • @user-xs8yd4el8n
    @user-xs8yd4el8n 3 роки тому

    Спасибо тебе, ты крутой) не забрасывай

  • @Boba_Fett_2.0
    @Boba_Fett_2.0 Рік тому

    Эмиль, мы тебя любим. Ты лучший!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    • @user-se8cu1fr2m
      @user-se8cu1fr2m Рік тому

      @@AVISTV ждем новые видео, не бросай канал! :)

  • @user-bd2zr7dy8l
    @user-bd2zr7dy8l Рік тому +1

    Классно и подробно объяснил)

  • @bub2728
    @bub2728 Рік тому

    7:25,ахахах чувак ты лучший,проорал

  • @marinasakharova4349
    @marinasakharova4349 Рік тому

    Ты мой герой ❤️
    я мучалась полдня!
    Благодарю тебя 🙌🏼

    • @temirlan6660
      @temirlan6660 Рік тому

      ​@@AVISTV можете помочь? Как сделать так чтобы оно само снизу предлагало как у вас. Например вы в начале написали nav.navbar>.container и у вас оно изменилось на другой код а у меня так не получается

    • @alexsashhhka
      @alexsashhhka 3 місяці тому

      @@temirlan6660 tab нажимай и будет тебе счастье

  • @seoonlyRU
    @seoonlyRU 2 роки тому +1

    годнота))) ловите лукас от СЕООНЛИ

  • @ares8665
    @ares8665 Рік тому +4

    Я не устанавливал шаблон, а так-же не указывал его в html документе. Но у меня возникла такая проблема: «обратный звонок», у меня расположен выше, нежели разделы «о нас, контакты и т.д.». Эти разделы расположены ниже. Единственное, что стоит по середине это лого. И то, у меня таких отступов не имеется…

    • @andreydomrachev1648
      @andreydomrachev1648 Рік тому

      У меня такой же случай. поборол?

    • @user-kn3zy4ct6z
      @user-kn3zy4ct6z Рік тому

      такая же проблема

    • @Flame-ii9cl
      @Flame-ii9cl Рік тому

      @@user-kn3zy4ct6z жиза, не знаю как исправить(

    • @Flame-ii9cl
      @Flame-ii9cl Рік тому

      @@user-kn3zy4ct6z как вариант их можно в li'шки добавить, и они встанут как надо.

    • @Flame-ii9cl
      @Flame-ii9cl Рік тому

      @@user-kn3zy4ct6z я так и сделал

  • @firstlevel3419
    @firstlevel3419 2 роки тому +1

    Спасибо!!! отличное видео.

  • @nortfy
    @nortfy 26 днів тому +1

    У меня колбэк чуть вверху, хотя код вроде такой же(( из за чего это можеть быть?
    я так понимаю это из за navbar-wrap

  • @boromanphoenix811
    @boromanphoenix811 2 роки тому

    Супер, без воды.

  • @user-uv4zh7xn2c
    @user-uv4zh7xn2c Рік тому

    Вы добавили сетку бутстрапа ради одного контейнера. не легче было - width: 1320px; height: 70px, margin: 0 auto ;. Второй вопрос : почему не прописать в navbar-menu Свойства - display: flex;
    justify-content: flex-start;
    align-items: center;
    } результат будет кажется таким же

  • @mifaress
    @mifaress 2 роки тому

    7:09. 🤣🤣Знатно проорал))))

  • @DianaDiana-zg1rr
    @DianaDiana-zg1rr Місяць тому

    Вы немогли бы style.css поднать с боку к html - у так не удобно смотреть . Спасибо вам мне очень помагло.

  • @siu1941
    @siu1941 Рік тому +2

    А как у контейнера появился отступ справа и слева?

  • @VIRET0
    @VIRET0 2 роки тому +1

    Спасибо, очень помогло

  • @TimaUz
    @TimaUz Рік тому

    спасибо вам очень помогли)))

  • @Roma_G_mtrsw
    @Roma_G_mtrsw Місяць тому

    Из вас хоть кто-то писал этот код?
    Потому что такое чуство будто вы все просто смотрели!!!

  • @skiller1962
    @skiller1962 2 роки тому

    зачем каждый раз писать?
    можно же просто:
    ..."
    и так дальше

    • @AoKtt
      @AoKtt Рік тому

      Или так (ul>li*2>a[href=""]

  • @boromanphoenix811
    @boromanphoenix811 2 роки тому

    Лайк, подписка, продолжай👍🏻☮️

  • @user-vk6yk8cq8i
    @user-vk6yk8cq8i 2 роки тому

    Спасибо большое.Лайк + подписка

  • @user-qt9wr4kq8e
    @user-qt9wr4kq8e Рік тому

    спасибо большое, все четко

  • @tronget
    @tronget 2 роки тому

    Спасибо за видео!

  • @ant1k-1
    @ant1k-1 Рік тому

    Спасибо, помог!

  • @SergunyaBartosh
    @SergunyaBartosh Рік тому

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

  • @4izh641
    @4izh641 2 роки тому

    Как же я упал с этой вставки чбд

  • @corporationh5827
    @corporationh5827 2 роки тому +2

    Bro, шо делать?
    .novbar{
    width: 100%;
    height: 70px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    Написал как ты, но тень не появляется. Я новичок, сильно не ругайте.

    • @damirio_
      @damirio_ 2 роки тому

      @@AVISTV у меня эти слови не горит цветом что делать?
      width: 100%;
      height: 70px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .1);

  • @user-en6kk6mk6l
    @user-en6kk6mk6l 2 роки тому

    Красавчик!

  • @FuckOF...
    @FuckOF... 2 роки тому

    Спать надо а я всё в компе🙈

  • @dennitenial6350
    @dennitenial6350 2 роки тому +1

    Arigato! Senpai.

  • @kartonnoekorolevstvo
    @kartonnoekorolevstvo Рік тому

    Как сделать в sublime text после закрытия автоматически появлялся комментарии, как у вас на видео? Спасибо

  • @ozerchanin2808
    @ozerchanin2808 2 роки тому

    Молодец. Спасибо.

  • @user-vs1it4th6f
    @user-vs1it4th6f 3 роки тому +2

    А что делать если у меня даже после команд надпись не становиться как у вас а также внизу остаётся

    • @user-dc8th1lb7x
      @user-dc8th1lb7x 2 роки тому

      каких команд? опиши

    • @user-dc8th1lb7x
      @user-dc8th1lb7x 2 роки тому

      мне кажется он все понятно объяснил, даже для меня новичка, не знающего половины из этих команд :)

  • @San_ect
    @San_ect Рік тому

    А что нужно сделать чтобы
    Когда меню сделал ,но мне нужно чтобы при выборе раздела вылазила информация?

  • @Gifonchek578
    @Gifonchek578 9 місяців тому

    подскажите пожалуйста как добавить шаблон в Visual studio code

  • @AoKtt
    @AoKtt Рік тому

    Помогите ввожу
    Justify-content:space-between;
    А space-between не работает что делать

  • @cryprodzen
    @cryprodzen 2 роки тому +1

    5:36 почему у меня все в ряд выводит? все также прописал

    • @cryprodzen
      @cryprodzen 2 роки тому

      мб что-то дополнительно надо установать? докер или что то еще?

  • @kenry4432
    @kenry4432 2 роки тому

    Лучший

  • @layin334
    @layin334 2 роки тому

    Не понимаю что не так, стили как-будто не подключились, хотя цвет букв менялся, но у меня просто ссылки без каких-либо стилей

  • @rozanek9372
    @rozanek9372 2 роки тому

    Лайк, подписка!

  • @user-uu6qt5ln8t
    @user-uu6qt5ln8t 2 роки тому

    Спасибо тебе

  • @dokers2084
    @dokers2084 Рік тому +6

    Почему то навбар делатеся не совсем на всю ширину экрана, хотя стоит width 100% 🤔

    • @user-vp9xb8lc8e
      @user-vp9xb8lc8e Рік тому +1

      Bootstrap подключен

    • @mederrayimbekov97
      @mederrayimbekov97 Рік тому

      я новичок и тут такое дело что у меня (о нас , портфолио , цены , контакты ,обратный звонок ) они у меня остались под заголовком (HTML CSS) это из за того что я bootstrap не так использовал ? они у меня почему то вычеркнуты

    • @user-vt4bc9jf2t
      @user-vt4bc9jf2t Рік тому

      Наверное к боди есть отступы есои Вы их не убирали. Но думаю за 9мес кже разобрались)

    • @user-pt3yg5xg9w
      @user-pt3yg5xg9w 8 місяців тому

      По ширине родителя 100%

  • @mr.vorchun
    @mr.vorchun 2 роки тому

    Нафига transition задавать all? Что бы на странице, при загрузке и перезагрузке, все скакало? Добавляете плавность к переходу цвета - укажите color. И глаза вырывать не будет

  • @mishon9739
    @mishon9739 2 роки тому

    Найс вариативность с эффектами и тенями , слушай а по бутстрап есть урок , тяжело даётся

  • @user-zv1pb8od7e
    @user-zv1pb8od7e 11 місяців тому

    Виден подход новичка по стилизации в css

    • @AVISTV
      @AVISTV  11 місяців тому

      Специально для новичков😉

  • @kjairsh2340
    @kjairsh2340 8 місяців тому

    почему у теья все элементы изначально приблизились к центру, хотя у тебя margin не было

    • @AVISTV
      @AVISTV  8 місяців тому

      Потому что display: flex у родителя. Он позволяет позиционировать элементы внутри

  • @altromundo3854
    @altromundo3854 Рік тому

    как заполнять странички в этих блоках?

  • @IGo_r
    @IGo_r Рік тому

    Почему точки в "li" не уходят

  • @optimax7357
    @optimax7357 3 роки тому

    Подскажи пожалуйста, как сделать "Комментарий при закрытии div" ?

  • @juliadmitrivna1219
    @juliadmitrivna1219 2 роки тому

    А вы планируете снимать обучающие видео по JS?

  • @YessetSong
    @YessetSong 2 роки тому

    Спасибо

  • @forwork6564
    @forwork6564 Рік тому

    я искал медь, а нашел золото

  • @carrion5236
    @carrion5236 Рік тому

    Здраствуй, если с телефона открыть меню поплывёт ?

  • @Boba_Fett_2.0
    @Boba_Fett_2.0 Рік тому

    Опупенно, офигенно, охуенно!😄

  • @artyrdanilov2791
    @artyrdanilov2791 Рік тому

    а заче у body position relative ?

  • @Tonyextazzy
    @Tonyextazzy Рік тому

    Как открыть консль розраба?

  • @exalme
    @exalme Рік тому

    а ещё можно было родителю каждог пункта списка дать значение display: flex и justify-content: space-between;
    8:00

    • @Ksmoll
      @Ksmoll Рік тому

      сработало. теперь блоки не съезжают!! Облазил весь иннет. Спасибо! Но съезжают строки где больше одного слова. Блок О нас и обратный звонок. upd: решил проблему добавил в navbar-wrap { white-space: nowrap; }

    • @Ksmoll
      @Ksmoll Рік тому

      Можно еще margin-left: auto; в navbar-wrap добавить. А что justify-content: space-between конкретно в этом коде делает я так и не понял. Вроде он должен равномерно распределить элементы по строке, но у меня ничего не происходит.

  • @user-ze4wy3fx6z
    @user-ze4wy3fx6z Рік тому

    Как сделать подсветку html начального и конечного тегов в vsc? Например таких

    • @user-ze4wy3fx6z
      @user-ze4wy3fx6z Рік тому

      @@AVISTV Нет. Как сделать подсветку тегов HTML чтоб я понял где начальный тег, а где конечный. Как понять есть ли закрытый тег? Например я написал ляляля, а тег забыл поставить. И вот как узнать поставил я его или нет?

  • @irairina411
    @irairina411 Рік тому

    Уот так уот!

  • @TASTAI
    @TASTAI 10 місяців тому

    А есть готовый код?

  • @mninxy
    @mninxy Рік тому +1

    5:26

  • @cryprodzen
    @cryprodzen 2 роки тому +1

    Что за редактор?

  • @shumashok
    @shumashok 2 роки тому

    Как называется программа ?

  • @krossvayz6500
    @krossvayz6500 2 роки тому

    Здраствуйте. Прописал box-shadow и задал ширину 100 процентов, но есть отступи от края екрана. Как решить? Это может быть из за того что вместо надписи HTML&CSS я вставил картинку?

    • @AoKtt
      @AoKtt Рік тому

      Вполне, попробуйте тег margin

    • @ares8665
      @ares8665 Рік тому

      body {margin: 0%; padding: 0%;}

  • @azat3846
    @azat3846 3 роки тому

    Привет)

  • @shumashok
    @shumashok 2 роки тому

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

  • @DanDiablo
    @DanDiablo 27 днів тому +2

    А можно нормально меню без бутстарапа? Мне не нужно тащить весь долбаный бутстрап ради меню! Люди на столько обленились, что скоро будут качать бустрап, что бы просто поставить рядом две колонки. Не нужно знать флекс, есть бутстрап! Блин, да код этого меню в разы короче закаченного бутстрапа! Тьфу... (((

  • @elgamer4986
    @elgamer4986 2 роки тому

    👍

  • @paxideno
    @paxideno Рік тому

    Эта менюшка будет адаптироватся под мобильные устройвства ?

    • @paxideno
      @paxideno Рік тому

      Блин, сделал всё по видосу, менюшка вышла, но вот когда хочу посмотреть с моб устройства это жопа

    • @user-se8cu1fr2m
      @user-se8cu1fr2m Рік тому

      @@paxideno Чувак, для этой жопы нужно прописывать медиа-запросы под разные устройства

  • @lyliaZV
    @lyliaZV 2 роки тому

    Пишите код нормально как все люди, а то как пишите вы код не особо понятно, иногда так это напрягает

    • @lyliaZV
      @lyliaZV 2 роки тому

      @@AVISTV well😗

  • @Yulia1035
    @Yulia1035 Рік тому

  • @luckytima2315
    @luckytima2315 3 роки тому

    Все норм ,но бутсрап все портит имхо

  • @user-tn8pk2hf8t
    @user-tn8pk2hf8t 3 роки тому

    Если бы без бутстрапа.. Было бы ок..

  • @user-nb4xm1fj4d
    @user-nb4xm1fj4d 6 місяців тому

    Ты уже зарабатываешь на програмиировании?

    • @AVISTV
      @AVISTV  6 місяців тому

      Уже 7-8 лет как)

    • @DarkLinux-un1pd
      @DarkLinux-un1pd 4 місяці тому

      @@AVISTV бро а как называется фишка что ты вводишь сразу несколько параметров и после tab у тебя уже несколько тегов? хочу изучить её это очень удобно

  • @rootroot1668
    @rootroot1668 2 роки тому

    Учитель научи меня конфу

    • @rootroot1668
      @rootroot1668 2 роки тому

      А ты проверь готов я или нет

    • @rootroot1668
      @rootroot1668 2 роки тому

      @@AVISTV дядя не делай волну давай видосы времени нет ждать учиться надо

  • @Antikage201
    @Antikage201 Рік тому

    Автор смотрит ЧБД

  • @BYVAXA
    @BYVAXA 21 день тому

    тьфу блин мне надо что бы и на мобиле менялся

  • @kartonnoekorolevstvo
    @kartonnoekorolevstvo Рік тому

    Как сделать в sublime text после закрытия автоматически появлялся комментарии, как у вас на видео? Спасибо