Workshop a stanice
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Stavějte živé webové kusy ve vícepanelemovém autorském prostoru — se stadii build-along, parametrickými proměnnými a samostatným HTML exportem, když stránku potřebujete mimo TeachForge.
AI může připravit návrh. Vy rozhodujete, co třída uvidí.
Co je HTML / CSS / JS
HTML / CSS / JS je vícepanelemová webová autorská stanice. Píšete markup, styly a skripty vedle sebe, náhledujete stránku v sandboxovaném iframe a — když to potřebujete — exportujete samostatný HTML soubor, který můžete použít mimo TeachForge.
To je ve výuce důležité, protože webové dovednosti dávají smysl, když žáci vidí výsledek okamžitě. Změňte styl, posuňte stadium build-along nebo předveďte malou interaktivní stránku — naživo, bez nasazování čehokoli.
Proč učitelé používají HTML / CSS / JS
Živé webové ukázky
Ukažte HTML, CSS a JavaScript, jak spolu fungují v reálném čase.
Lekce build-along
Zachyťte stadia a Presentujte je krok za krokem, aby třída sledovala stavbu.
Parametrická témata
Řiďte barvy a proměnné ovládáním místo hledání každé CSS hodnoty ručně.
Samostatné handouty
Exportujte jeden HTML soubor pro použití mimo stanici.
Na TeachForge je HTML / CSS / JS stanice Workshopu — postavená pro výukové stránky, ne jen pro rychlé úryvky kódu.
Uvnitř HTML / CSS / JS Station
Stejně jako zbytek Workshopu dostanete známý autorský rytmus — se třemi panely místo jednoho.
- Editory HTML, CSS a JS s rychlým přepínáním panelů
- Živý nebo ruční refresh do sandboxovaného iframe náhledu
- Stadia build-along — zachycení, krok a režim Present
- Parametrické proměnné pro znovu použitelné ovládání témat a hodnot
- Rámečky náhledu zařízení a volitelné knihovny jako KaTeX
- Samostatný HTML export, Advanced JSON, sdílení, vložení a odeslání na Whiteboard
Jak se panely stanou stránkou
Začněte od šablony nebo upravte tři panely
Přidejte stadia a parametrické proměnné, když je lekce potřebuje.
Spusťte Live nebo Manual náhled
Sandboxovaný iframe ukáže stránku tak, jak by ji žáci potkali.
Presentujte stadia, exportujte nebo odešlete naživo
Vezměte výsledek na tabuli, do otázky nebo ven jako samostatné HTML.
Jedna stránka. Každá její verze.
Tato stanice podporuje parametrické proměnné a stadia build-along : zachovejte strukturu stránky, měňte téma a odhalujte stavbu v pořadí — místo udržování dvanácti mírně odlišných HTML souborů.
Měňte to během výuky
Upravte parametrické hodnoty nebo přejděte na další stadium v režimu Present.
Zachovejte strukturu, měňte téma
Stejný balíček stránky může zítra ukázat jiný akcent, dataset nebo obtížnost.
Učte stavbu, ne jen hotové
Stadia umožní třídě sledovat, jak stránka vzniká.
Zůstaňte blízko hodnocení
Uložte přenositelný JSON balíček a znovu jej použijte v pozdějších lekcích nebo laboratořích.
Potřebujete místo toho rychlý úryvek Run-and-console? Code Sandbox je sesterská stanice pro to. HTML / CSS / JS je pro autorské stránky se stadii a exportem.
Hotové stránky, od kterých začít
Otevřete šablonu a přetvořte ji pro svou lekci:
| Area | Co můžete otevřít |
|---|---|
| Základy | Blank; Profile Card; Flexbox Playground |
| Build-along | Button stages; Colour Theme Switcher |
| Interaktivní | Canvas Animation; Quiz UI; Data Table |
Nápověda AI po vašem
Potřebujete první návrh? Použijte AI jako asistenta — pak zkontrolujte, upravte a schvalte, než se cokoli dostane k žákům.
Zkopírujte prompt
Vygenerujte hotový prompt a vložte jej do chatovacího nástroje, který už používáte.
Použijte vlastní GPU
Připojte lokální endpoint modelu v nastavení a spusťte generování na hardwaru, který ovládáte.
Použijte vlastní API klíč
Přidejte klíč poskytovatele v nastavení, zvolte model a generujte na vlastním účtu.
AI se může mýlit. Právě proto zůstává učitel v procesu.
Vezměte stránku tam, kde probíhá výuka
- Whiteboard — umístěte jej na živou tabuli a upravte před třídou
- Quest Ladder — vložte jej do otázek a vysvětlení
- Virtual Lab — znovu jej použijte v interaktivní laboratorní práci
- Community — sdílejte, co jste vytvořili, a stavte na tom, co sdíleli ostatní vzdělavatelé