Python Full Stack Web Developer Course

Week 1, Monday: Basic Command Line Interface (CLI) Navigation

The Power of Text-Based Computing

Welcome to the world of command line interfaces! While graphical user interfaces (GUIs) make computers accessible, the command line interface (CLI) remains one of the most powerful tools in a developer's arsenal. Understanding how to navigate and use the CLI is an essential skill for any web developer.

Think of the command line as having a direct conversation with your computer. Instead of pointing and clicking through menus and icons, you express your intentions through precise text commands. This direct communication channel offers speed, flexibility, and automation capabilities that GUIs simply cannot match.

In this session, we'll explore the fundamental commands and concepts that will empower you to navigate your system, manage files, and execute operations efficiently through the command line.

Why Learn the Command Line?

You might wonder, "Why bother with text commands when I have a perfectly good GUI?" Here are compelling reasons why the command line is worth mastering:

Efficiency and Speed

Once familiar with CLI commands, you can execute complex operations with just a few keystrokes:

This efficiency is like the difference between writing an email versus hand-delivering individual messages—the time saved compounds dramatically.

Access to Developer Tools

Many essential development tools are primarily or exclusively available through the command line:

Without command line proficiency, you'd be locked out of using these powerful tools effectively—like having a toolbox but being unable to open it.

Automation and Scripting

The command line enables you to:

This automation capability is like having a tireless assistant who can handle repetitive tasks exactly as instructed, freeing you to focus on more creative work.

Remote System Management

The command line is often the only way to:

This remote access ability is like having a master key that works on all doors, regardless of their design or location.

Understanding System Operations

Working with the CLI deepens your understanding of:

This deeper knowledge is like being able to look under the hood of a car instead of just knowing how to drive it—you gain insight into the machinery that powers your computing experience.

Terminal Emulators: Your Gateway to the Command Line

To interact with the command line, you'll use a terminal emulator—a program that provides a text-based interface to your operating system. Different operating systems come with different default terminals:

Windows Terminals

macOS Terminals

Linux Terminals

These terminal emulators are like different types of vehicles—all will get you to your destination, but with different features, comfort levels, and learning curves. Choose one that suits your preferences and workflow.

Shell Types

The terminal emulator runs a shell—a program that interprets your commands and communicates with the operating system. Common shells include:

The shell is like the specific language you use to communicate with your computer—each has its own dialect, idioms, and special features.

Basic Navigation: Finding Your Way

Let's start with the fundamental commands for navigating the file system. These commands are the equivalent of being able to walk around and look at things in a physical space.

Understanding Paths

Before diving into commands, it's important to understand how file system paths work:

Understanding paths is like understanding addresses in a city—absolute paths give the complete address from the city entrance, while relative paths give directions from your current location.

Essential Navigation Commands

Here are the key commands for moving around the file system:

1. pwd (Print Working Directory)

Shows your current location in the file system. 


$ pwd
/home/username/projects/web-app

Think of pwd as checking a "You Are Here" map in a shopping mall—it orients you within the file system.

2. ls (List)

Lists the contents of the current directory (or a specified directory). 


# Basic listing
$ ls
Documents  Downloads  Pictures  Projects

# Detailed listing with hidden files
$ ls -la
total 116
drwxr-xr-x  19 username username  4096 Mar 15 09:23 .
drwxr-xr-x   3 root     root      4096 Jan 5  10:42 ..
-rw-------   1 username username 12288 Mar 10 20:45 .bash_history
drwxr-xr-x   4 username username  4096 Feb 27 14:32 Documents
drwxr-xr-x   3 username username  4096 Mar 12 16:20 Downloads
drwxr-xr-x   2 username username  4096 Mar 1  17:35 Pictures
drwxr-xr-x   5 username username  4096 Mar 15 09:20 Projects

# Listing with human-readable file sizes
$ ls -lh
total 16K
drwxr-xr-x 4 username username 4.0K Feb 27 14:32 Documents
drwxr-xr-x 3 username username 4.0K Mar 12 16:20 Downloads
drwxr-xr-x 2 username username 4.0K Mar 1  17:35 Pictures
drwxr-xr-x 5 username username 4.0K Mar 15 09:20 Projects

