How to prepare your computer for Web projects

version 1.2 by Jon Ippolito

Why prepare?

Web projects are relatively easy to make, as HTML is very forgiving and the Internet offers many free tools to help you. That said, a first-timer can get tripped up by certain details. These instructions will help you get this "housekeeping" out of the way and start making Web pages.

Related resources

If you're a New Media major at the University of Maine, you may also want to check out How To Use NMDprojects.

Screencast script


This screencast assumes you have an Apple computer running OS X (though principles are similar for other platforms).

We'll also assume you have access to a Web host, and have the server URL, login, and password handy.

This particular screencast will use OS 10.7 Lion, TextWrangler 3.5, and Cyberduck 4.


1. Show your file extensions by default

Web browsers are more finicky than word processors about the names of files on Web sites, so first navigate to your Finder and choose Finder > Preferences > Advanced > Always show file extensions. You'll see later why this is important.

2. Install a code editor

Don't use a word processor like Microsoft Word or TextEdit, because they will by default save your file with fancy formatting like curly quotes that can't be read by a Web browser. Instead, download a code editor, which will download your code as simple text (and only compile it into something fancier when necessary).

Wikipedia has a good comparison of editors to choose, from simple free editors to more powerful costly ones. Here I've opened TextWrangler, a free code editor for the Macintosh.

3. Start from an HTML template

Though you can start a document from scratch, I recommend downloading a template for the kind of code you want to write, then opening it in your code editor.

You should also save your file before you begin working on it. The extension you choose--in this case, .html--will help the code editor decide which contextual cues to give you.

4. Name your file carefully.

If you are placing it online, don't use spaces, capital letters, or strange characters, which could be misread by the browser. Instead, separate lower-cased words with underlines, and make sure to include that file extension.

Now you should see the syntax coloring come to life, one of the essential features of any editor. Syntax coloring helps you distinguish specialized words and symbols like HTML tags from ordinary text. More powerful editors have helpful features like code completion, which gives you hints as to the syntax of the code you are using, and code folding, which eliminates clutter by hiding portions of the code you don't need to see at the moment.

5. Install a file transfer client

Again, Wikipedia has a good comparison chart of FTP (File Transfer Protocol) clients. I'll show you Cyberduck, which is also free software for the Macintosh.

In your Finder, open the folder containing the files you want to put online--in this case, just an HTML page and an image.

Then Launch Cyberduck and choose File > New Browser. This will not be a Web browser, but more like a Finder window for your online files, which will probably be hosted hundreds of miles away on distant server.

Click the plus sign at lower left to create a new bookmark. Type in a nickname, the server URL, the username, and, in the "path" field, any folders in which the project may be nested. Use a forward slash to separate folders within folders.

Although applications like Cyberduck are commonly called "FTP" clients, in most cases you'll want to choose an SFTP connection--or Secure File Transfer Protocol--from the drop-down at top.

Then just close the dialog box and double-click on your new bookmark to see what's on your server. Nothing yet--so let's upload the Web files you made earlier.

6. Upload your Web files

If you sorted your Web files into a folder on your hard drive, that's great, because you can just drag the entire folder into the open window, and Cyberduck will copy all the files and the directory structure as needed.

How can you see what these files look like in a Web browser? If you don't know your Web host address, Cyberduck will offer you a guess if you control-click in the Cyberduck window to copy the URL directly. (You want the HTTP URL, not the FTP one.) But you should know the address anyway, so just go to your Web browser and type it into the location bar.

Now you can click to view each file individually or navigate across folders. By the way, now we see another reason it's important to show file extensions. That beautiful bunny picture you named bunny.jpg won't show up if you type the wrong extension, such as .jpeg or .JPG.

Most people don't want an online visitor to see their files, but just the Web pages themselves; it's more secure and just looks better. To enable this, rename your home page--preferably on both your local machine and remote host--to "index.html." Now when you go to the URL containing that file, your Web browser will automatically load it.