Software Overview

What web design software?

In a field as diverse as web design there's no all-in-one software package. You'll find yourself switching regularly between applications, depending if you do programming, graphics design or server administration.

There's a huge amount of software available for those tasks, some free and some commercial. The good news is that you can get all the necessary software for free!

I did my best to find free software solutions for all three major platforms: Windows, Linux and Mac. Below you'll find a list of both free and commercial web design applications:

Category	Software	Description	License	OS
Programming	PSPad	PSPad is what I consider one of the best coding editors out there! It supports an abundance of programming languages, code highlighting, powerful editing functions, regular expression search in documents and folders, and the list goes on ... did I already mention it's free?	Free
	Notepad++	Very similar to PSPad, a top-notch coding editor!	Free
	Bluefish	A rather new, though already powerful editor for the Linux and Mac platform.	Free
	Vim	Another good one.	Free
Debugging	HTML Validator for Firefox	I really wish I had known about this gem of a software when I first started out with web design! This is a plugin for Firefox that checks the currently loaded web page for errors using the official SGML Parser and HTML Tidy. It will display a red, yellow or green icon in the lower right corner of Firefox depending if the page has errors, just warnings or is error-free. By clicking that icon a new source code window will open with all errors documented and even suggestions on how to fix them. I couldn't live without this anymore!	Free
	Firebug for Firefox	Have you ever wondered where that nasty CSS code is hidden that's causing your page to look all weird? With Firebug you can just right click on any element on the page and inspect its CSS, Javascript and more. It gives you detailed information on where the codes are located (file and line number) and even allows you to change stuff on-the-fly and see the results instantly without touching the real files! Believe me when I say this tool saved me many hours of headache.	Free
Graphics	Adobe Photoshop	The industry standard for professional image editing. Doesn't get much better than this, though its price tag can be quite hefty, even the education version.	Commercial
	Corel Paint Shop Pro	Formerly known as Jasc Paint Shop Pro. A good alternative to Photoshop at a fraction of the price.	Commercial
	GIMP	A powerful freeware image editor. It originated in the Linux community, though by now there are ports for virtually any platform.	Free
	Adobe Illustrator	The king of vector graphics!	Commercial
	Adobe Fireworks	Formerly known as Macromedia Fireworks. Does bitmap and vector graphics and is aimed at web designers. A very nice application!	Commercial
	Adobe Flash	Also formerly known as Macromedia Flash. A very powerful vector animation and scripting application for creating multimedia flash files which can be displayed by most browsers.	Commercial
	CorelDRAW	The commercial Adobe alternative for vector graphics. Slightly cheaper than the competition.	Commercial
	Inkscape	One of the best free alternatives to commercial vector graphics software.	Free
Web server	WAMP	WAMP stands for Apache, MySQL and PHP on Windows. This neat package automatically installs and configures these 3 components. Get your own local Windows server up and running in no time!	Free
	LAMP	Same as WAMP for the Linux platform.	Free
	MAMP	Same as WAMP for the Mac platform.	Free
FTP	SmartFTP	A very good commercial FTP program with a 30 day evaluation version.	Evaluation
	Core FTP	Decent freeware FTP client for Windows.	Free
	FtpCube	One of the better FTP clients for Linux.	Free
	Cyberduck	A nice Mac FTP client. Also does drag & drop SSH.	Free
SSH	WinSCP	Allows for graphical drag & drop of files between your computer and server over the Secure Shell network protocol.	Free
	PuTTY	Administrate your server through the command line interface.	Free
	MacSSH	Similar to PuTTY but for Mac.	Free

Do I need all that?

Don't worry, you won't need all that software right away. You'll be gradually adding new software to your repertoire as you improve your web design skills. In fact, to get started all you need is a programming editor.

Programming editors

If you know a bit about web design software you're probably wondering why I haven't included popular WYSIWYG editors such as Adobe Dreamweaver or Microsoft Frontpage in the listing.

WYSIWYG (what you see is what you get) means they let you build web pages by simple drag & drop of text, images, buttons and so on without writing a single line of HTML ever! This sounds especially appealing to beginners and herein lies exactly the danger. Those applications write all the code for you, meaning you have no control over the generated code. This is bad, you need full control over the code for the following reasons:

• Such applications often generate more code than necessary, producing so called tag soup
• Hand-written code can be optimized for your particular needs and faster loading times
• You need full control over your code for doing search engine optimization
• As soon as you start outputting web pages with PHP and MySQL (and you will sooner or later), drag & drop doesn't work anymore because you have to tell PHP exactly what HTML code to output

Of course it's up to you which editor to use. If you don't want to bother with installing any software until you know a bit more about web design you can just use Notepad (usually located in Start All Programs Accessories). If you do want to follow my advice I suggest you download one of the programming editors listed above. There will be a step by step PSPad guide later in this tutorial.

Graphics software

By looking at above listing it becomes obvious that Adobe is the clear leader in the graphics department. Unfortunately, if you're planning to get a copy of their software, you'll have to make quite a bit of an investment.

The two free solutions, GIMP and Inkscape, are certainly nice but the commercial products have more to offer overall. Corel Paint Shop Pro provides the most bang for the buck, costing only 99$ last time I checked.

If you're willing to pay a bit more Adobe Fireworks is a very good choice, combining the best of the bitmap and vector graphics world for around 299$. It has a very streamlined interface for quick web graphics production.

Web server software

Maybe you recal from the web design beginner tutorial that I said personal computers make bad servers. So why run a web server on your local machine?

The reason is that unlike HTML web pages which can be tested in any browser, dynamic and database driven web pages (e.g. using PHP and MySQL) need server software to work. Thus, having a web server on your home computer allows you to test PHP and MySQL pages locally before uploading them to your live server.

This is very useful because it prevents you from accidentally messing up your live homepage with possibly active visitors on there and is also much faster for developing web pages than uploading your files after every little change. There will be a step by step WAMP guide later in this tutorial.

FTP and SSH software

When working on live servers, such as uploading files or doing server administration, you need FTP or SSH software respectively. Those programs allow you to work with your server without having physical access by connecting to it through FTP (file transfer protocol) or SSH (Secure Shell).