Common ls options:

The ls command is like looking around in a room—it shows you what's there without changing anything.

3. cd (Change Directory)

Changes your current working directory. 


# Go to a specific directory (absolute path)
$ cd /home/username/Projects

# Go to a subdirectory (relative path)
$ cd web-app

# Go up one directory
$ cd ..

# Go to home directory
$ cd ~
# or simply
$ cd

# Go to previous directory
$ cd -

The cd command is like physically walking from one room to another—it changes your location in the file system.

4. find

Searches for files and directories. 


# Find all .js files in current directory and subdirectories
$ find . -name "*.js"

# Find directories named "node_modules"
$ find . -type d -name "node_modules"

# Find files modified in the last 24 hours
$ find . -type f -mtime -1

The find command is like having a search party that can look through many rooms at once, using specific criteria to locate items.

Windows Equivalents

If you're using Windows Command Prompt:

In PowerShell, many Unix-like commands are available as aliases:

File and Directory Manipulation

Now that you can navigate the file system, let's learn how to create, copy, move, and delete files and directories.

Creating Files and Directories

1. mkdir (Make Directory)

Creates a new directory. 


# Create a single directory
$ mkdir projects

# Create nested directories (with -p option)
$ mkdir -p projects/web-app/src/components

The mkdir command is like building new rooms in your file system house.

2. touch

Creates an empty file or updates the timestamp of an existing file. 


# Create a single file
$ touch index.html

# Create multiple files
$ touch index.html style.css app.js

The touch command is like placing an empty container in a room, ready to be filled with content later.

3. File Redirection

Create files with content directly from the command line. 


# Redirect output to a file (overwrites existing content)
$ echo "Hello, World!" > greeting.txt

# Append to a file
$ echo "This is a new line" >> greeting.txt

File redirection is like having a direct pipeline from your commands to file storage.

Copying and Moving

1. cp (Copy)

Copies files or directories. 


# Copy a file
$ cp source.txt destination.txt

# Copy a file to another directory
$ cp source.txt destination_directory/

# Copy multiple files
$ cp file1.txt file2.txt destination_directory/

# Copy a directory and its contents recursively
$ cp -r source_directory/ destination_directory/

The cp command is like a photocopier—it creates duplicates of files or folders while leaving the originals unchanged.

2. mv (Move)

Moves or renames files and directories. 


# Rename a file
$ mv oldname.txt newname.txt

# Move a file to another directory
$ mv file.txt destination_directory/

# Move multiple files
$ mv file1.txt file2.txt destination_directory/

# Move and rename in one command
$ mv source/oldname.txt destination/newname.txt

The mv command is like physically relocating items—the original is gone from its previous location. When used with the same directory but a different name, it serves as a renaming tool.

Removing Files and Directories

1. rm (Remove)

Deletes files and directories. 


# Remove a file
$ rm file.txt

# Remove multiple files
$ rm file1.txt file2.txt

# Remove a directory and its contents
$ rm -r directory/

# Force removal without confirmation
$ rm -f file.txt

# Combine options (remove directory forcefully)
$ rm -rf directory/

Warning: Be extremely careful with rm, especially with the -rf flags. There is no "trash bin" or "recycle bin" for the command line—deleted means gone forever.

The rm command is like a paper shredder—once something goes through it, recovery is either impossible or very difficult.

2. rmdir

Removes empty directories. 


# Remove an empty directory
$ rmdir empty_directory/

This command will fail if the directory contains any files or subdirectories.

Windows Equivalents

In Command Prompt:

In PowerShell:

Viewing File Contents

The command line offers several ways to examine file contents without opening a full-fledged text editor.

1. cat (Concatenate)

Displays the entire content of a file. 


# View a single file
$ cat file.txt

# View multiple files sequentially
$ cat file1.txt file2.txt

# View with line numbers
$ cat -n file.txt

The cat command is best for small files, as it outputs the entire file at once.

2. less

Allows paginated viewing of files (scrollable). 


$ less large-file.txt

Navigation in less:

