Navigating & Scaffolding

Scaffold means create a starting structure

A scaffold is the initial set of folders/files for a project. The terminal acts on its current directory, so first check where you are. Your activity's studio-cli must live inside the intended studio-hq, not inside node_modules or your home folder by accident.

Use pwd on Mac or Get-Location in PowerShell, then list current items. If studio-hq already exists, navigate into it; do not overwrite it. Use quotes for paths with spaces and Tab completion to confirm existing names.

Mac: create parents before files

From studio-hq, run separately:

mkdir -p studio-cli/css studio-cli/js
touch studio-cli/index.html studio-cli/css/style.css studio-cli/js/app.js
ls -R studio-cli

mkdir -p creates missing parent directories and accepts an existing directory. touch creates an empty file if absent but updates timestamps if it exists; it is not a command for clearing a file. Do not assume an existing project is disposable just because the command succeeds.

Windows: use explicit types and paths

From studio-hq in PowerShell:

New-Item -ItemType Directory -Force -Path studio-cli/css, studio-cli/js
New-Item -ItemType File -Path studio-cli/index.html, studio-cli/css/style.css, studio-cli/js/app.js
tree /f studio-cli

New-Item explicitly chooses a directory or a file; ni is its common alias. The comma separates paths for PowerShell. The file command deliberately omits Force so an existing file is not casually overwritten. If a file already exists, inspect it before deciding what to change. mkdir css js is not a portable PowerShell equivalent of the Mac command.

Compare the outcome, not just the command text

Expected structure:

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

Your listing format may differ, but all three files must appear at the right levels. A folder listing without files is not enough. A stylesheet at studio-cli/style.css is not the required css/style.css, even if its name is right.

Add text without accidental truncation

The activity asks for a short distinct line in each file. Mac's > redirection replaces a file's contents; >> appends. PowerShell Set-Content replaces contents and Add-Content appends. Use these only on the new practice files whose content you intend to replace.

echo '<!-- practice page -->' > studio-cli/index.html

'<!-- practice page -->' | Set-Content studio-cli/index.html

These show the same intention with platform-specific syntax. Use your own harmless messages for the CSS/JS files. Quote the text so angle brackets or spaces are not interpreted as shell syntax, and check the file in the editor afterward.

Guided location exercise

From studio-hq, predict where studio-cli/css/style.css points. Move into studio-cli and explain why the same relative path would now refer to a different nested location. Return to studio-hq before running the activity's listing. The working directory is part of every command's meaning.

Use up-arrow/Tab to reduce typing but review the recalled command. If a file command reports a missing parent, inspect the folder tree first. Do not respond by running an unrelated command as administrator.

Assessment readiness

Run your recursive listing from the correct parent and compare it with the expected tree. Show index.html, css/style.css and js/app.js, then paste your actual complete output for activity 0.6. Do not paste this illustrative tree instead of doing the work. No deletion or destructive cleanup is required; a correct, inspected scaffold is the goal.