Workshop en stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Bouw live webstukken in een multi-pane auteurruimte — met build-along-stadia, parametrische variabelen en standalone HTML-export wanneer je de pagina buiten TeachForge nodig hebt.
AI kan een concept maken. Jij bepaalt wat de klas ziet.
Wat HTML / CSS / JS is
HTML / CSS / JS is een multi-pane web-auteur-Station. Je schrijft markup, stijlen en scripts naast elkaar, bekijkt de pagina in een gesandboxte iframe, en — wanneer je het nodig hebt — exporteert een standalone HTML-bestand dat je buiten TeachForge kunt gebruiken.
Dat telt in het onderwijs omdat webvaardigheden zin hebben wanneer leerlingen het resultaat meteen zien. Wijzig een stijl, doorloop een build-along-stadium, of demonstreer een kleine interactieve pagina — live, zonder iets te deployen.
Waarom docenten HTML / CSS / JS gebruiken
Live webdemo’s
Laat HTML, CSS en JavaScript samen in realtime werken.
Build-along-lessen
Leg stadia vast en Presenteer ze stap voor stap zodat de klas de opbouw volgt.
Parametrische thema’s
Stuur kleuren en variabelen aan met bediening in plaats van elke CSS-waarde met de hand te zoeken.
Standalone hand-outs
Exporteer één HTML-bestand voor gebruik buiten de Station.
Op TeachForge is HTML / CSS / JS een Workshop Station — gebouwd voor lespagina’s, niet alleen voor snelle codesnippets.
In de HTML / CSS / JS Station
Net als de rest van de Workshop krijg je een vertrouwd auteursritme — met drie vensters in plaats van één.
- HTML-, CSS- en JS-editors met snelle vensterwisseling
- Live of Handmatig vernieuwen in een gesandboxte iframe-voorbeeldweergave
- Build-along-stadia — vastleggen, stappen en Present-modus
- Parametrische variabelen voor herbruikbare thema- en waardebediening
- Apparaatvoorbeeldkaders en optionele bibliotheken zoals KaTeX
- Standalone HTML-export, Geavanceerde JSON, delen, insluiten en naar Whiteboard sturen
Hoe vensters een pagina worden
Begin vanuit een sjabloon of bewerk de drie vensters
Voeg stadia en parametrische variabelen toe wanneer de les ze nodig heeft.
Voer Live of Handmatige voorbeeldweergave uit
De gesandboxte iframe toont de pagina zoals leerlingen die zouden tegenkomen.
Presenteer stadia, exporteer, of stuur live
Neem het resultaat mee naar het bord, in een vraag, of als standalone HTML.
Eén pagina. Elke versie ervan.
Deze Station ondersteunt parametrische variabelen en build-along-stadia: houd de paginastructuur, varieer het thema, en onthul de opbouw in volgorde — in plaats van twaalf iets verschillende HTML-bestanden bij te houden.
Wijzig het terwijl je lesgeeft
Pas parametrische waarden aan of ga naar het volgende stadium in Present-modus.
Houd de structuur, varieer het thema
Hetzelfde paginapakket kan morgen een ander accent, dataset of moeilijkheidsgraad tonen.
Leer de opbouw, niet alleen het eindresultaat
Stadia laten de klas de pagina tot stand zien komen.
Blijf dicht bij toetsing
Sla het draagbare JSON-pakket op en hergebruik het in latere lessen of labs.
Liever een snelle Run-and-console-snippet? Code Sandbox is de sibling Station daarvoor. HTML / CSS / JS is voor gemaakte pagina’s met stadia en export.
Kant-en-klare pagina’s om mee te beginnen
Open een sjabloon en vorm het om voor je les:
| Gebied | Wat je kunt openen |
|---|---|
| Fundamenten | Leeg; Profielkaart; Flexbox Playground |
| Build-along | Knopstadia; Kleurthema-wisselaar |
| Interactief | Canvas-animatie; Quiz-UI; Datatabel |
AI-hulp, op jouw manier
Eerste concept nodig? Gebruik AI als assistent — bekijk, bewerk en keur goed voordat iets bij leerlingen komt.
Kopieer de prompt
Maak een kant-en-klare prompt en plak die in de chattool die je al gebruikt.
Gebruik je eigen GPU
Koppel een lokaal modeleindpunt in je instellingen en voer generatie uit op hardware die jij beheert.
Gebruik je eigen API-sleutel
Voeg de sleutel van je provider toe in de instellingen, kies het model en genereer met je eigen account.
AI kan ernaast zitten. Precies daarom blijft een docent in de lus.
Neem de pagina mee waar het lesgeven plaatsvindt
- Whiteboard — zet het op het live-bord en pas het aan voor de klas
- Quest Ladder — plaats het in vragen en uitleg
- Virtual Lab — hergebruik het in interactief labwerk
- Community — deel wat je hebt gemaakt, en bouw verder op wat andere docenten deelden