HTML & CSS for Beginners Part 7: File Structure

Key Takeaways

keeping our files organized is super important when it comes to creating websites so let's take a look at how we should do it [Music] if you've been following along you know that our websites need a folder to live in and which we call the root directory and this is where everything is living right now so let's open that up so I have my three files there and there you know they're just floating around a little bit we need to organize our files better when we're doing a website keeping our files really well organized is very very important and it's gonna make your lives much easier especially as you carry on in his adventure web design and things just get more and more complicated so the first thing I'm going to recommend is making a folder for your images I usually just call mine IMG you'll see a lot of people doing that if you want to call it images instead you can call it images and I'm gonna put my hamster in there I have my index here and my page two there are just going to stay there in general my HTML files are just gonna all live with each other in the main part of my directory here and this subdirectory of my images another subdirectory that pretty much all your pages are going to have is a CSS so I'm gonna make a CSS folder right there so I have my images folder I have my new CSS folder and we have nothing in the CSS folder yet but starting in the next video we're gonna start playing with CSS a little bit so very soon that folder will start getting used and another folder that you'll probably start using at one point or another is a JavaScript folder so JavaScript or what you'll see most of the time is just a j/s we won't really be getting in any javascript anytime soon but it's possible you see that folder now there's a reason that I'm keeping all these file names nice and short for my folders here I'm not writing out images I'm not writing out JavaScript and it's because I have to write links to all the things I'm linking to and the shorter the link the easier it's going to be so you know I'm lazy I'm just keeping it as short as possible for myself another thing you'll notice is I'm sticking with lower case on everything it's important we keep the lower case a it's just going to make it easier because we're standardizing everything and that just makes our life easier in general the other reason this is important is especially with our HTML files and our file names such as hamster dot jpg we don't want to put in weird things we don't want to cause any problems and it's possible that if you give your files weird names that you run into problems I mentioned that we have to have an index.html for the home page and it has to be a lower case index this is important I've had people put an upper case I when we're in class and it just doesn't work so when it's on the internet it's gonna work fine here but as soon as you upload this to the Internet it's not gonna be your home page the other thing is we want to avoid spaces so there's a reason I didn't call this page two with a space in the middle I put it as one word if you really really want to have spaces put a - instead spaces create these really weird things in your document so just to show you actually let's put my space and let's open up that file and let's go look here and we can see page two and there's this weird percentage 20 and that's the symbol for the space you can even see that popping up everywhere here and when this is on a server it could cause some problems so it's gonna work while it's on my computer but I don't necessarily want to trust that working properly when I've uploaded it to the Internet and even if it does people will look up here for reference to where they are sometimes and that's just really strange you wouldn't want that as a link to your website having a page - in there like that so we avoid spaces we avoid capitals we avoid numbers we avoid anything that's just not regular text keep filenames short because it makes your life much easier and keep them descriptive page twos not really the best it worked for this because it was just a an example file my home page will always be indexed if I have an about page it will be a boat dot HTML if I have a contact page it's contact HTML I have the picture of my hamster it's hamster jpg I'm gonna have a CSS file to me style dot CSS we keep it as simple and basic as possible pretty much so you don't want to overthink things that's it for this video it's not very complicated but it's important that we keep all of our things in the right place oh actually one more thing that I forgot if I go back to my index.html now you'll see that my hamster is no longer working and because my hamster is no longer working you can see that it actually says an adorable hamster in there because I used my alt text properly so that's pretty cool as I mentioned if an image doesn't load that will happen and you'll also miss this picture changed it's because of the source I used it sort of an image generation service but we won't get into that what we will do is fixing this right here just really fast since we're here so I'm going to do an open with Adam and we can come down here so there's my first picture that's the one at the top and here's my hamster and my hamster doesn't live in this place anymore remember this is a relative link so the way this used to be working was it was in this index file and then it was trying to find hamster dot jpg and hamster dot jpg was right here so I was looking what what around here is called hamster jpg there it is and it was working there's no more hamster jpg here I have to tell it where to find this file so my image is in my image folder so I'm gonna add IMG forward slash so now it's going okay I'm gonna look for IMG oh there's something called IMG let's go inside there and inside there I'm going to look for hamster jpg and now that's working so if I save my HTML file I refresh over here now you can see that my hamster is working properly so that's it for this video if you have any questions or any comments leave them down below like the video if you liked it I'm really looking forward to the next video we're gonna start doing some CSS the page is gonna start looking good we're gonna add some colors and cool stuff to it so I look forward to seeing you there you