Building a Simple Website Template with HTML and CSS

Home
HTML
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">
<head>
    <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">
</head>
<body>
    <!-- Content Goes Here -->
</body>
</html>

Explanation:

We begin with the basic structure of an HTML document.
We link an external CSS file (styles.css) to our HTML document.

Step 2: Creating the Header Section

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

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

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:

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

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

We use <main> to contain the main content of our webpage.
We create two sections, each with a heading and a paragraph of text.

Step 4: Including a Footer

Finally, add a footer section:

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

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.

HTML