Как прижать футер, сделать липкий хедер и кайфовать от этого =)
HTML-код
- Опубликовано: 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 удаленка же, не имеет значения местонахождение
Спасибо Вадим. Здоровья Вам и вашей семье.
Спасибо
Спасибо. Уникально и понятно объясняешь, не переставай
Спасибо Вадим!
Здоровья и мира тебе и всем добрым людям!
благодарю
Ничего нового не узнал, НО подача настолько шикарная, что с удовольствием досмотрел до конца) Спасибо)
спасибо
Отличный формат! Вдохновляющий лайк, чтоб плейлист пополнялся))
Молодцом Вадим. Спасибо огромное за ролики. Не пропадай на долго !
Класс, спасибо) 👍
Давно этой темы ждал)
Вадим спасибо за такой ролик. Всегда получаю новую информацию с новых роликов и улучшаю свои знания в верстке.
О-о-очень нравится подача материала, блуждал по каналам, обучался то там то сям. Здесь задержусь! И послушать успеваю и переварить и покодить и кофейка с автором попить. Вадим молодчина, так держать!
Продолжай в том же духе мини-вечеринки)
Мелочи , но очень важные ☝️
Спасибо за видос!)
Отлично, Вадос ! Продолжай, ждем !😁
Урааа, спасибо новое видео)
Отличный формат! Продолжай еще!
круть
Привет, Вадим, благодарю за видос! Всех благ тебе!
спасибо
Радуешь снова и снова, прошел твои курсы и устроился на работу, но всё равно продолжаю поддерживать тебя и радоваться новым выпускам! ❤
Благодарю
Давно проходили курси у Вадіма ?
@@alex_hmeln 2020 14 декабря набор был
Большое спасибо за видео ! Всё четко и понятно ! Лучший учитель !
Благодарю
я человек простой вижу ролик Вадима ставлю лайк) спасибо тебе)
Вадим огромное спасибо, благодаря твоему курсу я работаю фронтом. Если есть возможность, сделай бургер у которого глубина навигации больше одного меню, т.е при нажатии на первое открывается второе и т.д.
хорошо, спасибо за идею
Присоединяюсь к пожеланию. Еще хотелось бы увидеть аккордеон с подпунктами.
@@luxarmiger5729 тоже очень жду такое видео, как раз ищу именно такое 😅
@@vovkanastasya6283 Я на днях состряпал такой функционал на js. Вроде все работает, но код не универсальный. Если в последствии придется добавлять пункты и подпункты, то придется лезть в js-код и создавать новые переменные с функциями. А это не правильно.
Короче, меня не удовлетворяет мое творение.
Js учи.
Спасибо за отличную вечеринку.
Спасибо за все)
Спасибо за видео👍👍👍
Вадос, спасибо за контент)
Спасибо огромное Вадим, ты изменил мою жизнь.
Благодарю, рад, что поучавствовал)
Спасибо. Как раз вовремя
Супер👍👍👍
Классный контент, подача пушка. Шутки-прибаутки 100 из 10. Like
Спасибо Вадим!!!
Огромное СПАСИБО за видос!! Как раз недавно требовалось прижать футер на сайте... Очень пригодилось!
отлично
Имба видос!
2 ГОДА занимаюсь уже и всегда забывал прижимать фютер к низу
Твой видос очень в тему мне
Потому что скоро зайдет по работе проект с вёрсткой 30 страниц
Супер! Повторенье - мать ученья!
круть!
Давай больше подобных видосов!
Просто класс !!!
Я редко ставлю комментарии, но ты так меня побудил , что я не смог себя воздержать!!
Ты крутой , юмор+ обучение =знанияХорошиенастроение 😅
Благодарю
Жду еще фишки!! Влад, если захочешь, записывай всякие сложные моменты верстки в макете в такие шорт ролики, а то например есть лишь одна сложность в макете , а он сам легкий; было бы круто. Типо налезающих картинок, сплит меню, всяких уменьшающихся окон. Еще раз спасибо🙏
Вадим |||
Красава!!
Такие ролики тоже прикольные, делай почаще короткие ролики
Здравствуйте Вадим, нравится ваша манера обучения, приятно слушать и учится, хотелось бы увидеть от вас обучающий ролик по теме выноса блоков с элементами( картинка или текст) за приделы ограничивающего контейнера.Спасибо =)
спасибо
Cпосибо за урок!
Вадим если можно ответь пожалуйста какой у тебя шрифт и тема в VS Code ?
Спасибо, это полезно. Чтобы не городить свой огород.
спасибо
Ставлю лайк, ухожу кайфовать )
исчерпывающи, благодарю
Спасибо тебе) каждый раз с заказом была эта проблема, теперь буду делать по твоей технологии. Можно видео, вёрстка горизонтального меню с мобильной версией бургера? Html, css, javascript, отдельное такое видео.
конечно можно
@@vadymprokopchuk спасибо тебе! Я прям выучу так, чтобы на автомате писать мобильную адаптацию, в любом макете.
Формат Вадима с вечеринками и шутейкаим очень заходят)) Эт прям его фишка) Вадим, хотелось бы какое-то видео про то, как стартануть на фрилансе. Как выделиться на фоне сотен конкурентов на фриланс биржах, чтобы тебя заметили
спасибо
Годнота
Ты лучший , кого я видел.
спасибо)
спасибо Вадос
Вот как раз именно сегодня мне нужно было разобраться как прижать футер....
Единственный видос, где нормально объяснили sticky footer) Спасибо!
Но ещё один ньюанс, если удалить тег main и оставить только футер и хедер, он не будет прижат, и тогда можно задать для футера margin-top: auto, чтобы он прижался к низу. Может кому-то пригодится)
с min-height 100% не получилось, обертка почему-то занимала только 797 пикселей, прописал 100vh и все заработало. Огромное вам спасибо за ролики!
1:30, как раз как у меня ситуация, тоже делаю интернет магазин, так, чисто чтобы набраться знаний на практике, и на нескольких страницах чекнул, окей, ведь контента достаточно, а когда в поиске попытался найти товары, которых мало, сразу же футер стал не на своем месте, а поднялся чуток выше, и таких ньюансов может быть сколько угодно, и проще всего, это прикрепить, чтобы с ним потом не возиться
Вадим, спасибо за видео 👍 Столкнулся с тем, что в аналогичной ситуации прибивания футера - если явно задаем для html высоту 100%, то не отрабатывает обработчик для window.onscroll. Как вариант - не трогать html тег, а для body задать min-height: 100vh.
так что лучше??% или vh задавать для враппера??
Я один заметил игру "Sniper Elite 5"?
Одобряю мне тоже нравится игрушки этой серии)))
да, крутая игруха=)
Спасибо
а будет видео про сборщик Gulp 2023?
Ставлю лайк- на благо города и всех харьковчан 👍😉
100% топчик !)
спасибо за кайфарик
Реально кайфанул
Липкого прислюнявить это конечно нечто
моя тема
жаль этот курс не для всех...)
Вадим, привет. Хотел бы спросить, есть ли разница в вёрстке на macOS и Windows или это просто дело привычки?
та особо никакой
Как обычно большое спасибо Вадиму, проводнику в мир фронта, каждый ролик смотрю с удовольствием. Всех благ!
круто, спасибо
Siriне понимает. но мы ей объясним XD
А с карты банка РБ можно оплатить ваше обучение? Просто вопрос возник потому, что у вас на сайте написано, что резидентам РФ и РБ не доступен курс.
Sniper Elite - топ игра!!!)
как єто я лайк сразу не поставил. Вадим топ .
спасибо)
Почему для body не сделать display:flex?
🥰🥰
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, flex-direction:column и main сделать flex-grow:1 ?
Меня интересует сколько можно будет зарабатывать на фрилансе после курса?
В Webe меня можно на пожизненно садить)
=))
Все классно) Але але я вже не знаю скільки я чекаю годний відосік по нормальному інтернет магазину з фільтрами товарів, дн зберігати ці товари можливо верстка та натяжка на ВП, бо всі ці блогери тільки лендоси роблять. Короче бажання побачити від 0 до 1 інтернет магазин. як для ідеї тобі зроби це платним майстер класом. давайте піднімемо цей комент в топ і замутим вечеріночку))
Ребят, вот только начинаю изучать верстку сайтов, стоит ли этим вообще начинать заниматься?
Вам решать. Как всякое серьезное дело, сначала оно у вас съест кучу времени жизни, и только потом начнет приносить маленький доход. И совсем не сразу доход будет увеличиваться. Да и учиться надо больше года, один необъятный JS чего стоит, его с наскока не возьмешь, а без него никак не обойдешься.
Зато какое удовольствие от верстки! Это же творчество, это маленькое волшебство в ваших руках: вы реально бог той верстки, которую создаете! Каждый пиксель - под вашим полным контролем. Вы буквально создаете свою маленькую вселенную. Короче, если вы терпеливы и получаете кайф от творчества, и готовы хорошенько потрудиться - этот путь для вас.
(записывает) у Вадима Сири на слово "уголовка" активируется
min-height:100% для враппера??многие пишут что в % лучше не задавать высоту?????
Проще гуглить, чем смотреть рекламу курса
Раскидали липких чуваков
в БЭМ не работает
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 замовлення на фрілансі. Якщо вам здається шо верстка це шось нереальне, заспокойтесь і ідіть на курс до Вадима, там все просто
Молодцом, дякую
первый экран похож на флаг палестины. Не хватает только сайдбара красного
Чуваки выпустились?) а если они не выпустились, ты их держись в подавале?)
🍔🍔🍔🍔🍔
Не скучно...
надо сверстать хитрую схему чтоб подписчики рф и рб могли курс проходить. замотался я искать курсы у нас, одни дилетанты, школ наделали, толку никакого
слишком много слов для столь простой задачи, алгоритмы гугла деградируют выдавая в ленте подобные видео
Про тренеров и чемпионов это конечно дичь - плохой пример.
Ну не сказал бы если ходил в зал вспомни горбатых людей делающих становую
Чел сел снимать не трезвым
Ви можете перейти на Українську як це зробив Жека, респект йому, а чому ви ні?
🤣🤣🤣
в текстовом браузере будет работать?
Дякую за якісне навчання.
дякую за лайк і комент