The less command is ideal for larger files, as it loads only what you're viewing, not the entire file at once.

3. head and tail

Show the beginning or end of a file, respectively. 


# View the first 10 lines (default)
$ head file.txt

# View the first 5 lines
$ head -n 5 file.txt

# View the last 10 lines (default)
$ tail file.txt

# View the last 20 lines
$ tail -n 20 file.txt

# Follow a file as it grows (useful for log files)
$ tail -f server.log

These commands are like peeking at just the beginning or end of a book, rather than reading the whole thing.

4. grep

Searches for patterns in files. 


# Search for a word in a file
$ grep "function" app.js

# Case-insensitive search
$ grep -i "error" log.txt

# Show line numbers
$ grep -n "TODO" *.js

# Recursive search in directories
$ grep -r "API_KEY" .

# Show only filenames that match
$ grep -l "class" *.py

The grep command is like having a detective who can scan through files looking for specific clues—incredibly useful for finding where certain code elements are defined or used.

Windows Equivalents

In Command Prompt:

In PowerShell:

Redirection and Pipes

The command line becomes truly powerful when you can connect commands together and redirect their output.

Output Redirection

Directing command output to files: 


# Redirect output to a file (overwrites existing content)
$ ls -l > file_list.txt

# Append output to a file
$ echo "New entry" >> log.txt

# Redirect error messages
$ command 2> errors.log

# Redirect both standard output and errors
$ command > output.log 2>&1

Input Redirection

Providing file content as input to commands: 


# Use file contents as input
$ sort < unsorted.txt

# Count words in a file
$ wc -w < document.txt

Pipes

Connecting the output of one command to the input of another: 


# List files and filter for JavaScript files
$ ls | grep ".js"

# Count files in a directory
$ ls -l | wc -l

# Find the 5 largest files
$ ls -lS | head -n 5

# Find all TODOs in JavaScript files
$ grep -r "TODO" . | grep ".js"

Pipes are like assembly lines in a factory—the output of one step becomes the input for the next, allowing complex operations to be broken down into simpler components.

Command Substitution

Using the output of a command as part of another command: 


# Old syntax
$ echo "Today is `date`"

# Modern syntax
$ echo "Today is $(date)"

# Use in variable assignment
$ current_dir=$(pwd)
$ echo "You are in $current_dir"

Command substitution is like having a calculator that you can embed directly within a sentence—it computes a value and inserts it right where you need it.

CLI Navigation Tips and Tricks

Mastering a few shortcuts and techniques can dramatically improve your command line efficiency:

Keyboard Shortcuts

Shortcut Function
Up/Down Arrows Navigate command history
Ctrl+A Move cursor to beginning of line
Ctrl+E Move cursor to end of line
Ctrl+L Clear the screen
Ctrl+U Cut text from cursor to beginning of line
Ctrl+K Cut text from cursor to end of line
Ctrl+Y Paste previously cut text
Ctrl+R Search command history (reverse search)
Ctrl+C Interrupt/cancel the current command
Ctrl+D Exit the current shell (or EOF)
Tab Auto-complete commands, files, and directories

Wildcards and Patterns

Using wildcards to match multiple files: 


# All JavaScript files
$ ls *.js

# Any single character
$ ls file?.txt  # Matches file1.txt, fileA.txt, etc.

# Character ranges
$ ls [a-c]*.txt  # Files starting with a, b, or c

# Negation
$ ls [!a-c]*.txt  # Files NOT starting with a, b, or c

