Hello, guys welcome to Code With Random blog, today we learn How to create a header using html & css. In this header project, we learn topics like how to make a responsive header, also learn how to add a Google font to our website or in a project. and many more things about Header.

ADVERTISEMENT

ADVERTISEMENT

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

 

Code byTushar SharmaProject DownloadLink available belowLanguage usedHTML and CSSExternal link / DependenciesYesResponsiveYESHeader Table

HTML Structure of Simple Header:-

    
        
        
        
        
    
    
        

            

                
CodeWith Random
            
            
        
    

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…

ADVERTISEMENT

50+ Frontend Project source Code

ADVERTISEMENT

Output Html Code header

 

Weather App Using Javascript Code

Styling of Simple Header:-

@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.

ADVERTISEMENT

Let’s start our styling doing starter styling by html reset or family-font then we give a color or text-decoration — None in tag now we style our header by giving padding, border-bottom, flex, and space-between change the font size of 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.

Output CSS Code header

 

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

ADVERTISEMENT

Video Output:

https://www.codewithrandom.com/wp-content/uploads/2022/08/Untitled-5.mp4

DOWNLOAD NOW

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

ADVERTISEMENT

How to use google font?

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

>7<    0     1<3    3    4    5     6<3    8    9    5