FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Clean Project Structures

[SOUND] Here we have the directory structure for our learning projects that we've been working on for the last four lessons. But now it's very quickly becoming messy, and we only have a couple files. It is considered a best practice to always divide your images, your CSS files, your JavaScript files, which you will learn about eventually, into their own folders. That way you don't have 30 images within the root, it's much harder to navigate, it's much less organized. So instead, create folders for your CSS and for your images. Now, I'm gonna take my style. And bring it in here. Any images I have will go in the images folder. Once you begin working with JavaScript, you will place any scripts within this folder. And then it's still okay to have dividers for your specific HTML files. It just depends if you need that. It's perfectly okay to have about.html within the root of your project, if that's what you want. Now, if we come back to our project, we need to update this. Before we were referencing style.css, but that will no longer work if I reload the page, as you can see like so. And that's because, we are looking for style.css within the root, but we should really be looking within the CSS directory. So now, I'm gonna say, go into CSS directory, and then find a style sheet called style.css. Reload the page, and now all is working fine, and we've organized our files much more cleanly, so always do this for each new project. You may even find that it's smart for you, to create a base folder and file structure for all new projects. That way you don't have to create these folders and files manually every single time, and I highly recommend you do that. In the next lesson, I'm gonna teach you about images.

Back to the top