How to Build a Simple Web App Using GitHub Copilot in Under 2 Hours

Building a web app can feel daunting, especially if you're a solo founder or indie hacker with limited time. But what if I told you that you can leverage AI to speed up the process? In 2026, GitHub Copilot has evolved into a powerful tool for quickly generating code, allowing you to build a simple web app in under two hours.

In this guide, I'll walk you through the steps to create a basic web app using GitHub Copilot, covering everything from prerequisites to troubleshooting. Let’s dive in!

Prerequisites: What You Need Before You Start

Before you jump in, make sure you have the following:

• GitHub Account: You’ll need a GitHub account to use Copilot and host your code.
• VS Code: Download Visual Studio Code (free) as your code editor.
• GitHub Copilot Subscription: Copilot costs $10/month or $100/year. There’s a free trial available, but if you find it useful, you'll want to subscribe.
• Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages will help you understand the code Copilot generates.

Step 1: Set Up Your Development Environment

1. Install VS Code: Download and install Visual Studio Code.
2. Install GitHub Copilot: Open VS Code, go to Extensions (Ctrl+Shift+X), and search for GitHub Copilot. Install it and sign in with your GitHub account.
3. Create a New Project: Open a terminal in VS Code and create a new directory for your web app. Run:

   mkdir simple-web-app
   cd simple-web-app
   

Step 2: Generate Basic Files

You’ll want to create a few essential files for your web app:

1. index.html: This will be the main HTML file.
2. styles.css: For styling your app.
3. app.js: Where your JavaScript code will go.

You can create these files manually or use the terminal:

touch index.html styles.css app.js

Step 3: Use GitHub Copilot to Generate Code

Now comes the exciting part! Start coding in each file and let Copilot assist you:

In index.html:

• Start typing the basic structure of an HTML document. For example, type <!DOCTYPE html> and let Copilot suggest the rest.

In styles.css:

• Type out a simple CSS rule like body { and see how Copilot completes it with common styles.

In app.js:

• Begin with a comment like // Function to fetch data and let Copilot generate a simple fetch function.

Example Outputs

• Your index.html might look like this:

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

Step 4: Test Your Web App

1. Open Your App in a Browser: You can use the Live Server extension in VS Code to view your app.
2. Click the Fetch Data Button: Ensure that the JavaScript functionality works as expected.

Troubleshooting: What Could Go Wrong

• Copilot Doesn’t Suggest Code: Make sure you’re connected to the internet and Copilot is properly authenticated.
• Syntax Errors: If Copilot generates incorrect code, you can always tweak it manually. Remember, it’s a tool to assist you, not a replacement for your judgment.

What's Next: Enhance Your Web App

Once you’ve built your simple web app, consider adding features like:

• User authentication
• Database integration
• More complex styling with frameworks like Bootstrap

If you want to explore these options further, check out our podcast, Built This Week, for actionable insights and tools that can help you scale your project.

Conclusion: Start Here

Ready to build your first web app with GitHub Copilot? Follow the steps outlined above, and you’ll be on your way to shipping a project in under two hours. Remember, the key is to leverage Copilot as a coding assistant and not just rely on it completely.

What We Actually Use: In our experience, we use GitHub Copilot for rapid prototyping, especially when we’re in the early stages of a project. It's a time-saver, but we still do code reviews to ensure quality.