Build a Basic Web Application

Welcome to this step-by-step tutorial on building a simple yet functional web application. We'll cover the core concepts, from structuring your HTML to adding dynamic behavior with JavaScript.

1. Setting Up Your Project

Before we start coding, let's create a simple project structure. Create a new folder for your project and inside it, create three files:

  • index.html: The main structure of your web page.
  • style.css: For styling your application.
  • script.js: For adding interactivity.

Your folder structure should look like this:


your-web-app/
├── index.html
├── style.css
└── script.js

2. Structuring Your HTML (index.html)

Let's define the basic HTML skeleton for our application. We'll include a header, a main content area, and a footer.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Web App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My App</h1>
    </header>

    <main>
        <section id="app-content">
            <h2>Task List</h2>
            <input type="text" id="task-input" placeholder="Add a new task...">
            <button id="add-task-btn">Add Task</button>
            <ul id="task-list">
                <li>Learn HTML</li>
                <li>Style with CSS</li>
            </ul>
        </section>
    </main>

    <footer>
        © 2023 My App Inc.
    </footer>

    <script src="script.js"></script>
</body>
</html>

Notice the `` to link our CSS file and `