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
Nick Reeder
5,434 PointsSetting up my html project folder
Alright, so this might be elementary, but I have never been told how to set up a folder for building a website. The way I understand it I create a folder and then I will save my index.html, stylesheet.css, ing, etc. in this folder. Is this correct? I have dabbled a little bit with Xcode which is nice, because it does all of this for me. I am just looking for some clarity on the html front. Thanks.
2 Answers
Chase Lee
29,275 PointsThat's one of the ways you can do it. There are many other ways but you should learn about them later.
Tiffany Harrison
11,424 PointsTo keep things straight, I usually have a folder with my index.html, a CSS folder, a JS folder, and an images folder. That way my types of files are with each other and I don't have a long list of random files in the main directory. Although that's really going to vary with the types of projects you are working on. I think it's mainly what you are most comfortable with. Also, if it's a group project, you have to think about what's easiest for everyone to find. Also, if you are going to be referencing javascript files and external style sheets, you don't want to be hunting them down to know you are linking them correctly.
Nick Reeder
5,434 PointsThank you, Tiffany. How does html know which css/js/img folder to link to? Is it a matter of naming websiteA's css linked file websiteA.css? i.e. I don't label every css file "style.css" and so on. Like Chase mentioned above, I might be getting a head of myself, but I am just trying to formulate everything in my head...
Tiffany Harrison
11,424 PointsNo problem! The HTML knows what css/js/img folders to link to because you have to tell it to. You'll learn about this once you get a little further in your lessons. But, for example:
<head><link rel="stylesheet" type="text/css" href="/css/style.css"></head>
You'd put this link between your head tags. That's telling it to import that style.css file from the /css/ folder. Here's a link with more information: http://www.w3schools.com/css/css_howto.asp
Nick Reeder
5,434 PointsLast one, I promise...Won't every project have its own css file? Therefore how does it know which one it is supposed to point to if they are all called style.css?
akc
11,729 PointsIn this case you can either use a different name for your stylesheet as a unique identifier (they don't have to be called style.css - they can be called whatever you want as long as you have the .css extension). Or alternatively you can use different folder name as unique identifier if you must name all your stylesheet the same name.
For example: 1) Use different names for stylesheets in the same folder main folder (index.html) -- css (style1.css, style2.css)
2) Use different folder main folder (index.html) -- css1 (style.css) -- css2 (style.css)
The second way is not preferred... as it is easier to keep all stylesheet at the same place. As Tiffany mentioned, you just need to tell your html file (ie. index.html) in the head section where is the file located, and you can link many stylesheets for the same page, just remember the order which you put last has the highest priority.
Example: <head> <link rel="stylesheet" type="text/css" href="/css/style1.css"> <link rel="stylesheet" type="text/css" href="/css/style2.css"> </head>
Style2 will have the highest priority if they are cover the style of the same element.
Chase Lee
29,275 PointsAlfred Cheng is right you only need to use the extension .css on your folders. They can be named anything you want as long as they have the extension .css.