Awesome Tut! Thanks for covering multiple options, especially the sticky footer. Also, thanks for mentioning the Js snippet for automatic date updating! That's so handy!!
My pleasure, very glad this was helpful! All the best to your exam 💙 P.S. don't just watch videos, but code along and at some point try to create stuff from scratch on you own!!
I like this approach. I always struggle with footer positioning, so I'm trying this in my current project that I just started. If it all works okay, I'll make this my go-to footer positioning method (:
@@CodingJourney Not a problem mate. I was watching another tutorial about how to solve this issue with the footer, and they showed how to "push" it down to the bottom with content. I thought that was a pretty dodgy and unprofessional way of doing things. Your way is much better!
Thanks mate! Well, I'm doing my small research before each video trying to present the best solutions, according to my opinion of course :) And over time new ways of solving problems come up...for example if I made this video today, I would also probably present a solution using flexbox...things never get boring in web development ;)
Amazing! Glad it helped 🙂 Just watched your home-made hand sanitizer video...I will definitely follow your instructions...don't have an orange though so I will use grapefruit instead, hope it still works 😉😁💙
Heheh 😉🙂 Well I've been programming for a while...very specific I know 😂 Wrote my first line of code about 15 years ago but I've been in and out of programming...into web development the past 3 years or so 🙂
Very glad you liked it 🙂 Nice suggestion, thanks! I currently have many many things lined-up though so I'm quite certain that by the time I will be able to upload such a video you will already be able to create all sorts of layouts!! 😉🙂
Hello! I'm using the DevTools which are build into the browser. To open DevTools in the browser: right click and select inspect (or simply hit F12). You can then select the "Elements" (or "Inspector" tab if you are using Firefox) and by hovering over the specific element you will see the dimensions. All the best, keep coding!! 💙
"Ctrl + /" in order to toggle comment (comment out/uncomment) Other keyboard shortcuts I'm using all the time: "Ctrl+Z" to undo "Ctrl+Y" to redo "Ctrl+C" to copy "Ctrl+X" to cut "Ctrl+V" to paste "Ctrl+F" to open the find dialog "Ctrl+S" to save
Using VH for desktops is good. But on mobile you will run into problems as soon as you scroll down enough to hide the browser's address-bar (page will jump). For that then it's more elegant to use min-height: 100% on body and height:100% on html (not min-height on html)
Heheh! Well I'm open to bullying as well 😁 But it is usually very easy to understand where a comment is coming from! For me it was quite obvious that the purpose of your comment was to contribute in a constructive way!! 🙏😉
@@CodingJourney It actually was. And i won't bully a person i respect. And someone like you who teaches beginners or people who are looking for something specific earns respect
Thank you so much. One of easiest way to keep footer down. But of course not ideal. Because if you change something in footer or header, you need to change and code (numbers) in formula. But anyway it is simplest method for me. Just didn't understood, what giving box-sizing: border-box; ?
Hey, thanks 🙂 By taking the second approach (absolute positioning of footer), you only have to "worry" about footer's height so that you add the corresponding padding (approximately, doesn't have to be exact, just >= than footer's height). We usually do the same thing to push the content below navigation bars! If I created this video today, I would also add a flexbox solution, which doesn't need calculations but requires a certain structure. Nothing is ideal, the point is to make decisions and move forward 😉 box-sizing: border-box; is irrelevant to the main objective of this video! I usually prefer border-box (instead of the default content-box) for box-sizing, because it simplifies calculations when adding borders and padding. Here's a link for more details: developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
For some reason the calc method isn't working. It doesn't make the footer budge even a little. What could possibly be the issue? EDIT: I tried this in a different file following your steps and it worked, then I pasted the code containing my page from my original file and it was still fine, I then removed the min-height property completely and the footer was still at the bottom. I'm happy with the result but I'm wondering what is causing this behavior? Since the original calc values are no longer valid and the property itself has been removed too?
I haven't made a video specifically on z-index so far...a good resource (besides videos) would be w3schools and mdn web docs, so if you google "z-index" the first couple of results will be from these websites! All the best 💙💙
This is the best tutorial concerning this subject. This has work for me, thanks to your style of teaching. One question, I see you don't put # in your css before body, headder, footer etc. Is this because you are using html5 and the others don't ? Thank you very much in advance!
Hey thanks, glad you found this useful 🙂 Regarding your question, nope this has nothing to do with HTML5 (which btw I guess that's what others are using as well since it has already been around for about a decade). This has to do with "CSS selectors" or in other words how we can select HTML elements to style with CSS. "#" is used as an id selector, e.g. to select an element with id="footer", we would use the #footer selector. But in our case we are using the HTML tag, which we can simply select using footer (element selector). For more info you can google/search for "CSS selectors"! All the best, keep coding 😉💙
![The BEST Way to Build a Footer! [HTML,CSS]](http://i.ytimg.com/vi/KUHrMzN7ey8/mqdefault.jpg)
Hands down the best solution for this problem! Thank you for ending my 3 hours of searching endlessly!
Super! You can now proceed to solving the next problem 😉 All the best, keep coding 💙
same here, even more hours :)
Superb man! After watching almost 15 videos I landed here and to be honest it was totally worth it. Brilliant
Oh thank you for the lovely comment!! Very glad you found this useful 🙂
@@CodingJourney You're a genius... Thanks so much for sharing us this video. (Sorry for my bad english)
@@Roberto-ep5qd Oh thanks man! Very glad you like it 🙂 Keep coding!! 😉💙
The first option works perfectly with long single page sites in all responsive breakpoints. Thank you so much!
Great tutorial, one of the best and most straight to the point I have seen.
🙏💙💙
I'm searching for this kind of video to resolve my problem with footer not sticking at the bottom for almost 3h, thanks man, you're great!!!
Oh thank you for the lovely message 🙏🙂 Very glad it helped! 💙
Seriously bruh, thanks best Tutorial ever, thanks for ending my 4 hour long search , God bless, you have my subscribe and like for sure 😁
Thanks mate! Huge love, keep coding! 🙂💙
Awesome Tut! Thanks for covering multiple options, especially the sticky footer. Also, thanks for mentioning the Js snippet for automatic date updating! That's so handy!!
Amazing! Thank you for the nice words 🙂 Very glad you liked it!!
Thank you! It's wonderful what a few bits of well written CSS can do. Love it.
Totally agree, CSS rocks! 😉
I really learnt something which other front end ytubers haven't mentioned thanks and keep growing;) GL
Very glad to hear that mate! Thanks for the lovely comment 🙂 You too, all the best!!!
Thank you genius! I was trying to place my footer and this was the best solution for my project.
Amazing! Glad this was helpful. All the best, keep coding!! 💙
Incredible how fast and efficiently you can make a good looking web page! btw thx you helped me so much
My pleasure 🙂 Very happy to hear that!! 💙
Footers are really very stubborn to control. Thank you for taking time to make this video. It made my task very easy.
Amazing! My pleasure, very glad it helped 😉💙
thanks -- the padding-bottom on body really helped me.
The solution with the calc it's AMAZING!
Thanks mate! So are you 😉 Keep coding!!
I realize it is pretty randomly asking but does anyone know a good site to stream new series online?
@Braydon Kolton try Flixzone. You can find it by googling :)
thank u 100000x times u got a new loyal subscriber
Heh totally my pleasure 🙂 Welcome aboard!! Keep coding and enjoy the journey 🙂💙💙
Thanks for making the video. Very simple and to the point. I like the aside about the jscript for the year.
Keep the videos coming, it is appreciated.
Oh thank you for the lovely comment 🙂 Very glad you liked it! I will 😉 Take care!!
Wow seriously thank you so much. i couldnt figure out why my footer kept moving around everywhere each time my content size went down.
🙂 My pleasure! Very glad to hear that this helped! All the best, keep coding 😉
Soo helpful! I've been stuck at this the whole day, thank-you!!!!
My pleasure! Very glad it helped 🙂
Honestly. Knowing that it’s a footer it should automatically stay at the bottom without having to use a fixed position 😩
@@JJSfromCHI Heh! Yeap, would be nice if this was the default behavior 🙂
@@JJSfromCHI yup that's unfortunate and annoying 🥴
solution: 6:32
this video is awe, it explain a lot in a clear way, thank you man
Thank you for the lovely comment 🙂 Glad you liked it!!
You are a lifesaver!!!!
thanks from Brazil!
Heh! Amazing, very glad it helped 🙂 My warmest greetings to Brazil!! 🙂
you literally saved me, god bless u
🙏💙💙
Thank you so muchhh 🥺 Day after tommorow I have practical exam and I need to make a website in 45 mins
It was so helpful 👍
My pleasure, very glad this was helpful! All the best to your exam 💙 P.S. don't just watch videos, but code along and at some point try to create stuff from scratch on you own!!
@@CodingJourney yeah I tried in my own code at the same time and the second method worked so I commented... The calc function didn't work..
@@CodingJourney And Thank You So Much💫
Worked very well, thanks God bless u
It saved lots of time for me.
Amazing!! 💙
Amazing approach, thank you!
I like this approach. I always struggle with footer positioning, so I'm trying this in my current project that I just started. If it all works okay, I'll make this my go-to footer positioning method (:
🤞🙂 All the best mate, keep coding!! 😉
Saved me twice. Thank You and have my sub! :D
Heh 😉 Thanks mate, welcome aboard! 💙💙
Thank you so much i was finding this all day
Amazing! Very glad I could help 🙂
@Manju Bhai Mee too
Thanks a lot man! Some information in this one, made all the difference here!
Amazing mate, very glad you liked it!! The "that made all the difference" reminded me one of my favorite poems..."The road not taken" 🙂😉
Thanks a lot for this tutorial, it was easy to follow and fun to learn. I like your style. It's relaxed and down to earth.
Oooh thank you for the nice words! Very glad you liked it :)
@@CodingJourney Not a problem mate. I was watching another tutorial about how to solve this issue with the footer, and they showed how to "push" it down to the bottom with content. I thought that was a pretty dodgy and unprofessional way of doing things. Your way is much better!
Thanks mate! Well, I'm doing my small research before each video trying to present the best solutions, according to my opinion of course :) And over time new ways of solving problems come up...for example if I made this video today, I would also probably present a solution using flexbox...things never get boring in web development ;)
@@CodingJourney Absolutely. Things are constantly evolving all the time and that's the fun part about it I think. I'll stay tuned for new videos!
This is the video I'm looking for thank you so much 👍
Amazing, my pleasure 🙂💙
Very simple when you explain , thanks!
Thank you! Very glad it was helpful! 💙🙂
THANK YOU!!
Thaanks bro!
from Costa Rica!♥
My pleasure!! 🙂 Warm greetings to Costa Rica 💙💙
Thank you so much! Very helpful.
Dude thank you so much, this has been very helpful! I really appreciate it!
Amazing! Glad it helped 🙂 Just watched your home-made hand sanitizer video...I will definitely follow your instructions...don't have an orange though so I will use grapefruit instead, hope it still works 😉😁💙
@@CodingJourney oh it will! I forgot to mention it's primarily the citrus that does it 😂 how long you been programming for?
Heheh 😉🙂 Well I've been programming for a while...very specific I know 😂 Wrote my first line of code about 15 years ago but I've been in and out of programming...into web development the past 3 years or so 🙂
@@CodingJourney Thats awesome. Its been interesting to see how far people are along in their journey and where they want to go!
Indeed!! Also, coding community rocks 😁😉💙💙
got exact what Im looking for Awesome
Still the best tutorial on this very annoying thing! thanks.
🙂 Very glad it helped!!
Best explanation so far, thanks so much
Thanks man! Glad you liked it!!
You helped me a lot. Thank you so much!
My pleasure 🙂 Very glad to hear that! Keep coding 😉
Excellent video learned alot thank you!
thanks a lot, man you probably save my job!
Hahah! Googling and searching for solutions is part of the job, so you saved it 😉💙
you are gold man
Thank you man. This helped me.
Super! My pleasure 🙂
Really good video. Very professional
Oh thank you 🙂 Very glad you liked it!
Perfect tutorial, helped out tremendously! Thanks a lot!
Thank you you're a lifesaver!
I'm just a web developer 🙂 But very glad to hear you found this useful!!
very nice job sir !! You have been of great help !!! Thank you !! best wishes to you !!
Ooooh thank you for the nice words 🙏 Very glad it helped! U2, all the best!!
@@CodingJourney Sir I am currently looking for job hopefully I shall get it soon.
@@adityadighe1582 Good luck!! Keep trying and improving your skills and it will happen!
Thank you so much. You are awesome. 🙌
You are 😉 Glad you liked it, my pleasure!!
Made my day easy
Very glad to hear that 🙂 Made my day better 😉💙
Excellent video!! Thank you.
Nice and clear as usual. THANKS!!
I really appreciate, thank you. I'd like that you do a video to explain the position of the articles and sections within the main of the page
Very glad you liked it 🙂 Nice suggestion, thanks! I currently have many many things lined-up though so I'm quite certain that by the time I will be able to upload such a video you will already be able to create all sorts of layouts!! 😉🙂
Great explanation 👌 Thank you for sharing it
Totally my pleasure! Glad you found this useful!! Keep coding 😉💙
@@CodingJourney It really is 👌 🤗 thanks!
Thank You so much you sort out my problem of footer
problem solved after 8 hours thanks
Super! My pleasure 💙
Very cool... Well explained 👍👏.. Look forward to more tips from this channel
bravo bro best and beautiful work
Oh thanks bro, very glad you liked it!! Keep coding 😉
What happens when height of header or footer is dynamic? Can we handle with CSS?
Thank you so much for this video!
My pleasure 🙂 Very glad it was helpful!!
Thanks man!! So useful!
Amazing! Very glad it helped 🙂
This is awesome. Thank you!
Amazing! Very glad you liked it!! 🙂
Sir may ik what tool did u use to see the height of header and footer how can we see that
Hello! I'm using the DevTools which are build into the browser. To open DevTools in the browser: right click and select inspect (or simply hit F12). You can then select the "Elements" (or "Inspector" tab if you are using Firefox) and by hovering over the specific element you will see the dimensions. All the best, keep coding!! 💙
You saved my life, thanks!
Excellent and well explained 👌 - Thanks
Thank you so much man. This helped me so well and was really clear.
Amazing! Very glad you found this useful. Thanks for the lovely comment 🙂
Thanks, Developer great Help.
🙂❤🙏
You are amazing! Thank you!
You are! 😉 Very glad you liked it 🙂
Really well explained ! Thank you for this vid, you saved me on this one ;)
Ooooh very glad to hear that!! 🙂 My pleasure 🙂
how do you disable/enable the content using keyboard? 10:04
"Ctrl + /" in order to toggle comment (comment out/uncomment)
Other keyboard shortcuts I'm using all the time:
"Ctrl+Z" to undo
"Ctrl+Y" to redo
"Ctrl+C" to copy
"Ctrl+X" to cut
"Ctrl+V" to paste
"Ctrl+F" to open the find dialog
"Ctrl+S" to save
Awesome! Thanks!
Coolio!! My pleasure 😊
Great video! Thanks Bro :D
Amazing! Very glad you liked it 🙂💙
Thanks Mate! That really helped me!
Amazing! Very glad it helped 🙂
Great content 👌
Thanks mate 🍻💙
Thanks dude!
Happy to help 🙂💙
Using VH for desktops is good. But on mobile you will run into problems as soon as you scroll down enough to hide the browser's address-bar (page will jump). For that then it's more elegant to use min-height: 100% on body and height:100% on html (not min-height on html)
That's interesting! I will check it out, thanks for you input!! 💙
@@CodingJourney 😁Ah. You understood it right. Already wanted to edit because people may think i want to critic or bully
Heheh! Well I'm open to bullying as well 😁 But it is usually very easy to understand where a comment is coming from! For me it was quite obvious that the purpose of your comment was to contribute in a constructive way!! 🙏😉
@@CodingJourney It actually was. And i won't bully a person i respect. And someone like you who teaches beginners or people who are looking for something specific earns respect
Oh thank you for the nice words!! It's totally my pleasure 🙂 Coding community rocks!! 😉💙
How did you use the div tools to get the exact height
Thank you so much. One of easiest way to keep footer down. But of course not ideal. Because if you change something in footer or header, you need to change and code (numbers) in formula. But anyway it is simplest method for me. Just didn't understood, what giving box-sizing: border-box; ?
Hey, thanks 🙂 By taking the second approach (absolute positioning of footer), you only have to "worry" about footer's height so that you add the corresponding padding (approximately, doesn't have to be exact, just >= than footer's height). We usually do the same thing to push the content below navigation bars! If I created this video today, I would also add a flexbox solution, which doesn't need calculations but requires a certain structure. Nothing is ideal, the point is to make decisions and move forward 😉 box-sizing: border-box; is irrelevant to the main objective of this video! I usually prefer border-box (instead of the default content-box) for box-sizing, because it simplifies calculations when adding borders and padding. Here's a link for more details: developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
@@CodingJourney Thank you so much for your response, I need to learn more about everything
Learning never ends 😉 All the best, keep coding!! 🙂
Thank you. Nice video
My pleasure! Glad you liked it 🙂
For some reason the calc method isn't working. It doesn't make the footer budge even a little. What could possibly be the issue?
EDIT: I tried this in a different file following your steps and it worked, then I pasted the code containing my page from my original file and it was still fine, I then removed the min-height property completely and the footer was still at the bottom. I'm happy with the result but I'm wondering what is causing this behavior? Since the original calc values are no longer valid and the property itself has been removed too?
Can you please make a video on how to use z-index .. and if you have already made one then can you please share the link.. Thank You!!
I haven't made a video specifically on z-index so far...a good resource (besides videos) would be w3schools and mdn web docs, so if you google "z-index" the first couple of results will be from these websites! All the best 💙💙
Thank you so much Sir... appreciated.. :)
My pleasure 🙂 Very glad you liked it!!
Coding Journey Welcome Sir
Thank you so much! This is an amazing Tutor for me, and it really helped a lot for my website!!! You deserve a sub from me 😀
Oh thank you! Very glad you found this useful!! Welcome aboard 😉💙
You are amazing
Yes you are!! 😉🙂 Thanks mate 💙
thank you so much man, it works for me
Amazing mate!! Very happy to hear that 🙂
Thanks man!
🙏🙂
Awesome💕💕
how i can do that but with word press ,pleas help me if u can
Thank you so much 👍
My pleasure! Glad you liked it!! 💙
This is the best tutorial concerning this subject. This has work for me, thanks to your style of teaching. One question, I see you don't put # in your css before body, headder, footer etc. Is this because you are using html5 and the others don't ? Thank you very much in advance!
Hey thanks, glad you found this useful 🙂 Regarding your question, nope this has nothing to do with HTML5 (which btw I guess that's what others are using as well since it has already been around for about a decade). This has to do with "CSS selectors" or in other words how we can select HTML elements to style with CSS. "#" is used as an id selector, e.g. to select an element with id="footer", we would use the #footer selector. But in our case we are using the HTML tag, which we can simply select using footer (element selector). For more info you can google/search for "CSS selectors"! All the best, keep coding 😉💙
thank you so much ! This is so helpful !
Amazing! Pleasure is all mine 😊
Thank you very much.
My pleasure! Glad you liked it 🙂
what did he do @ 6:12 ?
Thank you for the nice video. How can we make the header, main and footer responsive?
Helped me alot thanks
Excellent, thanks!
Love you bro
Very Nice !
Thank you!! Very glad you liked it 🙂
hi im new in codings. how can i put footer on every page? is it possible without copy/pasting the footer code? thank you!