How to Build a Responsive Website Footer Using HTML and CSS

2
925
Website Footer

What is Footer?

Footer is the bottom section of the document. It is located under the main section or body. The <footer> tag defines a footer for a document or section. You can have many <footer> elements in a single document.

Importance of Footer:

Website footer helps the visitors by adding information and navigation option at the bottom of web pages.

A <footer> element typically contains:

▪ Copyright
▪ Privacy Policy
▪ Contact
▪ Address
▪ Phone and Fax numbers
▪ Navigation
▪ Social Icons
▪ Email Signup
▪ Your Mission. Your Values

Sticky footer

Footer can stick on the bottom in the same way that navigation sticks on the top of the page. It’s always there on the bottom of the page, no matter the scroll depth. It is always visible on every page.

In this article, we will be going to build a responsive footer using HTML and CSS. If you are unfamiliar with these languages or want to brushen up your skills then you can take Basic HTML5 & CSS for Beginners online tutorial for FREE!

Difference Between Responsive and Non-Responsive Footer:

This is how Responsive Footer look like:

Image 1

This is how Non-Responsive Footer look like:

Image 2

Let’s get started with Coding!

HTML Code:

Required CSS:

This is what Footer will look like:

1. Large screen

Image 3

2. Medium Screen

Image 4

3. Small Screen

Image 5

Wrapping Up!

So, there you go! This is how you build a responsive footer for a website using HTML and CSS. Hope this helps and if you want to build some cool projects like Sign Up Form, Profile Cards, Slideshow, Hamburger Menu (3D) and others by using HTML, CSS & JavaScript then you can explore the different sections of HTML, CSS, JavaScript Course – Build 6 Creative Projects.

2 COMMENTS

  1. hi
    I really like your footer coding. although I like to use this code for my website, I try to change some line of your code, it would not be looking exactly the same. I am not sure about it because of copyright. Can anyone help or advice?

LEAVE A REPLY

Please enter your comment!
Please enter your name here