What Apps Do You Use Every Day?

Think about the apps you opened this morning...

Your 5-Day Journey

From zero to a working application in one week

Setting Up Antigravity

Your coding playground for today's exercises

Antigravity is a simple coding environment that runs in your browser. You will use it throughout the day to try small exercises and see code in action — no installation needed.

<h1>Hello World!</h1>
<p>My name is [your name]</p>

The Browser: Your Window to the Web

You already use one every day - let's understand it

A browser is a program on your computer or phone that lets you visit websites. Chrome, Safari, Firefox, and Edge are all browsers. Right now, you are looking at this presentation in a browser.

What is an Application?

Software that solves a problem for users

Anatomy of an App

Every application has three layers

How Apps Are Built

Code is only step 4 out of 6!

What Are Specifications?

The blueprint before building

User Stories

Describe features from the user's perspective

Good vs. Bad Specifications

Specificity is everything

What is UI/UX?

Two sides of the same coin

4 Design Principles for Beginners

Follow these rules and your app will look professional

Stitch AI

Generate app designs from text descriptions

Stitch is a free AI design tool by Google. You describe what you want in plain English, and it generates professional-looking screens in seconds. No design skills needed.

Demo: Designing with Stitch

Watch the teacher demonstrate, then try it yourself

"A clean task list page for a student planner app,
mobile-first design with checkboxes, task titles,
due dates, and colored priority tags."

"A task creation form with fields for title,
due date, subject dropdown, and priority level
selector. Modern minimal style."

"A dashboard showing upcoming deadlines, task
completion statistics, and a quick-add button.
Clean white design with blue accents."

From Stitch to Figma

Import your AI-generated designs and refine them

Figma is a free, browser-based design tool used by professional designers at Google, Microsoft, Uber, and Airbnb. You will import your Stitch AI screens into Figma to refine, customize, and share them.

Figma Key Concepts

The four building blocks you need to know

Files & Folders on Your Computer

The building blocks of every project

Documents/
├── School/
│   ├── essay.docx
│   └── notes.pdf
├── Photos/
│   └── vacation.jpg
└── Music/
    └── playlist.mp3

What is Code?

Instructions written in a language a computer can understand

Programming Languages

Different languages for different jobs

Just like humans speak French, English, or Spanish, computers understand different programming languages. Each language is best at a specific task. For web apps, you need three:

<h1>Welcome</h1>
<p>This is my app.</p>
<button>Sign In</button>

button {
  background: blue;
  color: white;
  padding: 10px 20px;
}

button.onclick = function() {
  alert("Hello!");
}

<h1>My Study Planner</h1>
<p>Welcome to my app!</p>
<button>Add Task</button>

Vibe Coding: Let AI Write Code For You

The new way to build software — by describing what you want

Good vs. Bad Prompts

The quality of your instructions determines the quality of the code

What is a Software Project?

All the files that make up your app, organized in one folder

study-planner/
├── src/
│   ├── app/
│   │   ├── page.tsx      (home page)
│   │   ├── tasks/
│   │   │   └── page.tsx  (tasks page)
│   │   └── layout.tsx    (shared layout)
│   └── styles/
│       └── globals.css   (design)
├── public/
│   └── logo.png          (images)
├── data/
│   └── tasks.json        (data)
└── package.json          (config)

What is "The Cloud"?

It is just someone else's computer

The Problem with Managing Code

Why we need special tools for code projects

Imagine you are writing an essay in Word. Simple: one file, one person, save and done. Now imagine:

What is Version Control?

A time machine for your project

It saves snapshots of your entire project at key moments, so you can always go back in time.

Git vs. GitHub

Two different things that work together

What is Open Source?

Why so many tools are free (and why GitHub exists)

Creating a GitHub Account

Your first step into the developer world

What is a Repository?

Your project's home on GitHub

my-awesome-app/
├── index.html      (main page)
├── style.css       (design)
├── script.js       (interactivity)
├── images/
│   └── logo.png
└── README.md       (description)

Creating Your First Repository

Let's do this together

GitHub Issues

Your project's to-do list

Each issue can be assigned to someone, given a label (bug, feature, nice-to-have), and closed when completed. It is your project's to-do list.

From Design to Issues

Turn your Figma screens into actionable GitHub issues

Title: Create task list page
Label: feature

Description:
Build the task list page based on the Figma design.

Acceptance criteria:
- [ ] Page shows a list of tasks with title and due date
- [ ] Each task has a checkbox to mark as complete
- [ ] Tasks are sorted by due date (soonest first)
- [ ] An "Add Task" button is visible at the top

Today's Deliverables

What you should have by the end of today

Time to Practice!

Apply everything you learned today

Ideation: Your Own App Project

Only when you have completed the slides + practical work above