Files & Folders

Every website you have ever visited is just a collection of files sitting in folders on a server somewhere. When you build a website, you're doing the same thing: creating files, organising them into folders, and giving them the right names so a browser can find them.

Before you write a single line of HTML, you need to understand this system.

Files

A file stores a piece of information. The key to a file is its extension — the letters after the dot in the filename. The extension tells the computer (and the browser) what kind of information is inside.

Folders

A folder (also called a directory) groups related files together. Folders can contain files and other folders — which is how you build a hierarchy.

Think of your school binder. The binder is the main folder. Inside you have dividers for each subject (sub-folders). Inside each divider are your actual notes and handouts (files). You can find any note by going: binder → subject divider → specific sheet.

my-portfolio/
├── index.html          ← the homepage
├── style.css           ← the styles
├── images/             ← a folder for images
│   ├── profile.jpg
│   └── banner.png
└── projects/           ← a folder for project pages
    └── game.html

This is an example of a web project structure. Everything in one place, organised so you always know where to look.

File Paths

A file path is the address of a file — the directions your computer follows to find it.

Absolute Paths

An absolute path starts from the very top of the file system and gives the full route:

Notice the difference: macOS and Linux use forward slashes (/); Windows uses backslashes (\). The web always uses forward slashes.

Relative Paths

A relative path starts from your current file's location instead of the top. This is what you'll use constantly in web development when linking to images, stylesheets, and other pages.

Imagine you're editing index.html and you want to link to profile.jpg in the images/ folder next to it:

my-portfolio/
├── index.html      ← you are here
├── style.css
└── images/
    └── profile.jpg ← you want to reach this

The relative path from index.html to profile.jpg is just images/profile.jpg — start in the same folder, go into images/, pick up the file.

../ means "go up one folder." Like walking out of a room before going into a different one.

Why relative paths? If you use absolute paths like /Users/wattson/my-portfolio/style.css, your site works on your computer but breaks the moment you upload it to a server — because the server doesn't have a folder called /Users/wattson/. Relative paths work everywhere because they're always measured from the same starting point.

Your File Manager

Every operating system comes with a built-in app for browsing files and folders visually.

macOS — Finder

Finder lives in your Dock (the bar along the bottom of the screen). Open it and you'll see your folders on the left and their contents on the right.

Useful shortcuts in Finder:

Windows — File Explorer

File Explorer is usually pinned to the taskbar. Open it and you'll see a sidebar with common locations (Desktop, Documents, Downloads) and the folder contents on the right.

Useful shortcuts in File Explorer:

VS Code's File Explorer

Once you open a project folder in VS Code (File → Open Folder…), the left sidebar becomes your file explorer for that project.

EXPLORER
└── MY-PORTFOLIO
    ├── index.html
    ├── style.css
    └── images/
        └── profile.jpg

• Click a file to open it.
• Right-click to create new files or folders, rename, or delete.
• Drag files between folders to move them.

When you add a new file in VS Code, it appears instantly in your project. You don't need to switch back to Finder or File Explorer.

Naming Files for the Web

File names become part of URLs. A few rules make your life much easier:

Good names: index.html, style.css, profile-photo.jpg, about-me.html

Bad names: My Website.html, STYLE.CSS, photo (1).jpg, about&me.html