Module -05: Terminal & Command Line — Design & Code Foundations

01

What is the Terminal?

Before graphical interfaces, computers only had text. The terminal is that text interface — still essential for developers because it's faster, scriptable, and universal.

user@computer
~ $ ls
Documents  Downloads  Desktop  Pictures
~ $ cd Documents
~/Documents $ _|

You type commands, computer responds with text

A Text-Based Computer Interface

The terminal is a text interface to your computer. Instead of clicking icons, you type commands. It's faster for many tasks, and some things (like npm, git) require it.

Core concept: Terminal = typing commands instead of clicking icons

⊞

macOS

Terminal, iTerm2, Warp

⊞

Windows

PowerShell, Command Prompt, Windows Terminal

⊞

Linux

GNOME Terminal, Konsole, Bash

VS

VS Code (All platforms)

Integrated terminal — same experience everywhere

Every OS Has One

Mac, Windows, Linux, and Chromebooks all have terminal applications. VS Code includes a built-in terminal that works identically across all platforms — use this for consistency.

Best choice: VS Code's integrated terminal = same everywhere

TERMINAL

The window/app that displays text

Examples: Terminal.app, iTerm2, Windows Terminal

SHELL

The program that interprets commands

Examples: Bash, Zsh, PowerShell, Fish

Analogy: Terminal is the TV, Shell is the channel. Same TV can show different channels.

Terminal vs Shell

The terminal is the application (the window). The shell is the program running inside it that interprets your commands. Mac defaults to Zsh, Windows to PowerShell. Most basic commands work in all shells.

Distinction: Terminal = window. Shell = interpreter inside it.

Speed: Type faster than click through menus

Automation: Script repetitive tasks

Required: npm, git, and many tools are CLI-only

Remote: Server management is all terminal

Universal: Same commands work everywhere

Why Use Command Line?

You don't need to become a terminal expert. But basic literacy lets you run npm commands, use git, and follow tutorials that assume command line knowledge.

Minimum goal: Basic CLI literacy unlocks modern dev tools

02

Navigation Commands

The most essential skill: knowing where you are and moving between folders. These commands work on Mac, Linux, and (mostly) Windows.

$ pwd
/Users/yourname/Documents/project

WHAT IT MEANS

/Users/yourname/Documents/project
= Home → Documents → project folder

Windows: Use cd alone (no arguments) to see current directory

pwd — Print Working Directory

pwd (print working directory) shows your current location as a path. Paths use / on Mac/Linux and \ on Windows. Always know where you are before running commands.

First command to learn: pwd = "Where am I right now?"

$ ls
index.html  styles.css  script.js  images/
$ ls -la
drwxr-xr-x  index.html
drwxr-xr-x  styles.css
drwxr-xr-x  .gitignore  ← hidden file

Windows: Use dir instead of ls

ls — List Contents

ls lists files and folders. Add -la to see hidden files (starting with dot) and details. Folders show with / at the end or different colors.

Essential: ls = "What files are here?" ls -la = show hidden too

$ cd Documents       # go into Documents
$ cd ..              # go up one level
$ cd ~               # go to home folder
$ cd /               # go to root
$ cd -               # go to previous location
$ cd ~/Documents/project # full path

cd — Change Directory

cd (change directory) moves you between folders. .. means parent folder. ~ means home folder. Use Tab to autocomplete folder names.

Most used command: cd folder = go in. cd .. = go up. Tab = autocomplete.

ABSOLUTE PATH

/Users/yourname/Documents/project

Full path from root. Works from anywhere.

RELATIVE PATH

./images/hero.png

Relative to current location. ./ = here, ../ = parent

Tip: Drag a folder into terminal to paste its path

Understanding Paths

Absolute paths start from root (/) and work from anywhere. Relative paths start from your current location. ./ means "here", ../ means "parent folder".

Key concept: Starts with / = absolute. Starts with ./ or ../ = relative.

03

