First Steps: Build Your First App
Create a simple to-do app using Google Gemini—no programming experience required. This hands-on tutorial shows you exactly how accessible software development has become.
You're About to Build Real Software
The traditional path: Learn a programming language → Study frameworks → Debug for hours → Maybe get something working.
The Software 2.0 path: Describe what you want → Let AI build it → Test and iterate → You have a working app.
This tutorial uses the second approach. You'll build a functional to-do list app in about 30 minutes.
What You'll Build
A Simple To-Do List App
- Add tasks with a text input
- Mark tasks as complete
- Delete tasks
- Data persists in your browser
- Clean, modern interface
What You'll Learn
- How to prompt AI coding assistants effectively
- How to test and iterate on AI-generated code
- Basic concepts of web applications
- How to customize the app for your needs
What You Need
Tools (All Free)
- Google Account - for accessing Gemini
- A Text Editor - VS Code (recommended), Notepad++, or even basic Notepad
- A Web Browser - Chrome, Firefox, Safari, or Edge
Time Commitment
Allow 30-45 minutes for your first project. Future projects will go faster as you learn the pattern.
Step-by-Step Tutorial
Step 1: Access Google Gemini
- Go to gemini.google.com
- Sign in with your Google account
- You're ready to start prompting!
Step 2: Write Your First Prompt
Copy this prompt into Gemini:
Create a simple to-do list web application with the following features:
1. A text input field to add new tasks
2. An "Add Task" button
3. Display tasks in a list
4. Each task should have:
- A checkbox to mark it as complete (with strikethrough styling when checked)
- A delete button to remove the task
5. Use local storage to save tasks so they persist when the page is refreshed
6. Use modern, clean styling with CSS
7. Make it fully functional in a single HTML file
Please provide the complete HTML file with embedded CSS and JavaScript.
Why this works: The prompt is specific about features, mentions persistence (local storage), and asks for a single file (easy to test).
Step 3: Save the Code
- Gemini will generate a complete HTML file
- Copy all the code (there should be a copy button)
- Open your text editor (VS Code, Notepad++, etc.)
- Paste the code
- Save as
todo-app.html
Pro tip: Make sure the file extension is .html, not .txt
Step 4: Test Your App
- Find the
todo-app.htmlfile on your computer - Double-click it (it should open in your web browser)
- Try adding a task
- Check the checkbox
- Delete a task
- Refresh the page - your tasks should still be there!
You just built a working app with AI assistance!
Step 5: Customize It
Now go back to Gemini and ask for modifications:
"Can you modify the to-do app to use a blue color scheme instead?"
Or:
"Add a counter showing how many tasks are incomplete"
Each time, Gemini will provide updated code. Copy it, save it, and test it.
Common Issues & Solutions
Issue: The file won't open in my browser
Solution: Make sure you saved it with a .html extension. Right-click the file → "Open with" → Choose your web browser.
Issue: Tasks don't save when I refresh
Solution: Go back to Gemini and say: "The tasks aren't persisting. Can you check the local storage implementation?"
Issue: The styling looks broken
Solution: Tell Gemini what you're seeing: "The buttons are overlapping the text. Can you fix the CSS layout?"
What's Next?
You just built your first app!
Now you understand the basics of Software 2.0 development. From here, you can:
Additional Learning Resources
Official Google Resources
- Google AI - Prompting Guide - Official prompting best practices
- Google for Developers - Free courses and tutorials
- Gemini API Examples - Real-world use cases
Web Development Basics
- MDN Web Docs - Comprehensive web development guide
- web.dev Learn - Google's web development curriculum
Remember: You don't need to master traditional programming to build useful tools. Focus on learning to describe what you want clearly, and AI will handle the implementation details.