How to Use GitHub Copilot to Code a Simple Web App in 2026

If you're a solo founder or indie hacker, the thought of building a web app can feel overwhelming. You might wonder if you have the coding chops to bring your idea to life. That’s where GitHub Copilot comes in. This AI-powered coding assistant can help you write code faster and more efficiently, making it possible to build a simple web app in about 2 hours. In this guide, I'll walk you through the process, sharing practical tips and my own experiences along the way.

Prerequisites

Before we dive into the coding, here’s what you’ll need to get started:

1. GitHub Account: Free to create, but consider a paid plan if you want to use Copilot for teams.
2. Visual Studio Code (VS Code): A popular code editor where you can use GitHub Copilot.
3. Node.js and npm: Make sure you have Node.js installed, as it will help you run your web app.
4. Basic HTML/CSS/JavaScript Knowledge: Familiarity with these languages will help you understand what Copilot suggests.

Step-by-Step Guide to Building the Web App

1. Setting Up Your Environment

First, install Visual Studio Code and the GitHub Copilot extension. This process takes about 10 minutes.

• Install VS Code: Download from here.
• Add GitHub Copilot Extension: Go to the Extensions marketplace in VS Code and search for "GitHub Copilot".

2. Create a New Project

Create a new folder for your project and open it in VS Code. Then, open the terminal in VS Code and run:

npm init -y

This command initializes a new Node.js project.

3. Build the Basic Structure

Start by creating the necessary files: index.html, style.css, and app.js. Here’s what you can do:

• index.html: Use Copilot to generate a basic HTML template. Start typing <!DOCTYPE html> and let Copilot fill in the rest.

Expected output:

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

4. Add Styles

Open style.css and start typing a CSS rule, like body {, and let Copilot suggest styles.

Expected output:

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

5. Implement Functionality with JavaScript

In app.js, start by typing a function that handles a button click. Copilot will suggest the rest.

Expected output:

function showAlert() {
    alert("Hello from my web app!");
}

document.querySelector('button').addEventListener('click', showAlert);

6. Test Your Web App

To test your web app, you can use a live server extension in VS Code. Install the "Live Server" extension, right-click on index.html, and select "Open with Live Server".

7. Troubleshooting

If you run into issues, here are some common problems and solutions:

• Copilot doesn’t suggest anything: Make sure the extension is enabled and you’re in a supported file type (like .js or .html).
• JavaScript errors: Check the console in your browser for error messages which can guide debugging.

What's Next?

Once you've built your simple web app, consider adding more features, such as a backend with Express.js or integrating APIs. This will enhance your app and provide more learning opportunities.

Conclusion

Using GitHub Copilot can significantly speed up your coding process. In just 2 hours, you can create a simple web app without getting bogged down in the details. Start by setting up your environment, and then leverage Copilot’s suggestions to build your app.

What We Actually Use

In our experience, we use GitHub Copilot for rapid prototyping and to overcome coding blocks. It’s a great tool for indie hackers who want to build quickly without extensive coding knowledge. However, it’s important to validate its suggestions and ensure code quality.