Hi everybody, welcome back. I know that one of the most frustrating things that can happen when you're designing and developing your webpage is when you just can't get your code to talk to one another. If you've written some HTML, and you're trying to link it to your style sheet, and they just don't seem to recognize each other. So today, we're going to talk about how web designers tend to organize and separate their code into different parts. First, we always start off with a main folder that's going to hold your HTML code. In addition to your code, you're going to have a folder for your CSS, your images, and if you're doing it yet, your JavaScript code as well. So organizing your code into these separate folders, CSS, JavaScript, images, it's not a rule. Your page will still work even if you have everything inside one big folder. But as you go on in web design, your fellow designers are going to expect that you have similar conventions to their own. So you wanna get used to doing things the right way, right from the beginning. So here I've got a quick picture of how I could organize the code using these different folders. So I have ProjectOne, ProjectTwo, and ProjectThree. Here in ProjectThree is where I really wanna look at what we're doing. As you can see, I've got an html file, an html file, all four of my html files. In addition though, I have my css, my images, and any JavaScript. We want to make sure that all these different files can talk to one another. And so we're going to use the convention here, and I'm gonna show you how to make sure they can link together in the right way. So let's say that inside your HTML file, you want to link to your style sheet, your Java functions, and perhaps a picture. Well this is the way you're going to do it. When you link to your style sheet, you want to make sure you include your CSS folder. You don't need any other folder, just that one. But be careful, if you called it css lower case, make sure your link says css lower case, not upper case. When it's time to link to your java files, you do the same thing. Make sure you start the link with that js. What this does is it tells the browser, hey, I need this file right here, but in order to find it, go into the JavaScript folder first, right? Finally, the same thing, when it's time to link to an image, make sure you link to your image folder first. Now the images folder is the one that tends to have the most variance in the name. Some people call it image, some call it images. Another kind of common name is to call it img. So when you're linking your code with other people's code, make sure you do a quick check. And make sure that your folder names CSS, JavaScript, and images match what other people are expecting. When it comes to linking from your style sheet, it can be a little bit more tricky. In the example I have here, we want to link to this holiday picture right here, all right? Now we know that the file isn't in the CSS folder. It doesn't belong there. Pictures should be in the images folder. But the problem is, how do you tell the browser that the images folder is someplace different? If I just had this part of, if I just got rid of this and we didn't have it, and all I put was images/holiday.png, the browser goes, hm, somewhere there's a file that goes css/images /, and then there's you're picture, holiday.png. And that's wrong, right? We don't have an images folder inside of our CSS folder. So instead this little dot, dot right here, it means go back one folder. So right now I'm in the CSS folder, please back up [SOUND] back up to my ProjectTwo folder or my ProjectThree folder, whatever it happens to be in. This can be tricky, and this can cause a lot of people to have issues. I almost intentionally make people do this because I want them to learn how the folder structure works. So if things aren't working for you in your folder structure, here's a few tips you can do just to see if we can find out where the issue is. First, if the link isn't working for you, check to make sure that you spelled the file name correctly. Case matters, upper case, lower case, it can make a big difference. You also wanna make sure that the files are in those correct CSS, JS, or images folders. Finally and this is a big one. As people tend to mess up on there code, they open up new versions of the files. It never ever ceases to amaze me how many times that I've done this myself, where I'm working on a file, I'm making changes, and they're just not showing up in the browser. Almost all the time it's because I'm working on a bad copy. So I'm hoping that this is going to help you understand a little bit more how you can organize your code to make the best use of the different CSS, JavaScript, and images functions out there. Thanks.