How to create a navbar in 5 minutes
Tags: css, flexbox, webdev, html
Published: 2021-12-30 10:55:11

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:

```html
<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>
```

## 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**
```javascript
 body{
            margin: 0;
            padding: 0;
            background-color: rgb(172, 170, 168);
        }
```

**Nav bar**

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

**Ul, li and a**
```javascript
      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);
        }
        
```
**Here's the final code**

```html
<!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>
```

---
I hope you find this tutorial useful. See you on the next article.
Here's the [Source Code](https://github.com/yigitsr/navbar-tutorial) on GitHub
Here's the [YouTube Video](https://www.youtube.com/watch?v=JbU0ItAqJzo) where I code it from scratch.
Check it out on [CodePen] (https://codepen.io/Yisemiramis/pen/bGovmqo)

---
**Follow me on**

- [GitHub](https://github.com/yigitsr)

- [CodePen](https://codepen.io/yigitsr)

- [Twitter](https://twitter.com/ziggywoxx)

- [Twitch](https://www.twitch.tv/lemmy_ace)

- [Instagram](https://www.instagram.com/ziggywoxx/)