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()”>☰</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:
- Introduction to Website and Web Development:
- Understanding what a website is and the basics of web development.
- Using an IDE:
- How to use an IDE to build websites with basic HTML tags.
- HTML Tags:
- Basic and advanced HTML tags to structure your web pages.
- Semantic Markup and Forms:
- Using semantic HTML elements and creating input forms.
- CSS Basics:
- Syntax and usage of CSS to style your web pages.
- Colors, Spacing, Borders, Lists, and Tables:
- Various CSS properties for enhancing the visual presentation.
- Positions and Z-Index:
- Controlling the layout and stacking order of elements.
- 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:
- The Complete Web Developer Course 2.0 on Udemy by Rob Percival
- HTML, CSS, and Javascript for Web Developers on Coursera by Johns Hopkins University
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.
