Household Coding: File Paths

In everyone of my classes, students struggle to understand file paths and how to link to different folders and files. Last week, I impromptu grabbed our container of mini coffee creams to demonstrate how you need to hop in and out of folders in order to link files properly.

Here is a very basic setup of a simple project structure:

In order to link from ourfile to file-green, you have to follow the file path like so:

<a href=”folder1/file-green”>

Similarly, if we are in  file-green and want to link to file-red, you have to follow the file path like so:

<a href=”../folder2/file-red”>

Here is an animation I made to explain it a little bit better…