Lesson 2: What a Real Project Is: Files and Folders

Why Files and Folders Matter Now

In Level 1 you saw why a chat-built app hits a wall: the chat has limited context, no memory and no history, and nothing is online. The fix starts here. A real project is just a folder on your computer that holds every file your app needs. You, your editor and your coding agent all work on that same folder.

Think of a project folder as a ring binder. Each file is one page with a single job, and subfolders are the dividers that group related pages. When your app lived in a chat, it was one long page of text. Now each part gets its own page.

Task 1: Turn On File Extensions and Hidden Files

A file extension is the dot and the letters at the end of a file name, such as .html in index.html. It tells you, your computer and your coding agent what kind of file it is. Windows and macOS often hide extensions, so index.html and index.html.txt can look the same. That causes real bugs.

Hidden files have names that start with a dot, such as .gitignore or .env. You will work with these in later levels, so you need to be able to see them.

DO this now on your computer:

Windows 11 (File Explorer)

1. Open File Explorer from the taskbar.
2. Select View > Show > File name extensions.
3. Select View > Show > Hidden items.

macOS (Finder)

1. Open Finder.
2. Choose Finder > Settings, then click Advanced.
3. Tick Show all filename extensions.
4. In any Finder window, press Command + Shift + . (period) to show hidden files. Press it again to hide them. Hidden items appear dimmed.

Linux (GNOME Files)

• Press Ctrl + H to show or hide hidden files.

These two settings are separate, so check that both are on. Menu names can change between operating system updates (these were checked in October 2026). If yours look different, search your operating system's official help for "show file extensions".

Task 2: Create Your Project Folder in a Sensible Place

Pick one home for all your projects so you always know where to look.

1. Open your user folder (on Windows, C:\Users\YourName; on macOS, the folder with your name and a house icon).
2. Create a new folder called Projects.
3. Inside Projects, create a folder for your app, for example space-snake.

Follow these naming rules for folders and files:

• Use lowercase letters.
• Use hyphens instead of spaces (space-snake, not Space Snake).
• Avoid special characters such as &, # or !.
• Keep names short and descriptive.

Spaces and symbols often break tools you will use later. Also avoid putting projects inside Downloads or on a USB stick. If your Desktop or Documents folder is synced by a cloud service such as OneDrive or iCloud, a folder outside it is usually safer, because syncing many small project files can cause conflicts.

Task 3: Understand File Paths

A file path is the full address of a file. It lists every folder you pass through to reach it, like a street address that goes from country to house number.

• Windows: C:\Users\Sam\Projects\space-snake\index.html
• macOS: /Users/sam/Projects/space-snake/index.html

Read it left to right: drive or top level, then user folder, then Projects, then the project, then the file. Windows separates folders with a backslash \. macOS and Linux use a forward slash /.

DO this to see your project's path:

1. Windows: open the project folder in File Explorer and click the address bar at the top. The full path appears as text.
2. macOS: in Finder, choose View > Show Path Bar. The path appears at the bottom of the window.

Write this path down. Your coding agent will need to know exactly which folder to work in.

Task 4: Recognise the Common File Types

A simple web app or browser game usually contains these files:

A small project might look like this:

space-snake/
  index.html
  styles.css
  game.js
  levels.json
  README.md
  images/
    snake.png

All of these are plain text files. You can open any of them in a basic text editor and read them. That is what lets a coding agent read and change them one at a time, instead of rewriting one giant chat answer.

DO this: look at the last app you built in a chat. Find where the HTML, CSS and JavaScript parts are. In Level 5 you will split them into files like the ones above.

Key Takeaways

• A real project is one folder holding all of your app's files, with subfolders to group them.
• Turn on file name extensions and hidden files so nothing is disguised or invisible.
• Keep projects in one predictable place, such as Projects in your user folder, and use lowercase names with hyphens and no spaces.
• A file path is a file's full address. Windows uses \ and macOS and Linux use /.
• .html is structure, .css is style, .js is behaviour, .json is structured data and settings, and .md is readable notes.