How to Create a Simple HTML5 Website from Scratch

Introduction

Creating a website from scratch might seem challenging, especially if you’re just starting out. But with HTML5, you can easily build a simple yet effective website. In this tutorial, I’ll guide you through the steps to create a personal portfolio website using HTML5. By the end of this tutorial, you’ll have a solid foundation in HTML5 and a working portfolio website to showcase your skills.

Why HTML5?

HTML5 is the latest version of Hypertext Markup Language (HTML) and is widely used for creating websites. It comes with powerful features that allow you to structure your content more effectively. Whether you’re a beginner or an experienced developer, HTML5 provides everything you need to create a responsive, user-friendly website.

Setting Up Your Environment

Before we dive into coding, you’ll need a code editor and a web browser. You can use any code editor, such as Visual Studio Code, Sublime Text, or Atom. Make sure you have the latest version of a web browser like Google Chrome or Mozilla Firefox to view your website.

Creating the Basic Structure of Your HTML5 Website

Every HTML5 document starts with a <!DOCTYPE html> declaration, followed by the <html>, <head>, and <body> tags. Here’s how to structure the basic layout of your HTML5 website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- Content will go here -->
    </main>
    <footer>
        <p>&copy; 2024 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

This code creates the skeleton of your website, including a header with a navigation bar, a main content area, and a footer.

Adding Content to Your Portfolio Website

Now that you have the basic structure, it’s time to add content to your portfolio. You’ll need sections like “About Me,” “Projects,” and “Contact.” Here’s an example:

<main>
    <section id="about">
        <h2>About Me</h2>
        <p>Hello! I'm a web developer with a passion for creating beautiful and functional websites.</p>
    </section>

    <section id="projects">
        <h2>Projects</h2>
        <ul>
            <li><a href="project1.html">Project 1</a></li>
            <li><a href="project2.html">Project 2</a></li>
            <li><a href="project3.html">Project 3</a></li>
        </ul>
    </section>

    <section id="contact">
        <h2>Contact Me</h2>
        <p>Email: <a href="mailto:email@example.com">email@example.com</a></p>
    </section>
</main>

This content provides a brief introduction, a list of projects, and contact information.

Styling Your Website with CSS

To make your website visually appealing, you’ll need to add some CSS. Create a styles.css file and link it to your HTML document as shown in Step 2. Here’s a simple CSS example:

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

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

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

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

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

main {
    padding: 20px;
}

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

This CSS code will give your website a clean and modern look.

Testing and Finalizing Your Website

Once you’ve added your content and styled your website, it’s time to test it in different web browsers to ensure it looks good everywhere. Check the responsiveness by resizing your browser window.

Finally, deploy your website to a web hosting service or use GitHub Pages to share it with the world.

Conclusion

By following these steps, you’ve successfully created a simple HTML5 website from scratch. This project not only helps you understand the basics of HTML5 but also gives you a live portfolio to showcase your skills. Keep experimenting and adding new features to enhance your website.