Workshop et Stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Construisez des pièces web en direct dans un espace d’authoring multi-volets — avec étapes build-along, variables paramétriques, et export HTML autonome quand vous avez besoin de la page hors de TeachForge.
L’IA peut rédiger. C’est vous qui décidez ce que la classe voit.
Ce qu’est HTML / CSS / JS
HTML / CSS / JS est une Station d’authoring web multi-volets. Vous écrivez balisage, styles et scripts côte à côte, prévisualisez la page dans un iframe sandboxé, et — quand vous en avez besoin — exportez un fichier HTML autonome utilisable hors de TeachForge.
C’est important en enseignement parce que les compétences web ont du sens quand les apprenants voient le résultat immédiatement. Changez un style, avancez une étape build-along, ou démontrez une petite page interactive — en direct, sans rien déployer.
Pourquoi utiliser HTML / CSS / JS
Démos web en direct
Montrez HTML, CSS et JavaScript qui se comportent ensemble en temps réel.
Cours build-along
Capturez des étapes et Présentez-les une par une pour que la classe suive la construction.
Thèmes paramétriques
Pilotez couleurs et variables avec des commandes au lieu de chasser chaque valeur CSS à la main.
Polycopiés autonomes
Exportez un fichier HTML pour usage hors de la Station.
Sur TeachForge, HTML / CSS / JS est une Station Workshop — conçue pour des pages d’enseignement, pas seulement pour de petits extraits de code.
Dans la HTML / CSS / JS Station
Comme le reste du Workshop, vous avez un rythme d’authoring familier — avec trois volets au lieu d’un.
- Éditeurs HTML, CSS et JS avec bascule rapide entre volets
- Rafraîchissement Live ou Manuel dans un aperçu iframe sandboxé
- Étapes build-along — capture, pas à pas et mode Present
- Variables paramétriques pour des commandes de thème et de valeurs réutilisables
- Cadres d’aperçu appareil et bibliothèques optionnelles telles que KaTeX
- Export HTML autonome, JSON avancé, partage, intégration et envoi Whiteboard
Comment les volets deviennent une page
Partez d’un modèle ou éditez les trois volets
Ajoutez étapes et variables paramétriques quand le cours en a besoin.
Lancez l’aperçu Live ou Manuel
L’iframe sandboxé montre la page telle que les apprenants la rencontreraient.
Présentez les étapes, exportez ou envoyez-la en direct
Emmenez le résultat sur le tableau, dans une question, ou en HTML autonome.
Une page. Toutes ses versions.
Cette Station prend en charge des variables paramétriques et des étapes build-along : gardez la structure de la page, variez le thème, et révélez la construction dans l’ordre — au lieu de maintenir douze fichiers HTML légèrement différents.
Modifiez-le pendant que vous enseignez
Ajustez les valeurs paramétriques ou passez à l’étape suivante en mode Present.
Gardez la structure, variez le thème
Le même paquet de page peut montrer demain un autre accent, jeu de données ou niveau de difficulté.
Enseignez la construction, pas seulement le résultat
Les étapes permettent à la classe de voir la page se construire.
Restez proche de l’évaluation
Enregistrez le paquet JSON portable et réutilisez-le dans des cours ou labs ultérieurs.
Besoin d’un extrait Run-and-console rapide à la place ? Code Sandbox est la Station sœur pour cela. HTML / CSS / JS sert aux pages rédigées avec étapes et export.
Pages prêtes à l’emploi pour démarrer
Ouvrez un modèle et remodellez-le pour votre cours :
| Domaine | Ce que vous pouvez ouvrir |
|---|---|
| Fondations | Vide ; Carte de profil ; Terrain Flexbox |
| Construction guidée | Étapes bouton ; Sélecteur de thème couleur |
| Interactif | Animation Canvas ; UI quiz ; Tableau de données |
Aide IA, à votre façon
Besoin d’un premier brouillon ? Utilisez l’IA comme assistant — puis relisez, modifiez et approuvez avant que quoi que ce soit n’atteigne les apprenants.
Copier le prompt
Générez un prompt prêt à l’emploi et collez-le dans l’outil de chat que vous utilisez déjà.
Utilisez votre propre GPU
Connectez un point de terminaison de modèle local dans vos paramètres et lancez la génération sur du matériel que vous contrôlez.
Utilisez votre propre clé API
Ajoutez la clé de votre fournisseur dans les paramètres, choisissez le modèle et générez avec votre propre compte.
L’IA peut se tromper. C’est précisément pourquoi un enseignant reste dans la boucle.
Emmenez la page là où se fait l’enseignement
- Whiteboard — placez-le sur le tableau en direct et ajustez-le devant la classe
- Quest Ladder — glissez-le dans les questions et les explications
- Virtual Lab — réutilisez-le dans un travail de lab interactif
- Communauté — partagez ce que vous avez créé, et partez de ce que d’autres éducateurs ont partagé