Designing Beautiful Header Menu using HTML/CSS in Hindi

Website Menu is very common element of any website. In this video I will show how you can design a basic website header with html and css

Published on

Wednesday, Aug 5, 2020

If you recently started designing website or just learnt HTML/CSS from Youtube or online course. You might wanted to learn more about the professional want to design the website. Before I start, let me give a brief about myself. My name is mukesh and I am playing with web technologies since I was in 8th standard(2008). I love making websites and learning new things. I also post awesome videos on youtube if you don’t mind please subscribe to my channel.

Code Used in Video

I know most of you came to this page just to check the CSS code so let’s have it first.

 body,html{
            font-family: 'Roboto', sans-serif;
            padding: 0 ;
            margin: 0 ;
        }
        div{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul{
            padding: 0;
            list-style: none;
        }
        li{
            display: inline-block;
            padding: 10px 22px;
            cursor: pointer;
            margin: auto 8px;
            opacity: 0.5;
            box-shadow: 1px 1px 6px 1px rgba(204, 204, 204, 0.438); 
            border:1px solid #eaeaea;
            border-radius: 20px;
            transition: ease all 0.2s;
        }
        li:hover{
            opacity: 1;
            border-color: #ccc;
        }

Now lets have a look on HTML Code. Please watch the video first to understand how the code is structured :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header Menu</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
    <div>
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Contact</li>
</ul>
    </div>
</body>
</html>

Topics I talked about in video

So I posted one poll on my instagram account where I asked which content my audience would like to watch more and most of the people voted for website tutorials so I have started Let’s Code series where I will be covering small topics in which I will be designing websites and its elements. I hope you guys will love it.

Website Header Menu

Website header menu is one of the most popular and common element of any website. it is the first element you will see in any website whenever you open it.

Inline vs Inline Block

Whenever we wanted to align children of any elements in one row we use either inline or inline-block. What is the main difference you would ask? both are serves the same purpose which is taking the only space they need but in Inline-block, we have more functionality and properties to play with like padding and margin.

Final Words

I hope you find this tutorial and video helpful. If you liked it please make sure to subscribe to my channel also do not forget to share with your friends.

I am highly active on Instagram and TikTok so please make sure to follow me there as well :)