# All files in a directory and subdirectories
$ ls **/*.js  # (in some shells)

Wildcards are like using a broad description to identify objects—"all the blue books" or "any container that's round"—instead of naming each one individually.

Command History

Leveraging your command history: 


# View command history
$ history

# Re-run previous command
$ !!

# Re-run specific command from history
$ !42  # Re-runs command number 42

# Re-run last command starting with "git"
$ !git

# Search history interactively
$ Ctrl+R (then type search term)

Command history is like having a personal assistant who remembers all your previous instructions and can repeat them on demand.

Path Navigation Shortcuts


# Jump to specific directories using aliases
$ cd ~  # Home directory
$ cd -  # Previous directory
$ cd ../..  # Up two levels

# Create directory aliases (in .bashrc or .zshrc)
alias proj='cd ~/projects'
alias docs='cd ~/documents'

Path shortcuts are like having teleportation devices to frequently visited locations, eliminating the need to manually navigate through the file system hierarchy.

Customizing Your Command Line Environment

The command line is highly customizable, allowing you to create an environment that suits your workflow:

Configuration Files

Common shell configuration files:

These files are executed when your shell starts and can contain:

Creating Aliases

Aliases are shortcuts for longer commands: 


# Add to your .bashrc or .zshrc
alias ll='ls -la'
alias gs='git status'
alias gp='git pull'
alias gc='git commit -m'
alias python='python3'
alias serve='python -m http.server'

After adding aliases, run source ~/.bashrc (or your appropriate config file) to apply changes without restarting your terminal.

Aliases are like creating custom buttons on a universal remote—you program them once with complex commands, then use the simple shortcuts repeatedly.

Customizing the Prompt

The prompt is what appears before each command you type. Customizing it can add useful information: 


# For Bash (add to .bashrc)
# Shows username, hostname, current directory, and git branch
export PS1='\u@\h \[\033[32m\]\w\[\033[33m\]$(__git_ps1 " (%s)")\[\033[00m\] $ '

# For Zsh, many prefer using Oh My Zsh with themes
# Install Oh My Zsh and choose a theme in .zshrc

A well-designed prompt is like a dashboard in a car—it displays the most relevant information at a glance, helping you navigate more effectively.

File Permissions and Ownership

Understanding file permissions is essential for proper file management and security:

Viewing Permissions

The ls -l command shows file permissions: 


$ ls -l script.sh
-rwxr-xr--  1 username  groupname  1240 Mar 15 10:32 script.sh
^----------  ----------  ---------  ---- ------------ ---------
|            |            |          |    |            |
Permissions  Owner        Group      Size  Date        Filename

Permission string breakdown:

Changing Permissions

The chmod command changes file permissions: 


# Symbolic notation
$ chmod u+x script.sh  # Add execute permission for user
$ chmod g-w file.txt   # Remove write permission for group
$ chmod o=r file.txt   # Set others permission to read only
$ chmod a+r file.txt   # Add read permission for all

# Numeric notation
$ chmod 755 script.sh  # rwxr-xr-x
$ chmod 644 file.txt   # rw-r--r--
$ chmod 600 key.pem    # rw-------

Common numeric permission patterns:

Changing Ownership

The chown command changes file/directory ownership: 


# Change owner
$ chown username file.txt

# Change owner and group
$ chown username:groupname file.txt

# Change recursively for directories
$ chown -R username:groupname directory/

The chgrp command changes just the group: 


$ chgrp groupname file.txt

Understanding permissions is like knowing the access rules to different rooms in a building—who can enter, who can modify the contents, and who can execute the machinery inside.

Practical Examples for Web Developers

Let's explore some real-world examples of how these commands can be used in web development workflows:

Setting Up a New Project


# Create project directory structure
$ mkdir -p my-project/{src/{components,assets,styles},public,scripts}
$ cd my-project

# Initialize git repository
$ git init

# Create initial files
$ touch src/index.js
$ touch src/styles/main.css
$ touch public/index.html
$ touch README.md

# Initialize npm project
$ npm init -y

# Initialize Python virtual environment
$ python -m venv venv

Working with Files in a Project


# Find all TODO comments in JavaScript files
$ grep -r "TODO" --include="*.js" .

# Count lines of code by file type
$ find . -name "*.js" | xargs wc -l
$ find . -name "*.css" | xargs wc -l
$ find . -name "*.html" | xargs wc -l

# Find large files that might need optimization
$ find . -type f -size +1M

# Replace a string in multiple files
$ grep -l "oldFunction" --include="*.js" . | xargs sed -i 's/oldFunction/newFunction/g'

# Check which files would be affected before making changes
$ grep -l "oldFunction" --include="*.js" .

Managing Dependencies


# Find and remove node_modules directories to save space
$ find . -name "node_modules" -type d -prune -exec rm -rf {} \;

# Check for outdated npm packages
$ npm outdated

# List all installed Python packages
$ pip list

# Create requirements file
$ pip freeze > requirements.txt

Deployment and Server Tasks


# Build and deploy in one command
$ npm run build && scp -r dist/* user@server:/var/www/mysite/

# Monitor logs in real-time
$ ssh user@server 'tail -f /var/log/nginx/access.log'

# Check server disk usage
$ ssh user@server 'df -h'

# Simple HTTP server for testing
$ cd dist && python -m http.server 8000

File Processing


# Batch resize images with ImageMagick
$ for file in *.jpg; do convert "$file" -resize 800x600 "resized-$file"; done

# Combine multiple CSS files into one
$ cat src/styles/*.css > dist/styles.css

# Convert Markdown to HTML with Pandoc
$ for file in *.md; do pandoc "$file" -o "${file%.md}.html"; done

# Extract all URLs from an HTML file
$ grep -o 'https://[^"]*' index.html

These examples demonstrate how the command line can automate tedious tasks, process multiple files at once, and integrate different tools into a seamless workflow—capabilities that would be cumbersome or impossible through graphical interfaces alone.

Special Considerations for Windows Users

If you're using Windows for web development, there are a few special considerations to be aware of:

WSL: Windows Subsystem for Linux

WSL provides a Linux environment directly integrated with Windows: 


# Install WSL from PowerShell (as Administrator)
> wsl --install

# List available Linux distributions
> wsl --list --online

# Install a specific distribution
> wsl --install -d Ubuntu-20.04

WSL is highly recommended for web development on Windows, as it provides the best of both worlds—Windows applications and Linux command line tools.

Path Differences

Windows paths use backslashes, while Unix-like systems use forward slashes:

Modern Windows tools are becoming more flexible:

Line Endings

Different operating systems use different line ending characters:

This can cause issues when sharing text files between systems. Configure Git to handle line endings: 


# Configure Git to normalize line endings
$ git config --global core.autocrlf true  # On Windows
$ git config --global core.autocrlf input  # On Unix-like systems

PowerShell as an Alternative

PowerShell offers many Unix-like capabilities with Windows integration: 


# PowerShell example: Find large files, sort by size, and format output
PS> Get-ChildItem -Recurse | Where-Object { $_.Length -gt 1MB } | 
    Sort-Object -Property Length -Descending | 
    Select-Object Name, @{Name="SizeInMB";Expression={$_.Length / 1MB}} | 
    Format-Table -AutoSize

PowerShell is worth learning for Windows-specific tasks, though WSL is often preferred for web development due to compatibility with Unix-centric tools and tutorials.

Common Mistakes and How to Avoid Them

As you start working with the command line, watch out for these common pitfalls:

Destructive Commands

Path and Permission Issues

Command Syntax Errors

Recovery Strategies

If you make a mistake:

Learning Resources

To continue developing your command line skills:

Online Documentation and Tutorials

Interactive Learning

Books

Cheat Sheets

Practical Exercise: CLI Navigation Challenge

Let's practice what we've learned with a practical exercise:

Exercise Setup

Copy and paste these commands to set up the exercise (or use the provided setup script): 


# Create directory structure
mkdir -p cli_practice/{project1/{src,dist,docs},project2/{public,src/{components,assets}},logs}

# Create sample files
touch cli_practice/project1/src/{index.js,app.js,styles.css}
touch cli_practice/project1/README.md
touch cli_practice/project2/src/components/{Header.js,Footer.js,Sidebar.js}
touch cli_practice/project2/src/assets/{logo.svg,background.jpg}
touch cli_practice/project2/public/index.html
echo "This is a log entry at $(date)" > cli_practice/logs/app.log
echo "ERROR: Something went wrong at $(date)" >> cli_practice/logs/app.log
echo "INFO: System recovered at $(date)" >> cli_practice/logs/app.log

# Change to the starting directory
cd cli_practice

Navigation and Information Gathering Tasks

  1. From the cli_practice directory, list all subdirectories (not files)
  2. Navigate to project2/src/components and list all JavaScript files
  3. Without changing directories, count how many files are in project1/src
  4. Navigate back to the cli_practice directory using an absolute path
  5. Find all JavaScript files in the entire directory structure
  6. Count the number of lines in the log file
  7. Search the log file for entries containing "ERROR"

File Manipulation Tasks

  1. Create a new directory called project3/config in one command
  2. Create a file called settings.json in the new config directory
  3. Add the text {"version": "1.0", "environment": "development"} to the settings file
  4. Copy the README.md from project1 to project3
  5. Rename project3/README.md to project3/DOCUMENTATION.md
  6. Create a backup of the log file called app.log.bak

Challenge Pipe and Redirection Tasks

  1. Count how many files (not directories) exist in the entire directory structure
  2. Create a file called file_list.txt containing the names of all .js files
  3. Append the current date and time to file_list.txt
  4. Find all lines in the log file containing "ERROR" or "INFO" and save them to filtered_logs.txt

Solutions

Try solving these challenges on your own first! Here are the solutions to check your work: 


# Navigation and Information Gathering Solutions
1. ls -d */
2. cd project2/src/components && ls *.js
3. ls -l ../../../project1/src | wc -l
4. cd /absolute/path/to/cli_practice
   # or
   cd ~/cli_practice
