Introduction

A website's header is an essential part of its design and functionality. It is the first thing users see when they visit a website, and it is responsible for providing navigation to other pages and even searching for content. In this tutorial, we will discuss how to build a header using HTML, CSS, JavaScript, and React.

HTML Header

In HTML, the header is created using the <header> tag. The header can contain a logo, navigation links, and other information. Here is an example of a basic HTML header: Header.jsx. You can also create a file in the same directory of Header.jsx called style.css. You can then import it in your Header.tsx file. 

import React from 'react'
import "style.css"

const Header = () => {
    return (
        <header>
            <h2>Logo</h2>
            <nav>
              <ul>
                <li><a href="#">Home</li>
                <li><a href="#">About<li>
                <li><a href="#">Contact</li>
              </ul>
            </nav>
        </header>
    )
}

export default Header;

Write out our CSS

After creating the basic structure of the header using HTML, we can style it using CSS. We can do things like display flex, which displays the elements in a horizontal fashion. We can center the content, change the background to blue, and add padding on all 4 sides. We also edit each <li> or list element and we want them to have a space to the right of them by 20px. This will make the links spread out and appear like a header.  The last two things we do are eliminate the right margin on the last child element, and set the link colors to red, no underline, and a size of 18px. Here is an example of some CSS code that can be used to style the header in style.css:


header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  padding: 20px;
}

nav li {
  margin-right: 20px;
}

nav li:last-child {
  margin-right: 0;
}

a {
  color: red;
  text-decoration: none;
  font-size: 18px;
}

Include The Header in your App.jsx

Now all we have to do is import Header into my App.jsx since App.jsx is my main file. 

import React from 'react'

//include Header from './Header' into App.jsx
import Header from './Header'   
  
const App = () => {
    return (
        //Write out Header like this to include it in your App.jsx
        <Header />
    );
}

export default App;

Conclusion

Building a header using HTML, CSS, JavaScript, and React is an essential part of creating a website.

I didn't show you how to access class names and ids because I wanted to keep it simple. If you want to access the whole html element, all you have to do is write the name out in full with open { and close } along with the properties you want the element to have. That is what I did above to keep it simple. By following the steps outlined in this blog post, you can create a functional header and build more complex ones from here. This is a great start.