Create Header HTML

Create a Website Header Design In HTML and CSS Code

Create a Website Header Design In HTML and CSS

Hello Coder, Welcome to the Codewithrandom blog. In today’s article we learn How to create a Website Header Design using Html and Css Code.

In this Header project, we learn topics like how to make a header design and create a responsive header, and also learn how to add a Google font to our website or in a project. and many more things about Header.

50+ HTML, CSS and JavaScript Projects With Source Code

Website Header Design In HTML and CSS Code
Website Header Design In HTML and CSS Code

Live Preview Of Website Header Design:-

Code byTushar Sharma
Project DownloadLink available below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYES
Header Table

Header Design In Html:-

<!DOCTYPE htaml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Simple Header - CodeWith Random</title>
    </head>
    <body>
        <header class="site-header">
            <div class="site-identity">
                <h1><a href="#">CodeWith Random</a></h1>
            </div>
            <nav class="site-navigation">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

First, we’re going to write html code and then styling so we use some tags in body tags like div, h1, ul. li, a, h1 and don’t forget to link css file in html boilerplate after it we get a poor design but that’s a mandatory start I hope that’s clear… let’s start the styling…

Create Portfolio Website Using HTML and CSS (Source Code)

Html Code Output:-

 
Website Header Design In HTML and CSS Code

Website Header CSS Code:-

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
}
a {
    text-decoration: none;
    color: #000;
}
a:hover {
    color: rgb(179, 179, 179);
}
.site-header {
    border-bottom: 1px solid #ccc;
    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between;
}
.site-identity h1 {
    font-size: 1.5em;
    margin: 0.6em 0;
    display: inline-block;
}
.site-navigation ul,
.site-navigation li {
    margin: 0;
    padding: 0;
}
.site-navigation li {
    display: inline-block;
    margin: 1.4em 1em 1em 1em;
}

this is all css for creating the header project and designing Header.

Create Portfolio Website Using HTML and CSS (Source Code)

Let’s start our styling doing starter styling by html reset or family font then we give a color or text-decoration — None in <a> tag now we style our header by giving padding, border-bottom, flex, and space-between changing the font size of the header links or margin and inline-block if you want to customize more so try and our goal is to create a good looking header in just 60 lines of code or also you need to make responsive.

Final Output Of Website Header Design Html and Css Code:-

Website Header Design In HTML and CSS Code
Responsive Website Header In HTML & CSS

 

This is the final output of our header using Html and Css. In this article, we create this amazing header project and you absolutely love its design in less code.

Video Output Of Website Header Design:

[su_button id=”download” url=”https://drive.google.com/drive/folders/11JjaRCKTZr6H0cVGKv7YgXzJaIDOBC8_?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD NOW[/su_button]

Ecommerce Website Using HTML, CSS, and JavaScript (Source Code)

How to use google Fonts?

we have too many pre-installed fonts but they are not sufficient so we use google font for a great look… and we use open sans in this project but we use open sans condensed for learning about google font.

Step 1 -> Search Google Font on Search Engine like Google, Bing, Safari, etc.
Step 2 -> Click on the first link Google Fonts
Step 3 -> When Google Font Site opens then search the font you want to work with in the above search box.
Step 4 -> Then click on the font and a sidebar appears giving the option to add a selected font to your site.
Options -> 1. Link the given cdn link to html file in the head tag
2. Import using URL to stylesheet than code in font-family property
Step 5 -> Select the class or id you want to add font style then save the code.
Output -> Fonts are changed
Hope you like this post and enjoy it. If we did any mistake please comment on it so this help full for also our users. Thank you for reading.

Written by Tushar Sharma
Team Codewith_Random

Which code editor do you use for this Header project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!



This Post Has 2 Comments

  1. Anonymous

    this is super helpful. Thank you

  2. buffalo

    Greɑt article, jᥙst what I was looking for.

Leave a Reply