The BEST Way to Build a Footer! [HTML,CSS]
Vložit
- čas přidán 29. 06. 2024
- Instagram:
/ itsmarchinton - @itsmarchinton
In this video, I mention how you should revisit and rethink how you build different elements of a page and work on them to make them as clean, responsive and as efficient as possible.
If you have a better way of building a basic HTML footer then leave a comment on this video or message me on my Facebook page because I'm eager to learn.
DOWNLOAD LINK:
[UPLOADING SOON] - Jak na to + styl
![The BEST Way to Build a Header! [HTML,CSS]](/img/n.gif)
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!!!
I was struggling with footers and boxing elements. this has helped
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!
We are so glad your back!
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!
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.
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
THANKS FOR YOUR TUTORIALS.
Really helped me alot.
👍🏽
You are welcome!
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!
Amazing, subbed!
Thank you for making this video
Marc - I know everything is relative ... but it is coming up to a year since you posted 'DOWNLOAD LINK: [UPLOADING SOON]'. Lol
ye
Good job man. I think the why is important, as it drives down the reason of how to get it done.
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.
Muito bom bro! Obrigado pelo tutorial.
DOWNLOAD LINK:
[UPLOADING SOON]
3 years later
DOWNLOAD LINK:
[UPLOADING SOON]
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
thank u your tutorial helped me to solve the just one day. Thanks a lot for that!!!
Glad it helped!
Welcome back!
Thank you for sticking around Ashton!
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.
excellent bro good work keep it up!! thank you very much bro.......
Thanks and welcome!
Great Video thank u
Tank you very much :D
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!
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
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!
thankyou!!
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
You are the best
Thank you!
You're welcome!
dude.... we waiting for the download link
its been nearly a year..
WHERE IS DOWNLOAD LINK DUDE :((((
good bro
please put the code
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?
whenever i add the image it pushes all the text down and isnt centered
my image isnt filling up the whole footer, why is that so?
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";
can anyone upload the icon style link please ?
can we get the link plz
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.
Sir I have tried in footer.php but it not working
I do something wrong. :((( and i dont know why the icons social media didnt showed
Download link ?
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.
download link.........
my text shows under the black bar
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
All my footer_sections are stacked up on each other and the links are clickable even when the mouse is not hovering over the letters, which I believe may be the problem.
Looks like my css file is not changing the width of my footer sections
Download links my dude
pls help me build footer
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
where is source code
Can't it be done by flexbox?
It can, but flexbox doesn't yet have universal browser support.
DOWNLOAD LINK:
[UPLOADING SOON]
Where's this then mate
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?
why dont you use flex?
Flex doesn't have universal browser support :(
how was 21.666% calculated?
it doesnt work and i followed every step :((
What's happening? How does it not work? Tell me and I'll help!
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