How to Use GitHub Copilot to Write Your First Simple App in Under 2 Hours
How to Use GitHub Copilot to Write Your First Simple App in Under 2 Hours
If you're a beginner looking to dip your toes into app development, GitHub Copilot is like having a coding buddy right by your side. But let’s face it: the prospect of writing your first app can be intimidating. You might think it’s going to take weeks of learning before you can actually build something functional. Well, I’m here to tell you that with the right tools and guidance, you can create a simple app in under 2 hours using GitHub Copilot.
In this guide, I’ll take you through the entire process—from prerequisites to troubleshooting—so you can focus on building rather than getting bogged down by the details.
Prerequisites: What You Need to Get Started
Before we dive in, here’s what you’ll need:
- GitHub Account: Sign up for free at GitHub.
- Visual Studio Code: Download and install VS Code, which is a popular code editor.
- GitHub Copilot: You’ll need access to GitHub Copilot. As of May 2026, it costs $10/month after a free trial.
- Basic Knowledge of JavaScript: Familiarity with the basics of JavaScript will help, but even if you're a complete newbie, Copilot can guide you.
Step 1: Set Up Your Development Environment
- Install GitHub Copilot: Open VS Code, go to the Extensions view (Ctrl+Shift+X), and search for "GitHub Copilot." Click "Install."
- Create a New Project: Open your terminal in VS Code and create a new directory for your app:
mkdir my-simple-app cd my-simple-app - Initialize the Project: Run the following command to create a basic package.json file:
npm init -y
Step 2: Use GitHub Copilot to Generate Code
Now it’s time to leverage Copilot to help you write your app. Let’s say we want to create a simple to-do list app.
-
Create an HTML File: In your project directory, create a file named
index.html. Start typing:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple To-Do List</title> </head> <body> <h1>My To-Do List</h1> <input type="text" id="task" placeholder="Add a new task"> <button id="addTask">Add</button> <ul id="taskList"></ul> <script src="app.js"></script> </body> </html>As you type, Copilot will suggest code snippets. Accept its suggestions by pressing the Tab key.
-
Create a JavaScript File: Now create a file named
app.js. Start typing:const addButton = document.getElementById('addTask'); const taskList = document.getElementById('taskList'); addButton.addEventListener('click', function() { const taskInput = document.getElementById('task').value; const listItem = document.createElement('li'); listItem.textContent = taskInput; taskList.appendChild(listItem); });Again, accept Copilot’s suggestions as you go.
Step 3: Run Your App
- Open index.html in a Browser: Right-click on
index.htmlin the VS Code file explorer and choose "Open with Live Server" (you’ll need the Live Server extension installed). - Test Your App: Try adding tasks to your list. It should work seamlessly!
Troubleshooting: What Could Go Wrong
- Copilot Not Suggesting Code: Make sure that your GitHub Copilot subscription is active and that you're logged in to GitHub in VS Code.
- Live Server Not Working: If you don't see the Live Server option, install the Live Server extension from the VS Code marketplace.
What’s Next: Building on Your Simple App
Once you’ve got your simple app running, consider enhancing it by adding features like:
- Task Removal: Allow users to delete tasks.
- Persistence: Save tasks in local storage so they remain after a page refresh.
- Styling: Use CSS to make your app visually appealing.
Conclusion: Start Here
If you’re a beginner, GitHub Copilot can significantly speed up your learning process and help you overcome common hurdles in coding. With just a few hours and the suggestions from Copilot, you can build a simple app and gain confidence in your coding abilities.
So, what are you waiting for? Grab your laptop, set up your environment, and get coding!
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.