Organizing your site, and backing it up with Dropbox.

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

As you read earlier, 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. 1 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 site folders

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. If you haven't received an email from your instructor or one of your classmates that invites you to establish a Dropbox account, go directly to Dropbox.com to establish an account. Do not download the Dropbox program; your computer has it already (Note: If you're taking 4110 online, you may need to download Dropbox on your personal computer if you do not have it already.). If another Dropbox user has invited you via email, however, be aware that if you accept their invitation (by clicking on a link in the email) they get more free space!

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

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

Once again, there is no need to download the Dropbox (or copy) application (unless you're taking the class online)! It is already installed on your computer.

3.a) Create folders inside of the Dropbox  folder. Start by creating a 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 a javascript library such as jquery, a google font, or something of the sort.  2

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? 3

3.d) Now erase all of those folders inside of the mysite folder that you just created EXCEPT FOR THE CSS FOLDER because we are about to use that one in this exercise. 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. When you get a chance, set up Dropbox on your home computer. 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 your home computer. If you change anything inside of Dropbox at home, the changes will also appear on your classroom computer. 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.

Print Friendly, PDF & Email

  1. (What, that's the way your bedroom already is 🙂 ?)

  2. (more on that later)

  3.  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.