In this tutorial, we are going to create a website template design using HTML and CSS. We will be using a pure CSS approach, which will make our template very lightweight and fast loading.

The first step is to create the HTML structure for our template. We will need a header, main content area, and a footer. The header will contain the website logo and navigation menu, while the main content area will be where the website content will be displayed. The footer will contain copyright information and other website details.

Here is the HTML code for our template:

Now that we have the HTML structure for our template, we can start adding the CSS styling. We will start by styling the header and navigation menu. The header will be a fixed height and will have a dark background. The navigation menu will be a simple list with a white background and black text.

header {

height: 100px;

background: #333;

}

nav {

list-style: none;

background: #fff;

text-align: center;

}

nav ul {

margin: 0;

padding: 0;

}

nav ul li {

display: inline-block