CSS not working on GitHub Pages

I just finished the Excursion project on Codecademy’s Full Stack Development career path and I pushed my code to a repository on GitHub. When I open the html file locally from my computer, everything looks fine but when I open it on Github pages, it’s missing the css styles and the images. Basically it looks like a plain html skeleton website. I made my path to the stylesheet relative to my html file but I can’t figure out what’s wrong.

Here is my repository in Github:

Also here’s a link to my Github Pages:

The Resources folder name in your project starts with a capital R, but in the HTML code, it’s with a lower r.

If you are on Windows, the folder’s names are not case sensitive but on a Unix system (and GitHub is running on a Unix system), the folder’s names are. This means that resources is not the same folder as Resources. :wink:

1 Like

That seemed to work, thank you! Just a few questions:

  • I ended up having to change the slashes from forward slash to backslash, is that the proper way to do it on GitHub? I use a Mac so I do forward slash.
  • Why did GitHub capitalize the resources folder if its saved as all lowercase on my computer?
  • The video clip of the phone doesn’t seem to be working still. The image is there but the video isn’t looping through, do you know why that is?
  • The forward slashes should work fine (and should be the ones to use)
  • Really strange, I’ve got no idea why. Especially if you are working with a Mac.
  • The source in the HTML contains a s to the video folder name, which is not the case for the folder itself (I saw that you’d fixed this point)

It seems that the video is not auto-starting; I think you may try to add the muted to fix the problem (<video>: The Video Embed element - HTML: HyperText Markup Language | MDN)

Adding the muted worked! Thanks again!

1 Like

Remove the css folder and keep your index file and css at same place, and remove the hierarchy in link attribute as href=“main.css”.
Add in head tag

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then
and then
try shuffling the order.
It worked then.