Building a Simple Website Template with HTML and CSS

Building a Simple Website Template with HTML and CSS cover image
  1. Home
  2. HTML
  3. Building a Simple Website Template with HTML and CSS

In this tutorial, we’ll guide you through the process of creating a basic website using HTML and CSS. By the end of this tutorial, you’ll have a functional web page with a clean design.

Step 1: Setting Up the HTML Structure

Start by creating a new HTML file. Open a text editor and paste the following code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Web Template</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Content Goes Here -->


Step 2: Creating the Header Section

Inside the <body> tag, add the header section:

    <h1>Welcome to My Website</h1>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>

We create a header section with a heading and a navigation menu.

Step 3: Adding Main Content

Still inside the <body> tag, add the main content section:

        <h2>About Us</h2>
        <p>Insert your content here.</p>

        <h2>Contact Us</h2>
        <p>Insert your contact information here.</p>

Step 4: Including a Footer

Finally, add a footer section:

    <p>&copy; 2023 Your Website Name</p>

We create a footer section with a copyright notice.

Step 5: Styling with CSS

Create a new file named styles.css and add the provided below CSS code.

/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;

header {
    background-color: #333;
    color: #fff;
    padding: 10px;

nav ul {
    list-style-type: none;
    padding: 0;

nav li {
    display: inline;
    margin: 0 10px;

nav a {
    color: #fff;
    text-decoration: none;

main {
    padding: 20px;

section {
    margin-bottom: 20px;

section h2 {
    color: #333;

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    bottom: 0;

We use CSS to style the elements we’ve created, making our website visually appealing.

Try this code in Editor

That’s it! You’ve now created a basic website using HTML and CSS. Feel free to customize the content and styles to suit your specific needs.