Workshop e Stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Costruisci pezzi web in diretta in uno spazio di authoring a più riquadri — con fasi build-along, variabili parametriche ed export HTML autonomo quando ti serve la pagina fuori da TeachForge.
L’IA può bozzare. Sei tu a decidere cosa vede la classe.
Cos’è HTML / CSS / JS
HTML / CSS / JS è una Station di authoring web a più riquadri. Scrivi markup, stili e script affiancati, anteprima la pagina in un iframe sandboxato e — quando ti serve — esporta un file HTML autonomo utilizzabile fuori da TeachForge.
Conta nell’insegnamento perché le competenze web hanno senso quando gli studenti vedono subito il risultato. Cambia uno stile, fai avanzare una fase build-along o dimostra una piccola pagina interattiva — in diretta, senza fare deploy di nulla.
Perché gli insegnanti usano HTML / CSS / JS
Demo web in diretta
Mostra HTML, CSS e JavaScript che si comportano insieme in tempo reale.
Lezioni build-along
Cattura le fasi e Presentale passo dopo passo così la classe segue la costruzione.
Temi parametrici
Guida colori e variabili con i controlli invece di cercare a mano ogni valore CSS.
Dispense autonome
Esporta un unico file HTML da usare oltre la Station.
Su TeachForge, HTML / CSS / JS è una Station del Workshop — pensata per pagine didattiche, non solo per snippet di codice rapidi.
Dentro la HTML / CSS / JS Station
Come il resto del Workshop, hai un ritmo di authoring familiare — con tre riquadri invece di uno.
- Editor HTML, CSS e JS con cambio rapido di riquadro
- Aggiornamento Live o Manuale in un’anteprima iframe sandboxata
- Fasi build-along — cattura, passo e modalità Present
- Variabili parametriche per controlli riutilizzabili di tema e valori
- Cornici di anteprima dispositivo e librerie opzionali come KaTeX
- Export HTML autonomo, JSON avanzato, condivisione, embed e invio al Whiteboard
Come i riquadri diventano una pagina
Parti da un modello o modifica i tre riquadri
Aggiungi fasi e variabili parametriche quando la lezione ne ha bisogno.
Esegui anteprima Live o Manuale
L’iframe sandboxato mostra la pagina come la incontrerebbero gli studenti.
Presenta le fasi, esporta o inviala in diretta
Porta il risultato alla lavagna, in una domanda o fuori come HTML autonomo.
Una pagina. Tutte le sue versioni.
Questa Station supporta variabili parametriche e fasi build-along: mantieni la struttura della pagina, varia il tema e rivela la costruzione in ordine — invece di mantenere dodici file HTML leggermente diversi.
Modificalo mentre insegni
Regola i valori parametrici o passa alla fase successiva in modalità Present.
Mantieni la struttura, varia il tema
Lo stesso pacchetto di pagina può mostrare un accento, un dataset o una difficoltà diversa domani.
Insegna la costruzione, non solo il risultato
Le fasi lasciano che la classe guardi la pagina prendere forma.
Resta vicino alla valutazione
Salva il pacchetto JSON portatile e riutilizzalo in lezioni o laboratori successivi.
Ti serve uno snippet Run-and-console rapido? Code Sandbox è la Station gemella per quello. HTML / CSS / JS è per pagine scritte con fasi ed export.
Pagine già pronte da cui partire
Apri un modello e rimodellalo per la tua lezione:
| Area | Cosa puoi aprire |
|---|---|
| Fondamenta | Vuoto; Profile Card; Flexbox Playground |
| Build-along | Fasi di pulsante; Selettore tema colore |
| Interattivo | Animazione Canvas; Quiz UI; Tabella dati |
Aiuto IA, a modo tuo
Ti serve una prima bozza? Usa l’IA come assistente — poi rivedi, modifica e approva prima che qualcosa raggiunga gli studenti.
Copia il prompt
Genera un prompt già pronto e incollalo nello strumento di chat che usi già.
Usa la tua GPU
Collega un endpoint di modello locale nelle impostazioni ed esegui la generazione sull’hardware che controlli tu.
Usa la tua chiave API
Aggiungi la chiave del provider nelle impostazioni, scegli il modello e genera con il tuo account.
L’IA può sbagliare. È proprio per questo che un insegnante resta nel circuito.
Porta la pagina dove avviene l’insegnamento
- Whiteboard — mettilo sulla lavagna in diretta e regolalo davanti alla classe
- Quest Ladder — inseriscilo in domande e spiegazioni
- Virtual Lab — riutilizzalo nel lavoro di laboratorio interattivo
- Community — condividi ciò che hai creato e parti da ciò che altri educatori hanno condiviso