Simple website using HTML and CSS with source code

Creating a simple website using HTML and CSS is a fundamental skill for any web developer. This guide will walk you through the process of building a basic website, from setting up your development environment to adding the final touches. Whether you’re a beginner or looking to refresh your skills, this tutorial will provide you with all the necessary steps and source code to get started.

Setting Up Your Development Environment

Before we dive into the code, it’s essential to set up a proper development environment. Here’s what you need:

Text Editor: Use a text editor like Visual Studio Code, Sublime Text, or Atom.
Browser: Google Chrome, Firefox, or any modern web browser for testing.
Folder Structure: Create a folder for your project and organize it with subfolders for css, images, and other assets.

my-simple-website/
│
├── index.html
├── css/
│ └── styles.css
└── images/
└── logo.png

Basic Structure of an HTML Document

Start by creating an index.html file in your project folder. This file will be the main entry point of your website. Below is the basic structure of an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a paragraph about me.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Simple Website</p>
    </footer>
</body>
</html>

Styling Your Website with CSS

Next, create a styles.css file in the css folder. This file will contain all the CSS rules to style your HTML elements.

Resetting Default Styles

First, add a CSS reset to ensure consistency across different browsers.

/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Basic Styles

Now, let’s add some basic styles to enhance the appearance of the website.

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

h1, h2 {
    margin: 20px 0;
}

p {
    margin: 10px 0;
}

Creating the Header

The header section typically contains the website’s title or logo. Here’s how you can create a simple header.

<header>
    <h1>Welcome to My Website</h1>
</header>

Add the following styles to center the text and give the header a background color.

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

Building the Main Content Section

The main content of your website will go inside the <main> tag. In this example, we will create an “About Me” section.

<main>
    <section>
        <h2>About Me</h2>
        <p>This is a paragraph about me.</p>
    </section>
</main>

Style the main content area to make it visually appealing.

main {
    margin: 20px 0;
}

section {
    margin-bottom: 20px;
}

Designing the Footer

The footer usually contains copyright information or links to other important pages.

<footer>
    <p>&copy; 2024 My Simple Website</p>
</footer>

Apply styles to the footer to match the header.

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

Final Touches and Optimization

To make your website more user-friendly and visually appealing, consider adding some final touches:

Adding a Logo

If you have a logo, add it to the header.

<header>
    <img src="images/logo.png" alt="Website Logo" style="width: 50px;">
    <h1>Welcome to My Website</h1>
</header>

Responsive Design

Ensure your website looks good on all devices by adding some responsive design techniques.

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    header, footer {
        padding: 5px 0;
    }

    h1, h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }
}

Conclusion

Congratulations! You have successfully created a simple website using HTML and CSS. This guide has covered the essential steps, from setting up your development environment to adding the final touches. With these skills, you can now start building more complex websites and continue to enhance your web development knowledge.

Don’t forget to experiment with different styles and layouts to make your websites unique and engaging.