Профессиональная верстка сайта - адаптивное меню на чистом html css
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- Мы начинаем новый курс уроков верстка сайта с нуля профессионально. В данном курсе для начинающих верстальщиков мы рассмотрим все базовые концепции верстки адаптивных макетов для разных размеров экрана. Это лучший курс для начинающих для того чтоб разобраться с нуля как верстать, как верстать быстро и адаптивно. В первом видео я расскажу про инструменты которые необходимо установить это Chrome и VSCode а так же Photoshop. Далее мы начнем верстку адаптивного меню на чистом html css, что облегчит работу для начинающих и ускорит разработку.
Хостинг Fornex - li.tl/Fornex1
Зарегистрируйся прямо сейчас и по промокоду Blog10x Вы получите скидку на все услуги кроме заказа доменов
![🎤 จับฉลากร้องเพลง x P’ #XXSIVK [EP.1] (2/2) เพื่อนจับได้คำไหน..ต้องร้องคำนั้น เริ่ม! 💓🎶 #MXFRUIT](http://i.ytimg.com/vi/1bJvMJXmeS4/mqdefault.jpg)
Иконка из меню для ленивых =)
☰
Які технології використовуються для верстки сайта в відео?
Василик Віктор html5, css3(flexbox, media-запросы)
@@user-vp1jt3zp9q , дякую. Просто не хотів дивитися відео.
а где макет сайта
www.w3schools.com/charsets/ref_utf_symbols.asp
Вот. Это контент. Ради этого на тебя и подписываются, а не для «вода ради рекламы». Всё чётко, по делу, без лишней воды. Лайк не задумываясь.
Вода для рекламы может вам показаться потому что у вас есть опыт, а если бы без опыта смотрели видео, поняли бы что для начинающих это лучшее что может быть!
@@SuprunAlexey так Никита и говорит, что тут нет воды, так что вы немного его недопоняли, спасибо за контент, вы один из лучших контент мэйкеров в данной области
@@SuprunAlexey совершенно согласен
Я давно скитаюсь по просторам ютуба и хочу сказать, что такие видео редкость ! Коротко и по факту без водищи.
Ставлю сердечко
ШОК КОНТЕНТ. ОДНОЗНАЧНО ЛАЙК. ВСЕ ДОСТУПНО И ПОНЯТНО. Меня прям шокирует как сто строк кода могут сделать такую красоту. А это только начало!!! Эдем, 23 годика
Хорошо что делаете много подобных уроков, есть возможность укрепить и расширить имеющиеся знания.
Узнал о тебе только что, но сразу захотел подписаться, уже понятно, что ты только по делу говоришь. Наконец-то что-то новое.
Впереди много интересного:)
тот редкий случай, когда ставишь не большую. а меньшую скорость воспроизведения, чтобы уловить все))
Приятно видеть такой контент на youtube, не всегда в платных курсах такое увидишь! Ну что-же пожалуйста продолжай в том же духе, Годнота больше нечего сказать.
Пора платные делать?
@@SuprunAlexey Давно. Мне пожалуйста скидку за инициативу! =)
Учту:)
Только же канал не забрасывайте, а то меня ваши подписчики проклинать будут. Ещё и трафик будет с канала. Так что двойной профит
Та пока платного не будет, может донаты введу
найс контент, вот бы этот макет разжевать со всех сторон фронтенда ( в будущем добавить всякие штучки с джс и показать выгрузку на хост) лайк однозначно
Штучки с джс будут, выгрузка на хост тоже будет))
Я в шоке!!!Я 4 часа не мог найти ошибки(Своей)Но!Все работает!Ребята,просто внимательней пишите)Автор,спасибо тебе +подписка и лайк тебе!Спасибо за работу)
Ну шо, братья славяне, как всегда топ
Радуют такие комментарии
@@justvahe3340 без ссылки, просто повторяйте то что на экране и получите такой же результат
Спасибо за ваши труды! Очень полезно!
Благодарю за твою деятельность, очень помогаешь в изучении верстки!
Не хочет работать мобильное меню
CLUB
Home
Models
Service
Contacts
Galery
Join Us
☰
main.css
#checkbox-menu:checked + lable li{
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox-menu:checked + lable .touch {
height: 350px;
}
ошибка в label у вас lable
Очень круто, спасибо за вашу роботу!
Видео отличное. Всё чётко и по делу))
Спасибо!!!!
Хорошее видео. Все толково и понятно. Набрал все в ВСКоде, все работает. Начал разбирать действие каждого тега, появился вопрос:
Какую роль играет align-self: center; в .menu li a{ - перестраховка, лишний тег?
Да, кстати, background там же реально подсвечивает красным, в брузере все работает.
Заранее благодарю за ответ.
Спасибо большое за такие видео, в видео разок ошибся, код работает все хорошо.
Спасибо большое!!! Многому научился благодаря твоей работе. Продолжай делать годноту
Конечно продолжу, спасибо
После добавления куска ниже у меня не видно вообще контента внутри меню после развёртвания. В чём может быть проблема?
.menu li{
display: flex;
align-self: center;
width: 95%;
visibility: hidden;
}
Отличное видео, спасибо большое! Было бы круто, если б этот макет в итоге дополнили JavaScript-ом так же для начинающих. Спасибо!
дополнил
@@SuprunAlexey Спасибо! Крайне полезная информация, которая подана понятно и просто!
Всем привет! Я еще совсем новичок, поэтому заранее извиняюсь, если мои вопросы более чем очевидные. А их много (нет, по коду все получилось, но хотелось бы осознать):
1) 7:37 - зачем указывать ширину nav 100%, если элемент блочный и итак будет занимать эти 100%?
2) 2 класса .menu и .touch для ul - это просто для какого-то удобства? они не группируют несколько тегов и относятся только к одному списку... весь этот же стиль я могу писать через один из классов и ничего не изменится?
3) 9:24 - align-self - для чего требуется здесь? совершенно не вижу как он влияет на отображение...
4) 11:35 - зачем прописывать clear:both?
5) 11:56 - зачем указывать ширину span 100%, если элемент объявлен через display: block как блочный и итак будет занимать эти 100%?
6) 13:47 - .menu - зачем нужно дублировать код и указывать display:flex, justify-content: space-around, align-items: center, если они были уже заявлены до медиа-запросов?
7) 15:50 - что в этом примере дают функции align-self и align-content, если ссылкам уже задана ширина 95% и они центрированы через text-align?
Буду ждать ответ, спасибо)
P.S. Шикарный урок, буду отслеживать. Лайк-лайк 👍🏻
Присоединяюсь к данному вопросу
просто потому что:
1 это есть
2 браузеры, хром(сафари мать его так) и другие) не всегда и не все любят, потому и пишут
3 зачем тогда верстать в ручную, если есть конструкторы?
с пунктом 6 я с тобой согласен, незачем переносить
4 ) clear:both придумали его для float, а зачем афтор ставит, загадка
7 пункт, ты выравниваешь не сам текст а flex элементы
Присоединяюсь к данному вопросу
потому что.. эээ..
ну вот как то так вот.
Быстро,четко,понятно,продолжай так же
Продолжу в том же духе
Подскажите, что не так, пожалуйста
@media screen and (max-width: 800px){
.toggle{
clear: both;
display: block;
text-align: center;
font-size: 18px;
line-height: 40px;
width: 100%;
color: #000000;
background: #ff0090c2;
transition: all .1s linear;
}
.toggle:hover{
background: #ff009046;
width: 100%;
}
#checkbox-menu:checked + label .touch li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox-menu:checked + label .touch {
height: 500px;
}
.menu{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0;
transition: height .3s linear;
}
.menu li{
display: flex;
align-self: center;
width: 95%;
opacity: 0;
visibility: hidden;
}
.menu li a{
width: 95%;
text-align: center;
align-self: center;
align-content: center;
}
}
не могу найти ошибку
у меня на мобиле не раскрывает меню
Код
codepen.io/sergej-zorin/live/QWjjGbb
Помогите
уже второй час бъюсььь
та же самая проблема!
та же ерунда) ты нашел?
Сравните код, где то ошиблись
10 из 5. Молодец
Это радует
Крутяк!!!Спасибо не зря подписался на канал!!!Лайййкккк)))))))))
Спасибо!!!
Спасибо за труд!)
И спасибо большое за такие видео уроки))))))
Почему у меня кнопка раскрытия меню некликабельна? Скажите, пожалуйста, где может быть проблема.
Сравните код, где то ошиблись
+
Все очень круто и информативно. Но ток конечно временами быстровато бывает
Спасибо вам большое за урок
Я дико извиняюсь, но для такого количества разделов брейпоинт для менюхи нужно задавать либо побольше, либо делать промежуточный брейкпоинт, в котором просто уменьшать margin-right для классов `logo` и `contacts`. Это первое замечание.
А второе, для того чтобы ссылки в меню не разъезжались на чуть меньших размерах экрана, событие hover разумнее всего навешивать на элементы `li`, а не `a` и паддинги вынести туда же, в свою очередь классы `logo` и `contacts` присваивать также этому же элементу. Плевать на дурной тон )) Зато всё работает и не разъезжается.
Сорри за SCSS стайл, но как-то так:
.menu {
li {
padding: 10px 15px;
a {
color: #000;
text-decoration: none;
align-self: center;
font-size: 13px;
}
&:hover {
background: #ffcc01;
border-radius: 3px;
cursor: pointer;
transition: background .2s linear;
}
&.logo {
margin-right: 240px;
a {
font-size: 25px;
}
}
&.contacts {
margin-right: 100px;
}
}
}
С тем что разъезжается согласен, но ведь тут и посыл другой.Подразумеваю что человек который делает со мной этот макет доведёт до идеала конечный вариант верстки и использует в портфолио. Я показываю принцип. Если все доводить до идеала в видео, это займёт очень очень много времени.
Спасибо за замечание, я как раз искал real-world example, а не подскажете ли, это вообще (меню, да и сайт в целом) кроссбраузерно или такого понятия уже нет и всё решается gulp-autoprefixer?
@@graceman999 я точно не уверен, но думаю, что всё до сих пор решают человеческие мозги ) lol ))
2017 год: Установите Sublime text, он самый лучше и лучше нет
2019 год: Нафиг Sublime , установите лучше VS Code.
Я смотрю это 2020 году и столько редакторов кодов поменял)))
а я на sublime text начал печатать. но ошибку в коде на нем не нашел. пришлось notepad++ заходить - там сразу две ошибки нанес
Vs code как по мне лучше всех
Почему значение background в свойстве transition выделяется красным цветом в VS Code?
.menu li a {
transition: background 0.2s linear;
}
transition не работает
.menu li{
display: flex;
align-self: center;
width: 95%;
opacity: 0;
visibility: hidden;
}
тут проподают элементы li то есть их н евидно совсем а если убрать opacity i visibility То каша происходит обьясните ктонить плс
я убрал opacity: 0;
всё норм
Зачёт. Но сыроватенько конечно. Я лично вообще прорабатываю стили каждой секции по всем пяти бутстраповским брейкпоинтам. Поэтому overflow-x: hidden для body в топку )) Но и денег за этот гимор естественно прошу больше )
А теперь представьте что при этом записываете курс и объясняете каждый момент. Сколько времени уйдёт?)
видео крутое, но проверку на валидацию не проходит, ругается на вложенность ul в label
Спасибо за контент!
Добрый день. Не сработало после: justify-content: space-around. Где искать ошибку? Возможно в html (когда прописывала CSS) ошибка? где еще?
Что то не работает checked , если бы еще исходник заливал на гит вообще круто было, все равно автору респект
Прикол.. 🤣
НЕ знал, что с помощью чекбокса можно сделать адаптивное меню, ору в голос! ☺️
😇😇😇
@@SuprunAlexey подскажи, пожалуйста, а как это меню поведёт себя когда я выберу какую то ссылку из этого меню?
курс для тех кто учит верстку пол года. Просто здравствуйте - это я. Наверно самый тупой человек 😄
Cпасибо большое! отличный контент. При ширине экрана больше 756px но меньше 1100px строчки некрасиво запрыгивают одна на другую. Покажи, пожалуйста, в следующих видео как это исправить
Надо добавлять медиа запросы и редактировать каждый размер экрана либо менять саму концепцию дизайна
А ещё лучше правильно использовать flexbox)
Не работает псевдокласс hover. Код несколько раз перепроверял, при наведении мыши ничего не происходит. Что делать?
Код:
.menu li a:hover {
background-color: #ffcc01;
border-radius: 3px;
}
Вместо background-color: просто background
У меня похожее было, только все правильно. Потом перезагрузил сам редактор кода и все заработало...
Запили нормальный проект как делать верстку бутстрапом и редактировать под себя чтоб знать какие свойства менять
У меня уже много проектов на бутстрапе, открой плейлисты
@@atexcrewmedia а гриды че, уже поддерживаются везде?
Спасибо за такой контент, но не могу понять в чем ошибка при ширене nav 1100px текст некрасиво заезжает друг на друга. Когда убераешь у li padding то все нормально, хотя, у вас у li padding присутствует не подскажите в чем проблема?
Такая же штука! Подскажите куда смотреть!
@@mikegookno8192 почитай Гранда Кита. css in depth и книгу Бена Фраена про респонсив. и такие вопросы отподут сами по себе
@@matsumbra4984 спасибо!
круто, спасибо за такой крутой контент)
Рад, все для вас
Спасибо за видео.
И вам спасибо
Круто, но медленнее бы, и по больше пояснений
не отображается мобильная версия сайта. проблема в хроме или в css я не могу ошибку найти
images.vfl.ru/ii/1576234728/11e292e1/28895813.png
а все остальные должны догадываться что у вас в коде написано? обычно когда просят помощь с кодом прикрепляют кусок кода!
@@vitalysementsov3157 +
Отличный урок , когда продолжение?
После добавления свойств visibility: hidden; и
opacity: 0; у меня не видно вообще контента внутри меню после нажатия на бургер. Что может быть не так?
.menu li{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
width: 95%;
visibility: hidden;
opacity: 0;
}
До этого куска кода все работало как у автора.
Может ответит хтось, а?
А где адаптивность меню, когда у него марджин лого и контактов в пикселях а не в процентах? неужели нельзя было посчитать соотношение отступа в пикселях относительно ширины заготовки? Представляю как на 4к а тем более 8к мониторе эти отступы будут меньше чем отступы между ссылками меню, и меню разнесет на весь экран.
То что надо ✌️
Подскажите пожалуйста, для чего в данном случае нужно overflow-x: hidden ? То, что содержимое, выходящее за пределы блока элемента, будет скрыто - это понятно. Что это дает? hidden же просто обрезает содержимое?
ну так ты сам ответил на свой вопрос, убери и поймешь зачем
@@SuprunAlexey да, попробовала)) картинка начинает повторяться без этой штуки, спасибо за ответ и отличные уроки)
Неожиданно
Нежданно негаданно 😄
если задаёте вопрос по коду, будьте любезны скидывать кусок кода, вообще в сообществе, при вопросе у меня не работает бэкграунд, вас пошлют куда подальше и заблочат на ресурсе ну либо уволят если вы джут(хотя тут я может перегибаю) всегда скидывайте кусок проблемного кода, часто ваши "я всё написал правильно" означает что вы где-то ошиблись, может ; забыли поставить в конце строки, может слово не правильно написали, это не так бросается в глаза, особенно когда код писал ты сам
Супер
Спасибо 🙏🏻
Урок классный. Для новичков самое то. На рас называется "Профессиональная верстка", то надо хоть немного показывать из этой области. Пиксели? Почему пиксели а не em? Ховер на мобилке? Серьезно? Ховеры на мобилке наоборот убирать надо
Ага, сделаем
Давай серию уроков "профессиональная верстка сайта для продолжающих"
Зачем продолжающим серия уроков? Им работы должно хватать
@@SuprunAlexey Да я в шутку) у тебя отличный контент
Нормально ли то, что я как бы понимаю что происходит на видео, но сам это сделать вряд-ли бы смог?
*Вполне, всё приходит с опытом))*
Здравствуйте, скажите пожалуйста можно ли создать меню(выподающее) с помощью только CSS GRID,и если у вас есть такой урок подскажите где смотреть,а если нет то можете записать, зарание благодарю.
Сравните код, где то ошиблись
почему то меню не стало вертикальным и иконка не появилась :((
была такая же проблемма, у меня она заключалась в неправильнов прописании стилей
всегда так
@@anonuser1366 а можно по подробней? У меня та же проблема
@@ZepDITRIH друг, я уже и не помню, переправерь бробелы в стилях, как ромню у меня какая то такая тупость была)))
А насколько этот курс близок к реальному миру? Или что ещё посмотреть чтобы сделать действительно профессионально? подскажите пожалуйста.
у меня transition : background не видит красным подсвечивает.
не работает @media на Brackets , знает кто как исправить?
та же фигня
Привет! А можно ли это меню сделать не с верху вниз а с лево на право? Если да то как? Подскажите пож)
это будет плохо работать на мобильных устройствах
Здравствуйте, очень познавательные видео, даже для начинающих, многому чего научился, благодаря вашему каналу.
Есть один вопрос, не могу кнопку меню адаптировать по центру, подскажите как сделать.
Сравните код, где то ошиблись
Что делать, если у меня }
#checkbox-menu,
.toggle{
display: none;
} чекбокс после этой команды не пропал ???
Сравните код, где то ошиблись
спасибо=)
Выкладывай исходники в открытый доступ. Будет удобней для восприятия
Нет, этого не будет, тогда ролики не будут просматриваться и смысла делать их не будет, все таки хочется что б были просмотры.
@@SuprunAlexey Верно. И тебе плюс и ученикам. Нужно писать самому ручками. Иначе ничего не запомнится.
не вижу никакую профессиональную верстку, очень много строк кода не имеет смысла, а увидив margin-right я знатно охуел, вы используете *флексбоксы*. Алооооооооооооо. Убеждаюсь что Зоракс действительно гений
Добрый день! Автор, подскажите, пожалуйста, в чем может быть дело: в VS Code меню открывается: Свойство checked реагирует на лейбл; а в codesandbox нет. Я никак не могу понять.почему.
.toggle:hover {
background: #d3a900;
}
#checkbox-menu:checked + label .touch {
opacity: 1;
visibility: visible;
transition: all 0.7s linear;
}
#checkbox-menu:checked + label .touch {
height: 350px;
}
Если я запускаю в хром ничего не получается. Когда запускаю в internet explorer то почти все получается. В чём проблема?
❤
не получилось не отображается подобное вертикальное меню как было изначальное горизонтальное меню та и осталось не смотря на всю последующую стилизацию
Здравствуйте! Почему когда я классу .toggle ставлю width:100, он определяет его размеры как 1100х40? для айфона Х
Сравните код, где то ошиблись
thx!!
Поступаю следующим образом:
Смотрю ролик, после уже верстаю.
Просто когда пишу код следом за вами, у меня теряется концентрация и страдает понимание что и для чего именно. )
А так вначале посмотрел и уже поняв всю суть отверстываю.
Скажите, пожалуйста, а как сделать, чтобы при наведении окрашивание оранжевым фоном ссылок происходило по размерам вплотную друг к другу. То есть оранжевые прямоугольники располагались вплотную друг ко другу без пробелов ? Ну и ссылки были посреди этих прямоугольников соответственно.
Я ставил padding: 10px 49px; но это подгонка вручную и всё равно остаётся полоска белая узкая между прямоугольниками. А как, чтобы не вручную и полоски (пробела) не было ?
codepen.io/volshebnik477/pen/RwajqdY
Хьюстон ви хэ а праблэм. Никак не могу понять
#checkbox-menu:checked + label .touch{
height: 350px;
}
.menu{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0px;
transition: height .3 linear;
}
.menu li{
display: flex;
align-self: center;
width: 95%;
opacity: 0;
}
.menu li a{
width: 95%;
align-content: center;
text-align: center;
}
Вот как только в селекторе .menu li a добавляю параметр width то перестает реагировать кнопка вывода меню, а если убрать weight, то не центруются пункты li
Проверьте код в index.html. У самого проблема была вместо checkbox-menu в index.html было написано:chAckbox-menu
@@WeallHWT ++++
PSD макет из видео - drive.google.com/file/d/1DuDfvQeWJKqqST_LgIFbYqh_IdYXN30c/view?usp=sharing
Интересный подход к реализации, но получается, что цвет кнопки меняется когда "ставится галочка", так вот она постоянно включена остается и цвет всегда зажатый, это как то решается? иначе подход не годен для качественной верстке
вместо :hover поставьте :active
Здравствуйте. Подскажите пожалуйста, а как же библиотеки типо бутстрап, актуально в 2020?
Какая разница между бутстрап и вашей версткой?
Буду признателен за ответ, спасибо.
Сравните код, где то ошиблись
Здравствуйте !
Скажите, пожалуйста, как вы одним нажатием сделали 7 копий строки ? (li>luxestate)
Плагин эммет, почитайте про него
@@SuprunAlexey Ясно. Спасибо !
Лайк лайк лайк
А где можно скачать сам макет в PSD? Заранее благодарю
с каких пор с помощью тега li далают логотип?
логотип делают из ссылки внутри li. Так как лого здесь часть меню то логично что он будет в ul
@@Varchar13 а логично, что на телефоне при закрытом меню лого не видно вообще?
написал все в точности как у тебя но почему ничего не изменяется, использую мозиллу, about agents, все это у меня стоит в центре а также не могу добавить кнопку toggle
Перерешите код в точности
До "профессиональной" верстки тут конечно очень далеко. Стоило назвать серию видео "верстка для начинающих" и не вводить зрителей в заблуждение :)
Небольшое привлечение внимания, куда ж без этого
в чем же проявляется профессионализм верстки?
@@YoungDR Проявляется, как минимум, в том, что следуют стайлгайдам, используют методологии. В отношении простого лендинга, как в видео это не столь важно. Но при работе в команде над проектами посерьезнее, такой код будет уже неприемлем. Всяко автор этого канала молодец, занимается хорошим делом, а я просто докопался до заголовка ролика)
Web Developer Blog, пожалуйста, оставьте сайт, где можно взять макет.
Можете объяснить зачем + в CSS?
И почему в двух последних свойствах мы делаем margin-right:0 ?
+ выбирает первый label с классом touch следующий за элементом с id #checkbox-menu
margin-right:0 обнуляет отступ заданный выше в версии для большого экрана.
Здравствуйте, подскажите пожалуйста по поводу момента
#checkbox-menu: checked + label .touch li{
opacity: 1;
visibility: visible;
transition: all .7s linear
}
#checkbox-menu: checked + label .touch{
height: 350px;
}
И пробелы менял, ничего не помогает, кто может объясните пожалуйста, сколько раз не пересмотрел одно и тоже...
отличный вопрос, но в чем проблема?
; не забывайте ставить!!!!
#checkbox-menu:checked + label .touch li{
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox-menu:checked + label .touch{
height: 350px;
}
Привет. Checkbox ради проверки состояния checked???
Логично
Где скачать код с данного урока?
Пишите, практикуйтесь, в этом суть этих уроков!
Подскажите, пожалуйста, в чем может быть у меня ошибка: меню не выпадает при нажатии на ☰ ?
В общем на видео в html в тэге
Добрый день! а как сделать сайт адаптивным, под все мобильные устройства, на bootstrap?
Посмотрите у меня на канале есть плейлисты по верстке на бутстрапе
Сделал все точно так же как на видео, после чего проверил код от начала до конца 3 раза, но все равно иконка меню при изменении масштаба появляется на долю секунды и пропадает, после чего вообще не появляется.
Баг какой то, у меня такого нет
Я код написал правильно, проверил даже но сайт на котором я его проверял отображает страницу правильно, а когда я запускаю сайт то все расположено не по центру, слева, крч разбросано всё, заранее спасибо за ответ
У меня также
Та в css если вместо min-width: 1100px поставить max-width: 1100px, то получается как на видео. может при монтаже была ошибка, непонятно...
Здравствуйте! Спасибо большое за видео.
Почему css а не scss(sass) , они вроде современней?
Новичкам так лучше