How to Use GitHub Copilot to Code a Simple Web App in Under 2 Hours
How to Use GitHub Copilot to Code a Simple Web App in Under 2 Hours
If you've ever struggled with coding a web app from scratch, you're not alone. Many indie hackers and solo founders find themselves bogged down by the nitty-gritty details of coding when they really just want to ship their idea. That's where GitHub Copilot comes in. This AI-powered coding assistant can help you write code faster, but it’s not magic; you still need to know what to do. In this guide, I'll walk you through using GitHub Copilot to code a simple web app in under 2 hours, based on my own experience.
Prerequisites: What You’ll Need
Before diving in, make sure you have the following:
- GitHub Account: Free tier available.
- Visual Studio Code: Download and install it if you haven’t already.
- GitHub Copilot Subscription: $10/month after a 60-day free trial (as of March 2026).
- Basic Knowledge of HTML, CSS, and JavaScript: You should know the basics, as Copilot won't teach you how to code.
Step 1: Set Up Your Development Environment
- Open Visual Studio Code.
- Install the GitHub Copilot extension from the marketplace.
- Create a new folder for your web app project and open it in VS Code.
Expected Output
You will have a clean workspace ready for coding, with Copilot activated.
Step 2: Start Coding Your Web App
Now, let’s build a simple to-do list web app. Follow these steps:
-
Create an HTML File: Create a file named
index.htmland type<!DOCTYPE html>and hit enter. Copilot will suggest a full HTML boilerplate. -
Add Basic Structure: Type
headerand hit enter. Copilot will help populate the header section. -
Create a Form: Start typing
formand let Copilot fill in the rest. This is where users will add their tasks. -
Style with CSS: Create a
styles.cssfile and typebody {to get some basic styling suggestions from Copilot. -
Add JavaScript Functionality: Create a
script.jsfile. Start withfunction addTask()and see how Copilot suggests the logic for adding tasks to your to-do list.
Expected Output
By the end of this step, you should have a basic web app structure with HTML, CSS, and JavaScript files all set up.
Step 3: Test Your Web App
- Open
index.htmlin your browser. - Test adding tasks through the form.
- Check if tasks appear correctly in the list.
Troubleshooting
- Tasks Not Appearing: Double-check your JavaScript logic. Copilot may not always get it right on the first try.
- Styling Issues: Make sure your CSS file is linked correctly in the HTML.
Step 4: Deploy Your Web App
You can use GitHub Pages for free hosting:
- Create a GitHub repository for your project.
- Push your code to GitHub.
- Go to the repository settings and enable GitHub Pages.
Expected Output
Your web app should now be live and accessible via a GitHub Pages URL.
What Could Go Wrong
- Copilot Suggestions: Sometimes, Copilot might suggest code that doesn't fit your needs. Be prepared to tweak the suggestions.
- Browser Compatibility: Ensure that the features you use are compatible with popular browsers.
What’s Next
Now that you have a basic web app, consider expanding its features. You could add user authentication, a database for storing tasks, or even a mobile-friendly design. Explore frameworks like React or Vue.js to level up your app.
Conclusion: Start Here
If you're looking to build a simple web app quickly, GitHub Copilot can be an invaluable tool in your arsenal. With a little preparation and understanding of the basics, you can leverage its capabilities to code effectively in under 2 hours. Remember, it’s not about letting Copilot do all the work; it’s about enhancing your coding workflow.
What We Actually Use
For our projects, we use GitHub Copilot for rapid prototyping. It saves us hours of coding time and helps us focus on the architecture rather than the syntax.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.