I’ve been doing some Javascript tutoring this term and I realized that there are a few indispensable utilities that any budding web developer should know about.

Text Editor
The first thing you need is a good text editor. You can code anything in Microsoft’s Notepad or Apple’s Text Editor, but you won’t have any fun, that’s for sure. A good text editor is like a Swiss Army knife. Chances are you won’t use half of the features, but the ones you do use will save you an immense amount of hassle.

Text editors are useful because they display your source code in special colors to make it easier to read. This is called Syntax Highlighting. If you make a mistake, the text editor won’t highlight your code the way it normally would; this will call attention to the problem and save you hours of debugging.

Here are some of my favorite text editors:

• Komodo Edit – Mac, PC and Linux
• Geany - Mac, PC and Linux
• Smultron – Mac OS X
• TextPad – Windows

The first three are completely free of charge. I don’t like TextPad myself, but it seems to be popular among some crowds.

Mozilla Firefox
Real web developers will test their source code across multiple browsers and operating systems, such as Mac OS X, Linux and the various flavors of Windows. But if you’re just getting started, Firefox is the best browser to code in. If you get your site working in Firefox, chances are it’ll work nearly as well in most other browsers. At least until you start doing more advanced stuff. It also has an added benefit, which you’ll see in a moment.

Click the button below to download Firefox:

Firebug
Firebug is a Firefox plugin that allows you to view, edit and debug CSS, HTML, and JavaScript live in any web page. You’ll quickly see how useful this is when it turns up your first Javascript error.

Download Firebug

After you first install Firebug you’ll notice a little “bug icon” appear in the lower right corner of your Firefox window (you’ll need to restart Firefox once for this to appear). Click on it to view the Firebug window pane.

If you’re working in Javascript then you’ll love the Console tab. Otherwise the HTML and CSS tabs are your best friends. The Script, DOM and Net tabs won’t be handy until you gain a little more experience.

For more help with Firebug, check out the tutorials and video screencasts at the bottom of the Firebug documentation page.

A Project
Now that you have all these great tools at your disposal, you’ll want a project to get you started. Try working through some of the great tutorials at HTML Dog first. If you finish those you can check out the tutorials at W3Schools. If you’re feeling brave, try the Javascript tutorials.