1. Creating The Folder Structure For Navbar

I have created a folder for myself called Navbar and inside this folder with Visual Studio code which will be my editor in which I will write my HTML and CSS code

Once the folder is open in visual studio code, I will create two files, an Navbar.js and a Navbar.css file.

Navbar.js
Navbar.css

2.Creating The Navbar Structure

We will start by creating the basic structure for our Navbar.

const Navbar ()=>{
return ()
}

Then we will import our navbar.css to the Navbar page.

import "./navbar.css";

Then we will go ahead and add some elements to our body of the Navbar.

 const Navbar = () => {
  return (
    <div className="navbar-wrapper">
      <h1>E-SHOP</h1>
      <div className="link-wrapper">
        <span>
          <AiOutlineSearch className="search-icon" />
        </span>
        <input
          type="search"
          className="navbar-input"
          placeholder="Search for product, brand..."
        />

<a className="/" href="/">
          <span>
            <CgProfile className="profile-icon" />
          </span>

        </a>
        <a className="/" href="/">
          <span>
            <AiOutlineHeart className="heart-wish-icon" />
          </span>

        </a>
        <a className="/" href="/">
          <span>
            <BsBag className="bag-icon" />
          </span>

        </a>
</div>

        </div>

  );
};

From the above image we can see that we have added a <div> element inside our body.

Inside the <div> tag, we have created elements, <h1> which will use as a name logo for our navbar

and secound <div> tag we have created two elements first is input which will use as a searching and secound is anchor tag for link

Inside the div we have an anchor and a few elements inside it defining the pages that we want the user to navigate to using anchor elements.

This is how our HTML looks like in a browser till now.

The next step is to add some CSS styles to these elements that we have created so that our website looks the way we want it to look.

Then we add some more styles to the navbar as below

.navbar-wrapper{
    background-color:  gainsboro;
    flex-basis: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    width: 100%;
    font-size: 2rem; 
  }
  .navbar-wrapper h1 {
    padding: 2rem;
  }

 .navbar-input{
    border: 3px solid black;
border-radius: 5px;
    font-size: 2rem;
 }
 .search-icon{
    font-size: 2rem;
 }
 .link-wrapper{
display: flex;
gap: 4rem;
    font-size: 3rem;
    padding: 2rem;

 }

This gives the color and styles to the nav and header.

The Final Look