HTML and CSS resources

Dave Raggett’s introduction to HTML covers similar ground to my tutorial and includes lists and bulletpoints (which I didn’t cover).

There is a standard for HTML, written by the W3C (World Wide Web Consortium). Check your HTML with the W3C HTML validation service. Please note: the simple examples on this site won’t validate. That’s to keep the examples simple.

Firefox has an HTML validator add-on which will save you huge amounts of time by checking your code as you write it. Just watch for a green tick or red cross in the bottom right corner of the browser every time you refresh the page.

Mulder’s style sheet tutorial at Webmonkey.

Dave Raggett’s CSS style sheet tutorial.

Dave Raggett has also produced the fabulous HTML Tidy (follow the link to Sourceforge, then the Executable Binaries)

There is a standard for CSS, written by the W3C (World Wide Web Consortium). Check your CSS with the W3C CSS validation service

CSS Zen Garden has an amazing demonstration of the power of CSS stylesheets (hint: if you aren’t looking at the source code of other people’s websites by now then now’s the time to start!)

Herself’s Webtools has a lot of information on template design, security and SEO for WordPress.


This is the best colour scheme chooser I’ve found so far. It makes it very easy to pick a set of colours which look great together. For some reason this gets overlooked on many sites.

Rather than picking individual colours you could find an image which contains the colours you want and then run it through a Colour Palette Generator.

An excellent color chart for determining those difficult hexadecimal RGB values.

A W3C chart of CSS colours by name.

Image Editing and Creation

GNU Image Manipuation Program (or The Gimp for short) is a free, wonderful, open source image editor. I’ve never used Photoshop. I can’t afford Photoshop. The Gimp does everything I’ve ever wanted to do and I’ve learnt only a tiny fraction of it’s abilities. Be prepared to put in a lot of work learning how to use it. Search on google and youtube for tutorials.

Font Design

GlyphTracer is an open source tool for creating a font from an image containing source characters.
FontForge is an open source tool for designing fonts.


Check your website works with a wide range of browsers. Here’s a selection of the most popular.

Firefox – the biggest independent browser. Very standards compliant. There is an excellent HTML Validator add-on for Firefox which saves me a huge amount of time during coding. In the bottom right of the browser you’ll see a green tick or a red cross without you having to do anything. As long as you’re coding valid HTML right from the start you’ll notice if it changes red.

Google Chrome – Nice and fast.

Opera – Some people swear by it.

Safari – the browser that comes installed on Apple Macs. I swear at it.


Most servers expect you to upload files using FTP. I use the excellent FileZilla FTP client. Be sure to download the client, not the server.

I’ve been using IETester for cross-browser compatibility testing. You can test your web pages in IE5.5, IE6, IE7 and IE8.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter