Live-Demos: Sehen was der Code tut
Code versteht man am schnellsten wenn das Ergebnis danebensteht. Deshalb stecken überall im Wiki kleine Live-Demos, erkennbar am grauen "Ergebnis"-Rahmen. Diese Seite ist das Sprungbrett zu den interessantesten, und natürlich zur Spielwiese, wo du selbst tippsst.
Das Herzstück: In der HTML-Spielwiese schreibst du eigenen Code und siehst sofort das Ergebnis. Kein Konto, keine Installation, kaputtmachen unmöglich.
Demos in der Elementreferenz
| Demo | Zu sehen bei |
|---|---|
| Überschriften-Hierarchie gerendert | Überschriften |
| Bild mit alt, Maßen und Pixel-Diskette | img |
| figure mit Bildunterschrift | figure |
| Formularfelder zum Anfassen | input, select, textarea |
| Checkbox mit klickbarem Label | label |
| Aufklappbereich ohne JavaScript | details |
| Echter modaler Dialog mit Escape | dialog |
| Canvas das live zeichnet | canvas |
| Das Wiki eingebettet in sich selbst | iframe |
Demos in den CSS-Kapiteln
| Demo | Zu sehen bei |
|---|---|
| Fünf Schreibweisen, eine Farbe | Farben |
| Die drei Schrift-Grundfamilien | Schriftarten |
| margin und padding zum Anschauen | Abstände |
| Das Box Model als Zwiebel | Box Model |
| Flexbox-Verteilung live | Flexbox |
| Ein 2fr-1fr-Raster | Grid |
| Badge in der Kartenecke (position) | position |
| Das blinkende NEU-Badge samt Keyframes | Animationen |
Alle Demos sind bewusst klein gehalten und laufen ohne externe Dienste. Was du siehst, ist exakt der gezeigte Code am Werkk.