Lesson 1.2: Files and Folders

Duration: 45 minutes

Learning Objectives

After completing this lesson, you will be able to:

• Explain what files and folders are
• Understand the hierarchical structure of a file system
• Navigate using file paths (absolute and relative)
• Recognize common file types by their extensions

Introduction

Every photo, document, song, and program on your computer exists as a file. To keep millions of files organized, computers use folders (also called directories). Understanding how files and folders work is essential — not just for everyday computer use, but especially for programming, where you'll be creating, organizing, and referencing files constantly.

Main Content

What is a File?

A file is a container for storing information. Just like a paper document in the real world, a digital file has:

• A name — so you can identify it
• Content — the actual information inside
• A type — what kind of information it contains
• A location — where it lives on your computer

File Extensions

The extension is the part after the last dot in a filename. It tells the computer (and you) what type of file it is.

Important for programmers: You'll work with .ts, .js, .json, .html, and .css files constantly.

What is a Folder?

A folder (or directory) is a container that holds files and other folders. Think of it like a physical folder in a filing cabinet, except it can contain other folders inside it.

The File System Hierarchy

Files and folders are organized in a tree structure — like a family tree or an organizational chart. At the top is the root, and everything branches down from there.

Root (/)
├── Users/
│   ├── alice/
│   │   ├── Documents/
│   │   │   ├── resume.pdf
│   │   │   └── notes.txt
│   │   ├── Pictures/
│   │   │   └── vacation.jpg
│   │   └── Desktop/
│   │       └── todo.txt
│   └── bob/
│       └── Documents/
│           └── report.docx
├── Applications/
│   ├── Chrome.app
│   └── VS Code.app
└── System/
    └── ...

Understanding File Paths

A path is the address of a file or folder. It tells you exactly where something is located.

Absolute Paths

An absolute path starts from the root and gives the complete address:

/Users/alice/Documents/resume.pdf

This reads as: "Start at the root, go to Users, then alice, then Documents, and find resume.pdf"

On different operating systems:

Relative Paths

A relative path starts from your current location. Special symbols help navigate:

Example: If you're in /Users/alice/Documents/:

The Home Folder

Every user has a home folder — your personal space on the computer. This is where your Documents, Pictures, Desktop, and Downloads folders live.

Why Paths Matter for Programming

When you write code, you'll constantly reference other files:

// Importing code from another file
import { helper } from './utils/helper';

// Reading a configuration file
const config = loadConfig('../config/settings.json');

// Specifying where to save output
saveFile('./output/results.txt');

Getting paths wrong is one of the most common beginner mistakes. The error "file not found" usually means your path is incorrect.

Visual: The File System as a Map

                          [Root /]
                              │
            ┌─────────────────┼─────────────────┐
            │                 │                 │
        [Users]          [Applications]     [System]
            │
    ┌───────┴───────┐
    │               │
 [alice]         [bob]
    │               │
    ├── Documents   └── Documents
    │   ├── resume.pdf      └── report.docx
    │   └── notes.txt
    │
    ├── Pictures
    │   └── vacation.jpg
    │
    └── Desktop
        └── todo.txt

Path to resume.pdf: /Users/alice/Documents/resume.pdf
Path to vacation.jpg: /Users/alice/Pictures/vacation.jpg

Practice Exercise

Task 1: Read the Paths

Look at this file structure and answer the questions:

/
└── home/
    └── developer/
        ├── projects/
        │   ├── website/
        │   │   ├── index.html
        │   │   ├── styles.css
        │   │   └── images/
        │   │       └── logo.png
        │   └── app/
        │       ├── main.ts
        │       └── utils.ts
        └── notes/
            └── ideas.txt

Questions:

1. What is the absolute path to logo.png?
2. What is the absolute path to main.ts?
3. If you're in the website folder, what's the relative path to ideas.txt?
4. If you're in the app folder, what's the relative path to index.html?

Task 2: Explore Your Computer

Open your file explorer (Finder on Mac, File Explorer on Windows) and find:

1. Your home folder
2. Your Documents folder
3. Note the full path shown in the address bar

Key Takeaways

• Files store information; folders organize files
• File extensions (like .txt, .ts) indicate the file type
• The file system is organized as a tree hierarchy
• Absolute paths start from the root and give the complete address
• Relative paths start from your current location
• . means current folder, .. means parent folder
• ~ (on Mac/Linux) represents your home folder
• Understanding paths is essential for programming — you'll use them constantly

Resources