Firebug
This firefox extension is by far the single most useful tool when developing a website, it has the ability to modify HTML or even CSS live on the website. This means that you don't need to go and make changes to the actual code and refresh only to find it's still not working - you can adjust the code right through the open browser window and the changes will be updated automatically.
Download here

Web developer toolbar.
While Firebug does cover a significant portion of this toolbars functionality, it still does have a lot to offer such and ability to manage your session cookies, images, JavaScript and advanced form handling functionality.
Download here

HTML Validator for Firefox
One of the most frustrating things I find about using the online validator is that it can only validate public facing URL's. Meaning that if you're developing on your local server or a page behind .htaccess authentication there's no way for you to check if the page is valid HTML mark up. Well with this nifty tool you'll be able to validate any page without an internet connection, meaning that you can validate any web page directly through your firefox browser.
Download here

The reason this happens is because these characters are not part of the ISO 8859-1 character set, which are assigned values from 0 to 255. So the solution is to convert these numbers into a numbered entity range from 128 to 255.

Converting the ISO-8859-1 Characters to HTML Numbered Entities
This first option is to manually replace these characters as per the below reference table:

* Full list available at http://www.w3schools.com/tags/ref_entities.asp

The second option is to use a simple free program I've built for you to use, all you have to do is go to the below link and paste in your dirty code and it will output some nice clean ISO-8859 compliant text for you.

Clean up my code >>

Here's my experience, one day I found myself needing to write some new copy for a web page, so I opened up Dreamweaver and started typing.

First I created my page heading, which of course I thought should be wrapped in a <h1> tag, to be consistent with the rest of the website. I then started writing some of the copy for the web page and realised that I needed to create my content <div> tag as well as my <p> tag.

This went on for quite some time, before I realised that I wasn't really making any progress with the message I was actually trying to convey. The problem as I'm sure you can probably see by now is that I was so occupied with the design that I couldn't focus properly on the actual copy of the new web page.

The lesson I learnt from this experience is that if you're creating a new web page you should always open up a basic text editor and start typing in there. That way you're not distracted by the design or layout of the page.

It's important to make sure that you don't lose the message you're trying to convey by being a jack of all trades.

Here's another great blog post on this topic, which also explains why it's important to have separation between a designer and marketer. Wear more than one hat and eventually they'll all come crashing down

By default error reporting is turned off which most configurations of PHP, however to turn it on is pretty straight forward. In order to turn on PHP error reporting you'll just need to add the following two lines of code at the beginning of your application.

ini_set('display_errors',1);
error_reporting(E_ALL);

• The first line enables errors, and says that they should be printed to the screen as part of the output.
• The second line specifies that all errors should be included in the output.

Once you've made the change refresh your page and you should now see some useful error messages which will help you debug the problem.

IE (Internet Explorer) conditional statements allow us to create a separate stylesheet specifically for Internet Explorer browsers, we can even specify the browser version.

This is very powerful because it means you can have more control and still have a fully compliant XHTML document.

The below example will detect if the browser is Internet Explorer version 7, and if so then it will load a separate style sheet.
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie7.css" />
<![endif]-->

Also, as mentioned earlier it's possible to specify a separate style sheet for Internet Explorer 6. You just need to modify the first line of the code to "IE 6", which is illustrated in the below example.
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->

Make sure to place this code just before the closing </head> tag of your website.