How I Built My First Web App Using Gemini Canvas (No Coding Required!)

Whenever I talk to friends about studying AI in my 50s, people often say, "You can do that because you study AI in college. It's way too complicated for regular people like us."

But after building my own Esperanto language learning app and a simple budget planner, I realized something important: You don't need coding skills or complex software. All you need is Google Gemini and the basic Notepad already installed on your computer.

Today, I want to share a beginner-friendly guide on how to use Gemini Canvas to build a daily expense tracker web app, along with a copy-paste prompt and essential tips on saving your file properly in Notepad.

💡Understanding the Gemini Canvas Layout

When you open the Canvas feature in Gemini, your screen cleanly splits into two sides:

• Left Side (Chat & Input) : Where you type your ideas and instructions in plain language.

• Right Side (Canvas & Preview) : Where Gemini writes the code in real-time and shows an interactive preview of your web app.

💡 Ready-to-Use Prompt for an Expense Tracker App

To make things super easy, here is the exact prompt I used. You can simply copy and paste this into the left chat window in Gemini Canvas:

📋 Practical Prompt (Copy & Paste)

"Act as a web developer. Create a clean, single-page HTML web app to track daily expenses.

[Key Features]

• Input fields for Date, Item Name, and Price (in local currency) with an 'Add' button.

• An automatic calculation of Total Daily Expenses displayed at the bottom.

• A 'Delete' button next to each logged item.

• A clean, modern pastel-toned design.

Put all HTML, CSS, and JavaScript into a single self-contained code file."

Once you hit enter, Gemini Canvas will generate the code and show a live working app right in the preview tab.

This is the live preview Gemini generated for me using the prompt above. I'd love to know what yours looks like!

👉 Refining Your App with Screen Captures

If you want to adjust colors or remove an item, you don't need long explanations. Just use this shortcut:

📌 Screen Capture Shortcut :Windows Key + Shift + S

1. Capture the exact area of the preview screen you want to change.

2. Paste the screenshot into the Gemini chat.

3. Add a short instruction such as, "Remove this button." Gemini can use the screenshot as visual context when helping you revise the app.

📌 The Crucial Step: Saving as .html in Notepad

To run your app locally in a web browser, you need to save the code correctly as an HTML file.. Here are two common mistakes beginners often make in Notepad:

1. Copy the code from the Canvas window.

2. Open Notepad and paste the code ( Ctrl + V).

3. Click [File] → [Save As] .

⚠️ Critical Saving Tip: Avoid saving as a .txt file

• Change 'Save as type' from Text Documents (*.txt)to All Files (*.*).

• Type .htmlat the end of your file name (eg, expense_tracker.html).

🌱 What I Learned

When I double-clicked expense_tracker.htmlon my desktop and saw my custom app running smoothly in a browser, I felt an overwhelming sense of joy and confidence.

Learning AI in my 50s has taught me that AI isn't just for tech experts—it's an encouraging assistant for anyone willing to try. If I can do it, you can too! Try opening Notepad today and create your first mini app. In my next post, I'll share 3 free platforms where you can publish your new app link for free.

🔗 Related Posts

• Coding at 50: How I Built an Esperanto Game with Gemini Canvas🌱

• Building a Travel Expense App with Google Anti-gravity (A 50-Year-Old's Challenge)🚀

🔗 Official Resources

• Google Gemini Help — Create docs, apps & more with Canvas