AI-Assisted Code: Your First App

Before You Study (5 mins)

Lesson focus: Modern AI coding tools can help you build a working application from a plain-language description. This lesson is the first one because it removes a single false belief that has stopped millions of capable people from learning to build software: "I can't code." You can. By the end of today, you will have a working browser game that you built by talking to an AI — and you will know what just happened.

What you should have ready:

• A computer with internet (Windows, macOS, or Linux all work)
• A Google account (Antigravity uses Google sign-in)
• A modern browser (Chrome, Edge, Firefox, or Safari)
• About 60 minutes — this is the longest lesson in Module A
• Patience to read what the AI generated, not just to run it

The Concept

Every app you have ever used — Instagram, WhatsApp, your bank's website, your Uber app, this very page you are reading — is code. Code is a set of written instructions that a computer follows. Different categories of code do different things: some draws what you see on screen (frontend), some stores and retrieves data (backend), some talks to other apps over the internet (APIs). All of it is just text in files, written in a specific programming language.

For most of computing's history, writing code was a manual craft. A developer would type each line by hand, debugging by reading the lines back to themselves, occasionally googling for help. The skills required to start — knowing where to type, what file to put it in, what command to run — were a wall that kept beginners out.

In 2023–2025, AI coding assistants crossed a threshold. They became good enough at understanding plain-language descriptions ("build me a snake game that runs in the browser") and generating working code that runs. They are not magic. Under the hood, they are large language models — like ChatGPT or Gemini — that have been trained on billions of lines of public code. When you describe what you want, the model predicts the code that has historically followed similar descriptions. The result is usually correct enough to run, often correct enough to ship, and almost never correct enough to deploy without reading.

The skill we are practicing today is AI-assisted code that you understand. The wrong way to use these tools is to type a description, watch the code appear, and ship it without reading. That produces fragile software the user cannot debug. The right way is what this entire course teaches: describe, read what was produced, modify, run, verify. The AI handles the boilerplate; you handle the architecture, the choices, and the verification.

Today's tool is Antigravity, Google's free AI coding platform. It runs in the browser, has a built-in AI agent that can write code for you, and gives you a real development environment for free. You will use it to build a working browser-based game in about 30 minutes of guided work.

The course will use AI assistance throughout — Antigravity in early lessons, command-line tools (Gemini CLI, Claude Code) in later ones. The principle stays the same: the AI is a pair, not an author. You stay responsible for what runs.

Quick Concepts

What We Will Build

By the end of this lesson, you will have done these specific things:

1. Signed in to Antigravity with your Google account at antigravity.google.com.
2. Started a new project and asked the AI agent to build a Snake game in the browser using HTML, CSS, and JavaScript.
3. Read every file the AI generated. There will be three or four — index.html, style.css, game.js, possibly a package.json. You will not understand every line yet; that's fine. You will know which file does which job.
4. Run the game with npm run dev (or the equivalent button in Antigravity) and load it in a browser preview pane.
5. Played the game to confirm it works.
6. Made one small change yourself — change a color, change the speed, change the snake's starting size — and verified the game still works.

The point of step 6 is the most important one. The first time you change someone else's code (the AI's, in this case) and it still runs, the wall between "user of software" and "person who builds software" comes down.

Think About

Before studying, consider:

1. The last app that surprised you with how useful it was — what would it take to build a worse version of it yourself? (Probably less than you think.)
2. If AI can write the boilerplate code for you, what becomes the valuable skill? (Hint: it is not typing speed.)

By the End

After this lesson, you'll:

• ✅ Have Antigravity installed and running with your Google account
• ✅ Understand that code is just instructions, written in text files
• ✅ Have built and played your first working application
• ✅ Have made your first deliberate code change
• ✅ Know what an IDE, an AI agent, and a development server are

Ready? Let's reveal the first secret. 🚀

What We Learned

