Linking my HTML to normalize.css and grid.css

Thank you William. I'm using Sublime. I usually use notepad++ but am getting acquainted with sublime bc that's what they're using in the videos. I fixed my linking problem, got my stylesheets to catch, but I still don't understand how to organize my project files appropriately. Right now I have two different folders on my desktop that I downloaded from Treehouse for each part of the project. The files are: websitewaters-island01-stage03 and websitewaters-island01-stage02. It confuses me because the stage three folder has new things in it but also has overlap from stage 2, like all the image files. My index.html is on my desktop and when i try moving it into a folder my website crashes. My server is NOT already knowing what the root directory is, likely because I don't have my files organized properly, because the only way I can get images or my css to link properly is to type the whole file path as such:

<link rel="stylesheet" href="websitewaters-island01-stage03/css/normalize.css" type="text/css" media="scren">
  <link rel="stylesheet" href="websitewaters-island01-stage03/css/grid.css" type="text/css" media="scren">

and the same for images:

<img src="websitewaters-island01-stage02/img/you-bake-me-blush.gif" alt="You-Bake-Me-Blush"/>

if i just put img/x or css/x it doesn't work.

I organize my projects this way

project_name -css --.normalize.css --grid.css --styles.css

-fonts --file.eot --file.svg --file.ttf --file.woff

-img --file.png --file.gif --file.svg --file.jpeg

-js --lib ---jquery.js ---libfile.js --myscripts.js // This is inside -js- but not -lib-

these files are inside project_name -index.html -about.html etc

'''html Try doing something like this: • /treehouse_projects/

• project_1/ • index.html • img/ • js/ • css/
• project_2/ • index.html • img/ • js/ • css/
• project_3/ • index.html • img/ • js/ • css/

'''

If you copy an asset from project 2 to project 1 (or vice-versa) make sure that you open the index file from project one and not the one from project 2 (or vice-versa). That will re-route your browser to the correct root directory.

In sublime text you open a new editor window and just drag the current working folder (i.e. project_1) into the sidebar. This will give you quick access to every file in that directory. Just a helpful hint.

Another option that can be a little more confusing but is important to learn as a web developer is how to properly format file paths.

Understand the differences between relative paths (src = img/image.jpg) and absolute paths (http://www.yoursite.com/img/image.jpg).

For relative paths you may want to move up from the current directory that you are in, in which case you would use a ../

For example if you want to link to a file from index.html in project_1 to a img in project_2 in my directory listing above you do something like:

This HTML would be in the project_1 folder....
<a href="../project_2/img/image.jpg">A cool image.</a>

A Guide to File Paths

Hopefully this is a little more clear, at least this is how I do it.

Sorry for delay but ditto what William said.

If I'm reading this correctly, It looks like you have the files "normalize.css" and "index.html" in the same folder ( directory ).

If that is the case, then you can remove the full path in the href. and just use href="normalize.css".

What I would do is, open the folder that has "index.html" and in that folder create a folder and name it "css". After you create the css folder; place the "normalize.css" in the css folder. Then you can use href="css/normalize.css".

Also, most important, make sure you are makeing changes to the corrrect index.html file. I remember times where I personally had two different versions of a program, the live version and the dev version. After making changes and nothing was working, I noticed I made changes to the wrong file

Finally, If all fells, you can download the project files and see how teamtreehouse did it. Follow the exact structure they have and it should work..