Organizing your site, and backing it up with Dropbox.

The Web Site (don’t let yours be a messy bedroom)

Web pages are made up of multiple files and web sites are made up of multiple web pages which, in turn, are made up of even more images, CSS, JavaScript files, etc. Even small websites may be composed of hundreds of individual electronic files which is why it is crucial to have an effective organizational system.

In the physical world, most of us have a bedroom with a system of drawers and a closet for organizing items of clothing. Imagine what your bedroom would be like without these systems with socks, underwear, shirts pants, etc., all jumbled up into piles on your floor, bed, etc. [footnote] (What, that’s the way your bedroom already is ūüôā ?) [/footnote] Well, here in the digital world this is your chance to improve.)

A poorly organized website can be just as much of an organizational challenge as a really, really, messy bedroom, but it is actually quite easy to avoid the digital mess through the use of folders. Folders are digital organizers that allow you to group files and collections of files as your website expands, and to avoid the nightmare of a truly messy site that may not even work very well. 

But enough talk about abstractions. Let’s look at the process of organizing a website before you start to build it.¬†

Step 1: Install Dropbox and create a mysite folder

Dropbox, for those of you who aren’t familiar with it, is a great tool for backing up your work and for synchronizing content across multiple computers because the site that you create on your classroom computer will automatically be copied to any other computer that establish your Dropbox account on. You may already have an account. Otherwise, here’s how it works.¬†

1.¬†Visit to establish an account. If you’re taking 4110 online, you may need to download Dropbox on your personal computer if you do not have it already.

2. If your dropbox account is already full, you may want to consider another free cloud-based service such as 

3. Install Dropbox on your computer if you do not already have it.

3. Set up your account online and then activate it on your computer by starting the dropbox (or box) program . 

3.a) Create a folder inside of the Dropbox  folder named mysite. The mysite folder is where you should store all of the work that you do for this class. REMEMBER THIS. When you create a folder for a website, ALL FILES that you use for the website should stay inside of the main folder. NEVER link to a file that is outside of that folder unless, for example, you are linking to an external website. 

3.b) Create 5 additional folders inside of the mysite folder named:  css, images, js, project_1 and project_2.

3.c) Open the project_1 folder and create 3 folders inside named css, js, and images. Open the project_2 folder and, once again, create the same 3 folders: css, js, and images. Why so many folders? [footnote] Ideally, the mysite folder should include just a few html files. All of the peripheral files for these html files should be placed inside of the css, js, or images folder, based on file type. Later on in the semester you will create two websites; the first website will live in the project_1 folder, the second in the project_2 folder. [/footnote]

3.d)¬†Now erase all of those folders inside of the mysite folder that you just created EXCEPT FOR THE css FOLDER AND THE images folder. Why? We will work on multiple projects in this class but won’t set them up quite this way. Plus, everyone has their own ideas for how to use folders effectively. The main point is to use folders for organization and thereby avoid a lot of mess and confusion.

4. If you use another computer for this class, set up Dropbox there as well. Voila! The mysite folder and its contents, as well as ALL of the content that you create inside of Dropbox, will be stored online and on any other computer with your Dropbox account.  Even better, Dropbox can compensate for human frailty. Everything in your Dropbox folder is stored online with version control. This means that if, for example, you work on a paper for days and somehow screw up and save the paper after stupidly deleting 20 pages, Dropbox has your back. Just browse to the online version of the file, right-click and ask for the earlier version before your brain took a vacation.