Command Line Basics

The command line (also called terminal, shell, or console) is a text-based interface where you type commands instead of clicking buttons. It might seem intimidating at first, but it's actually quite simple once you learn the basics!

What is the Command Line?

The command line is a way to interact with your computer using text commands. Instead of:

  • Opening folders by double-clicking
  • Moving files by dragging

You type commands like:

  • cd foldername to open folders
  • mv file.txt newlocation/ to move files

Why Use It?

For web development, the command line is essential because:

  • Development servers run from the command line (npm run dev)
  • Git commands are typed in the terminal
  • Package installation happens via command line (npm install)
  • Build processes are triggered from terminal

It's faster and more powerful than clicking around once you get comfortable!

Opening Your Terminal

On Mac

Option 1: Spotlight Search

  1. Press Cmd + Space
  2. Type "Terminal"
  3. Press Enter

Option 2: Applications folder

  • Applications → Utilities → Terminal

In VS Code: Press Cmd + `

On Windows

Option 1: Search

  1. Press Windows key
  2. Type "cmd" or "Command Prompt"
  3. Press Enter

Option 2: Git Bash (recommended if you installed Git)

  1. Press Windows key
  2. Type "Git Bash"
  3. Press Enter

In VS Code: Press Ctrl + `

Understanding the Prompt

When you open a terminal, you'll see something like:

Mac/Linux:

username@computername:~$

Windows Command Prompt:

C:\Users\YourName>

Windows Git Bash:

username@computername MINGW64 ~
$

This is called the "prompt". It's waiting for your command!

The $ or > symbol means "ready for a command".

Essential Commands

Let's learn the commands you'll use every day.

1. pwd - Print Working Directory

What it does: Shows where you currently are

Mac/Linux:

pwd
# Output: /Users/yourname

Windows (Git Bash):

pwd
# Output: /c/Users/YourName

Windows (Command Prompt):

cd
# (On Windows, 'cd' without arguments shows current directory)

2. ls - List

What it does: Lists files and folders in current directory

Mac/Linux/Git Bash:

ls
# Shows all files and folders

See more details:

ls -la
# Shows detailed list including hidden files

Windows Command Prompt:

dir
# Windows equivalent of ls

3. cd - Change Directory

What it does: Move into a different folder

Go into a folder:

cd foldername

Go back one folder:

cd ..

Go to home directory:

cd ~

Examples:

# Go into Documents folder
cd Documents

# Go into nested folders
cd Documents/projects/website

# Go back up one level
cd ..

# Go back to home
cd ~

4. mkdir - Make Directory

What it does: Creates a new folder

mkdir foldername

Example:

mkdir my-project
cd my-project
pwd
# Now you're inside my-project

5. clear - Clear Screen

What it does: Clears the terminal (for a fresh start)

Mac/Linux/Git Bash:

clear

Windows Command Prompt:

cls

Or just press Cmd + K (Mac) or Ctrl + L (Windows/Linux) in most terminals.

Absolute vs Relative Paths

Absolute path: Full path from root

cd /Users/yourname/Documents/projects

Relative path: Path from current location

cd projects
# Only works if you're already in Documents

Special Symbols

SymbolMeaning
~Home directory
.Current directory
..Parent directory (one level up)
/Root directory (Mac/Linux)
C:\Root directory (Windows)

Examples:

cd ~              # Go to home directory
cd .              # Stay in current directory (rarely used alone)
cd ..             # Go up one level
cd ../..          # Go up two levels
cd ~/Documents    # Go to Documents in home directory

Common Tasks You'll Do

Task 1: Navigate to Your Projects Folder

# Start from anywhere
cd ~

# Go to Documents
cd Documents

# Create a projects folder if you don't have one
mkdir projects

# Go into projects
cd projects

# Confirm you're in the right place
pwd

Task 2: Clone a Repository (Preview)

When you're ready to download the K12worX code:

# Navigate to where you want the code
cd ~/Documents/projects

