How to Use GitHub Copilot to Code a Simple Web App in Under 2 Hours

Have you ever found yourself staring at a blank screen, wishing you could just write code in plain English and have it magically turn into a working web app? That's where GitHub Copilot comes in. This AI-powered coding assistant can help you build a simple web app in under two hours—yes, really! In this guide, I'm going to walk you through the entire process, share our experiences, and give you the specific steps to make it happen efficiently.

Time Estimate and Prerequisites

Time Estimate: You can finish this in about 2 hours if you follow along closely.

Prerequisites:

• Basic understanding of HTML, CSS, and JavaScript.
• A GitHub account (free).
• Visual Studio Code (free).
• GitHub Copilot subscription ($10/mo after a 30-day free trial).

Step 1: Set Up Your Environment

1. Install Visual Studio Code (VS Code): Download and install VS Code from here.
2. Install GitHub Copilot: Open VS Code, go to Extensions (or press Ctrl+Shift+X), and search for "GitHub Copilot." Click install, and sign in with your GitHub account.
3. Create a New Project: Open a new folder for your project in VS Code and create an index.html, style.css, and script.js file.

Expected Output

You'll have three empty files ready for coding.

Step 2: Generate HTML Structure

Now it's time to start coding with GitHub Copilot. In your index.html file, type:

<!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="style.css">
</head>
<body>
    <h1>Welcome to My Simple Web App</h1>
    <div id="app"></div>
    <script src="script.js"></script>
</body>
</html>

Output

Copilot should suggest the complete HTML structure for you.

Step 3: Style Your App

Next, let's add some styles. Open style.css and type:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

#app {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    width: 80%;
    max-width: 600px;
    background-color: white;
}

Expected Output

You should have a simple, clean design for your web app.

Step 4: Add Functionality with JavaScript

In script.js, type:

document.getElementById('app').innerHTML = '<p>This is a simple web app using GitHub Copilot!</p>';

Expected Output

When you open index.html in a browser, you should see the message rendered in the app div.

Troubleshooting: What Could Go Wrong

1. Copilot Doesn't Suggest Code: Ensure that you’re signed in and that the GitHub Copilot extension is enabled.
2. HTML/CSS Not Rendering: Double-check that your file paths are correct and that you’re opening the right HTML file in your browser.

What's Next?

Once you've built your simple web app, consider expanding its functionality:

• Add a form to capture user input.
• Integrate an API to fetch real data.
• Deploy your app using GitHub Pages or Vercel.

Conclusion: Start Here

Using GitHub Copilot can significantly speed up your coding process, especially for simple projects. We’ve found that it’s particularly useful for generating repetitive code snippets and basic structures. However, it’s not perfect; you still need to review and understand what it generates.

If you're a solo founder or indie hacker looking to prototype quickly, give GitHub Copilot a try. With its capabilities, you can build a simple web app in under two hours, and who knows? It might just be the start of something bigger.