5. find . -name "*.js"
6. wc -l logs/app.log
7. grep "ERROR" logs/app.log

# File Manipulation Solutions
1. mkdir -p project3/config
2. touch project3/config/settings.json
3. echo '{"version": "1.0", "environment": "development"}' > project3/config/settings.json
4. cp project1/README.md project3/
5. mv project3/README.md project3/DOCUMENTATION.md
6. cp logs/app.log logs/app.log.bak

# Challenge Pipe and Redirection Solutions
1. find . -type f | wc -l
2. find . -name "*.js" > file_list.txt
3. date >> file_list.txt
4. grep -E "ERROR|INFO" logs/app.log > filtered_logs.txt

Conclusion: Building Your CLI Foundation

The command line interface is a powerful tool that will significantly enhance your capabilities as a web developer. While the learning curve might seem steep at first, the efficiency and control you gain are well worth the investment.

Remember that mastering the CLI is an ongoing journey—you'll continue to learn new commands, shortcuts, and techniques throughout your career. Start with the basics we've covered today, practice regularly, and gradually incorporate more advanced techniques into your workflow.

As you become more comfortable with the command line, you'll find yourself able to:

In our next sessions, we'll build upon this foundation as we explore version control with Git, which relies heavily on command line operations. The CLI skills you develop now will serve as building blocks for more advanced topics throughout the course.

