HTML Playground - learning by doing

Screenshot HTML Playground
Lerne XHTML und CSS am Beispiel

Mir persönlich hat es schon immer mehr gebracht, Dinge am praktischen Beispiel zu erlernen. Daher finde ich das Konzept des HTML Playgronds schon einmal sehr einladend. Doch neben dem guten, wenn auch nicht neuen, Konzept ist vor allem die Umsetzung gelungen!

In fünf Feldern kann man die Möglichkeiten des Zusammenspiels von XHTML und CSS entdecken. Im ersten Bereich der Seite wird das Tag, welches man näher kennenlernen möchte ausgewählt. Daraufhin erscheint unten mittig ein Beispielcode und die Anzeige dessen, was der Browser dazu ausspuckt rechts daneben.

Klickt man im Beispielcode auf irgendeinen HTML-Tag (grün) erscheint unten links wahlweise eine Liste der möglichen HTML-Attribute oder CSS-Eigenschaften. Möchte man eines der Attribute, oder eine CSS Eigenschaft an Hand des ausgewählten Tags testen, muss man nur auf den runden Pluspunkt drücken und den Wert auswählen, on the Fly ändert sich nun die Anzeige im Minifenster.

Im Bereich oben rechts wird immer die Beschreibung dessen, was man als letztes anklickte angezeigt. Sehr nützlich ist, dass hier auch eine Notiz über Kompatibilität auftaucht.

[via Dr. Web Magazin Nachlese September 2007]

Tags: , ,

Comments are closed.