Workshop at Mga Istasyon
TeachFORGE.ai
Workshop / HTML / CSS / JS
Istasyon ng HTML / CSS / JS
Bumuo ng live na piraso ng web sa multi-pane na espasyo sa pagsulat — na may build-along na yugto, parametric na variable, at standalone na HTML export kapag kailangan ang pahina sa labas ng TeachForge.
Maaaring mag-draft ang AI. Ikaw ang magpapasya kung ano ang makikita ng klase.
Ano ang HTML / CSS / JS
Ang HTML / CSS / JS ay multi-pane na Istasyon sa pagsulat ng web. Sumusulat ka ng markup, estilo, at script nang magkatabi, i-preview ang pahina sa sandboxed na iframe, at — kapag kailangan — i-export ang standalone na HTML file na magagamit sa labas ng TeachForge.
Mahalaga ito sa pagtuturo dahil may saysay ang kasanayan sa web kapag agad nakikita ng mga mag-aaral ang resulta. Baguhin ang estilo, i-step ang build-along na yugto, o magpakita ng maliit na interaktibong pahina — live, nang hindi nagde-deploy ng anuman.
Bakit ginagamit ng mga guro ang HTML / CSS / JS
Mga live na demo sa web
Ipakita ang HTML, CSS, at JavaScript na magkasamang gumagana sa real time.
Mga araling build-along
Kunin ang mga yugto at i-Present nang hakbang-hakbang upang sundan ng klase ang pagtatayo.
Mga parametric na theme
Paandarin ang kulay at variable gamit ang mga kontrol sa halip na hanapin ang bawat halaga ng CSS nang mano-mano.
Mga standalone na handout
I-export ang isang HTML file para gamitin sa labas ng Istasyon.
Sa TeachForge, ang HTML / CSS / JS ay isang Istasyon ng Workshop — ginawa para sa mga pahina sa pagtuturo, hindi lang para sa mabilis na snippet ng code.
Sa loob ng Istasyon ng HTML / CSS / JS
Tulad ng iba pang bahagi ng Workshop, makakakuha ka ng pamilyar na ritmo sa pagsulat — na may tatlong pane sa halip na isa.
- Mga editor ng HTML, CSS, at JS na may mabilis na paglipat ng pane
- Live o Manual na refresh papunta sa sandboxed na preview ng iframe
- Mga yugto ng build-along — capture, step, at mode na Present
- Mga parametric na variable para sa muling magagamit na kontrol sa theme at halaga
- Mga frame ng preview ng device at opsyonal na library tulad ng KaTeX
- Standalone na HTML export, Advanced JSON, pagbabahagi, embed, at pagpapadala sa Whiteboard
Paano nagiging pahina ang mga pane
Magsimula sa template o i-edit ang tatlong pane
Magdagdag ng yugto at parametric na variable kapag kailangan ng aralin.
Patakbuhin ang Live o Manual na preview
Ipinapakita ng sandboxed na iframe ang pahina kung paano ito makikita ng mga mag-aaral.
I-Present ang mga yugto, i-export, o ipadala nang live
Dalhin ang resulta sa board, sa tanong, o palabas bilang standalone na HTML.
Isang pahina. Bawat bersyon nito.
Sinusuportahan ng Istasyong ito ang mga parametric na variable at mga yugto ng build-along: panatilihin ang istruktura ng pahina, iba-ibahin ang theme, at ihayag ang pagtatayo nang sunod-sunod — sa halip na magpanatili ng labindalawang bahagyang magkakaibang HTML file.
Baguhin ito habang nagtuturo ka
I-adjust ang mga parametric na halaga o lumipat sa susunod na yugto sa mode na Present.
Panatilihin ang istruktura, iba-ibahin ang theme
Ang iisang pakete ng pahina ay maaaring magpakita ng ibang accent, dataset, o hirap bukas.
Ituro ang pagtatayo, hindi lang ang tapos
Pinapanood ng mga yugto sa klase kung paano nagsasama-sama ang pahina.
Manatiling malapit sa pagtatasa
I-save ang portable na pakete ng JSON at muling gamitin sa susunod na aralin o lab.
Kailangan ng mabilis na snippet na Run-and-console? Ang Code Sandbox ang kapatid na Istasyon para diyan. Ang HTML / CSS / JS ay para sa isinulat na pahina na may yugto at export.
Mga handang pahina na pagsisimulan
Magbukas ng template at hubugin muli para sa iyong aralin:
| Lugar | Ano ang mabubuksan mo |
|---|---|
| Mga pundasyon | Blangko; Profile Card; Flexbox Playground |
| Build-along | Mga yugto ng button; Colour Theme Switcher |
| Interaktibo | Canvas Animation; Quiz UI; Data Table |
Tulong ng AI, sa iyong paraan
Kailangan ng unang draft? Gamitin ang AI bilang katulong — pagkatapos ay suriin, i-edit, at aprubahan bago makarating sa mga mag-aaral.
Kopyahin ang prompt
Gumawa ng handang prompt at i-paste ito sa chat tool na ginagamit mo na.
Gamitin ang sarili mong GPU
Ikonekta ang isang local model endpoint sa iyong mga setting at patakbuhin ang generation sa hardware na kontrolado mo.
Gamitin ang sarili mong API key
Idagdag ang iyong provider key sa mga setting, piliin ang modelo, at mag-generate gamit ang sarili mong account.
Maaaring magkamali ang AI. Iyon mismo ang dahilan kung bakit nananatili ang guro sa loop.
Dalhin ang pahina kung saan nagaganap ang pagtuturo
- Whiteboard — ilagay ito sa live na board at i-adjust sa harap ng klase
- Quest Ladder — ilagay ito sa mga tanong at paliwanag
- Virtual Lab — muling gamitin sa loob ng interaktibong gawain sa lab
- Komunidad — ibahagi ang iyong ginawa, at bumuo sa ibinahagi ng ibang mga educator