How to Make a Footer in HTML and CSS for Beginners Tutorial - Fully Responsive

Поделиться
HTML-код
  • Опубликовано: 17 июн 2020
  • Learn how to make a footer in HTML and CSS for beginners tutorial. I will show you how to code your own website footer and make it fully responsive.
    Check out my playlist to see my other tutorials
    • How to Make a Website ...
    Be sure to Like & Subscribe for more coding videos :) / @briandesign
    I designed a website using only one color
    • I Designed A Website U...
    Html and CSS Beginner Tutorial Sign up Form
    • HTML and CSS Tutorial ...
    Udacity Front end Developer Nanodegree
    • Udacity Front End Web ...
    If you want to follow me along my coding journey, feel free to subscribe and leave a comment below so we can connect!

Комментарии • 67

  • @marcosjimenez7833
    @marcosjimenez7833 3 года назад +4

    brooooo I was trying so hard to follow other tutorials to make a mdfk footer then I found yours and it was the easiest thing in the world, tnks!!!

  • @CreativeMCYT
    @CreativeMCYT 3 года назад +2

    OMG, Your Tutors are amazing and they help tremendously! You deserve a sub from me 😀

  • @therealkimwells
    @therealkimwells 3 года назад +4

    Loved this tutorial! For some reason though when I coded it into my visual studio the content doesn’t snap inside the footer container and I’m having trouble with getting the email form to look the way yours does? It’s like it doesn’t want to code it properly for some reason.
    I’m SUPER new to coding (started a week ago) and wanted to say thank you posting all of your tutorials here on RUclips!

  • @marksiely4747
    @marksiely4747 2 года назад +2

    Thank you very much for this excellent video, I have been looking for this. You have the talent of explaining things in a calm an clear style! Have just followed all the steps however it seems that there something is missing, since when I write the email address or click on the the signup button nothing happens at all, Any idea how ton proceed ?

  • @lerouxstephanie6243
    @lerouxstephanie6243 3 года назад +2

    Merci pour la vidéo très bien expliquer!!

  • @TinyMaths
    @TinyMaths 3 года назад +2

    Thanks for the tutorial; had a few issues but eventually got things to work.
    One thing I noticed was that when trying to format the button for submitting the email (I used 'button' instead of 'input'), the formatting was not responding when I used class=, but worked when I changed things to id= . Not sure if I'm missing something here as to what makes the difference between the two. Any suggestions?

  • @DanielSousa-dx3rn
    @DanielSousa-dx3rn 3 года назад

    you saved my life, thanks a lot.

  • @Denniskjellin
    @Denniskjellin 2 года назад

    Very nice video, thank you!!

  • @theshredguitarist25
    @theshredguitarist25 3 года назад

    Great video! subscribed! :D

  • @coffeecodeweb826
    @coffeecodeweb826 2 года назад +1

    awesome tutorial. I learned a lot. for those of you who are asking for the source code.... ummm... Holy Laziness Batman

  • @enidpeterson7760
    @enidpeterson7760 3 года назад

    Than You, you made it easy to follower

  • @kzzazzip6272
    @kzzazzip6272 3 года назад

    bro ur so goated pls keep making these how do u not have 1mil

  • @yaakoveliyatamam1569
    @yaakoveliyatamam1569 2 года назад

    Thank you very much!!

  • @Kevessi
    @Kevessi 3 года назад

    My man. Thank you

  • @geraldwilliams2860
    @geraldwilliams2860 2 года назад

    Nice one really learnt from it

  • @darkbook3583
    @darkbook3583 3 года назад

    excelent playlist! i'm going to be tuned for your next videos!! Saludos

  • @geraldwilliams2860
    @geraldwilliams2860 2 года назад

    You deserve my sub bro

  • @JoaoSouza-oz6hx
    @JoaoSouza-oz6hx 3 года назад

    Thank u so much.

  • @sloshyosmosis341
    @sloshyosmosis341 2 года назад

    Amazing tutorial

  • @martinsleveland7769
    @martinsleveland7769 2 года назад +12

    How do you put the footer at the bottom? Sorry, im really new to vsc...

    • @guzzdoritos4708
      @guzzdoritos4708 Год назад

      old ass content but decided to share just in case other people as clueless as I was a few moments ago stumble onto it -- just add more content, lol. and it will automatically always be at the bottom. no need for css ruling just to put it at the bottom

  • @bogus2774
    @bogus2774 Год назад

    most helpful youtube vid

  • @noice1031
    @noice1031 3 года назад

    I've tried to add more content to the page using this footer and it keeps overlapping anyone know a fix?

  • @synaptique_
    @synaptique_ 2 года назад

    The "" breaks the rest of my site. How can I apply the transformation of my footer depending on screen width without breaking the rest ?

  • @papapf8883
    @papapf8883 3 года назад +4

    Do you have the source code for this?

  • @EzzAldeenDev
    @EzzAldeenDev 3 года назад

    my lovely Teacher ,

  • @kleinesL
    @kleinesL 9 месяцев назад

    thank you very muchg

  • @carldextertorio1639
    @carldextertorio1639 2 года назад

    Tnx for the tutorial. Really helped. Now I'm just wondering why my "Address" and "Newsletter" are hyperlinked when my "Company" and "Social Media" aren't, when all of them are . Please help, how to fix this?

  • @ashleighdeleon7700
    @ashleighdeleon7700 2 года назад

    is ypur bracket colorization an extension
    ?

  • @joepoole7084
    @joepoole7084 3 года назад +1

    How would you go about making the "Sign Up" button for the newsletter part actually post the value entered in by someone to an email to be sent to you, requesting to be added to a mailing list?

    • @kzzazzip6272
      @kzzazzip6272 3 года назад

      im not entirley certain, but i think you might have to do that with javascript.

  • @affiliateme7414
    @affiliateme7414 2 года назад

    Can you put a footer in a container..... they seem like a fixed child element to the body tag

  • @rezvanehhamidinekoo
    @rezvanehhamidinekoo Месяц назад

    what has happened when you set border and outline to the value of none?

  • @wharkkyryhniann8023
    @wharkkyryhniann8023 2 года назад +3

    Not sure if anyone else noticed, but full screen (max-width: 1150px) and mobile-view (max-width: 720px) both work fine.
    However, because I could not tell at the end of the video since Brian kept quickly enlarging and shrinking the window width, I am unable to explain why at the middle viewport (max-width: 820px) why the "Join our newsletter" and its button shift down and no longer line-up with the footer H2s ("About Us", "Contact Us", "Social Media").
    They line up fine in full-screen and are pushed to the bottom and lines up fine in mobile-view, but NOT the middle-view. WHY? Where is the setting that fixes that? Is it the "@media screen and (max-width: 820px) { .footer { padding-top: 2rem; } }; line?
    If anyone knows, or if you, Brain, happen to see this even though the post if from last year, please comment.
    Thanks to all who read this and have input. Much appreciated!

  • @atifahmed9253
    @atifahmed9253 2 года назад

    How do we love the footer to the bottom of the page

  • @DublincityrentalsIe
    @DublincityrentalsIe 3 года назад

    What's the extension that highlights the left of the code in different colours?

    • @briandesign
      @briandesign  3 года назад

      ruclips.net/video/0Ok3fGel4Ok/видео.html check this vid I made of my extensions and see if that works

  • @tuanminh1866
    @tuanminh1866 2 года назад

    Tks you

  • @AmitCodes
    @AmitCodes 3 года назад +2

    source code?

  • @wiilhoogkomando4991
    @wiilhoogkomando4991 Год назад

    Thanks sir

  • @felixnoumi2015
    @felixnoumi2015 2 года назад

    Très brillant

  • @mdridoy9896
    @mdridoy9896 2 года назад

    Nice

  • @coreofnature_
    @coreofnature_ 2 года назад +1

    Where are the codes ?

  • @pratickkafley151
    @pratickkafley151 4 года назад +6

    Can you please provide the code

  • @chidiebereonyebuchi2736
    @chidiebereonyebuchi2736 4 года назад

    Can make a video on how you did the designs on the body of the page? :)

    • @briandesign
      @briandesign  4 года назад

      you mean showing how I came up with the designs? or like actually coding out the designs? because I've already made videos showing how I coded the body sections of the website, so I'm not sure what you mean

    • @chidiebereonyebuchi2736
      @chidiebereonyebuchi2736 4 года назад

      Brian Design
      If you’ve already made the video I’ll just look for it

    • @briandesign
      @briandesign  4 года назад +1

      ruclips.net/p/PLs1fqgQpnCmJ018jq-A3Ra9GrFWcPgOc1 check out this playlist I have and it will show all the videos before the footer

    • @chidiebereonyebuchi2736
      @chidiebereonyebuchi2736 4 года назад

      Brian Design thanks bro 👍

  • @musicforalifetime133
    @musicforalifetime133 3 года назад

    what theme are you using?

    • @briandesign
      @briandesign  3 года назад

      ruclips.net/video/6etaWaiMkvM/видео.html check this vid I made here

  • @wingmanup7368
    @wingmanup7368 3 года назад

    I tried using the same color as you. I typed the numbers in my CSS sheet but it didnt work on my website. This is my syntax background-color: #212329; . Where did i go wrong?

    • @briandesign
      @briandesign  3 года назад

      you mean it just doesn't look the same color as mine? that could just be your screen you're using, or you mistyped something that caused an error and didn't apply the color

    • @wingmanup7368
      @wingmanup7368 3 года назад

      @@briandesign No i mean like when i try to put it in the CSS sheet it doesnt show up on the website. I refreshed and everything. I also noticed it doesnt work with any other colors when i try to use them.

    • @wingmanup7368
      @wingmanup7368 3 года назад

      If you want i can copy and paste my code into the youtube comments.

    • @briandesign
      @briandesign  3 года назад

      @@wingmanup7368 yeah so you most likely have a syntax error somewhere. Did you forget to add a curly bracket somewhere or left off a semi colon?

    • @wingmanup7368
      @wingmanup7368 3 года назад

      @@briandesign I didnt find out what was wrong with the colors not showing up so i did your tutorial again and the colors worked. Thanks for the help and support.

  • @gopalrao5194
    @gopalrao5194 Год назад

    Source Code ?

  • @harjindergreen8139
    @harjindergreen8139 3 года назад

    Could you make a tutorial for how to add a address on the footer as well

    • @drapala97
      @drapala97 3 года назад

      Try tag for that

  • @xz7665
    @xz7665 3 года назад +1

    BRO ATLEAST GIVE US THE SOURCE CODE!!

  • @jessamaecoronas7361
    @jessamaecoronas7361 3 года назад

    how am i inlove with u

  • @user-rb6it6mr5z
    @user-rb6it6mr5z Год назад

    uzi ubwenge bro

  • @darcturus1639
    @darcturus1639 5 месяцев назад

    footer should be at the bottom, not at the top
    you should have shown how to place it at the bottom in the end

  • @valdo4902
    @valdo4902 2 года назад +1

    lol this is not a "footer " you forgot the most important thing , it needs to be at the bottom of the page .........

  • @KhokhonIslam-xj8mg
    @KhokhonIslam-xj8mg Месяц назад

    Xxxx