Web Development (Session 08)

Shape Image One

NAVIGATION BAR
AND
WRAP-UP

Introduction

A navigation bar (nav bar) is an essential part of any website, providing easy access to different sections or pages. This section will cover how to create a basic and responsive navigation bar using HTML and CSS. We will also wrap up the content covered in this course and provide additional resources for further learning.

Creating a Navigation Bar

Basic Navigation Bar

A basic navigation bar can be created using an unordered list and styled with CSS.

HTML Structure:

<nav>

    <ul class=”navbar”>

        <li><a href=”#home”>Home</a></li>

        <li><a href=”#about”>About</a></li>

        <li><a href=”#services”>Services</a></li>

        <li><a href=”#contact”>Contact</a></li>

    </ul>

</nav>.

CSS Styling:

.navbar {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}

.navbar li {

    float: left;

}

.navbar li a {

    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

.navbar li a:hover {

    background-color: #111;

}

Responsive Navigation Bar

You can use media queries to create a responsive navigation bar that adapts to different screen sizes.

Additional HTML for Mobile Menu:

<nav>

    <div class=”menu-icon” onclick=”toggleMenu()”>&#9776;</div>

    <ul class=”navbar” id=”navbar”>

        <li><a href=”#home”>Home</a></li>

        <li><a href=”#about”>About</a></li>

        <li><a href=”#services”>Services</a></li>

        <li><a href=”#contact”>Contact</a></li>

    </ul>

</nav>

CSS for Mobile Menu:

.menu-icon {

    display: none;

    float: right;

    font-size: 30px;

    color: white;

    padding: 14px 16px;

    cursor: pointer;

}

@media screen and (max-width: 600px) {

    .navbar li {

        float: none;

        display: none;

    }

    .navbar li a {

        text-align: left;

    }

    .navbar.responsive li {

        display: block;

    }

    .menu-icon {

        display: block;

    }

}

JavaScript to Toggle Menu:

function toggleMenu() {

    var x = document.getElementById(“navbar”);

    if (x.className === “navbar”) {

        x.className += ” responsive”;

    } else {

        x.className = “navbar”;

    }

}

Wrap-Up

Summary of Topics Covered

Throughout this course, we’ve covered several key topics in web development, including:

  1. Introduction to Website and Web Development:
    • Understanding what a website is and the basics of web development.
  2. Using an IDE:
    • How to use an IDE to build websites with basic HTML tags.
  3. HTML Tags:
    • Basic and advanced HTML tags to structure your web pages.
  4. Semantic Markup and Forms:
    • Using semantic HTML elements and creating input forms.
  5. CSS Basics:
    • Syntax and usage of CSS to style your web pages.
  6. Colors, Spacing, Borders, Lists, and Tables:
    • Various CSS properties for enhancing the visual presentation.
  7. Positions and Z-Index:
    • Controlling the layout and stacking order of elements.
  8. Navigation Bar:
    • Creating and styling a navigation bar for easy site navigation.

Additional Resources

To continue learning and improving your web development skills, here are some recommended resources:

Websites:

Courses:

Books:

    • HTML and CSS: Design and Build Websites by Jon Duckett

YouTube Channels:

Conclusion

Web development is a continuously evolving field with new tools and techniques emerging regularly. Keep practicing and exploring new resources to stay updated and enhance your skills.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat