Как прижать футер, сделать липкий хедер и кайфовать от этого =)
Вставка
- Опубліковано 20 січ 2023
- Друзья! В этом видосе я записал как прижать футер к низу страницы, зачем его нужно прижимать в 2023 году. Показал 2 реализации липкого хедера или прижатой шапки как вам удобно) и нюансы реализации такой вечеринки.
Мой курс по верстке - from0to1.com.ua/
Большой гайд по гридам - • CSS GRID Большое руков...
FLEXBOX начало - • FLEXBOX начало. Флексб...
flexbox погружение - • flex-basis, flex-grow,...
Телеграм канал:
t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
"Если Ваш заказчик дед"😂 Лучший король вечеринок, красавчик 👍🏻
Как выпускник курса по верстке хочу сказать, что курс топ! Я в 2020 году летом закончил этот курс, затем сделал портфолио, создал резюме и за недели 2 нашел первую работу верстаком в компании. Курс закладывает очень сильный фундамент html, scss. Проработал верстальщиком примерно год, дальше выучил js и фреймворк Vuejs. На работе это заметили и предложили позицию фронтенд-разработчика, уже примерно год работаю на этой должности, продолжаю развиваться, изучать технологии, работаю на удаленке. Вадим, спасибо тебе большое, ты изменил мою жизнь. Я люблю свою работу за которую хорошо платят. Ребята, кто сомневается - залетайте, это просто лучшее вложение в вашей жизни. Спасибо еще раз!
Благодарю тебя за твой комментарий! Ты сильно мотивируешь!
Привет, сколько платят на удаленке?
@@Alexey_Gri 1500$
@@bammargera5187 в большом городе наверное, Москва
@@Alexey_Gri удаленка же, не имеет значения местонахождение
Ничего нового не узнал, НО подача настолько шикарная, что с удовольствием досмотрел до конца) Спасибо)
спасибо
Спасибо. Уникально и понятно объясняешь, не переставай
Отличный формат! Вдохновляющий лайк, чтоб плейлист пополнялся))
Как всегда порадовала подача материала) Спасибо за видео!
Вадим спасибо за такой ролик. Всегда получаю новую информацию с новых роликов и улучшаю свои знания в верстке.
Полезно всегда . Автор очень классный, продолжай пилить шпоры ) а мы будем поддерживать тебя. Спасибо, мира тебе и твоим родным !
Молодцом Вадим. Спасибо огромное за ролики. Не пропадай на долго !
Класс, спасибо) 👍
Отлично, Вадос ! Продолжай, ждем !😁
Давно этой темы ждал)
О-о-очень нравится подача материала, блуждал по каналам, обучался то там то сям. Здесь задержусь! И послушать успеваю и переварить и покодить и кофейка с автором попить. Вадим молодчина, так держать!
Спасибо за видос!)
Спасибо Вадим. Здоровья Вам и вашей семье.
Спасибо
Спасибо Вадим!
Здоровья и мира тебе и всем добрым людям!
благодарю
Урааа, спасибо новое видео)
Вадим огромное спасибо, благодаря твоему курсу я работаю фронтом. Если есть возможность, сделай бургер у которого глубина навигации больше одного меню, т.е при нажатии на первое открывается второе и т.д.
хорошо, спасибо за идею
Присоединяюсь к пожеланию. Еще хотелось бы увидеть аккордеон с подпунктами.
@@luxarmiger5729 тоже очень жду такое видео, как раз ищу именно такое 😅
@@vovkanastasya6283 Я на днях состряпал такой функционал на js. Вроде все работает, но код не универсальный. Если в последствии придется добавлять пункты и подпункты, то придется лезть в js-код и создавать новые переменные с функциями. А это не правильно.
Короче, меня не удовлетворяет мое творение.
Js учи.
Спасибо за все)
я человек простой вижу ролик Вадима ставлю лайк) спасибо тебе)
Большое спасибо за видео ! Всё четко и понятно ! Лучший учитель !
Благодарю
Спасибо за видео👍👍👍
Спасибо. Как раз вовремя
Радуешь снова и снова, прошел твои курсы и устроился на работу, но всё равно продолжаю поддерживать тебя и радоваться новым выпускам! ❤
Благодарю
Давно проходили курси у Вадіма ?
@@alex_hmeln 2020 14 декабря набор был
Продолжай в том же духе мини-вечеринки)
Мелочи , но очень важные ☝️
Отличный формат! Продолжай еще!
круть
Спасибо за отличную вечеринку.
Спасибо Вадим!!!
Привет, Вадим, благодарю за видос! Всех благ тебе!
спасибо
Супер👍👍👍
Вадос, спасибо за контент)
Имба видос!
2 ГОДА занимаюсь уже и всегда забывал прижимать фютер к низу
Твой видос очень в тему мне
Потому что скоро зайдет по работе проект с вёрсткой 30 страниц
Классный контент, подача пушка. Шутки-прибаутки 100 из 10. Like
Спасибо огромное Вадим, ты изменил мою жизнь.
Благодарю, рад, что поучавствовал)
Огромное СПАСИБО за видос!! Как раз недавно требовалось прижать футер на сайте... Очень пригодилось!
отлично
Просто класс !!!
Я редко ставлю комментарии, но ты так меня побудил , что я не смог себя воздержать!!
Ты крутой , юмор+ обучение =знанияХорошиенастроение 😅
Благодарю
Красава!!
Супер! Повторенье - мать ученья!
круть!
Давай больше подобных видосов!
исчерпывающи, благодарю
с min-height 100% не получилось, обертка почему-то занимала только 797 пикселей, прописал 100vh и все заработало. Огромное вам спасибо за ролики!
Единственный видос, где нормально объяснили sticky footer) Спасибо!
Но ещё один ньюанс, если удалить тег main и оставить только футер и хедер, он не будет прижат, и тогда можно задать для футера margin-top: auto, чтобы он прижался к низу. Может кому-то пригодится)
Жду еще фишки!! Влад, если захочешь, записывай всякие сложные моменты верстки в макете в такие шорт ролики, а то например есть лишь одна сложность в макете , а он сам легкий; было бы круто. Типо налезающих картинок, сплит меню, всяких уменьшающихся окон. Еще раз спасибо🙏
Вадим |||
Спасибо, это полезно. Чтобы не городить свой огород.
спасибо
Годнота
Такие ролики тоже прикольные, делай почаще короткие ролики
Ставлю лайк, ухожу кайфовать )
спасибо Вадос
Здравствуйте Вадим, нравится ваша манера обучения, приятно слушать и учится, хотелось бы увидеть от вас обучающий ролик по теме выноса блоков с элементами( картинка или текст) за приделы ограничивающего контейнера.Спасибо =)
спасибо
Формат Вадима с вечеринками и шутейкаим очень заходят)) Эт прям его фишка) Вадим, хотелось бы какое-то видео про то, как стартануть на фрилансе. Как выделиться на фоне сотен конкурентов на фриланс биржах, чтобы тебя заметили
спасибо
Вот как раз именно сегодня мне нужно было разобраться как прижать футер....
1:30, как раз как у меня ситуация, тоже делаю интернет магазин, так, чисто чтобы набраться знаний на практике, и на нескольких страницах чекнул, окей, ведь контента достаточно, а когда в поиске попытался найти товары, которых мало, сразу же футер стал не на своем месте, а поднялся чуток выше, и таких ньюансов может быть сколько угодно, и проще всего, это прикрепить, чтобы с ним потом не возиться
Бро Спасибо большое За .ХА лучший))))))
Спасибо
Я один заметил игру "Sniper Elite 5"?
Одобряю мне тоже нравится игрушки этой серии)))
да, крутая игруха=)
Ты лучший , кого я видел.
спасибо)
Cпосибо за урок!
Вадим если можно ответь пожалуйста какой у тебя шрифт и тема в VS Code ?
Спасибо тебе) каждый раз с заказом была эта проблема, теперь буду делать по твоей технологии. Можно видео, вёрстка горизонтального меню с мобильной версией бургера? Html, css, javascript, отдельное такое видео.
конечно можно
@@vadymprokopchuk спасибо тебе! Я прям выучу так, чтобы на автомате писать мобильную адаптацию, в любом макете.
Вадим, спасибо за видео 👍 Столкнулся с тем, что в аналогичной ситуации прибивания футера - если явно задаем для html высоту 100%, то не отрабатывает обработчик для window.onscroll. Как вариант - не трогать html тег, а для body задать min-height: 100vh.
так что лучше??% или vh задавать для враппера??
Ставлю лайк- на благо города и всех харьковчан 👍😉
100% топчик !)
Как обычно большое спасибо Вадиму, проводнику в мир фронта, каждый ролик смотрю с удовольствием. Всех благ!
круто, спасибо
Все классно) Але але я вже не знаю скільки я чекаю годний відосік по нормальному інтернет магазину з фільтрами товарів, дн зберігати ці товари можливо верстка та натяжка на ВП, бо всі ці блогери тільки лендоси роблять. Короче бажання побачити від 0 до 1 інтернет магазин. як для ідеї тобі зроби це платним майстер класом. давайте піднімемо цей комент в топ і замутим вечеріночку))
спасибо за кайфарик
Реально кайфанул
жаль этот курс не для всех...)
а будет видео про сборщик Gulp 2023?
Sniper Elite - топ игра!!!)
Липкого прислюнявить это конечно нечто
моя тема
Вадим, привет. Хотел бы спросить, есть ли разница в вёрстке на macOS и Windows или это просто дело привычки?
та особо никакой
А с карты банка РБ можно оплатить ваше обучение? Просто вопрос возник потому, что у вас на сайте написано, что резидентам РФ и РБ не доступен курс.
body{
display:grid;
grid-template-rows:1fr min-content 1fr;
}
Так же намного проще ?
А так,узнал еще один способ,+ фишка с sticky header классная,спасибо за видео )
Да, такой вариант тоже есть. Только чаще хедеру и футеру задают фиксированную высоту, а вот для main указывают выcоту 1fr, и тогда этот блок растягивается по вертикали и прибивает футер книзу. И grid не для body, а для wrapper, как у Вадима.
display:grid;
grid-template-rows: 80px 1fr 120px;
@@user-ey1eq4ch4j а что будет если задать именно Body ? 1fr min-content 1 fr у меня так же работает․
как єто я лайк сразу не поставил. Вадим топ .
спасибо)
🥰🥰
Почему для body не сделать display:flex?
Siriне понимает. но мы ей объясним XD
А почему просто body не сделать display:flex, flex-direction:column и main сделать flex-grow:1 ?
В Webe меня можно на пожизненно садить)
=))
Меня интересует сколько можно будет зарабатывать на фрилансе после курса?
Проще гуглить, чем смотреть рекламу курса
(записывает) у Вадима Сири на слово "уголовка" активируется
Раскидали липких чуваков
🍔🍔🍔🍔🍔
min-height:100% для враппера??многие пишут что в % лучше не задавать высоту?????
Ребят, вот только начинаю изучать верстку сайтов, стоит ли этим вообще начинать заниматься?
Вам решать. Как всякое серьезное дело, сначала оно у вас съест кучу времени жизни, и только потом начнет приносить маленький доход. И совсем не сразу доход будет увеличиваться. Да и учиться надо больше года, один необъятный JS чего стоит, его с наскока не возьмешь, а без него никак не обойдешься.
Зато какое удовольствие от верстки! Это же творчество, это маленькое волшебство в ваших руках: вы реально бог той верстки, которую создаете! Каждый пиксель - под вашим полным контролем. Вы буквально создаете свою маленькую вселенную. Короче, если вы терпеливы и получаете кайф от творчества, и готовы хорошенько потрудиться - этот путь для вас.
первый экран похож на флаг палестины. Не хватает только сайдбара красного
Не скучно...
Чуваки выпустились?) а если они не выпустились, ты их держись в подавале?)
в БЭМ не работает
wrapper {
overflow: hidden;
// Sticky footer
display: flex;
flex-direction: column;
min-height: 100%;
}
.main {
// Sticky footer
flex-grow: 1;
}
.footer {
flex-shrink: 0;
}
html и body также задал мин. высоту 100%.
Футер все равно прижимается к хэдеру
задай html и body не min-height а height. тогда заработает.
В 2020 році закінцив курс Вадім, дуже хотів змінити профессію, після курсу купив файний ноут і відбив його за 3 замовлення на фрілансі. Якщо вам здається шо верстка це шось нереальне, заспокойтесь і ідіть на курс до Вадима, там все просто
Молодцом, дякую
слишком много слов для столь простой задачи, алгоритмы гугла деградируют выдавая в ленте подобные видео
надо сверстать хитрую схему чтоб подписчики рф и рб могли курс проходить. замотался я искать курсы у нас, одни дилетанты, школ наделали, толку никакого
Чел сел снимать не трезвым
Про тренеров и чемпионов это конечно дичь - плохой пример.
Ну не сказал бы если ходил в зал вспомни горбатых людей делающих становую
Ви можете перейти на Українську як це зробив Жека, респект йому, а чому ви ні?
🤣🤣🤣
в текстовом браузере будет работать?
Дякую за якісне навчання.
дякую за лайк і комент