Web Development from Scratch: Folder Organization


Up until this point, we've stored all of our files on our desktop. In real-world projects, though, we'd never do this. Instead, let's create a template folder structure for each new project.

Choose 720p for the clearest picture.
Subscribe to our YouTube and channels to watch more screencasts.
Related Posts
  • Crafts & DIY
    Crochet Fundamentals: How to do Chain StitchChainstitchpreview
    No matter what crochet project you want to start, chances are it all begins with one simple technique; the chain stitch! If you’ve always wanted to learn how to crochet, follow our series of Crochet Fundamentals. This tutorial uses US crochet terminology, with the Australian and UK term in brackets. Stitches include chain (ch)[ch].Read More…
  • Code
    Creative Coding
    Setting Up Grunt For Your Next ProjectGrunt logo 400
    In the first post in this series I gave a quick overview of Grunt and in the next post I'm going to walk you through the necessary steps as to how using Grunt can improve your WordPress development skills. Specifically, we'll talk in-depth about the necessary files like package.json and Gruntfile.js, but for now we are going to create a few sample files so that you can run Grunt with your WordPress theme or plugin project.Read More…
  • 3D & Motion Graphics
    Motion Graphics
    How to Make a Breaking News Opener AnimationTuts news title retina
    In this tutorial, we'll be creating dynamic arrows, along with some other motion graphic elements to enhance the quality and look of our news-style opener. We'll also learn about controlling the colors of the whole project through one layer, which is very useful when creating After Effects templates.Read More…
  • Code
    Creative Coding
    Creating a TextMate Bundle to Easily Package Your WordPress ProjectTextmate bundle 400
    If you've developed a WordPress theme or plugin, then you know how fast your codebase can grow in just a short amount of time. You start off with just a few PHP, JavaScript and CSS files. Then you find yourself creating image assets and adding them to your codebase together with their Photoshop file counterparts. After a while you'll be including other third-party PHP libraries as well. Then when you're finally ready to ship your WordPress project, you'll end up having a web of multiple file types like *.php, *.css, *.scss, *.js, *.min.js, *.png and *.psd, maybe you'll have some hidden files like .DS_Store. You would eventually need to clean your codebase up before zipping them all up for your users. Normally, this just means that you duplicate your files, then scan each and every directory deleting all the unwanted files. You'd then archive your project then perhaps use a third party app to remove the hidden files. This article will teach you on how to automate this packaging process by building a TextMate Bundle that would do everything for us with a single shortcut key. [tip]This article teaches about some tips regarding TextMate, an awesome code editor for Macs. You can find more information on TextMate from MacroMate's website[/tip]Read More…
  • Photography
    How to Shoot Your Own Lens FlaresTuts preview lens flares
    In this tutorial, we are going to examine how to create your own custom light leaks and flare footage to use in your projects. We will combine this process with some popular lens tricks for DSLRs to create our own unique look. Read More…
  • 3D & Motion Graphics
    How to Pull a Solid Key Using Primatte KeyerAetuts retina primatte keyer
    In this tutorial, we'll do a project-based overview of the Primatte Keyer and highlight it's advantages over Keylight. Starting with how to preserve detail in hair, we will then move on to matching the color of the clips, and finally wrap up with refining our edges.Read More…