DEV Community 👩‍💻👨‍💻

Cover image for How to create a navbar in 5 minutes
Yigit S
Yigit S

Posted on • Updated on

How to create a navbar in 5 minutes

Hi all. In this post, we're creating a navbar in less than 5 minutes.

HTML Code

Inside the <body> tag we create a navbar with the tag <nav>. Under <nav>, we put <ul> and 3 <li> items. Finally, we put our links with # <a href="#about-me> to go to that section on the page. It's something like this:

<nav>
        <ul>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact-me">Contact</a></li>
        </ul>
    </nav>
Enter fullscreen mode Exit fullscreen mode

CSS Code

In the video, I didn't create a style.css file. I wrote all the css code in <style> tag. Here's the css code.
Body

 body{
            margin: 0;
            padding: 0;
            background-color: rgb(172, 170, 168);
        }
Enter fullscreen mode Exit fullscreen mode

Nav bar

      nav {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(28, 29, 37);
        }
Enter fullscreen mode Exit fullscreen mode

Ul, li and a

      ul {
            display: flex;
            list-style-type: none;
            width: 500px;
            justify-content: center;
            font-size: 30px;
        }

        li {
            text-decoration: none;
            margin-right: 11px;
        }

        ul li a{
            color: rgb(232, 231, 233);
            text-decoration: none;
        }

        ul li a:hover{
            text-decoration: underline;
            color: rgb(150, 120, 180);
        }

Enter fullscreen mode Exit fullscreen mode

Here's the final code

<!DOCTYPE html>
<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>Nav Bar</title>

</head>
<body>

    <nav>
        <ul>

            <li><a href="#about-me">About me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact-me">Contact</a></li>
        </ul>
    </nav>


    <style>

        body{
            margin: 0;
            padding: 0;
            background-color: rgb(172, 170, 168);
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(28, 29, 37);
        }

        ul {
            display: flex;
            list-style-type: none;
            width: 500px;
            justify-content: center;
            font-size: 30px;
        }

        li {
            text-decoration: none;
            margin-right: 11px;
        }

        ul li a{
            color: rgb(232, 231, 233);
            text-decoration: none;
        }

        ul li a:hover{
            text-decoration: underline;
            color: rgb(150, 120, 180);
        }

    </style>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen


Follow me on

Top comments (0)

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!