Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rita Dunne
2,753 PointsCSS Reset and Grid Instructions Unclear Comment
I managed to figure it out (I think) myself, but the CSS reset and grid portions were quite a bit of hassle because I didn't know there was a folder of files to download. He doesn't mention it in the video, and I spent a lot of time trying to figure out how to download and link normalize, when the folder had been there already arranged all along. It would be best if the instructor explicitly stated that there is a folder to download instead of assuming the users already know.
Another bit that was unclear was about the images. An example from the lesson would be <img src="img/logo.gif">. While I understood (and the instructor stated) that 'img' is the name of the folder that holds the pictures, I didn't understand what the exact destination path for me would be. I looked around online, and finally I found it by grabbing the index.html that came in the folder and looking at the page source. I noticed that normalize.css and grid.css were hyperlinked, so upon copying that link destination I came up with "file:///C:/Users/r5dunne/Desktop/web/css/normalize.css".
It would be very helpful if the instructor explained just a little bit more about how to find it on your computer. It is beginner stuff and for many it might be boring, but personally I had no idea that to link an image that was on your desktop it would start with "file:///C:/...." and when I looked at the destination path of files, it confused me that they are written with slashes going the opposite way (\ instead of /).
I had mixed feelings about all this. On the one hand, it was a real pain to have to go through, read the forums, and search the web in order to figure it all out, plus I'm still not sure that I did it right. On the other hand, it seems that that's what coding is all about: coming upon these stumbling blocks and figuring out a way to get it.
I've decided now though that it wasn't worth all the time and effort, and so now I am putting forth my suggestions to 1) state there's a folder to download, 2) go a little more in-depth about the file location, and 3) explain why the slashes go the other way on the computer and to not type it in that way.
UPDATE: Something's still not right with my webpage. I think that the .css files aren't linking because there are no margins whatsoever. I've spent enough time on this, though, and am just going to continue and hope that on the way I stumble upon the solution.
2 Answers
Scott Kipfer
10,348 PointsYou may want to set up some kind of local server such as WAMP(windows), LAMP(linux)...etc.
If you are using windows take a look at these links:
http://www.tutorialchip.com/php/wamp-server-installation-guide-for-windows-7-3264-bits/
Once you have these set up you will be able to store the files in C:\wamp\www\ and then access them at http://localhost.
Rita Dunne
2,753 PointsThank you so much! That explanation really helps me understand the lesson more!
Matthew McCulloch
5,341 PointsMatthew McCulloch
5,341 PointsOn the linking of files, the part that's missing is an explanation on the concept of relative links.
Lets say you have a file index.html located in the directory "C:\website\" that links to a stylesheet "style.css" in the directory "C:\website\css\". You can link with the literal url as follows:
<link rel="stylesheet" href="file:///C:/website/css/style.css">This will work but comes with a problem, what happens if you move the files and folders to another location and/or computer? The index.html page will still look for the css file in the directory "C:\website\css\". The best case scenario is that it will not find the file and provide an indication with missing styles, while the worst case scenario is it links to the old file on the machine. Then you spend an hour trying to figure out why the changes you made to your css sheet at "C:\website2\css\" aren't updating your webpage!
The solution to this is relative urls, which is being used in the video. Going completely over relative urls is handled in a later video(I think, can't remember) but basically they use the file you are viewing's current directory as the starting point for the file path. So if we use:
<link rel="stylesheet" href="/css/normalize.css">In a file "index.html" located in the folder "C:\website\" the file "normalize.css" will be looked for in the directory "C:\website\css\normalize.css". It took the current file path, "C:\website\", and added the relative path, "/css/normalize.css", to create the final path to look for the file. The advantage of this is that if we copy the files to the directory "C:\website\abc\this\that\newwebsitecopy\" when we load the index.html folder in the new directory it will look for the css file at the path "C:\website\abc\this\that\newwebsitecopy\css\normalize.css".
This benefit applies to moving the files to another computer and most importantly onto a web server.