Claude Code Basics — Build Your First Real App (lesson deck)

Claude Code Basics · your first app

From a page that shows to an app that does

A landing page just sits there and looks good. An app responds to you — and remembers. Today you build one, still with no backend and no keys.

🖼️

A page shows — it displays the same thing for everyone, every time.

⚙️

An app does — it reacts to your clicks, keeps track, and remembers when you come back.

A dull static page on the left, a glowing interactive app with toggles and checkmarks on the right

What makes it an app

Three things a page can't do

1

It responds

Buttons and inputs that actually change what's on the screen when you use them.

2

It remembers

Your data is saved right in the browser with localStorage — so it's still there tomorrow. No database, no login.

3

It has logic

It counts, calculates, decides — a little brain, not just a layout.

A browser window full of checkmarks with a save icon and a refresh arrow — the app remembers

Still one file, still no accounts or keys — it all runs in your browser.

Build it with the recipe

One prompt → a working habit tracker

Same 5-part recipe from lesson 2.2 — just point it at an app instead of a page.

🎯

Outcome — "a habit tracker that remembers my streaks."

🧱

Sections — a list of habits, a check-off for today, a streak count, an "add habit" button.

🔧

One file — plain HTML, CSS & JS + localStorage, no framework.

✅

Then verify — check a habit, refresh the page, confirm the streak is still there.

A recipe bowl transforming into a phone showing a habit checklist with streaks

The takeaway

It remembers. It responds. It's yours.

You just crossed the line from "I can make a website" to "I can build a tool." Everything bigger is only more of this.

🔁

The same loop — describe what you want, run it, click it, tweak. Apps are built one small step at a time, just like pages.

A phone showing a habit tracker with a flame streak and checkmarks, beside a happy robot

A page shows. An app does.

And it ships exactly like a site — git + deploy, lesson 2.7.