• Every app — Instagram, WhatsApp, Netflix, the calculator on your phone — is built from code, which is written instructions in text files.
• Modern AI coding assistants can generate working code from a plain-language description, but the generated code still needs to be read and verified by a human.
• Antigravity is Google's free AI coding platform; it runs in the browser, has a built-in AI agent, and provides a real development environment.
• Three files commonly form a simple browser game: index.html (structure), style.css (appearance), game.js (logic). Each file has a specific job.
• A development server (started with npm run dev) is a small web server that runs on your machine so you can preview your app in a browser before sharing it with the world.

Commands We Used

# Sign in to Antigravity (in browser)
# Visit: https://antigravity.google.com
# Click "Sign in with Google"

# After Antigravity creates the project, the agent starts the dev server.
# If you need to start it manually inside Antigravity's terminal:
npm run dev

# When the dev server is running, the preview pane shows your app at:
http://localhost:3000

The first JavaScript file you read will likely look something like this — a fragment from the Snake game's game.js:

// One step of the snake's movement
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }
snake.unshift(head)

// Check if we ate the food
if (head.x === food.x && head.y === food.y) {
  score += 1
  placeFoodRandomly()
} else {
  snake.pop()
}

You don't need to understand every line yet. Notice the shape — there's a list called snake, a thing called head, a check for whether the snake ate the food. The code reads almost like English. That's deliberate.

Why It Matters

The reason this lesson is first is psychological, not technical. For most learners, the hardest moment in the entire 20-lesson curriculum is the very first one — the moment of opening an editor for the first time and not knowing where to type. AI assistance compresses that moment from days to minutes. By the end of an hour, you've shipped a working app. The wall comes down.

But shipping a Snake game is not learning engineering. The course gets harder, not easier, from here. Tomorrow you will configure VS Code, the editor most professional engineers use. The day after, you will learn the terminal, where you'll spend the rest of your life as a developer. The week after that, you will dockerize this game and ship it to the internet.

What carries from today is the mental model: AI helps with the typing; you do the thinking. By Module D, you will be calling AI APIs from your own backend, deciding when to use AI features and when not to, and writing prompts that produce code worth keeping. That entire arc starts with the change you made in Step 6 — the moment you altered the AI's output and it still ran.

If you want to go deeper now, the What is an API and How Do APIs Actually Work article explains how the AI agent in Antigravity is itself just a backend service that your browser is talking to over an API. Today's tool is tomorrow's curriculum.

Checklist

• I created an Antigravity account and signed in
• I asked the AI agent to build a Snake game and got working code
• I opened each generated file and noticed which file did which job
• I ran the dev server and played the game in the browser
• I made one deliberate change (color, speed, or size) and verified it still works
• I can articulate what an "IDE", an "AI agent", and a "dev server" are in my own words

Quick Quiz

Q1: What is code?

• A) A secret password
• B) Written instructions that tell a computer what to do ✓
• C) A specialized graphics format

Q2: What is Antigravity?

• A) A physics term we use as a metaphor
• B) Google's free browser-based AI coding platform ✓
• C) A category of mobile games

Q3: When the AI generates code for you, what should you do?

• A) Run it without reading — that's the whole point
• B) Read every file, notice which file does what, then run and modify ✓
• C) Email it to a senior engineer for approval

Q4: What is a "development server"?

• A) A team of developers working on one project
• B) A small web server that runs on your machine so you can preview your app ✓
• C) A paid service that hosts production websites

Bonus Challenge

Make three deliberate changes to your Snake game and verify each one before moving to the next:

1. Change the snake's color from green to blue (or any other color you like).
2. Change the game's speed — make the snake move faster or slower.
3. Change the size of the playing grid — make the game window larger or smaller.

For each change, describe what you want to the AI in plain English, then read the file the AI modifies, then test in the browser. The skill is not "make the AI do it" — the skill is "verify it actually did it correctly."

Next Lesson

Lesson 02: Set Up VS Code Like a Developer

You'll learn: Antigravity is great for getting started, but most professional engineers work in a desktop editor called VS Code. We'll set it up the right way, learn the shortcuts that matter, and modify your Snake game from a real developer's environment.

The wall came down today. Welcome to the other side. 🎉