IT Connect
Your connection to information technology at the UW

Tools of the Trade


A lot of people start designing web pages only to be discouraged to the point of giving up by the editor they’re using. There are literally dozens of text editors out there ranging all the way from the simple Windows Notepad to the very complex Emacs and Vim.

It is important to use an editor that you are comfortable with. If you like the simplicity of Notepad and don’t care about syntax highlighting, then use Notepad. If you want your attributes and your values different colors from your selectors and your properties, then something designed for writing code is probably best for you. The most important to look for in a text editor is that it is capable of saving in plain text. Word processing programs like Word and OpenOffice generally do not save files as plain text. Plain text files usually have the .txt extension and do not include any formatting like bold/margins, etc.

The editors suggested below are just the tip of the iceberg. All of these programs provide syntax highlighting which makes it much easier to write HTML and other code. There is much more than just syntax highlighting however: everything from debugging to in-place editing to collaborative editing is possible with the following tools. Most of the programs below are free.

Notepad++ For Windows


Notepad++ is available at The Notepad++ Downloads Page (select ‘Download Notepad++ executable files’ and then download ‘npp-x.x.x.Installer.exe’). It features support for HTML, CSS, JavaScript, PHP, and many other languages. To turn on syntax highlighting, save your file with the proper file extension.

TextWrangler For Mac


TextWrangler is a product released for free by BareBones software, makers of the popular BBEdit text editor. TextWrangler is available at The TextWrangler Download Page. It is similar in features to Notepad++.

SubEthaEdit For Collaborative Editing on the Mac


SubEthaEdit is not free but provides an interesting feature not easily found in any other editor to date: collaborative editing. You and a friend or coworker can view and modify a document at the same time over a network or Internet connection. It also provides syntax highlighting and easily integrates into Fetch (more on Fetch later).

You can download old versions of SubEthaEdit for free, and there is an educational discount on the most current version. More information is available at the SubEthaEdit Home Page.

Emacs For (Almost) All Operating Systems


Emacs is popular in the computer science industry as an “all-in-one” development environment. It is billed as “the world’s most customizable editor” because so much of its interface and how it handles documents can be changed by the user using a functional programming language called Lisp. Emacs is available for many operating systems and provides a consistent user experience across them all. Emacs does, however, have a relatively large learning curve and is generally not recommended for the beginner or the faint of heart.

More information on the GNU Emacs project can be found at the GNU Emacs Homepage. You can download Emacs for Windows here. A popular port of Emacs for Mac is called “Aquamacs” and can be found here.


Web design isn’t all about code! To make a visually appealing Web site, you might find yourself in need of an image or two.

Photoshop For Mac and Windows

The industry-standard in image editors on Windows and Macintosh machines is Adobe’s Photoshop. Luckily, we have a workshop with online curricula for Photoshop. The problem, however, is that Photoshop is prohibitively expensive for some or simply offers more features than what is needed for basic image creation and editing.

The GIMP / GIMPShop For Mac, Windows, Linux, and UNIX

The GIMP (GNU Image Manipulation Program) is a free, open-source alternative to Photoshop. When coupled with GIMPShop, a variant that makes GIMP behave much like Photoshop, you can create Photoshop-quality images without the cost.

You can download GIMP from You can download GIMPShop from

Online Image Editors

If you are just looking for basic crop/resize functionality with a few added effects and don’t want to download and install (or learn how to use) a heavy image editing program, then you may consider looking at one of the many online image editors. Most of them are free and provide many of the features that most web designers need to get started.

A very small list of Online Image Editors:

(Please note that we in no way support or endorse any of these companies or products. Use them at your own risk.)


Once you have some content to put on your Web site, you need to transfer it to a server so the world can see.

Many Web site hosting companies let their clients use FTP (File Transfer Protocol) programs to transfer their files. Thus, there are dozens of freely-available FTP programs available. The UW, however, does not support regular FTP and instead requires that you transfer your files using SFTP, or Secure File Transfer Protocol. Many of the free FTP programs do not support the more-advanced SFTP system.

sftp For (Almost) All Operating Systems

A command-line utility called sftp is available for almost all operating systems. It does not provide the graphical user interface provided by Tectia and Fetch, but it does provide a more powerful feature set for the nimble-fingered.

It is beyond the scope of our tutorials to discuss sftp. Many of thesftp commands for navigating the file system are similar to those discussed in our (Unix workshop curriculum)[/lst/help/fundamentals/unix].

Below is a sample session with sftp. The user connects, lists the contents of the remote home directory, gets (downloads)index.shtml and then immediately puts (uploads) the same file before quitting.

$ sftp
Connecting to
sftp> ls
Code                      connect.php               cssnotes                  
cvsroot.tar               localhost.sql.gz          mysql                     
mysql-5.0.37-linux-i686   mysql.sock                public_html               
public_media              schoolfiles               student_html              
svnroot                   www.tar                   
sftp> cd public_html
sftp> get index.shtml
Fetching /nfs/aesop12/hw02/d73/rtimmons/index.shtml to index.shtml
/nfs/aesop12/hw02/d73/rtimmons/index.shtml    100% 2032     2.0KB/s   00:00    
sftp> put index.shtml
Uploading index.shtml to /nfs/aesop12/hw02/d73/rtimmons/index.shtml
index.shtml                                   100% 2032     2.0KB/s   00:00    
sftp> quit

For more information on the sftp utility, type man sftp at the command line.

Internet File Management >>

Last reviewed June 25, 2020