PHASE 1Beginner ~25 min· topic 8 of 8

Topic 1.8

File Paths and Project Folders

In one line

A website is a folder of files, and every link, image and stylesheet finds its file through a path; relative paths start from the current page's folder, index.html is the default page of a folder, and on real servers letter case and spaces matter.

Think of it like this

Giving directions inside a big school. From your classroom you might say "the room next door" (same folder), "go into the library, then the reading room" (a sub-folder), "go back out to the corridor" (up one folder, ../), or "start from the main gate, then…" (from the root, /). The directions only work if you know where you're starting from, which is the whole secret of relative paths.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Folder (directory): A container for files and other folders.
Project root: The top folder of your site. Online, it becomes the address /.
Path: The route to a file, with folder names separated by /, like images/logo.svg.
Relative path: A path that starts from the current file's folder, like ../css/style.css.
Root-relative path: A path starting with /, measured from the site root, like /images/logo.svg.
Parent folder: The folder one level up, written ...
Case sensitivity: Treating capital and small letters as different: A.png is not a.png.
Percent-encoding: Writing special characters in URLs as % codes, like a space as %20.

Step by step

01Lay out the project

Here is a small site. Pages sit at the top; each kind of file has its own folder; the blog has its own folder with its own index.html.

Lay out the projectdiagram

Rendering diagram…

02Paths from the home page

index.html is in the root, so its paths go down into folders.

my-site/index.htmlwhole filehtml

<link rel="stylesheet" href="css/style.css">
<img src="images/logo.svg" alt="My site" width="40" height="40">
<a href="blog/">Blog</a>  <!-- the server sends blog/index.html -->

03Paths from a blog post

first-post.html is inside blog/, so every path that leaves blog/ must first go up with ../.

my-site/blog/first-post.htmlwhole filehtml

<link rel="stylesheet" href="../css/style.css">
<img src="../images/logo.svg" alt="My site" width="40" height="40">
<a href="../index.html">Home</a>
<a href="index.html">All posts</a>  <!-- blog/index.html -->

04Paths inside CSS

The CSS file lives in css/, so its paths start there, whichever page uses it.

my-site/css/style.csswhole filecss

body {
  background: url(../images/bg.png);
}

05Or use root-relative paths on a server

On a server, / paths are the same from every page. This is why many sites use them for shared files, but they need a server to test.

any pagewhole filehtml

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.svg" alt="My site" width="40" height="40">

06Name files safely

Rename anything with capitals or spaces before you link to it. One rule for every file saves hours of debugging.

renamewhole filetext

My Photo (1).JPG   →  my-photo-1.jpg
About Us.html      →  about-us.html
CSS/Main.css       →  css/main.css

Try it yourself

1
Predict a deep path
In the first example, add the page shop/items/shoes.html to pages. Before running, write down where ../images/logo.svg lands from it. Then run and check.
2
Name a file badly
In the second example, add the name Résumé FINAL v2!!.pdf. Predict roughly how the URL will look, run it, then write the name you would use instead.
3
Build the folders for real
On your computer, create my-site/ with index.html, css/style.css and images/. Link the CSS from index.html, make a blog/first-post.html that uses the same CSS, and check both pages show the style.

Code & diagrams

Resolving paths from different pages New tab

The relative paths give different answers on each page; only the root-relative `/images/logo.svg` always lands in the same place. `../` from the root can't go higher, so it stays at the root.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

index.html + images/logo.svg → /images/logo.svg
index.html + ../images/logo.svg → /images/logo.svg
index.html + /images/logo.svg → /images/logo.svg
blog/first-post.html + images/logo.svg → /blog/images/logo.svg
blog/first-post.html + ../images/logo.svg → /images/logo.svg
blog/first-post.html + /images/logo.svg → /images/logo.svg
blog/2026/june/trip.html + images/logo.svg → /blog/2026/june/images/logo.svg
blog/2026/june/trip.html + ../images/logo.svg → /blog/2026/images/logo.svg
blog/2026/june/trip.html + /images/logo.svg → /images/logo.svg

Spaces, case and special characters in URLs New tab

Only the lowercase, hyphenated name stays readable. `encodeURIComponent` turns each special character into `%` codes; `é` becomes two codes because it takes two bytes in UTF-8.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

My Photo (1).JPG → https://my-site.com/images/My%20Photo%20(1).JPG
my-photo-1.jpg → https://my-site.com/images/my-photo-1.jpg
café menu.png → https://my-site.com/images/caf%C3%A9%20menu.png
50% off.png → https://my-site.com/images/50%25%20off.png
Same file on Linux? false

A mini site in one page New tab

`blog/` and `/contact/` are folders: on a real server they open each folder's `index.html`.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Copy a page into a sub-folder without fixing its paths

Copy index.html (which uses href="css/style.css") to blog/post.html without editing it.

terminal

$ DevTools → Network

── what you'll see ──

GET /blog/css/style.css 404 (Not Found)

(the page shows with no styling)

Break #2

Use a root-relative path on a file:// page

Open index.html by double-clicking it, with <img src="/images/logo.svg" …>.

terminal

