I really enjoyed all the "why"! I generally do like slightly shorter videos, but you explain in such a succinct and amicable way that I don't mind watching a longer video from you at all.
Thank you a lot for the tutorial! I was struggeling with the footer for over a month now, your tutorial helped me to solve the just one day. Thanks a lot for that!!!
This was a spectacular explanation on how to build a footer. I was having much difficulty going about this on my own. Now I have it completed. And no, you are NOT long-winded. I like to know why I am doing certain steps, that way I can more easily go about doing it on my own the next time I have to do it. Thank you so much!
Above is the Header.. logo, site nav, etc. The Footer has been down since ancient times, which even in a smaller devices resposible is in a horizontal state. So from the Paleolithic until today - Header up / footer down.
Thank you for your tutorials, Marc. Just thought I’d mention that I appreciate the ‘Why’ of doing things just as much as the ‘How’, probably even more so. With that said, I appreciate the longer videos, but I’ve learnt much from the short ones, too. Please keep up the great work! I’ll revisit your channel as soon as I can... Cheers!
Thank you so much for this tutorial and the header tutorial I have learned so much PLEASE! PLEASE! PLEASE! make more videos of these types of tutorials
I love making these videos and reading comments like this. I get super overwhelmed with work and side hustles so sometimes it's hard to be consistent. I'll try harder!
Hello Marc, I am wondering where the download link for this code is, I find it easier to read the code and alter it rather than listening and copying it. Great Video
Thank you so much for the tutorial! I cant get the mini logos of facebook, instagram and twitter to show up though. I did exactly what you did, but they just dont come up for me
hi, tried this footer which looks great, but for some reason, each column it's not displayed to a side but underneath each other. what am I doing wrong?
Hi Adina, this can happen if one of two things are two. Either you forgot to add float: left; to the column class. Or, the column width exceeds that of the parent container.
Normally the content within your page will push the footer down offscreen. But if this isn't the case, you can add position: absolute; bottom: 0; to your .footer element in your CSS!
THANKS FOR YOUR TUTORIALS. Really helped me alot. Did check on other videos in your channel and they're just as good as this one.👍🏽 Did subscribe, looking forth for more tutorials 🙏🏽
Hi, Marc. Thanks for this detailed tutorial. Do you use any of the CSS resets, or do you always roll your own as it were? Right now, as someone who's learning web dev on my own, I'm partial to Normalize.
Hey man, I don't use any includes to reset CSS but I do use the same pre-defined rules at the top of every page stylesheet. *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } This seems to do the trick for 99% of the annoying/intrusive pre-defined properties. Hope this helped!
Maybe try to Inspect Element them and find out where they are! Maybe the widths of your columns are too wide and they slipped underneath? Maybe they went on vacation, who knows?
Make a div above the footer and set the width to 100vw and the min-height to calc(100vh - (whatever the height of your footer is) and it'll stick to the bottom of the page unless the content inside the div overflows.
Have you checked your code when using a WYSIWYG-editor? Inline-styling, non-logical class names, endless nesting of elements, basically just a mess. This is not good for your SEO. If you made your website using a WYSIWYG-editor then please check out your code and you'll see what I mean. Other than that, it will do the trick.
![The BEST Way to Build a Header! [HTML,CSS]](/img/n.gif)
I really enjoyed all the "why"! I generally do like slightly shorter videos, but you explain in such a succinct and amicable way that I don't mind watching a longer video from you at all.
I really appreciate the feedback! Much appreciated!
Thank you a lot for the tutorial! I was struggeling with the footer for over a month now, your tutorial helped me to solve the just one day. Thanks a lot for that!!!
two questions:
1. Why don't you use the tag for the footer?
2. How can you put the footer at the bottom of the page?
Thanks
1. Old habits
2. Add position: absolute; bottom: 0; to your footer class.
Hope this helped!
@@marchinton Awsome, thank you for the reply
This was a spectacular explanation on how to build a footer. I was having much difficulty going about this on my own. Now I have it completed. And no, you are NOT long-winded. I like to know why I am doing certain steps, that way I can more easily go about doing it on my own the next time I have to do it. Thank you so much!
DOWNLOAD LINK:
[UPLOADING SOON]
3 years later
DOWNLOAD LINK:
[UPLOADING SOON]
ikr
I was struggling with footers and boxing elements. this has helped
We are so glad your back!
Above is the Header.. logo, site nav, etc.
The Footer has been down since ancient times, which even in a smaller devices resposible is in a horizontal state. So from the Paleolithic until today - Header up / footer down.
Thanks bro! This really helped me to make my footer. I was on my first project and I was unable to make it. But now it's complete. Thanks again!
Thank you for your tutorials, Marc. Just thought I’d mention that I appreciate the ‘Why’ of doing things just as much as the ‘How’, probably even more so. With that said, I appreciate the longer videos, but I’ve learnt much from the short ones, too. Please keep up the great work! I’ll revisit your channel as soon as I can... Cheers!
Thank you for your feedback! Much appreciated. I think i'll keep mixing it up a little and check the feedback that I get accordingly!
hey marc, this is so cool and simple to do! this helped me during my deadline ;) subscribed!
Glad I could help Kirana!
dude, you're awesome! spectacular tutorial!
THANKS FOR YOUR TUTORIALS.
Really helped me alot.
👍🏽
You are welcome!
whenever i add the image it pushes all the text down and isnt centered
Hey man, can you make a similar video but for sections if possible?
I really appreciate what you are doing, so I hope you keep doing more!
Thank you
Noted! Let me see what I can do.
dude.... we waiting for the download link
its been nearly a year..
Thank you so much for this tutorial and the header tutorial I have learned so much PLEASE! PLEASE! PLEASE! make more videos of these types of tutorials
I love making these videos and reading comments like this. I get super overwhelmed with work and side hustles so sometimes it's hard to be consistent. I'll try harder!
@@marchinton how about that DOWNLOAD LINK:
[UPLOADING SOON]
Him teachin U to make footer, not a Header (like that say-head is above - Up
Amazing, subbed!
i used position and bootom in .footer element and it did go down but if there is a content it wont stick in the bottom of the page help!
thanks for the vids dude, Ive been working on my final assignment for a basic web design class and this helped a lot!
Great to hear! Good luck!
im having a problem.. the text is on the right of the logo but its all going down, not on side of each other. can someone help me out?
Good job man. I think the why is important, as it drives down the reason of how to get it done.
Hello Marc, I am wondering where the download link for this code is, I find it easier to read the code and alter it rather than listening and copying it. Great Video
Thank you so much for the tutorial! I cant get the mini logos of facebook, instagram and twitter to show up though. I did exactly what you did, but they just dont come up for me
hi, tried this footer which looks great, but for some reason, each column it's not displayed to a side but underneath each other. what am I doing wrong?
Hi Adina, this can happen if one of two things are two. Either you forgot to add float: left; to the column class. Or, the column width exceeds that of the parent container.
please put the code
hey man, great tutorial. how do you stick it to the bottom of the page?
Normally the content within your page will push the footer down offscreen. But if this isn't the case, you can add position: absolute; bottom: 0; to your .footer element in your CSS!
@@marchinton Boss! cheers !!
@@marchinton NO NO U can make footer to stay at botom of page (not stick) main content not push footer when is right position it
@@marchinton footer{
position:absolute;
height:auto;
left: 0;
bottom: .0em;
width: 100%;
font-family: "xxxxxxxxx";
thank u your tutorial helped me to solve the just one day. Thanks a lot for that!!!
Glad it helped!
my image isnt filling up the whole footer, why is that so?
THANKS FOR YOUR TUTORIALS.
Really helped me alot.
Did check on other videos in your channel and they're just as good as this one.👍🏽
Did subscribe, looking forth for more tutorials 🙏🏽
Thank you Mum's Son! Your mum is proud of u
Does this method keep the items aligned properly when you zoom into the page and zoom out?
Yep! Using percentage-widths will make the footer dynamic and responsive to scaling (to a certain point) and page zoom in/out.
WHERE IS DOWNLOAD LINK DUDE :((((
Sir I have tried in footer.php but it not working
excellent bro good work keep it up!! thank you very much bro.......
Thanks and welcome!
my text shows under the black bar
Thank you for making this video
Hi, Marc. Thanks for this detailed tutorial.
Do you use any of the CSS resets, or do you always roll your own as it were?
Right now, as someone who's learning web dev on my own, I'm partial to Normalize.
Hey man,
I don't use any includes to reset CSS but I do use the same pre-defined rules at the top of every page stylesheet.
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
This seems to do the trick for 99% of the annoying/intrusive pre-defined properties.
Hope this helped!
When I add an extra column, it goes underneath the first one rather than to the right? Can anyone help??
I need help with that too
Download link ?
Welcome back!
Thank you for sticking around Ashton!
can we get the link plz
DOWNLOAD LINK:
[UPLOADING SOON]
Where's this then mate
can anyone upload the icon style link please ?
I do something wrong. :((( and i dont know why the icons social media didnt showed
Muito bom bro! Obrigado pelo tutorial.
Can't it be done by flexbox?
It can, but flexbox doesn't yet have universal browser support.
download link.........
why dont you use flex?
Flex doesn't have universal browser support :(
You are the best
I cant see the social media icons huhu
Maybe try to Inspect Element them and find out where they are! Maybe the widths of your columns are too wide and they slipped underneath? Maybe they went on vacation, who knows?
where is source code
Download links my dude
pls help me build footer
good bro
Great Video thank u
how was 21.666% calculated?
Tank you very much :D
Thank you!
You're welcome!
it doesnt work and i followed every step :((
What's happening? How does it not work? Tell me and I'll help!
thankyou!!
Um... the footer is at the top
Make a div above the footer and set the width to 100vw and the min-height to calc(100vh - (whatever the height of your footer is) and it'll stick to the bottom of the page unless the content inside the div overflows.
Good Tutorial but not good for SEO purposes. Although its a good information video.
Thanks! What do you think I can do to improve SEO?
@@marchinton make some videos about DA / PA , Do Follow free links video.😃
WHY USE CODE? there is soo many new software that do not require code to build websites. webflow, wix, duda , squarespace.....
Coding is more fun, you get to use more creativity and get more control over the end result.
Have you checked your code when using a WYSIWYG-editor? Inline-styling, non-logical class names, endless nesting of elements, basically just a mess. This is not good for your SEO. If you made your website using a WYSIWYG-editor then please check out your code and you'll see what I mean. Other than that, it will do the trick.
school