Workshop & Stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Build live web pieces in a multi-pane authoring space — with build-along stages, parametric variables, and standalone HTML export when you need the page outside TeachForge.
AI can draft. You decide what the class sees.
What HTML / CSS / JS is
HTML / CSS / JS is a multi-pane web authoring Station. You write markup, styles, and scripts side by side, preview the page in a sandboxed iframe, and — when you need it — export a standalone HTML file you can use outside TeachForge.
That matters in teaching because web skills make sense when learners see the result immediately. Change a style, step a build-along stage, or demonstrate a small interactive page — live, without deploying anything.
Why teachers use HTML / CSS / JS
Live web demos
Show HTML, CSS, and JavaScript behaving together in real time.
Build-along lessons
Capture stages and Present them step by step so the class follows the construction.
Parametric themes
Drive colours and variables with controls instead of hunting every CSS value by hand.
Standalone handouts
Export one HTML file for use beyond the Station.
On TeachForge, HTML / CSS / JS is a Workshop Station — built for teaching pages, not only for quick code snippets.
Inside the HTML / CSS / JS Station
Like the rest of the Workshop, you get a familiar authoring rhythm — with three panes instead of one.
- HTML, CSS, and JS editors with quick pane switching
- Live or Manual refresh into a sandboxed iframe preview
- Build-along stages — capture, step, and Present mode
- Parametric variables for reusable theme and value controls
- Device preview frames and optional libraries such as KaTeX
- Standalone HTML export, Advanced JSON, share, embed, and Whiteboard send
How panes become a page
Start from a template or edit the three panes
Add stages and parametric variables when the lesson needs them.
Run Live or Manual preview
The sandboxed iframe shows the page as learners would meet it.
Present stages, export, or send it live
Take the result to the board, into a question, or out as standalone HTML.
One page. Every version of it.
This Station supports parametric variables and build-along stages: keep the page structure, vary the theme, and reveal construction in order — instead of maintaining twelve slightly different HTML files.
Change it while you teach
Adjust parametric values or step to the next stage in Present mode.
Keep the structure, vary the theme
The same page package can show a different accent, dataset, or difficulty tomorrow.
Teach the build, not only the finish
Stages let the class watch the page come together.
Stay close to assessment
Save the portable JSON package and reuse it in later lessons or labs.
Need a quick Run-and-console snippet instead? Code Sandbox is the sibling Station for that. HTML / CSS / JS is for authored pages with stages and export.
Ready-made pages to start from
Open a template and reshape it for your lesson:
| Area | What you can open |
|---|---|
| Foundations | Blank; Profile Card; Flexbox Playground |
| Build-along | Button stages; Colour Theme Switcher |
| Interactive | Canvas Animation; Quiz UI; Data Table |
AI help, your way
Need a first draft? Use AI as an assistant — then review, edit, and approve before anything reaches learners.
Copy the prompt
Generate a ready-made prompt and paste it into the chat tool you already use.
Use your own GPU
Connect a local model endpoint in your settings and run generation on hardware you control.
Use your own API key
Add your provider key in settings, choose the model, and generate with your own account.
AI can be wrong. That is exactly why a teacher stays in the loop.
Take the page where teaching happens
- Whiteboard — put it on the live board and adjust it in front of the class
- Quest Ladder — drop it into questions and explanations
- Virtual Lab — reuse it inside interactive lab work
- Community — share what you built, and build on what other educators shared