Equipment

Bevor es losgeht solltest du noch ein paar Dinge installieren.

Browser

Um eine Website anzeigen zu können braucht man einen Browser. Welchen du benutzt, bleibt dir überlassen. Ich verwende Firefox, weil er CSS meiner Meinung nach am besten interpretiert. Häufig wird Seamonkey für die Entwicklung empfohlen. Ich konnte mich bisher aber noch nicht überwinden dem Feuerfuchs zu entsagen.
Das werde ich aber demnächst nachholen und die Add-on-Liste entsprechend ergänzen.

Die Art, wie Browser den (X)HTML- und CSS-Code interpretieren hängt überwiegend von der Browserengine ab. Die wichtigsten sind Gecko, Presto, Trident und KHTML.

Trident Gecko Presto KHTML
Windows Internet Explorer Firefox, Mozilla, Seamonkey, Netscape Opera Safari, Swift
Linux - Firefox, Mozilla, Seamonkey, Netscape Opera Konqueror
Mac Internet Explorer Firefox, Camino, Mozilla, Seamonkey, Netscape Opera Safari

Das sind bei weitem nicht alle Browser, aber zumindest die bekanntesten.

Damit deine Seite auf möglichst vielen Browsern gleich dargestellt wird, solltest du von jeder Engine mindestens einen Browser laufen haben.
Wenn du Windows hast wären das Firefox oder Seamonkey (Gecko), Opera (Presto), Internet Explorer (Trident) und ggf. Safari für Windows (KHTML).
Wer sich seinen Rechner nicht mit so vielen Browsern zumüllen möchte, kann seine Seiten unter browsershots.org auf verschiedenen Browsern mit verschiedener Auflösung testen.

Der Internet Explorer (IE) stellt einen Sonderfall dar, da dieser Browser einen großen Wandel vollzogen hat. Der IE6 hatte diverse Darstellungsfehler und Sicherheitslücken, die man bei der Erstellung von Webseites berücksichtigen muss. Hier gibt es eine Übersicht zu einigen dieser Probleme. Diese wurden beim IE7 weitestgehend gefixt. Durch den großen Wandel ist es sinnvoller zum optimalen Testen (mindestens) diese beiden Trident Browser zu verwenden.
Hierfür sollte man zunächst den IE6 zum IE7 upgraden, sofern noch nicht geschehen. Das kann man entweder direkt über die Microsoftseite machen, oder durch andere Methoden, auf die ich nicht weiter eingehen werde. (Google könnte helfen.)

Um den IE6 wieder auf den Rechner zu bekommen kann man Multiple IE benutzen. Mit diesem Tool kann man sich die IE Versionen 3, 4.01, 5.01, 5.5 und 6 installieren. Wirklich wichtig ist zwar nur die Version 6, aber es ist manchmal ganz nett sich Seiten auch auf älteren anzusehen.
Wenn man das nicht möchte, kann man auch den IE6 (sofern vorhanden) behalten und für die IE7 Darstellung das Firefox Add-on IE Tab benutzen.

Zusätzlich lohnt es sich noch den Textbrowser Lynx zu installieren, um auch einen Überblick über die Barrierefreiheit der Seite zu gelangen.

Übrigens sollten die IE≤6 sowie der Safari für Windows ausschließlich zum testen der Seiten und nicht zum normalen surfen verwendet werden, da sie diverse Sicherheitslücken und die IE auch Darstellungsfehler haben.

Add-ons

Für den Firefox gibt es eine Menge nützliche und weniger nützliche Erweiterungen, die die Arbeit erleichtern oder zumindest eine nette Spielerei sind. Neben denen, die sich kein Webdesigner entgehen lassen sollte, komme ich später auch noch auf andere nette Add-ons zu sprechen.
Die meisten Add-ons für den FF kann man sich direkt bei Mozilla ziehen.
Für den IE wird eigentlich nur eins benötigt.

Firefox Add-ons für Webdesigner

DOM Inspector

