How to Create Your First Project with GitHub Copilot in Just 90 Minutes
How to Create Your First Project with GitHub Copilot in Just 90 Minutes
If you're a solo founder or indie hacker, you know that getting started with coding can feel daunting. You might have ideas swirling in your head but struggle with implementing them. That's where GitHub Copilot comes in—a tool that can help you generate code snippets and streamline your development process. In just 90 minutes, you can create your first project using GitHub Copilot, even if you're a beginner.
Prerequisites: What You Need to Get Started
Before diving in, make sure you have the following:
- GitHub Account: Sign up at GitHub if you don’t have one.
- Visual Studio Code: Download and install VS Code as your code editor.
- GitHub Copilot Subscription: You'll need a subscription for Copilot, which costs $10/month or $100/year as of August 2026. There is a free trial available.
- Basic Understanding of JavaScript: Familiarity with JavaScript will be helpful but not required.
Step 1: Setting Up GitHub Copilot
- Install GitHub Copilot Extension: Open VS Code, go to the Extensions panel, and search for "GitHub Copilot." Click "Install."
- Sign In: After installation, you'll be prompted to sign in to your GitHub account. Follow the on-screen instructions.
- Activate Copilot: Once signed in, Copilot is ready to assist you with code suggestions.
Step 2: Creating Your First Project
2.1 Choose a Project Idea
Start simple. Here are a few project ideas:
- A basic to-do list app
- A weather app that fetches data from an API
- A personal blog site using HTML/CSS
For this tutorial, we’ll build a simple to-do list app.
2.2 Initialize Your Project
- Open a new folder in VS Code and create a new
index.htmlfile. - Add the basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
2.3 Use GitHub Copilot for JavaScript
- Create a new file named
script.js. - Start typing a function to add tasks to the list. As you type, Copilot will suggest code. For example, start with:
function addTask() {
- Accept the suggestion or modify it as needed. Here's a simple implementation:
let tasks = [];
function addTask() {
const taskInput = document.getElementById('taskInput');
const task = taskInput.value;
tasks.push(task);
taskInput.value = '';
renderTasks();
}
function renderTasks() {
const taskList = document.getElementById('taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task;
taskList.appendChild(li);
});
}
document.getElementById('addTaskBtn').addEventListener('click', addTask);
Troubleshooting Common Issues
- Copilot Not Suggesting Code: Ensure you're signed in and the extension is enabled.
- JavaScript Errors: Check the console in your browser for error messages that can guide you in debugging.
- Styling Issues: Use CSS to style your app. Copilot can help with basic CSS if you ask for it.
What's Next
Once your to-do list app is up and running, consider enhancing it with features like:
- Task deletion
- Persistence using local storage
- A more polished UI with CSS frameworks like Bootstrap
Conclusion: Start Here
Creating your first project with GitHub Copilot can be an empowering experience. With just 90 minutes and the right setup, you can go from zero to a functioning app. Remember, the key is to start simple and build upon your skills gradually.
If you find yourself stuck, don’t hesitate to check out our podcast, where we share insights and tools that can help you on your building journey.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.