Question About Relative vs. Absolute Paths in Full Stack Curriculum

Good day everyone :wave: :smile:

In the new full stack curriculum, particularly in the lesson “What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax?” in the HTML section, it is said that

If your public/index.html file needed to load the stylesheet, you would use an absolute path to navigate to the parent my-app directory, then to the src directory, and finally to your file: ../src/index.css.

as seen in this screenshot:

My question is, shouldn’t ../src/index.css count as a relative path, given that it uses the parent selector .. to select the parent of the current directory? If so, why does it say that “you would use an absolute path”?

Thank you!

1 Like

Furthermore, why does the first question count /public/styles.css as an absolute path, but not count https://freecodecamp.org as such?

I understand that the forward slash at the beginning of /public/styles.css makes it relative to the root, and therefore absolute, but surely straight-up including the root itself (in this case the second-level and top-level domains, freecodecamp.org) would also make for an absolute path?

Here’s a screenshot of the question:

Please let me know what I’m missing. Thanks!

1 Like

The question states that the starting point is the public/index.html file. To load the stylesheet in a separate folder (src) you need to use the absolute path.

FCC is the web address rather than pointing to a file.

Apologies for the long reply, but I’m trying to make sure I’m clear on this stuff.

But it doesn’t use an absolute path, as far as I can tell. The path ../src/index.css is, to my understanding, a relative path, since it uses the parent symbol .. to indicate the parent of the current directory. This is as opposed to using something like /src/index.css, which is relative to the root and is therefore an absolute path. What am I missing here?

Doesn’t it point to the HTML file that represents / builds the freeCodeCamp home page (which is usually called index.html)?

I don’t mean to be pedantic, so excuse me if it comes across that way, but it genuinely had me confused, because I’m under the impression that web addresses ARE absolute paths, and the video in the lesson previous to this one supported that impression. In the lecture “What Is the Difference Between Absolute and Relative Paths?”, the instructor Ania says

paths let developers link to resources like images, stylesheets, scripts, and other web pages

and

an absolute path also includes the protocol, which could be HTTP, HTTPS, and file, and the domain name if the resource is on the web.

If this is true, then shouldn’t a link to a homepage (like https://freecodecamp.org) , providing the protocol and the domain, be classified as an absolute path by definition?

1 Like

Hi. It is a bit confusing, I’ve only just done the lesson myself so perhaps others can step in to make it clearer. However on your first question, the description on the screen shot is describing an absolute path starting from the root directory and then to the final file. I think the description there was to make clear what they are referring to. At 0.43 of the video it says 2 dots points to the parent directory. An absolute path starts from the parent directory.

It is possible to link to a file on a web page but there is no particular file on the FCC home web address.

1 Like

I believe an absolute path starts from the root directory (the highest level directory), not the parent (the directory one level higher than the current one). In this case, it coincidentally happens that the parent and the root are the same directory, but that’s not always the case.

I think there technically is: the HTML file that represents the home page, which is probably called index.html. I understand that might seem pedantic, but it seems like an important distinction to make when we’re discussing the definition of a path.

Fair enough. I appreciate your answer nonetheless. Let’s see if anyone more experienced with the matter than the two of us has anything to say. Thanks! :heart:

Hi @ShadyHBedda

In regards to your first and second question - if you rewatch the previous video it shows that the protocol is file:/// followed by one or more directories from the root directory, each followed by a slash, then the file name.

From the net:

What Is an Absolute Path? An absolute path is the location of a file or directory specified from the root directory. It represents the complete path from the start of the filesystem from the root directory.

Absolute Path (URL): An absolute path in the context of web domains specifies the complete URL or web address of a resource, including the protocol (e.g., “http://” or “https://”), the domain name (e.g., “example.com”), and the file or resource path (e.g., “/images/pic. jpg”).

For example:
file:///C:/my-app/src/index.css

Note the file:/// is sometimes hidden by the browser, depending on your settings.

My computer uses C:/, however it depends on your computers operating system.

Happy coding

2 Likes

Hey Teller, thanks for the response.

I’m a little confused: what are each of the bullet points in your reply about / in response to? For example, when you say “is not a relative path” or “does not point to a parent directory”, I’m unclear as to what is not a relative path or does not point to a parent directory.

Would you mind clarifying, please? Thank you!

Those bullet points are from the options.

You’re right, they appear out of context so I removed them.

  1. https://freecodecamp.org is not a file path. The question is about an absolute file path. Sure, a web server might automatically serve the index file, but that isn’t the same as an absolute file path.

  2. ../src/nav.html is a relative path, but it isn’t the relative path “to the current directory” which is the requirement in the question.

2 Likes

Fair enough. That makes sense.

That’s my question: if it’s a relative path, why does it say:

If your public/index.html file needed to load the stylesheet, you would use an absolute path to navigate to the parent my-app directory, then to the src directory, and finally to your file: ../src/index.css.

It says you would use an absolute path, and then uses a relative path. Is this just a typo/mistake, or am I misunderstanding something?

Not sure what absolute path it is referring to.

It isn’t ../src/index.css and you wouldn’t need ../ if you already had navigated to the “parent my-app directory” first using an absolute path.


I opened an issue for it. Not sure how easy it is for changes to videos to be made, probably not that easy.

2 Likes

Thanks, @lasjorg. Much appreciated!

1 Like

Thanks for asking this, it was confusing me as well. I had to ask AI and it helped a bit. ChatGPT can be a bit senile at times so take what my “tutor” said with a grain of salt.

It essentially said that https://, http://, and file:// (file:///) are simply global indicators/callers for the file you will use. Those protocols are absolute due to the fact that you use it for something not found on your system and/or locally, meaning you need to call it from the root (and calling from the root means its absolute). Meaning it is in a sense separate from an absolute path. I guess an absolute URL is sometimes considered an absolute Path and (maybe) the other way around as well. That’s what I got when talking to ChatGPT.

Additionally, it said:
People use the terms absolute Path and absolute URL “…interchangeably or conflate them because they look similar and overlap in structure, but technically, they refer to different things in file systems and web development. Always consider the context to clarify which is meant!”

Edit: I just wanted to add this, I’m a beginner in this as well and I didn’t exactly confirm the validity of the statements, but it definitely helps provide a guide for more research if you’re interested. I decided to add this edit to make sure everything here is taken with a grain of salt and not take as the “absolute” truth.