The most detailed free FDE + DevOps library: 140+ lessons, 70+ labs and 80 long-form articles, in English and Turkish. Start learning →

TürkçeSearch

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

Inventory the Messy Folder

25 min hands-on · Core

Browser only. No account anywhere; you reorganize file names on paper with a rename table.

Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.

Objectives

  • Inventory a messy eight-file project without opening a tool
  • Rewrite it into the standard five-resident shape
  • Justify every rename with a naming-rule reason

  1. Step 1

    Inventory the mess

    The folder holds: index.html, index-new.html, style.css, style2.css, stuff.js, IMG_2041.jpg, notes.txt, notes-old.txt. For each file write what it probably does and what is wrong with its name.

    folder-listing.mdmarkdown
    MESSY FOLDER (synthetic practice material)
---
index.html / index-new.html / style.css / style2.css / stuff.js / IMG_2041.jpg / notes.txt / notes-old.txt

Assumed facts: the page loads index.html + style.css + stuff.js. index-new.html is an abandoned redesign. style2.css is an unlinked experiment. IMG_2041.jpg is the menu board photo. notes-old.txt duplicates notes.txt.

  2. Step 2

    Write the rename table

    Produce old name, new name and reason for every file: merge or delete duplicates, lowercase hyphenated names, content-saying names, images folder, README from notes.

  3. Step 3

    State the AI context

    Write the one-paragraph project summary you would paste into a fresh AI chat (files, purpose, what is unfinished), using only the new names.

How to confirm it worked

  • Every file covered with old, new and rule-based reason
  • No version words or duplicates remain in the new list
  • Images live under images/ with a content name
  • Fresh-chat summary uses only new names and states what is unfinished

Workspace

0/2 checks passing · Coverage only, not a quality score.

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

Two index files means one dead copy. The page loads index.html, so index-new.html is delete-or-merge, never keep-both.

Stage 2: a direction

stuff.js says nothing. If it holds form behavior, app.js says it. IMG_2041.jpg becomes images/menu-board.jpg.

Stage 3: almost the answer

notes.txt becomes README.md with a first line stating what the project is. notes-old.txt goes.

Worked solution (open after an honest attempt)

Worked solution. Keep index.html. Delete or merge index-new.html after copying any surviving text. Keep style.css, delete style2.css (unlinked experiment). Rename stuff.js to app.js. Move IMG_2041.jpg to images/menu-board.jpg. Merge notes into README.md starting 'Neighborhood bakery one-page site: menu, hours, phone-order form.' Delete notes-old.txt. Final list: index.html, styles.css (renamed from style.css for the course convention), app.js, images/menu-board.jpg, README.md. Fresh-chat summary: 'Neighborhood bakery one-page site with index, styles, app, one image and README. Unfinished: order confirmation echo.'