Introduction

Thank you!

End

Navbar Using HTML And CSS For Beginners

Introduction

This article is for absolute beginners in web designing, we'll be creating a basic navbar using HTML and CSS. Checkout our HTML and CSS articles incase you haven't. We'll be using <nav> and <ul> elements to create the basic structure and style it with CSS

Let's get started!

Elements Used : <nav>, <ul>, <li>, <a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- Responsive Meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar tutorial using HMTL and CSS</title>
    <!-- Linking Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet"> 

    <style>
        body {
            /* Font Family */
            font-family: 'IBM Plex Sans', sans-serif;
            /* Reset Default Margin */
            margin : 0;
        }

        nav {
            /* Nav Background Color */
            background-color: rgb(15, 178, 233);
            /* Padding on All sides */
            padding: 20px;
        }

        nav ul li {
            list-style: none;
            display: inline;
            padding: 10px 10px;
        }

        nav a {
            font-weight: bold;
            text-decoration: none;
            color: white;
            padding: 2px 2px;
            border-radius: 4px;
        }
        /* Changing the background-color of 'a' on Mouse Hover */
        nav a:hover {
            background-color: #4dd0e1;
        }

        /* Media Query for Smaller Devices (Maximum Device Width of 480px) */
        /* Any CSS written inside this media query is applied to smaller resolutions only */
        @media screen and (max-width: 480px) {
            nav ul li {
                display: list-item;
                text-align: left;
            }
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <a href="#home"><li>Home</li></a>
            <a href="#about"><li>About</li></a>
            <a href="#page"><li>Page</li></a>
            <a href="#another-page"><li>Another Page</li></a>
        </ul>
    </nav>
</body>
</html>

You can use our text-editor to try this out in your browser, feel free to make changes and experiment to know how things work. We'll soon write an article on animating it and making it mobile-first

 

Thank you!

I hope this article was helpful for you, do share it with your friends.

Tags