How to Make a Navbar in HTML & CSS | For Beginner's

View the video on YouTube

A simple navbar (navigation bar) is a crucial component in web design, providing a menu for users to navigate through different sections or pages of a website. In the context of front-end development for Java developers, a navbar is created using HTML for structure and CSS for styling. It typically consists of links that guide users to important sections like home, about, services, and contact. A well-designed navbar enhances user experience by offering easy access to the website’s content. This article will explore how to create a basic navbar using HTML and CSS, focusing on simplicity and ease of implementation for Java developers looking to build clean, functional front-end designs.

HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">
      <a href="#" class="logo">CodeWaveByte</a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

HTML Explanation:

This HTML code creates a basic structure for a navbar with a logo and navigation links. The <nav> element contains a logo (<a class="logo">) and an unordered list (<ul>) with list items (<li>) that each contains a link (<a href="#">). These links represent the different sections of the website, such as Home, About, Service, and Contact.

CSS code:

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navbar Styling */
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  background-image: linear-gradient(to right, #005c97, #363795);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.navbar ul {
  list-style: none;
  display: flex;
}

.navbar ul li {
  margin-left: 2.5rem;
}

.navbar ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
}

.navbar ul li a:hover {
  color: #ffc107;
}

CSS Explanation:

The CSS styles the navbar to make it visually appealing. A gradient background is applied to the navbar, and the content inside is arranged using flexbox to space the logo and navigation links. The links are styled with white text that changes to yellow when hovered over. A smooth transition effect is applied to the color change for a more interactive feel. The font used is Arial, and the layout is designed to be simple and clean.

You can use this HTML and CSS code with any backend(PHP, JAVA, PYTHON, Node.js, etc).

Here are the simple steps to integrate front-end designs (like your navbar) into a Java project using JSP or Spring Boot:

1. Using JSP (Java Server Pages)

Steps:

Create a Java Web Project:
Use Eclipse or IntelliJ IDEA to create a dynamic web project and set up a server (like Tomcat).
Add HTML & CSS:
- Place your HTML file in the WebContent folder (e.g., navbar.jsp).
- Save your CSS file in the WebContent/css/ folder (e.g., style.css).
Link CSS in HTML:
In your navbar.jsp file, link the CSS file:

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">

Run the Project:
Deploy the project on Tomcat and access it in your browser to see the navbar design.

2. Using Spring Boot