# The terminal The black window developers do their work in. On a Mac and on Windows, from pwd to pipes. Multimedia & Creative Technology · 0.0 General · Self study · version 1.0.0 · 2026-09-20 Tags: terminal Slides: Speaker notes: ## Agenda 1. Why type: What a window full of text buys you 2. Opening it: macOS, Windows, VS Code 3. Walking around: Paths, pwd, ls, cd 4. Files: Read, make, move, delete 5. Tooling: Flags, wildcards, pipes, keys 6. For real: Windows, PATH, sudo, your own setup ## Self study: How to work through this *60 minutes, Solo* Count on an hour. The shell in this deck is fake, so nothing you type can break anything. Everything works the same in your real terminal. 1. Type every example in the playground yourself, change something and watch what happens 2. Three sets of drills, one after each chapter. They are done when every dot is green 3. Four quizzes along the way: answer first, then read the explanation 4. The cheat sheet at the end is reference, no need to memorise it ## 1. Why type *A window without buttons, and still faster than Finder.* **You can already click.** A terminal is a text window. You type a command, the computer answers in text. That is all there is to it. ### What it buys you - Git, npm, composer and ffmpeg have no buttons. You type or you do not use them - A command repeats exactly. A series of mouse clicks never does - A server has no screen. Whoever logs in gets exactly this window - Error messages land here, and you can copy them and look them up - Renaming a hundred files takes one line instead of an afternoon > [!NOTE] > **Designers too** > > Converting video, batching images or publishing a static site all end up here. ### Two ways to do the same thing #### Finder and Explorer - You see where you are, you drag and you click - Hidden files are not shown by default - What you did is nowhere to be found - Every step costs a mouse move #### Terminal - You read where you are, and you type what should happen - Everything is there, including .git and .env - Your history is still there, one arrow key away - One line does something to a thousand files ### Three words people mix up *They do not mean the same thing, and knowing the difference saves confusion.* **Terminal**: The window itself. The app you open: Terminal, iTerm, Windows Terminal, the panel at the bottom of VS Code. **Shell**: The program inside that window that reads your commands and runs them. zsh, bash or PowerShell. **Prompt**: The characters the shell shows while it waits for you. Everything you type goes behind it. ### Which shell are you running *The commands in this deck are zsh and bash. Those two are close enough that you will not notice the difference this year.* | Shell | Where | For you | | --- | --- | --- | | `zsh` | Default on macOS since Catalina | Everything in this deck works | | `bash` | Default on Linux, and in Git Bash on Windows | Everything in this deck works | | `PowerShell` | Default on Windows | Its own commands, see **chapter 6** | | `cmd.exe` | The old Windows prompt | Leave it alone | > [!TIP] > On Windows you install Git Bash together with Git. That gives you the same commands as your classmate on a Mac, and as the server you will deploy to. ### What does the shell do? - A. Read and run your commands - B. Draw the window - C. Store files on your disk - D. Manage your internet connection **Answer:** A. Read and run your commands The window is the terminal, the program inside it is the shell. On a Mac that is zsh, in Git Bash that is bash. The same shell runs on the server hosting your project. ## 2. Opening it *Where the window lives on your machine, and what all those characters in the first line mean.* ### Where to find it #### macOS - **Terminal**, in Applications under Utilities - Faster: ⌘ space and type terminal - Right click a folder in Finder, New Terminal at Folder - iTerm2 and Warp are prettier windows around the same shell #### Windows - **Git Bash**, installed together with Git - Right click in a folder, Open Git Bash here - **Windows Terminal** from the Store keeps PowerShell and Git Bash in tabs - Using Git Bash keeps your commands identical to the rest of this deck ### The terminal inside VS Code *No window switching needed. VS Code has one built in, and it opens straight in your project folder.* | What | How | | --- | --- | | Open and close | Ctrl `, the key left of the 1 | | A second terminal next to it | The split icon at the top right of the panel | | Switch shells | The arrow next to the plus: zsh, bash, PowerShell | | Open VS Code from your terminal | Type `code .` in your project folder | > [!NOTE] > That dot in `code .` means "the folder I am standing in". It shows up a lot from here on. ### What that first line says *Your prompt tells you who you are and where you are. Useful, because getting lost is the most common mistake.* > [!TIP] > A `%` means zsh, a `$` means bash. Some prompts also show your git branch. A `#` means you are root and allowed to break everything. ### The dollar sign in a tutorial *Almost every guide puts one in front. That character belongs to the prompt, not to the command.* what it says ```bash $ npm install $ npm run dev ``` what you type ```bash npm install npm run dev ``` > [!WARNING] > Copy the dollar sign along and you get `command not found: $`. Same story with `%` and with `C:\>` in a Windows guide. ## 3. Walking around *Paths, and the three commands that get you anywhere.* ### Everything hangs off one tree *Your disk is one big folder with folders inside folders. A path is the route from top to bottom.* | Path | What it is | | --- | --- | | `/` | The root. On a Mac and on Linux everything starts here | | `~` | Your home, the folder with your name. Here `/Users/student` | | `C:\Users\student` | The same thing on Windows, with a drive letter in front | | `/c/Users/student` | That same folder, the way Git Bash writes it | > [!NOTE] > On a server or in Git Bash, `Downloads` is not the same as `downloads`. macOS and Windows are looser about that, so you find out the day you deploy. ### Absolute or relative *An absolute path works from anywhere. A relative path starts from where you are standing.* ```bash # absolute, always the same place cd /Users/student/Projects/portfolio cd ~/Projects/portfolio # relative, from where you are cd Projects/portfolio cd ../todo-app ``` **.**: The folder you are in right now. **..**: The folder above it. Two dots, with a space after cd. **~**: Your home. Works anywhere, also halfway through a longer path. ### Where am I and what is here *pwd and ls, the two commands you will type most often.* ```console % pwd /Users/student % ls Desktop Documents Downloads Projects % ls Projects portfolio todo-app ``` **pwd**: Print working directory. The full path of where you are. **ls**: List. What is inside this folder? **ls Projects**: The same, for another folder, without going there yourself. ### More detail with flags *A dash after the command changes what you get. With -l you get details, with -a you also get the hidden files.* ```console % ls css images index.html js README.md % ls -l total 40 drwxr-xr-x 3 student staff 128 18 sep 14:22 css drwxr-xr-x 4 student staff 192 18 sep 14:22 images -rw-r--r-- 1 student staff 175 18 sep 14:22 index.html -rw-r--r-- 1 student staff 62 18 sep 14:22 README.md % ls -la total 48 drwxr-xr-x 8 student staff 448 18 sep 14:22 . drwxr-xr-x 4 student staff 128 18 sep 14:20 .. drwxr-xr-x 12 student staff 384 18 sep 14:20 .git drwxr-xr-x 3 student staff 128 18 sep 14:22 css -rw-r--r-- 1 student staff 175 18 sep 14:22 index.html ``` ### Walking with cd *Change directory. One folder in, one folder out, or straight back home.* ```console % cd Projects % cd portfolio % pwd /Users/student/Projects/portfolio % cd .. % pwd /Users/student/Projects % cd ~/Downloads % cd % pwd /Users/student ``` **cd folder**: One folder in. **cd ..**: One folder out. Space after cd, or zsh will not know the command. **cd ~/Downloads**: One jump into a folder in your home. **cd**: Without an argument you land in your home. ### Never type a full name *Tab completes, the up arrow brings things back. That is where the speed difference lives.* | Key | What happens | | --- | --- | | Tab | Completes the file name or command you started typing | | Tab Tab | Shows every name that fits, if there are several | | ↑ | Your previous command, and again for the one before that | | Ctrl R | Search your history: type part of the command | > [!TIP] > Tab doubles as a spell checker. If it completes nothing, that folder is not here and you are somewhere else than you thought. ### Spaces in a name *A space separates arguments. So a file with a space in its name needs quotes.* ```console % cd My Documents cd: string not in pwd: My % cd "My Documents" % cd My\ Documents ``` > [!TIP] > Drag a folder from Finder or Explorer into your terminal window. The full path appears, with the spaces escaped for you. ### You are in `~/Projects/portfolio` and type `cd ..`. Where are you? - A. ~/Projects - B. ~ - C. ~/Projects/portfolio/.. - D. Nowhere, that is not a command **Answer:** A. ~/Projects Two dots means the folder above. Two levels up is cd ../.. which lands you in your home. ### Playground *A real shell on a made up computer. pwd, ls, cd and cat to get going.* ### Drills: walking around ## 4. Files *Read, make, move and delete. From here on your disk actually changes.* ### Looking without opening *Four ways to peek into a file, from short to long.* | Command | What you get | | --- | --- | | `cat README.md` | The whole file in your window | | `head -n 20 log.txt` | The first twenty lines | | `tail -n 20 log.txt` | The last twenty lines, handy for log files | | `less log.txt` | Page through a long file. Out with q | > [!WARNING] > `cat` on an image or a zip dumps binary junk in your window and leaves your prompt confused. Type `reset` then. ### Making things *A folder with mkdir, an empty file with touch.* ```console % mkdir docs % touch docs/install.md % mkdir -p src/components/buttons % ls css docs images index.html js README.md src ``` **mkdir**: Make directory. Creates one folder. **touch**: Creates an empty file, or sets the date of an existing one to now. **mkdir -p**: Also creates every folder in between that does not exist yet. ### Copying and moving *cp copies, mv moves. Renaming is moving to the same folder under another name.* ```console % cp README.md docs/ % cp -r images backup-images % mv js/main.js js/app.js % mv notes.md docs/notes.md ``` > [!WARNING] > If the target name already exists, `cp` overwrites it without asking. `cp -i` does ask. ### Deleting *rm removes. There is no trash, no Cmd+Z and no confirmation.* ```console % rm old-version.html % rm docs rm: docs: is a directory % rm -r docs % rm -i *.log remove error.log? y ``` > [!WARNING] > **Gone is gone** > > What rm deletes does not go to the trash. Only a backup or a push to GitHub saves you. > [!TIP] > **Look first** > > Run `ls *.log` before you type `rm *.log`. Then you see what is about to go. ### Back to the graphical side *You do not have to choose. From your terminal a folder or a project opens in two characters.* | Command | Where | What it does | | --- | --- | --- | | `open .` | macOS | Opens this folder in Finder | | `open index.html` | macOS | Opens the file in your browser or default app | | `explorer .` | Windows | Opens this folder in Explorer | | `start .` | Windows | The same, in cmd and PowerShell | | `code .` | Anywhere | Opens this folder as a project in VS Code | ### What does `rm -r exercises` do? - A. The folder and everything in it is gone, for good - B. The folder goes to the trash - C. Only the files go, the folder stays - D. Nothing, rm only works on files **Answer:** A. The folder and everything in it is gone, for good The -r flag means recursive: the folder and everything inside it. No trash, no confirmation. Which is why you run ls first. ### Drills: files ## 5. Tooling *Flags, wildcards, pipes and a handful of keys. This is where typing beats clicking.* ### Anatomy of a command *Every command reads the same: what you want, how you want it, and on what.* > [!NOTE] > Short flags stack: `ls -la` is the same as `ls -l -a`. Long flags get two dashes, like `npm install --save-dev`. ### Asking the command itself *Nothing here needs memorising. Every program explains itself.* ```console % ls --help Usage: ls [OPTION]... [FILE]... -a, --all do not ignore entries starting with . -l use a long listing format % man ls the full manual, page with the arrows, out with q ``` > [!TIP] > `man` is thorough and dry. `tldr` (a separate install) gives you five examples you can use right away. ### Wildcards *A star stands for any run of characters. The shell fills it in before the command runs.* ```console % ls *.html index.html about.html % ls images/hero.* images/hero.jpg images/hero.webp % rm *.log % cp *.md docs/ ``` > [!WARNING] > Never put a space between the name and the star. `rm * .log` deletes everything in the folder and then complains that .log does not exist. ### Sending output somewhere else *Every command spits out text. That text does not have to go to your screen.* ```console % ls > contents.txt % echo "todo: deploy" >> README.md % cat README.md | grep todo todo: write the install steps % ls images | wc -l 2 ``` **>**: Writes the output into a file. Whatever was in there is gone. **>>**: Sticks the output at the end of the file. **|**: Hands the output to the next command. ### Searching in files and in folders *grep searches text inside files, find searches files inside folders.* ```console % grep todo README.md todo: write the install steps % grep -n -i TODO README.md 5:todo: write the install steps % find . -name "*.css" ./css/style.css % find . -type d -name "node_modules" nothing found ``` > [!NOTE] > These two save you in a project of a hundred files. Where was that colour code again? `grep -r "#ff645a" .` searches everything below this folder. ### Keys you need every day *These eight do more for your speed than any extra command.* | Key | What it does | | --- | --- | | Ctrl C | Stops whatever is running. The emergency brake, works almost always | | Ctrl L | Clears your screen, same as `clear` | | Ctrl A | Cursor to the start of the line | | Ctrl E | Cursor to the end of the line | | Ctrl U | Wipes the line you were typing | | Ctrl D | Closes the shell or the program you are inside | | Ctrl R | Searches your history while you type | ### When you are stuck *Your prompt is gone and you are typing into nothing. Something is still running, or an editor is open.* | What you see | What it is | Way out | | --- | --- | --- | | A dev server that keeps logging | npm run dev is still running | Ctrl C | | A screen with `:` at the bottom | less or man | q | | Text with `^X Exit` at the bottom | nano | Ctrl X | | A screen where typing does nothing | vim | First Esc, then `:q!` and enter | | A prompt showing only `>` | A quote you never closed | Ctrl C | ### Your npm run dev is running and you want your prompt back. What do you do? - A. Ctrl+C - B. Close the window - C. Keep hitting enter - D. Type exit **Answer:** A. Ctrl+C Ctrl+C stops the running program and hands you back the prompt. Closing the window works too, but the port sometimes stays busy and greets you with an error next time. ## 6. For real *Windows, PATH, permissions and your own setup.* ### What you will type this year - `git clone`, `git add`, `git commit`, `git push` in every course with code - `npm install` and `npm run dev` as soon as you touch a framework - `composer install` and `php artisan serve` in web development - `ffmpeg -i film.mov -crf 26 film.mp4` to get video down to size - `ssh student@server.be` once you work on a server > [!NOTE] > **Always in the right folder** > > Those commands act on the folder you are standing in. An `npm install` in your home makes a mess instead of a project. ### command not found *The most common error of your first year. It always means the same thing.* ```console % npm run dev zsh: command not found: npm % which npm npm not found % which node /usr/local/bin/node ``` - The program is not installed, or not in your PATH - PATH is the list of folders your shell searches for programs - Just installed it? Close your terminal and open a new one, otherwise it still has the old PATH - Typo? `ngm` does not exist, and the shell does not guess along ### sudo and administrator *Some commands touch system folders. That takes permissions, and you do not hand those out lightly.* - macOS and Linux: `sudo` in front of the command, then your password. Nothing shows while you type, that is normal - Windows: right click Terminal, Run as administrator - A tutorial that sticks sudo in front of everything is a bad tutorial > [!WARNING] > **Think before you sudo** > > `sudo` switches off every guard rail. A command you copied from a website and do not understand definitely does not belong behind it. Same for npm: a `sudo npm install -g` gives you permission trouble in your own projects later. ### The same in PowerShell *Open PowerShell anyway and you get other names. The ideas hold up.* | bash and zsh | PowerShell | What it does | | --- | --- | --- | | `ls` | `dir` or `Get-ChildItem` | Shows what is in the folder | | `pwd` | `Get-Location` | Where am I | | `cd` | `cd` or `Set-Location` | Change folder | | `cat` | `type` or `Get-Content` | Shows a file | | `cp` | `Copy-Item` | Copies | | `rm` | `Remove-Item` | Deletes | ### Windows under the hood *Three differences you never run into on a Mac.* #### Paths - Windows writes `C:\Users\student\Documents` - Git Bash writes that same folder as `/c/Users/student/Documents` - A backslash means "escape" in bash. In paths you use `/` - Pasting a Windows path into Git Bash means flipping the slashes #### Shells on your machine - Git Bash: everything in this deck works - PowerShell: its own commands, fine for Windows work - WSL: a real Linux on your Windows, what most developers end up running - cmd.exe: only for old scripts ### Your own setup *Your shell reads one file on startup. Whatever you put in there, you have every session.* ```bash # ~/.zshrc on a Mac, ~/.bashrc in Git Bash alias gs="git status" alias gp="git push" alias ..="cd .." alias serve="php artisan serve" export EDITOR=code ``` > [!TIP] > **Active right away** > > After editing: `source ~/.zshrc`, or open a new window. > [!NOTE] > **Going further** > > Oh My Zsh gives you autocompletion and a prompt that shows your git branch. Starship does the same in any shell. ### You are on Windows and a guide says ls -la. What do you do? - A. Open Git Bash and type the command - B. Type ls -la in PowerShell - C. Skip the command - D. Install Linux **Answer:** A. Open Git Bash and type the command Git Bash gives you the same bash as everyone else, so every guide is correct. PowerShell knows ls but not -la: there it is Get-ChildItem -Force. ## 7. Practice *Eight drills and an empty playground.* ### Drills: everything mixed *From here on anything from this deck is fair game.* ### Playground *Tab completes a name, the up arrow brings your previous command back.* ### Terminal Velocity *A game from our own programme where you navigate folders with these commands.* The same commands as above, getting harder, with a clock running. Ten minutes of play and `cd ..` lives in your fingers. - Runs in your browser, nothing to install - Your time belongs in your portfolio - Works on a tablet too [mctantwerp.github.io/codeplay/spel/terminal-velocity](https://mctantwerp.github.io/codeplay/spel/terminal-velocity) ### Cheat sheet *Everything you need on a normal day.* #### Walking and looking | Command | Does | | --- | --- | | `pwd` | Where am I | | `ls -la` | Everything, with details | | `cd folder` | In | | `cd ..` | Out | | `cd ~` | To your home | | `cat file` | Show the contents | #### Changing and filtering | Command | Does | | --- | --- | | `mkdir -p a/b` | Make folders | | `touch f.txt` | Empty file | | `cp a b` | Copy | | `mv a b` | Move or rename | | `rm -r folder` | Gone, for good | | `grep word f` | Search inside a file | ### Extra - **[explainshell.com](https://explainshell.com)**: Paste a command and it explains every piece and every flag separately. - **[tldr.sh](https://tldr.sh)**: Man pages, but five examples instead of twenty screens of text. - **[Oh My Zsh](https://ohmyz.sh)**: Themes, autocompletion and a prompt that shows your git branch. - **[The Missing Semester](https://missing.csail.mit.edu)**: The MIT course on shell, scripting and git. Free, with video. ## Glossary - **zsh**: The default shell on macOS since Catalina. You recognise it by the % at the end of your prompt. (slide 9) - **bash**: The default shell on Linux and in Git Bash. Its prompt ends in a $. For what you type this year, it does the same as zsh. (slide 9) - **PowerShell**: The default shell on Windows, with its own names for the commands: Get-ChildItem instead of ls, Remove-Item instead of rm. An ls -la from a guide does not work there. (slide 48) - **Git Bash**: Bash for Windows, installed together with Git. You type the same commands as on a Mac or a server, and your C drive is called /c/ there. (slide 49) - **/**: The root of your disk on a Mac and on Linux. Everything starts here. In Git Bash you separate folders with / too, never with a backslash. (slide 17) - **$**: The end of the prompt in bash. A guide puts it in front of every command, but you do not type it. Copy it along and you get command not found: $. (slide 15) - **Flag**: An option behind the command, usually a dash and a letter. Short flags stack (ls -la is ls -l -a), long flags get two dashes: --save-dev. (slide 36) - **ls -la**: Lists everything in the folder with details, including the hidden files that start with a dot, like .git and .env. Without -a you never see those. (slide 20) - **Tab**: Completes a file name or command. Tab twice shows every name that fits. If it completes nothing, that name is not here. (slide 22) - **Escaping**: Taking away the special meaning of a character. A space separates arguments, so you write My\\ Documents with a backslash, or you put the whole name in quotes. (slide 23) - **cat**: Shows a whole file in your window. For a long file you use less (out with q), for the start or the end head and tail. (slide 28) - **cp**: Copies: cp source target. Copying a folder takes -r. If the target already exists, cp overwrites it without asking, unless you add -i. (slide 30) - **mv**: Moves a file or folder. Renaming is mv too: moving to the same folder under another name. (slide 30) - **rm**: Deletes, for good. No trash, no confirmation. Deleting a folder takes rm -r, so look first with ls at what is about to go. (slide 31) - **code .**: Opens the folder you are in as a project in VS Code. open . shows that same folder in Finder, explorer . in Explorer. (slide 32) - **man**: The full manual of a command, like man ls. Page with the arrows, out with q. Shorter is ls --help, or tldr for a few examples. (slide 37) - **Wildcard**: The star stands for any run of characters: ls \*.html lists every html file. The shell fills it in before the command runs, so never a space before the star. (slide 38) - **grep**: Searches text inside files: grep todo README.md. With -r it searches everything below a folder, with -i capitals do not matter. (slide 40) - **find**: Searches files inside folders, from a starting folder. find . -name "\*.css" lists every css file below the folder you are in. (slide 40) - **Ctrl+C**: Stops whatever is running and hands you back the prompt. The emergency brake, for example for an npm run dev that keeps logging. (slide 41) - **vim**: An editor inside the terminal where typing seems to do nothing. You get out with Esc, then :q! and Enter. (slide 42) - **command not found**: The shell cannot find the program: it is not installed or not in your PATH. Or you made a typo, because the shell does not guess along. (slide 46) - **PATH**: The list of folders your shell searches for programs. Just installed something? Open a new terminal, otherwise it still has the old PATH. (slide 46) - **sudo**: Runs a command with administrator rights, after your password. It switches off every guard rail, so never for a command you do not understand and not for npm install -g. (slide 47) - **.zshrc**: The file in your home that zsh reads on every start, with your aliases for example: alias gs="git status". In Git Bash it is called .bashrc, and after a change you run source ~/.zshrc. (slide 50) ## Links and sources ### In the deck - [mctantwerp.github.io/codeplay/spel/terminal-velocity](https://mctantwerp.github.io/codeplay/spel/terminal-velocity) (slide 55) - [explainshell.com](https://explainshell.com) (slide 57) - [tldr.sh](https://tldr.sh) (slide 57) - [Oh My Zsh](https://ohmyz.sh) (slide 57) - [The Missing Semester](https://missing.csail.mit.edu) (slide 57)