Der DOM Inspector bietet die Möglichkeit Websites semantisch zu zerpflücken und sich beliebige Elemente, sowie deren Eigenschaften anzeigen zu lassen. Er sollte automatisch installiert sein. Wenn nicht kann man Firefox einfach nochmal benutzerdefiniert überbügeln und den DOM Inspektor mitinstallieren. Die Einstellungen, Bookmarks, usw. gehen bei der Neuinstallation nicht verloren.

Inspect this

Dank Inspect this kann man ein Element direkt mit einem Rechtsklick im DOM Inspector anzeigen lassen.
Zum Add-on

Web Developer

Mit Web Developer installiert sich eine (ausblendbare) Toolbar, die einem diverse Möglichkeiten gibt an Websites herum zu pfuschen. Man kann eigentlich alles aktivieren und deaktivieren, als auch den Quellcode ändern. Vor allem für die Fehlersuche eignet sich dieses Tool.
Zum Add-on

Firebug
Firebug-Screenshot Klicken zum vergrößern

Firebug bietet eine Möglichkeit direkt in den Quelltext einzugreifen und die Umsetzung auf der Seite in Echtzeit zu sehen.
Eine kleine Anleitung gibt es bei Youtube
Zum Add-on

HTML Validator

Dieses Add-on zeigt anhand eines kleinen Symbols sofort, ob eine Website valide ist oder nicht. Beim Doppelklick auf dieses wird der Quelltext geöffnet und Fehler ggf. angezeigt und erläutert. Sehr nützlich für den Offlinetest. Leider stellt man mit diesem Tool beim normalen surfen fest, wie wenige Seiten im WWW valide sind.
Zum Add-on

IE Tab

IE Tab bietet die Möglichkeit eine Seite in IE7 Darstellung anzeigen zu lassen. Das ist eigentlich nur sinnvoll, wenn man den IE7 nicht installiert hat oder ihn nicht für eine Seite starten möchte.
Zum Add-on

Measure It

Mit Measure It kann man sich Abstände auf der Website in px anzeigen lassen. Das kann sehr nützlich sein, wenn man Seiten mit dynamischen Längen- und Breitenangaben testen möchte.
Zum Add-on

Color Zilla

Mit Color Zilla kann man sich die Farbinformationen auf dem Browser anzeigen lassen und kopieren.
Zum Add-on

Palette Grabber

Palette Grabber erstellt eine aus den Farbwerten der Seite eine Farbegalerie für Photoshop, Paint Shop Pro, GIMP oder Flash. Auch ein nützliches Tool, wenn man sich woanders Anregungen holt.
Zum Add-on

Sonstige Firefox Add-ons

Wörterbücher

Wer dazu neigt in Foren nachzufragen, sollte sich, wie schon einmal erwähnt, eine gute Ausdrucksweise angewöhnen. Dazu gehört neben korrekter Grammatik, schlüssiger Syntax und Groß- und Kleinschreibung auch eine gute Rechtschreibung. Je besser die Frage gestellt wird, desto besser wird die Antwort. Mit Hilfe der Mozilla Wörterbücher bekommt man Fehler genannt und bei einem Rechtsklick auch Verbesserungsvorschläge angezeigt. Bei zusammengesetzten Wörtern, sollte man hier jedoch vorsichtig sein, da diese teilweise nicht in der Wörterliste enthalten sind.
Zum Add-on

Adblock Plus

Adblock Plus ist ein interner Werbeblocker. Ein Musthave!
Allerdings fällt damit auch Werbung auf "guten" Seiten weg. Daher empfehle ich diesen Seiten die Werbung zu gestatten, da sie davon leben. Die Einstellung hierfür kann man bei Adblock vornehmen. Hier ein Statement zum Thema Werbeblocker von Gulli, dem Administrator des Gulli-Boards.
Zum Add-on

All-In-One Gestures

