Build with AI: From Zero to Your First App · Module 3: Understanding websites and files

Files, Folders and Project Order

AI tools read your project through file names. Clear names get precise edits; vague names get guesses in the wrong file. This lesson sets up the five-file project you will reuse to the capstone.

9 min reading

Objectives

Name every file in a small project so its purpose is obvious
Organize a project into index, styles, script, images and notes
Explain why duplicate and vague names break AI-assisted work
Write a README first line that states what the project is

Why this matters

Every AI editing failure has a file-name accomplice: page-final-v2-REALLY.html, style-new.css next to style.css, script.js that styles things. The tool cannot ask which file is real, so it edits the one that looks right and your fix lands in a dead copy. Five honest names remove a whole class of errors before any tool is opened.

Concepts

The standard small project has five residents:

index.html: the structure and content (lesson 10's HTML). One per page; the file a browser opens by default.
styles.css: all presentation (lesson 10's CSS). One file until the project outgrows it, which course projects never do.
app.js: all behavior (lesson 10's JavaScript). Same one-file rule.
images/: a folder for pictures, each named for its content (bakery-front.jpg, not IMG_2041.jpg).
README.md: a short text stating what the project is, how to open it and what is unfinished. Lesson M08L32 grows this into the final README.

Naming rules that survive AI collaboration: lowercase, hyphens between words, no spaces, no version words (final, v2, new), each name saying its content (order-form.html beats page2.html). Duplicates are forbidden: two files doing the same job means every future edit is a coin toss. When a name stops matching its content, rename the file the same day.

Why this matters for AI work specifically: your brief and your file list are the two context sources every coding assistant reads. A clean list ("index, styles, app, three images, README") fits in one message and lets the tool aim. A messy list eats the context window and aims nowhere.

Worked example

Bad project: index.html, index-new.html, style.css, style2.css, stuff.js, IMG_2041.jpg, notes.txt, notes-old.txt. Asked to "fix the menu styling", the tool edits style2.css while the page loads style.css; nothing changes and the next message argues about it. Fixed project: index.html, styles.css, app.js, images/menu-board.jpg, README.md. Same request now has exactly one target and the fix lands first try.

Expected result: your own project renamed into the five-resident shape, every name saying its content, duplicates deleted or merged.

The common wrong move

Version words in file names instead of snapshots (lesson M06L22 covers the snapshot habit that replaces them). final-v3-USE-THIS.html is a confession that no one knows which file is real. Snapshots know; file names should not version.

Lab and next step

Lab A08 inventories a messy project folder and rewrites it into the standard shape with a rename table. Next, lesson 12 teaches the last M03 skill: reading a browser error and finding the failing file and line.

Quick check

An optional 4-question self-check. Answers never leave your device, are not stored, and never count toward any assessment.

Lesson feedback

No published feedback yet.

Exercise

Inventory your own project files (or the course sample). Rewrite every name into the standard shape in a rename table (old name, new name, reason), and write the README first line.

Pass criteria

Rename table covering every file with reasons tied to the naming rules; no version words or duplicates remain; README first line states what the project is.