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

Подписаться 10 тыс.

Просмотров 168 тыс.

50% 1

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

Опубликовано:

13 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 130

@mr.theTrue 2 года назад

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

@user-xt5yx4gi8e Год назад

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

@romanminich118 Год назад

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

@TheFrostaill 2 года назад

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

@max_peyn5305 7 месяцев назад

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

@mifaress Год назад

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

@s-m715 Год назад

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

@user-xk3iz2bx8x Год назад

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

@rainstorm1157 Год назад

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

@TimaUz 8 месяцев назад

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

@dobrMAV 3 года назад

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

@juliadmitrivna1219 2 года назад

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

@kardenis4437 Год назад

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

@user-vk1ng7mx6e 2 года назад

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

@user-xs8yd4el8n 3 года назад

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

@catvrednyy7427 2 года назад

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

@osm1939 2 года назад

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

@chupik1050 Год назад

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

@user-gs5sf8ou9r Год назад

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

@vikaKim1919 Год назад

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

@user-bd2zr7dy8l Год назад

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

@andreyyakovlev3326 9 месяцев назад

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

@firstlevel3419 Год назад

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

@FuckOF... Год назад

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

@tronget 2 года назад

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

@boromanphoenix811 Год назад

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

@lenasmirnova6231 3 года назад

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

@FuckOF... Год назад

@@AVISTV да ну!?)

@VIRET0 2 года назад

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

@rage_wg Год назад

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

@user-vk6yk8cq8i Год назад

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

@boromanphoenix811 Год назад

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

@ant1k-1 Год назад

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

@user-qt9wr4kq8e Год назад

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

@ozerchanin2808 2 года назад

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

@seoonlyRU 2 года назад

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

@user-en6kk6mk6l 2 года назад

Красавчик!

@bub2728 Год назад

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

@user-uu6qt5ln8t Год назад

Спасибо тебе

@wild_snake 11 месяцев назад

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

@user-se8cu1fr2m 11 месяцев назад

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

@rozanek9372 2 года назад

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

@juliadmitrivna1219 2 года назад

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

@mifaress Год назад

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

@dennitenial6350 2 года назад

Arigato! Senpai.

@YessetSong 2 года назад

Спасибо

@kenry4432 Год назад

Лучший

@siu1941 Год назад

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

@optimax7357 3 года назад

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

@alexremik906 Год назад

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

@Gifonchek578 5 месяцев назад

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

@Sd_Dg Год назад

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

@elgamer4986 2 года назад

👍

@marinasakharova4349 Год назад

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

@temirlan6660 11 месяцев назад

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

@SergunyaBartosh 9 месяцев назад

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

@AoKtt Год назад

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

@FuckOF... Год назад

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

@user-uv4zh7xn2c 10 месяцев назад

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

@azat3846 3 года назад

Привет)

@wild_snake Год назад

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

@user-mx9kg8gl3q Год назад

Уот так уот!

@4izh641 2 года назад

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

@altromundo3854 Год назад

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

@user-zv1pb8od7e 7 месяцев назад

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

@AVISTV 7 месяцев назад

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

@carrion5236 Год назад

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

@mishon9739 Год назад

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

@ares8665 Год назад

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

@andreydomrachev1648 Год назад

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

@user-kn3zy4ct6z Год назад

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

@Flame-ii9cl Год назад

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

@Flame-ii9cl Год назад

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

@Flame-ii9cl Год назад

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

@artyrdanilov2791 Год назад

а заче у body position relative ?

@user-ze4wy3fx6z Год назад

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

@user-ze4wy3fx6z Год назад

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

@Yulia1035 Год назад

@IGo_r Год назад

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

@layin334 Год назад

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

@Tonyextazzy Год назад

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

@skiller1962 Год назад

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

@AoKtt Год назад

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

@user-vs1it4th6f 2 года назад

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

@user-dc8th1lb7x 2 года назад

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

@user-dc8th1lb7x 2 года назад

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

@shumashok Год назад

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

@cryprodzen Год назад

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

@cryprodzen Год назад

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

@krossvayz6500 Год назад

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

@AoKtt Год назад

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

@ares8665 Год назад

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

@mr.vorchun 2 года назад

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

@exalme Год назад

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

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

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

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

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

@corporationh5827 2 года назад

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

@damirio_ 2 года назад

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

@kjairsh2340 4 месяца назад

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

@AVISTV 4 месяца назад

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

@TASTAI 6 месяцев назад

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

@paxideno Год назад

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

@paxideno Год назад

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

@user-se8cu1fr2m 11 месяцев назад

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

@dokers2084 Год назад

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

@user-vp9xb8lc8e Год назад

Bootstrap подключен

@mederrayimbekov7595 Год назад

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

@user-vt4bc9jf2t 9 месяцев назад

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

@user-pt3yg5xg9w 5 месяцев назад

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

@forwork6564 Год назад

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

@shumashok Год назад

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

@mninxy Год назад

5:26

@user-nb4xm1fj4d 2 месяца назад

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

@AVISTV 2 месяца назад

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

@DarkLinux-un1pd 13 дней назад

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

@cryprodzen Год назад

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