CSS not working on Github pages

I’m working on the Excursion project from the Git and publishing to Github pages. (https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/finishing-touches-and-publishing-a-website/modules/git-and-publishing-to-github-pages/projects/f1-excursion)

When I check my code locally the HTML and CSS code pop up and the code works fine. When I published through Github. The website only displays the HTML text and broken image pictures.

Here is the respository for Git:

Here is a link to the published page:

https://vernonsyncere.github.io/excursion.github.io/

Thank you for your help in advance.

Hey,

You are linking to a file on your own computer, a direct path rather than a relative path.

<link href="C:\Users\Verno\Documents\Websites\excursion\excursiongithub.io\resources\css\style.css" type="text/css" rel="stylesheet">

Replace the code with:

<link href="resources\css\style.css" type="text/css" rel="stylesheet">

And you should be good to go :wink:

1 Like

That seemed to work. in the code that you provided is the “resources\css\style.css” the pathway from github?

No, it is the pathway of the directory your CSS is in relative to the HTML file. Just like the folder on your computer. By linking relative to the HTML file you the HTML knows where to pick up the files.

You may want to look into your href of your images aswell.

1 Like

I did exactly that and everything came up working properly. Thank you

1 Like

But do you understand what went wrong? How linking works?

Yes. I understand what went wrong but i’m not certain how to explain it in words. here goes my attempt at explaining it in words.

I created a directory with files on my local computer.

I then initialized that into a Github repository.

once in there, the pathways to my style sheet, images, and videos were all in the resources folder that is located in the Github respitory.

Please correct and verbage I used incorrectly.

2 Likes

In your HTML you linked to local files using an absolute path rather than a relative path.

An absolute path is a path that describes the location of a file or folder regardless of the current working directory; in fact, it is relative to the root directory. It contains the complete location of a file or directory, hence the name.

whilst

A relative path is a path that describes the location of a file or folder in relative to the current working directory.

The moment you created the GitHub repository and pushed your files, the HTML still had its absolute path, but inside a location (git repository) where this link is not existing.

I suggest making it a habit of always using a relative path link so that no matter where you place the whole website folder your HTML can find the files required.

4 Likes

Thank you. This was very very helpful.

2 Likes