Workshop y Stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Construye piezas web en vivo en un espacio de autoría multipanel — con etapas de construcción guiada, variables paramétricas y exportación HTML independiente cuando necesitas la página fuera de TeachForge.
La IA puede redactar un borrador. Tú decides qué ve la clase.
Qué es HTML / CSS / JS
HTML / CSS / JS es una Station de autoría web multipanel. Escribes marcado, estilos y scripts lado a lado, previsualizas la página en un iframe aislado y — cuando lo necesitas — exportas un archivo HTML independiente que puedes usar fuera de TeachForge.
Importa en la enseñanza porque las habilidades web cobran sentido cuando el alumnado ve el resultado de inmediato. Cambia un estilo, avanza una etapa de construcción o demuestra una pequeña página interactiva — en vivo, sin desplegar nada.
Por qué los docentes usan HTML / CSS / JS
Demos web en vivo
Muestra HTML, CSS y JavaScript comportándose juntos en tiempo real.
Lecciones de construcción guiada
Captura etapas y preséntalas paso a paso para que la clase siga la construcción.
Temas paramétricos
Impulsa colores y variables con controles en lugar de buscar a mano cada valor CSS.
Folletos independientes
Exporta un solo archivo HTML para usarlo más allá de la Station.
En TeachForge, HTML / CSS / JS es una Station del Workshop — hecha para páginas de enseñanza, no solo para fragmentos rápidos de código.
Dentro de la HTML / CSS / JS Station
Como el resto del Workshop, obtienes un ritmo de autoría familiar — con tres paneles en lugar de uno.
- Editores HTML, CSS y JS con cambio rápido de panel
- Actualización Live o Manual en una vista previa iframe aislada
- Etapas de construcción guiada — capturar, avanzar y modo Present
- Variables paramétricas para controles reutilizables de tema y valores
- Marcos de vista previa por dispositivo y bibliotecas opcionales como KaTeX
- Exportación HTML independiente, JSON avanzado, compartir, incrustar y enviar al Whiteboard
Cómo los paneles se convierten en página
Empieza desde una plantilla o edita los tres paneles
Añade etapas y variables paramétricas cuando la lección las necesite.
Ejecuta la vista previa Live o Manual
El iframe aislado muestra la página como el alumnado la encontraría.
Presenta etapas, exporta o envíala en vivo
Lleva el resultado al pizarrón, a una pregunta o fuera como HTML independiente.
Una página. Todas sus versiones.
Esta Station admite variables paramétricas y etapas de construcción guiada: mantén la estructura de la página, varía el tema y revela la construcción en orden — en lugar de mantener doce archivos HTML ligeramente distintos.
Cámbialo mientras enseñas
Ajusta valores paramétricos o avanza a la siguiente etapa en el modo Present.
Mantén la estructura, varía el tema
El mismo paquete de página puede mostrar mañana otro acento, conjunto de datos o dificultad.
Enseña la construcción, no solo el final
Las etapas permiten que la clase vea cómo se arma la página.
Mantente cerca de la evaluación
Guarda el paquete JSON portable y reutilízalo en lecciones o labs posteriores.
¿Necesitas un fragmento rápido de Run-and-console? Code Sandbox es la Station hermana para eso. HTML / CSS / JS es para páginas autoradas con etapas y exportación.
Páginas listas para empezar
Abre una plantilla y adáptala a tu lección:
| Área | Qué puedes abrir |
|---|---|
| Foundations | Blank; Profile Card; Flexbox Playground |
| Build-along | Button stages; Colour Theme Switcher |
| Interactive | Canvas Animation; Quiz UI; Data Table |
Ayuda de IA, a tu manera
¿Necesitas un primer borrador? Usa la IA como asistente — luego revisa, edita y aprueba antes de que llegue al alumnado.
Copiar el prompt
Genera un prompt listo y pégalo en la herramienta de chat que ya usas.
Usa tu propia GPU
Conecta un endpoint de modelo local en tu configuración y ejecuta la generación en hardware que controlas.
Usa tu propia clave API
Añade la clave de tu proveedor en la configuración, elige el modelo y genera con tu propia cuenta.
La IA puede equivocarse. Por eso exactamente un docente permanece en el circuito.
Lleva la página a donde ocurre la enseñanza
- Whiteboard — colócalo en el pizarrón en vivo y ajústalo frente a la clase
- Quest Ladder — insértalo en preguntas y explicaciones
- Virtual Lab — reutilízalo dentro del trabajo interactivo de lab
- Comunidad — comparte lo que construiste y parte de lo que otros educadores compartieron