# Clone the repository (you'll learn this in Section 02)
git clone <repository-url>

# Go into the website folder
cd k12worx-jamboree/website

# List files to see what's there
ls

Task 3: Run Development Server (Preview)

Once you have the code:

# Make sure you're in the website folder
cd ~/Documents/projects/k12worx-jamboree/website

# Install dependencies
npm install

# Start the dev server
npm run dev

Don't worry about these commands yet - you'll learn them in detail later!

Helpful Tips

1. Tab Completion

Don't type full filenames! Press Tab to autocomplete.

cd Doc<Tab>
# Autocompletes to: cd Documents/

If multiple options exist, press Tab twice to see them all.

2. Up Arrow for History

Press to see previous commands. No need to retype!

# Press ↑ to see last command
# Press ↑ again for command before that
# Press ↓ to go forward in history

3. Copy and Paste

Mac Terminal:

  • Copy: Cmd + C
  • Paste: Cmd + V

Windows Command Prompt:

  • Copy: Right-click → Copy (or Ctrl + C in newer versions)
  • Paste: Right-click → Paste (or Ctrl + V in newer versions)

Git Bash / VS Code Terminal:

  • Copy: Ctrl + Insert or Ctrl + Shift + C
  • Paste: Shift + Insert or Ctrl + Shift + V

4. Stop a Running Process

If a command is running and you want to stop it:

  • Press Ctrl + C (works on Mac and Windows)

This is different from copy! Ctrl + C in terminal means "cancel/stop".

5. Clear Terminal

For a fresh view:

  • Mac/Linux: Type clear or press Cmd + K
  • Windows: Type cls or press Ctrl + L

Commands You'll Use with npm

These are specific to Node.js projects (like ours):

CommandWhat It Does
npm installInstalls all project dependencies
npm run devStarts development server
npm run buildBuilds project for production
npm run lintChecks code quality

You don't need to memorize these now. They're documented in the project's README!

Practice Exercise

Let's practice what you learned:

  1. Open your terminal

  2. Find out where you are:

    pwd
    
  3. Go to your home directory:

    cd ~
    
  4. Create a test folder:

    mkdir terminal-practice
    
  5. Go into that folder:

    cd terminal-practice
    
  6. Confirm you're there:

    pwd
    
  7. Go back to home:

    cd ~
    
  8. Remove the test folder (optional):

    rm -rf terminal-practice
    

If you completed these steps successfully, you understand the basics! ✅

Common Mistakes

Mistake 1: Typos

# Wrong
cd Documnets

# Right
cd Documents

Use Tab completion to avoid typos!

Mistake 2: Forgetting Quotes for Spaces

# Wrong (spaces break the command)
cd My Documents

# Right (use quotes)
cd "My Documents"

# Better (avoid spaces in folder names)
cd my-documents

Mistake 3: Wrong Directory

If you get "No such file or directory":

  1. Check where you are: pwd
  2. List what's there: ls
  3. Navigate to the right place first

Mistake 4: Using Backslashes on Mac/Linux

# Wrong (Windows-style)
cd Documents\projects

# Right (Mac/Linux-style)
cd Documents/projects

Mac/Linux use /, Windows uses \ (but Git Bash uses /).

Quick Reference

pwd              # Where am I?
ls               # What's here?
cd foldername    # Go into folder
cd ..            # Go up one level
cd ~             # Go home

File Operations

mkdir foldername # Create folder
clear            # Clear screen

npm Commands (for later)

npm install      # Install dependencies
npm run dev      # Start dev server
npm run build    # Build for production

Helpful

Tab              # Autocomplete
↑ / ↓           # Command history
Ctrl + C         # Stop running process

What's Next?

You now have all the tools installed and know basic terminal commands!

Next up: Learn about the technologies we use.

Continue to Section 01: Understanding Basics →


External Resources

Want to learn more about the command line?

For now, knowing the basics above is plenty. You'll learn more commands naturally as you work!