Header and footer design in Html and CSS with code

header footer design

The header and footer both are the main parts of the website and today our main focus is to create header and footer designs in Html and CSS. Last time we discussed how to create a Html login form validation.

The header is the main part of the website and it represents the website and type of the website. It presents at the bottom of the website with some extra information or links.

This header has a logo on the left side. Then it has menu buttons that are available with some links. In the end, it has a dropdown button. After the menu buttons, you can also put a search button or login/signup button.

This footer has a link of three pages. Also declares the ownership of the website using @copyright text in the footer.

So it is very simple to create this type of sticky header and footer. After following these steps you will be able to create this type of header and footer.

You might like it:

First, you have to download an IDE. VS CODE is recommended.

Source code of Html:

First, create an Html file and save it using the .html extension.

Source code of CSS:

We have created a .zip file and in that file, there are both Html and CSS files are present. You have to download it from the below button. Then you will find all the files and then run the main file.


The header and footer are the main components of the website. It helps the users to move across the website and all pages easily. Now add some extra features in the header and footer. Change the color of the header and buttons. In the footer, we don’t have enough information present in it. Add some text in the footer. In the footer, we use to add the information of contact and social media icons. Add all these things to make it awesome. Below the header add a full-length picture and do not apply further properties to it.

If you have any type of problem then must share it with us. We will try to answer your question ASAP. So, try to stay with us for more premium templates. Don’t forget to follow us because we will provide you with the link to newly created content in your inbox.

Thanks for reading this article.


Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x