Assignment: Command Line Proficiency

To reinforce your command line skills, complete the following tasks:

  1. Directory Explorer:
    • Create a shell script called explorer.sh that accepts a directory path as an argument
    • The script should output:
      • The total number of files and directories
      • The disk space used by the directory
      • A count of files by type (extension)
      • The 5 largest files with their sizes
    • Make the script executable and test it on different directories
  2. Web Project Setup:
    • Using only the command line, create a directory structure for a web project with:
      • Folders for HTML, CSS, JavaScript, images, and fonts
      • Basic HTML file linking to CSS and JS
      • A README.md file with project description
      • A .gitignore file with common exclusions
    • Bonus: Initialize a Git repository and make the initial commit
  3. Log File Analyzer:
    • Download the sample log file provided in the course materials
    • Using only command line tools:
      • Count the total number of requests
      • Find the most common HTTP status code
      • Identify the top 5 IP addresses by request count
      • Extract all requests that resulted in a 404 status
      • Determine the hour of day with the most traffic
    • Document the commands you used and their output
  4. Command Line Journal:
    • Create a file called cli_journal.md
    • For one week, add at least 3 new commands you've learned each day
    • For each command, include:
      • Basic syntax and common options
      • A practical example of how you used it
      • Any challenges you encountered
    • By the end, you should have documented at least 15 useful commands

Submit your completed assignment files before the next class session. The goal is not just to complete the tasks, but to become more comfortable navigating and manipulating your system through the command line.