How to create a header in Html and CSS | Html CSS templates

header in html

In this lesson, we are going to learn how to create a header of the website using HTML, CSS, and JS. In the last lecture, we learned how to create a responsive navigation bar using HTML, CSS, and JS.

What is the header of the website in Html?

If you have visited any website then you must go through the header of the website because it is the first and top part of the website which includes the logo, menu, login, signup, and social media buttons for sharing content or link.

A header is the main part of the website because it helps the visitors to visit the website and understand the type of the website. It contains a navigational bar (logo and menu) which helps the users to connect with other parts of the website or other sections/pages of the website because every section and page has different content and the user wants to visit that portion.

You might like it:

How to create a header for the website?

This header is responsive across all devices (mobile, tab, and PC/laptop). It contains different buttons for linking it with other sections of the website so that users can visit every corner of the website.

How to download the code?

Scroll down to get the source code of this header section. So, here are some designs as well.

Download code of the header of the website:

Name the Html file header.html and CSS file header.css and then paste the given code into these files. Save these files with the extensions. HTML and . CSS because these extensions help the browser to understand the type of the file and execute the code properly.

Source code of HTML:

Source code of CSS file:

Source code of JS file:

In this way, you can create a header of the website in HTML and CSS. If you are facing any type of problem in understanding any property or tag of HTML and CSS then you can click here for learning all the tags and properties of Html and CSS.


We have created a header using Html and CSS languages. This header is connected with a hero section. In the hero section, we have an image of the landing page. Now change this hero section image with a video. Also, add a button below the heading. The button must have round corners and a title as “Read More”.

If you found this article useful then must like it and follow us. Also share it because sharing is caring and comment below if you have any queries.

Thanks for reading this article.

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