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>
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);
}
Nav bar
nav {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(28, 29, 37);
}
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);
}
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>
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)