Module 8: Developer Workstation Basics
File paths, absolute and relative
🏠The everyday picture
Two ways to give directions. Absolute: "Flat 4B, Green Towers, Boring Road, Patna". It works from anywhere. Relative: "two doors down from here". It only works if you know where "here" is.
📘What it really is
-
An absolute path starts from the top of the drive:
/Users/asha/Documents/Projects/my-first-site/index.htmlorC:\Users\Asha\Documents\Projects\my-first-site\index.html. -
A relative path starts from the current folder:
index.html: a file in this folder;images/logo.png: inside theimagesfolder here;../notes.txt: one folder up (..means "the parent folder");-
./: this folder. -
Websites use relative paths all the time: your test site's pages link to each other with names like
lesson-2.html, so they work on your computer and on the server alike. -
Many "it works on my computer but not online" problems are paths: an absolute path like
C:\Users\...exists only on your laptop.
🖱️Try it
In your my-first-site folder, make a folder called images. From the terminal in my-first-site, run
ls images and then ls ../. Notice what each shows.
✅Quick check
*Your web page shows an image using C:\Users\Asha\Pictures\logo.png. It works on your laptop but not on the
Show the answer
server. Why?*
That absolute path only exists on your laptop. Put the image in the project (for example images/logo.png)
and use a relative path.
You're in Projects/my-first-site. What does ../ point to?
Show the answer
The Projects folder, one level up.