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 foldernameto open foldersmv 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
- Press
Cmd + Space - Type "Terminal"
- Press Enter
Option 2: Applications folder
- Applications → Utilities → Terminal
In VS Code: Press Cmd + `
On Windows
Option 1: Search
- Press
Windows key - Type "cmd" or "Command Prompt"
- Press Enter
Option 2: Git Bash (recommended if you installed Git)
- Press
Windows key - Type "Git Bash"
- 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.
Navigating Paths
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
| Symbol | Meaning |
|---|---|
~ | 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 + Cin newer versions) - Paste: Right-click → Paste (or
Ctrl + Vin newer versions)
Git Bash / VS Code Terminal:
- Copy:
Ctrl + InsertorCtrl + Shift + C - Paste:
Shift + InsertorCtrl + 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
clearor pressCmd + K - Windows: Type
clsor pressCtrl + L
Commands You'll Use with npm
These are specific to Node.js projects (like ours):
| Command | What It Does |
|---|---|
npm install | Installs all project dependencies |
npm run dev | Starts development server |
npm run build | Builds project for production |
npm run lint | Checks 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:
-
Open your terminal
-
Find out where you are:
pwd -
Go to your home directory:
cd ~ -
Create a test folder:
mkdir terminal-practice -
Go into that folder:
cd terminal-practice -
Confirm you're there:
pwd -
Go back to home:
cd ~ -
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":
- Check where you are:
pwd - List what's there:
ls - 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
Navigation
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?
-
The Command Line Crash Course: https://learnpythonthehardway.org/book/appendixa.html
- When to use: Comprehensive command line tutorial
-
MDN: Command Line Crash Course: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line
- When to use: Web development focused command line tutorial
-
Git Bash Commands Reference: https://www.atlassian.com/git/tutorials/git-bash
- When to use: If you're using Git Bash on Windows
For now, knowing the basics above is plenty. You'll learn more commands naturally as you work!