Over the past few weeks I’ve been helping other students with the various problems they’ve encountered while trying to learn CSS. A lot of the time, the problems are easy to solve when using the correct tools, but without these tools, it becomes a long and complex process of trial and error to try and fix the problem.

Because of this, in an effort to help the rest of the class, the purpose of this post is to provide some information and links to some of the tools that I use for web design, with a quick explanation of why I use them, and how they help.

Software

• PortableApps – As already highlighted by Rowland, this lets you install copies of various applications on to your memory stick, meaning you’ll always have the software you want to use available to you. Although this is not strictly required for web design, it’s included here because each of the applications listed below can be installed to your memory stick via it.
• Firefox – The king of browsers. Not only is FF one of the more secure browsers available, the ability to extend it using community grown add-ons (highlighted below) makes it an invaluable tool for any and all web designers. The only additional advice I would give about browsers is that you should be sure to test that your designs work in all browsers, including Internet Explorer, Opera, Safari and Google Chrome (most of which can also be installed to your memory stick.)
• Notepad ++ – This is a very versatile text editor designed to replace Windows Notepad while including a lot of features useful to web designers. Specifically, for HTML and CSS editing, it uses syntax highlighting, which uses different colours to highlight the different elements within the source code, making the code easier to read. It also features syntax matching, which highlights where chosen tags start and end.
• FileZilla – A powerful – yet lightweight – FTP client. Use this to upload files to a remote server.

Firefox Add-ons

• Web Developer – Provides a range of tools useful to web designers. Using it you’re able to do things like disable CSS, outline specific elements, test forms, and a whole range of other useful features.
• HTML Validator – Lets you check if your source code validates correctly within your browser without needing to visit the W3C validation site. It also explain why the code isn’t valid, and teaches you how to fix it.
• ColorZilla – Not strictly required, but is a useful tool if you want to know what colour something within a web page is. Just click on the button – click on the colour you want to know about – and it’ll give you the hex code and RGB values for that specific colour.
• Firebug – This add-on lets you explore your design – element by element – displaying all the relevant information you could need, including what style formatting it has applied to it, and letting you edit elements to see what the changes look like in real-time. Very useful for debugging a site.

Advice

When you open a <div> tag, and choose to close it further down the page, make sure that you put a HTML comment next to it indicating which tag you are closing. This makes it much easier to see where your <div> tags start and finish, i.e:

<div id="wrapper">
	<div id="header">
	text and stuff
	</div><!-- /header -->
	<div id="content">
	text and stuff
	</div><!-- /content -->
	<div id="menu">
	text and stuff
	</div><!-- /menu -->
</div><!-- /wrapper -->

Anyone else?

That’s all I have for now, but if you have any killer apps or add-ons that help with web page design, please feel free to comment. Thank you.