Working with paths is one of the most common sources of mistakes for beginners. A path tells the computer where a file or folder is located in the file system. To avoid potential future mistakes with paths, there are a few important things we must understand clearly.
Unix, Linux and macOS use forward slashes: /
/home/users/projects
Windows traditionally uses backslashes: \\
C:\\Users\\Admin\\Projects
Modern Windows tools (PowerShell, Git Bash, WSL) accept forward slashes, so using / consistently is recommended.
URLs also use forward slashes.
<https://hackyourfuture.nl/program>
<aside> 💡
Use the forward slash all times unless you absolutely must use the backslash for Windows support. Modern programming languages all work with forward slashes regardless the platform.
</aside>
The root path is the top-most directory in a file system. On Unix-based systems, it's represented by /. On Windows, it's typically C:\\. All other directories and files branch out from this starting point.
cd /
Some Windows terminals (PowerShell, Git Bash) understand / and translate it as C:\\. Always use / when referring to the root folder.
For example, the path:
/users/hyf/Desktop
Can be read as: root → users → hyf → Desktop
In URLs, / also represents the root path:
<https://hackyourfuture.nl/>
Notice the similarity between the file system root and the URL root. It plays an important role when deploying a website from a file system to a URL.
An absolute path starts from the root and describes the full location:
/home/user/website/images/logo.png
C:\\home\\user\\website\\images\\logo.png
A relative path never starts with / . It describes a location relative to the current directory.
website/images/logo.png
In the example website/images/logo.png, this is a relative path because it doesn't start with /. It describes the location starting from your current directory: if you're in /home/user, this path would point to /home/user/website/images/logo.png.
Watch this quick explainer video to understand how a relative part works
https://youtu.be/ephId3mYu9o?si=XyjTeFZtCMqGeQdm
.. - refers to the parent directory../.. - refers to the parent of the parent directory. You can chain .. as many times as you want and eventually you will get to the root directory.. - refers to the current directory. The relative paths ./website and website are the same.././././website is just like ./website.. and . can be placed at any point of the path..A common mistake is to place the . in the wrong place which will create unexpected issues. For example: ./file.txt , /.file.txt and .file.txt have three different meanings:
./file.txt - is a file named file.txt located in the current directory/.file.txt - Is a file named .file.txt located in the root directory.file.txt - Is a file named .file.txt located in the current directory<aside> ⌨️
Hands on: Open the terminal, type ls -la and look at the first two items. Looks familiar?
</aside>
Study the following examples, they contain different relative paths from the following directory:
/home/users/website
| Relative path | Actual absolute Path |
|---|---|
| images | /home/users/website/images |
| images/hello.png | /home/users/website/images/hello.png |
| .. | /home/users/ |
| ../project | /home/users/project |
| ../../system/logs | /home/system/logs |
| . | /home/users/website |
| ./images | /home/users/website/images |
| ../../.. | / |
| ../project/../website/images | /home/users/website/images |
| ../../../home/users/website | /home/users/website |
| ./.. | /home/users/ |
| /.file.txt | /.file.txt |
| .file.txt | /home/users/website/.file.txt |
| ./file.txt | /home/users/website/file.txt |
<aside> 💭
Understanding how to work with relative paths is key to become efficient developer
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 **