$ DevTools → Console

── what you'll see ──

GET file:///C:/images/logo.svg net::ERR_FILE_NOT_FOUND

Break #3

Use backslashes from Windows

Write <img src="images\logo.svg" …> copied from File Explorer.

terminal

$ the page shows

── what you'll see ──

A broken image on most servers, even though it may work when opened on Windows.

Myth vs fact

Myth

If it works on my computer, it will work online.

Fact

Your computer usually ignores letter case and opens file:// paths; servers are case-sensitive and resolve / differently. Test with a local server and lowercase names.

Myth

Root-relative paths (/css/...) are always better.

Fact

They're stable across pages, but break when opening files directly, and when a site lives in a sub-folder like example.com/my-project/. Relative paths work everywhere if you count the ../ correctly.

Myth

Spaces in file names are fine because browsers encode them.

Fact

They work if written carefully, but every link must encode them (%20), they break in many tools, and they're easy to mistype. Use hyphens.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The <base href="..."> element in the head changes the starting point for every relative URL on the page, including #fragment links. It's powerful but surprising; most sites avoid it.
▸
Path resolution follows the URL Standard: dot-segments (. and ..) are removed, .. above the root is dropped, backslashes are treated as / for http(s) URLs, and characters outside the allowed set are percent-encoded as UTF-8 bytes.
▸
Servers and hosts differ on trailing slashes: /about and /about/ may both work, redirect to one another, or one may 404. Relative links inside /about/ resolve from /about/, but inside /about they resolve from /, which is a classic source of broken images. Pick one style and configure the host to redirect the other.
▸
Build tools (like Next.js and Vite) usually hash and move your files (style.3f9a2c.css) and write the paths for you, but the same resolution rules apply to whatever they output. See the System Design course for how caching uses those hashed names.

Remember this

1
A project folder holds all your site's files. A common layout keeps pages at the top and puts other files in sub-folders by type: index.html, about.html, then css/style.css, js/app.js, images/logo.svg. The top folder is the root of the site. When you put the site online, the root folder becomes https://your-domain/.
2
A path is the route from one file to another, with folder names separated by forward slashes /. Always use / in web paths, even on Windows, where file explorer shows \. A relative path starts from the folder of the current file: images/logo.svg means "go into images, take logo.svg". ./images/logo.svg means the same (. is the current folder). ../ goes up one folder and can repeat: ../../.
3
A root-relative path starts with / and is measured from the site root, no matter where the current page is: /css/style.css always means the css folder at the top. It's handy on deep pages, but on your own computer (file://) the "root" is the root of your whole drive, so root-relative paths break when you open files directly. Test them with a local server (Topic 0.3).
4
Paths are resolved from the file that contains the path. For an <img> in blog/post.html, the starting folder is blog/. Inside a CSS file, a url(...) is resolved from the CSS file's folder, not the page's: in css/style.css, url(../images/bg.png) points to images/bg.png.
5
index.html is the default file of a folder. When a browser asks a server for a folder (https://example.com/blog/), the server sends blog/index.html. That's why the home page is index.html and why clean URLs like /about/ work if you make about/index.html. When opening files directly from your disk, there is no server, so you must click the actual file.
6
Two rules from real servers catch everyone. Letter case matters: most web servers run Linux, where Logo.png and logo.png are different files, while Windows and macOS usually treat them as the same, so it works locally and breaks online. Spaces and special characters must be encoded in URLs (a space becomes %20), which makes paths ugly and error-prone. The safe habit: lowercase names, words joined with hyphens, no spaces: summer-trip-2026.jpg.

Explain it without notes

How does the browser work out where a relative path points?

What is the difference between images/a.png, ./images/a.png, ../images/a.png and /images/a.png?

Why does a site that works on your laptop sometimes break when deployed?

Why is index.html special?

Practice

Your site has index.html, css/main.css, images/hero.jpg and pages/contact.html. Write the <link> and <img> tags for pages/contact.html using relative paths.

In css/main.css, write a rule that sets body's background to images/hero.jpg.

Rename these files safely: Team Photo.PNG, About Us.html, Price List (2026).pdf.

Trade-offs

↔
Relative paths keep a site movable and work from file://; root-relative paths are identical on every page but need a server and assume the site sits at the domain root.
↔
Grouping files by type (css/, images/) is simple for small sites; larger projects often group by feature (blog/, shop/, each with its own images) so related files move together.

Done when you can

I can organise a project into folders with index.html at the root.
I can write relative paths with ./ and ../ from any page.
I know when to use a root-relative / path and why it breaks on file://.
I know paths in CSS start from the CSS file's folder.
I name files in lowercase with hyphens and no spaces.
I can debug a broken path with the Network panel.

Command Palette

Words you'll meet

Step by step

01Lay out the project

02Paths from the home page

03Paths from a blog post

04Paths inside CSS

05Or use root-relative paths on a server

06Name files safely

Try it yourself

Predict a deep path

Name a file badly

Build the folders for real

Code & diagrams

Break it on purpose

Copy a page into a sub-folder without fixing its paths

Use a root-relative path on a file:// page

Use backslashes from Windows

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can