Common Commands

Beyond navigation, these commands handle files, run programs, and get help. You'll use these daily when working with web projects.

# Create
mkdir new-folder       # make directory
touch file.txt         # create empty file

# Copy & Move
cp file.txt copy.txt   # copy file
mv file.txt folder/    # move file
mv old.txt new.txt     # rename file

# Delete (careful!)
rm file.txt            # delete file
rm -rf folder/         # delete folder + contents

Creating, Copying, Moving, Deleting

mkdir makes folders, touch creates files, cp copies, mv moves (or renames), rm deletes. Warning: rm has no trash — deleted files are gone forever.

Danger zone: rm has no undo. Be careful with rm -rf.

npm init               # create package.json
npm install            # install dependencies
npm install lodash     # add a package
npm run dev           # run 'dev' script
npm run build         # run 'build' script

package.json defines what scripts exist. Check "scripts" section to see available commands.

Node Package Manager

npm (Node Package Manager) installs JavaScript libraries and runs project scripts. npm install reads package.json and downloads everything. npm run [script] runs predefined commands.

Web dev essential: npm install = get dependencies. npm run dev = start local server.

git clone [url]       # download repository
git status            # see what's changed
git add .             # stage all changes
git commit -m "msg"   # save snapshot
git push              # upload to remote
git pull              # download latest

VS Code has built-in git UI. Use that if CLI feels overwhelming at first.

Version Control Commands

git tracks file changes and syncs with GitHub/GitLab. The basic workflow: git add (stage changes) → git commit (save snapshot) → git push (upload).

Version control: git status = check what's changed. Commit often.

command --help   # show help

man command      # manual page (Mac/Linux)

tldr command     # simplified examples

Best resource: Ask AI "How do I [task] in terminal?" — get exact commands with explanations.

How to Learn More

Every command has built-in help via --help flag. man shows detailed manuals. Or just ask AI — it's excellent at explaining terminal commands with examples.

Learning strategy: command --help for quick reference. AI for explanations.

04

Practical Workflow

Real scenarios you'll encounter: opening projects, running servers, and handling common situations.

# Clone from GitHub
git clone https://github.com/user/repo.git
cd repo

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser: http://localhost:3000

Starting a New Project

Most projects follow this pattern: clone the repo, install dependencies with npm, run the dev server. The project's README usually explains the exact commands.

Common pattern: clone → npm install → npm run dev = standard workflow

code .

Opens current folder in VS Code

code ~/Documents/project

Opens specific folder

code index.html

Opens specific file

Setup: In VS Code, press Cmd+Shift+P → "Shell Command: Install 'code' command"

Opening Folders in VS Code

code . opens the current folder in VS Code. The dot means "here". This is faster than File → Open Folder. Must be set up first via VS Code's command palette.

Time saver: code . = open this folder in VS Code

# Stop current command
Ctrl + C   # Cancel/stop (works everywhere)

# If something's stuck on a port
lsof -i :3000   # find what's using port 3000
kill -9 [PID]    # force stop that process

# Or just restart terminal

Ctrl+C is your friend. Use it to stop running servers, cancel commands, or escape situations.

Stopping Running Processes

Ctrl+C stops almost anything. If a dev server won't start because "port already in use", find the process with lsof and kill it, or just restart your terminal.

Get out of trouble: Ctrl+C = stop whatever's running. Universal escape.

clear           # clear screen (or Cmd+K)
history         # show command history
↑ / ↓           # navigate previous commands
Ctrl + R        # search command history
!!              # repeat last command
sudo !!         # repeat last as admin

Terminal Housekeeping

clear cleans your screen. Arrow keys navigate command history. Ctrl+R lets you search previous commands. These small efficiencies add up.

Efficiency: Arrow up = repeat previous commands. Huge time saver.

Terminal & Command Line

Core Concepts

What is the Terminal?

Navigation Commands

Common Commands

Practical Workflow

Key Takeaways