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.
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!
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”>
try shuffling the order.
It worked then.