Workshop und Stationen
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Bauen Sie Live-Webstücke in einem Mehrfachbereich-Autorenraum — mit Build-along-Stufen, parametrischen Variablen und eigenständigem HTML-Export, wenn Sie die Seite außerhalb von TeachForge brauchen.
KI kann entwerfen. Sie entscheiden, was die Klasse sieht.
Was HTML / CSS / JS ist
HTML / CSS / JS ist eine Mehrfachbereich-Web-Autoren-Station. Sie schreiben Markup, Styles und Skripte nebeneinander, sehen die Seite in einem sandboxierten iframe in der Vorschau und — wenn Sie es brauchen — exportieren eine eigenständige HTML-Datei für außerhalb von TeachForge.
Das zählt im Unterricht, weil Web-Fertigkeiten Sinn ergeben, wenn Lernende das Ergebnis sofort sehen. Ändern Sie einen Style, steigen Sie eine Build-along-Stufe oder demonstrieren Sie eine kleine interaktive Seite — live, ohne etwas bereitzustellen.
Warum Lehrkräfte HTML / CSS / JS nutzen
Live-Web-Demos
Zeigen Sie HTML, CSS und JavaScript, die zusammen in Echtzeit wirken.
Build-along-Stunden
Erfassen Sie Stufen und präsentieren Sie sie Schritt für Schritt, damit die Klasse dem Aufbau folgt.
Parametrische Themes
Steuern Sie Farben und Variablen über Bedienelemente, statt jeden CSS-Wert von Hand zu suchen.
Eigenständige Handouts
Exportieren Sie eine HTML-Datei für die Nutzung außerhalb der Station.
Auf TeachForge ist HTML / CSS / JS eine Workshop-Station — gebaut für Lehrseiten, nicht nur für schnelle Code-Snippets.
In der HTML / CSS / JS Station
Wie der übrige Workshop erhalten Sie einen vertrauten Autorenrhythmus — mit drei Bereichen statt einem.
- HTML-, CSS- und JS-Editoren mit schnellem Bereichswechsel
- Live- oder manuelle Aktualisierung in eine sandboxierte iframe-Vorschau
- Build-along-Stufen — erfassen, schrittweise und Präsentationsmodus
- Parametrische Variablen für wiederverwendbare Theme- und Wertesteuerungen
- Geräte-Vorschaurahmen und optionale Bibliotheken wie KaTeX
- Eigenständiger HTML-Export, Advanced JSON, Teilen, Einbetten und Whiteboard-Senden
Wie Bereiche zur Seite werden
Von einer Vorlage starten oder die drei Bereiche bearbeiten
Fügen Sie Stufen und parametrische Variablen hinzu, wenn die Stunde sie braucht.
Live- oder manuelle Vorschau ausführen
Das sandboxierte iframe zeigt die Seite, wie Lernende sie treffen würden.
Stufen präsentieren, exportieren oder live senden
Nehmen Sie das Ergebnis auf das Board, in eine Frage oder hinaus als eigenständiges HTML.
Eine Seite. Alle ihre Versionen.
Diese Station unterstützt parametrische Variablen und Build-along-Stufen: behalten Sie die Seitenstruktur, variieren Sie das Theme und enthüllen Sie den Aufbau der Reihe nach — statt zwölf leicht unterschiedliche HTML-Dateien zu pflegen.
Ändern Sie es während des Unterrichts
Passen Sie parametrische Werte an oder steigen Sie im Präsentationsmodus zur nächsten Stufe.
Struktur behalten, Theme variieren
Dasselbe Seitenpaket kann morgen einen anderen Akzent, Datensatz oder Schwierigkeitsgrad zeigen.
Den Aufbau lehren, nicht nur das Fertige
Stufen lassen die Klasse zusehen, wie die Seite zusammenkommt.
Nah an der Bewertung bleiben
Speichern Sie das portable JSON-Paket und nutzen Sie es in späteren Stunden oder Labs erneut.
Brauchen Sie statt dessen ein schnelles Run-and-Console-Snippet? Code Sandbox ist die Schwester-Station dafür. HTML / CSS / JS ist für verfasste Seiten mit Stufen und Export.
Fertige Seiten zum Starten
Öffnen Sie eine Vorlage und formen Sie sie für Ihre Stunde um:
| Bereich | Was Sie öffnen können |
|---|---|
| Grundlagen | Leer; Profilkarte; Flexbox Playground |
| Build-along | Button-Stufen; Farb-Theme-Umschalter |
| Interaktiv | Canvas-Animation; Quiz-UI; Datentabelle |
KI-Hilfe, auf Ihre Weise
Brauchen Sie einen ersten Entwurf? Nutzen Sie KI als Assistentin — prüfen, bearbeiten und freigeben, bevor etwas Lernende erreicht.
Prompt kopieren
Erzeugen Sie einen fertigen Prompt und fügen Sie ihn in das Chat-Tool ein, das Sie bereits nutzen.
Eigene GPU nutzen
Verbinden Sie in den Einstellungen einen lokalen Modell-Endpunkt und führen Sie die Generierung auf Hardware aus, die Sie kontrollieren.
Eigenen API-Schlüssel nutzen
Fügen Sie Ihren Anbieter-Schlüssel in den Einstellungen hinzu, wählen Sie das Modell und generieren Sie mit Ihrem eigenen Konto.
KI kann falsch liegen. Genau deshalb bleibt eine Lehrkraft im Kreislauf.
Nehmen Sie die Seite dorthin, wo unterrichtet wird
- Whiteboard — legen Sie es auf das Live-Board und passen Sie es vor der Klasse an
- Quest Ladder — fügen Sie es in Fragen und Erklärungen ein
- Virtual Lab — nutzen Sie es in interaktiver Lab-Arbeit erneut
- Community — teilen Sie, was Sie gebaut haben, und bauen Sie auf dem auf, was andere Pädagoginnen und Pädagogen geteilt haben