Files, Folders & Paths

Projects are real files, not just editor tabs

Your first website lives in a folder such as studio-hq. index.html labels content, style.css styles it, app.js supplies behaviour, and README.md records project notes. The folder on disk is the project; an unsaved editor tab is not yet a file the browser or verifier can read.

A path is an address. An absolute path starts at a filesystem root or drive; a relative path starts at a current location. Illustrative absolute paths:

Windows: C:Userssamstudio-hqindex.html
Mac: /Users/sam/studio-hq/index.html

These use a fictional username; do not type sam if that is not your account. Windows commonly uses backslashes in filesystem paths, while website links use forward slashes.

Resolve one tree before using commands

studio-hq/
  index.html
  css/
    style.css
  js/
    app.js

From studio-hq, css/style.css reaches the stylesheet. From inside css, ../index.html goes to the parent then the page. . means this folder, .. means parent. A relative path's meaning changes when the working directory changes.

Website link paths resolve from the document's URL, which is not necessarily your terminal's folder. From a page at the project root, css/style.css reaches the CSS folder. A link beginning / starts at the web origin's root; a local C: path points only to your own machine and will not work for other visitors.

Spaces, case and honest filenames

Quote a filesystem path containing spaces when entering it in a shell: cd "Practice Projects". Tab completion helps locate an exact existing name. Keep web filenames consistently cased: some local filesystems are forgiving, while many deployed hosts distinguish Logo.png from logo.png.

An extension influences how tools treat a file; it is not proof of what the contents are. HTML saved as index.html.txt may open as text instead of the page you expected. Show extensions to check the actual name:

• Windows: File Explorer → View → Show → File name extensions (labels vary by version).
• Mac: Finder → Settings → Advanced → Show all filename extensions.

Do not rename a file to .html and assume it now contains valid HTML. Names and contents must agree. Avoid saving code in a rich-text format from a word processor.

Hidden is not secret

Dot-prefixed files are conventionally hidden on Unix-like systems; Windows also has separate hidden-file attributes. .env and .gitignore are ordinary text files with important roles. Hiding a name does not encrypt it or prevent a tool reading it.

A .env file often holds configuration/secrets. .gitignore tells Git what untracked paths to ignore; it does not prevent an agent or another program reading them. Keep passwords/keys out of synced notes and source. The academy's filename filter cannot recognise a credential pasted into an otherwise allowed README.md.

Guided navigation without deleting anything

Create a disposable path-practice folder in your workspace with a css child and a notes.md at the root, using the editor if you have not learned shell commands yet. Locate the root and child in Explorer. Write three predictions in your notes: what . means at the root, where css/ goes from the root and where ../notes.md goes from the child.

Use the terminal lesson's read-only location/list commands to check those predictions. Open the file in the editor from the actual folder, save a change and confirm it remains after reopening. No deletion, permissions change or elevated access is needed.

Before workspace sync

Locate your studio-hq directory, show the actual README.md filename and explain one relative path from it. Select only the intended project, not your home folder or drive. If a browser link or verifier cannot find a file, inspect current location, spelling/case and whether the file was saved before guessing at a fix.