Wenn man das All-In-One Add-on installiert hat kann man alle wichtigen Browsersteuerung mit Hilfe von Mausgesten machen, so wie es bei Opera standardmäßig vorhanden ist. Diese sind frei konfigurierbar und werden mit einer beliebigen Taste ausgelöst.
Das ganze hat nur einen Nachteil:
Man lebt sich sehr schnell ein und muss sich an fremden Rechner erst wieder umgewöhnen.
Zum Add-on

Foxy Tunes

Foxy Tunes ermöglicht die Steuerung der meisten Music Player über den Browser.
Zum Add-on

FEBE (Firefox Environment Backup Extension)

Damit man nicht bei jeder Neuinstallation von Firefox alle Extensions neu rauskramen muss, bietet FEBE die Möglichkeit diese zusammen mit Themes, Bookmarks, Passwörter, etc. zu sichern.
Zum Add-on

Opera Tools und Widgets

Opera Developer Tools

Auf der Opera Website kann man sich inzwischen auch eine Entwickleroberfläche herunterladen. Die kann zwar nicht mit Firebug oder Web Developer vom FF mithalten, ist aber besser als nichts.
Zum Add-on

Ich hatte bisher noch nicht die Zeit alle Widgets durchzusehen, ob etwas brauchbares dabei ist. Falls jemand etwas findet, kann er sich gerne bei mir melden.
Zu den Web Developer Widgets

IE Add-ons

IE Developer Toolbar

Funktioniert so ähnlich, wie die Toolbar vom FF. Weitere Add-ons sind eigentlich überflüssig, da der IE eigentlich nur zum testen verwendet werden sollte.
Zum Add-on

Editoren

Damit du den Quellcode deiner Seiten erstellen kannst, brauchst du noch einen Editor. Ich rate davon ab zum lernen einen WYSIWYG-Editor zu benutzen, da der Code, den diese produzieren eher suboptimal ist.
Sauberen Code schreibt man am besten selbst.
Texteditoren gibt es wie Sand am Meer und ich habe (bisher) keine Lust alle einzeln vorzustellen. Im Prinzip reicht Notepad, welcher bei Windows enthalten ist. Wer Luxus wie Syntaxhervorhebung oder Multi-tabbing haben möchte, sollte sich einen anderen besorgen. Eine kleine Übersicht von Freeware-Texteditoren gibt es in der Linkliste.

FTP-Clients

Um deine Seiten auf deinen Webspace hochladen zu können, brauchst du einen FTP-Client. Filezilla oder SmartFTP sind für den Anfang geeignet, da sie für den privaten Gebrauch kostenlos sind. Letzterer ist gewerblich genutzt allerdings kostenpflichtig (36,95$). Wenn du bereit bist 25$ zu bezahlen, dann kann ich dir noch FlashFXP empfehlen.

XAMPP

Da PHP eine serverseitige Scriptsprache ist, brauchst du auch einen Server, der deine Seiten interpretiert. Dies kannst du natürlich über deinen Webspace oder einen eigenen Server machen. Alternativ kannst du aber auch XAMPP nutzen. XAMPP bietet die Möglichkeit einen Webserver auf dem eigenen Rechner einzurichten. Dieser dient jedoch lediglich als Testsystem und sollte nicht als öffentlicher Webserver verwendet werden.
Zum Download

Bildbearbeitung

Zu guter Letzt benötigst du noch ein Programm für die Bildbearbeitung. Ich finde Photoshop sehr gut. Leider ist es mit normaler Lizens alles andere als billig. Wenn du Schüler oder Student bist kannst du es jedoch relativ günstig erwerben. Ansonsten hast du die Vorteile des Internets bestimmt schon entdeckt und eventuell eine Möglichkeit gefunden Software anders zu beziehen.
Wer sich Photoshop nicht leisten kann/möchte, kann auf das kostenlose GIMP zurückgreifen. Wer sich auch noch in vektorbasierendes Grafikprogramm einarbeiten möchte, kann hierfür das kostenlose Inkscape verwenden.