Workshop และสถานี
TeachFORGE.ai
Workshop / HTML / CSS / JS
สถานี HTML / CSS / JS
สร้างชิ้นเว็บสดในพื้นที่แต่งหลายช่อง — พร้อมขั้นสร้างตาม และตัวแปรแบบพารามิเตอร์ และการส่งออก HTML อิสระเมื่อต้องการหน้าอยู่นอก TeachForge
AI ร่างได้ คุณตัดสินว่าชั้นเรียนจะเห็นอะไร
HTML / CSS / JS คืออะไร
HTML / CSS / JS คือสถานีแต่งเว็บหลายช่อง คุณเขียนมาร์กอัป สไตล์ และสคริปต์คู่กัน ดูตัวอย่างหน้าใน iframe แซนด์บ็อกซ์ และ — เมื่อต้องการ — ส่งออกไฟล์ HTML อิสระที่ใช้ข้างนอก TeachForge ได้
เรื่องนี้สำคัญในการสอนเพราะทักษะเว็บมีความหมายเมื่อผู้เรียนเห็นผลทันที เปลี่ยนสไตล์ ก้าวขั้นสร้างตาม หรือสาธิตหน้าโต้ตอบเล็ก — แบบสด โดยไม่ต้องดีพลอยอะไร
เหตุผลที่ครูใช้ HTML / CSS / JS
สาธิตเว็บสด
แสดง HTML, CSS และ JavaScript ที่ทำงานด้วยกันแบบเรียลไทม์
บทเรียนสร้างตาม
จับขั้นแล้ว Present ทีละขั้นเพื่อให้ชั้นตามการก่อสร้าง
ธีมแบบพารามิเตอร์
ขับสีและตัวแปรด้วยตัวควบคุมแทนการไล่หาทุกค่า CSS ด้วยมือ
ใบแจกอิสระ
ส่งออกไฟล์ HTML หนึ่งไฟล์สำหรับใช้พ้นสถานี
บน TeachForge HTML / CSS / JS คือสถานี Workshop — สร้างมาเพื่อสอนหน้า ไม่ใช่แค่ชิ้นโค้ดเร็ว
ภายในสถานี HTML / CSS / JS
เหมือนส่วนอื่นของ Workshop คุณได้จังหวะแต่งที่คุ้นเคย — แต่สามช่องแทนหนึ่ง
- ตัวแก้ไข HTML, CSS และ JS พร้อมสลับช่องเร็ว
- รีเฟรชสดหรือด้วยมือ เข้าสู่ตัวอย่าง iframe แซนด์บ็อกซ์
- ขั้นสร้างตาม — จับ ก้าว และโหมด Present
- ตัวแปรแบบพารามิเตอร์ สำหรับตัวควบคุมธีมและค่าที่ใช้ซ้ำได้
- กรอบตัวอย่างอุปกรณ์ และไลบรารีทางเลือกเช่น KaTeX
- ส่งออก HTML อิสระ, Advanced JSON, แชร์ ฝัง และการส่งไป Whiteboard
ช่องกลายเป็นหน้าอย่างไร
เริ่มจากเทมเพลตหรือแก้สามช่อง
เพิ่มขั้นและตัวแปรแบบพารามิเตอร์เมื่อบทเรียนต้องการ
รันตัวอย่างสดหรือด้วยมือ
iframe แซนด์บ็อกซ์แสดงหน้าอย่างที่ผู้เรียนจะเจอ
Present ขั้น ส่งออก หรือส่งไปใช้สด
นำผลไปบอร์ด เข้าสู่คำถาม หรือออกเป็น HTML อิสระ
หน้าเดียว ทุกเวอร์ชันของมัน
สถานีนี้รองรับ ตัวแปรแบบพารามิเตอร์ และ ขั้นสร้างตาม: คงโครงสร้างหน้า เปลี่ยนธีม และเปิดเผยการก่อสร้างตามลำดับ — แทนการดูแลไฟล์ HTML ที่ต่างกันเล็กน้อยสิบสองไฟล์
เปลี่ยนขณะสอน
ปรับค่าแบบพารามิเตอร์หรือก้าวสู่ขั้นถัดไปในโหมด Present
คงโครงสร้าง เปลี่ยนธีม
แพ็กเกจหน้าเดียวกันแสดงสำเนียง ชุดข้อมูล หรือความยากต่างกันพรุ่งนี้ได้
สอนการสร้าง ไม่ใช่แค่ผลสำเร็จ
ขั้นให้ชั้นดูหน้าค่อย ๆ รวมกัน
อยู่ใกล้การประเมิน
บันทึกแพ็กเกจ JSON ที่พกพาได้แล้วใช้ซ้ำในบทเรียนหรือแล็บต่อ
ต้องการชิ้น Run-and-console เร็วแทน? Code Sandbox คือสถานีพี่น้องสำหรับนั้น HTML / CSS / JS สำหรับหน้าที่แต่งพร้อมขั้นและการส่งออก
หน้าสำเร็จรูปสำหรับเริ่มต้น
เปิดเทมเพลตแล้วปรับรูปให้เข้ากับบทเรียน:
| พื้นที่ | สิ่งที่เปิดได้ |
|---|---|
| พื้นฐาน | ว่าง; บัตรโปรไฟล์; สนามเด็กเล่น Flexbox |
| สร้างตาม | ขั้นปุ่ม; สวิตช์ธีมสี |
| โต้ตอบ | แอนิเมชัน Canvas; UI แบบทดสอบ; ตารางข้อมูล |
ความช่วยเหลือจาก AI ในแบบของคุณ
ต้องการร่างแรก? ใช้ AI เป็นผู้ช่วย — แล้วตรวจทาน แก้ไข และอนุมัติก่อนสิ่งใดถึงผู้เรียน
คัดลอกพรอมต์
สร้างพรอมต์สำเร็จรูปแล้ววางในเครื่องมือแชทที่คุณใช้อยู่แล้ว
ใช้ GPU ของคุณเอง
เชื่อมจุดปลายโมเดลในเครื่องในการตั้งค่า แล้วรันการสร้างบนฮาร์ดแวร์ที่คุณควบคุม
ใช้คีย์ API ของคุณเอง
เพิ่มคีย์ผู้ให้บริการในการตั้งค่า เลือกโมเดล และสร้างด้วยบัญชีของคุณเอง
AI ผิดได้ นั่นแหละเหตุผลที่ครูต้องอยู่ในวง
นำหน้าไปยังที่ที่การสอนเกิดขึ้น
- Whiteboard — วางบนบอร์ดสดแล้วปรับต่อหน้าชั้นเรียน
- Quest Ladder — ใส่ในคำถามและคำอธิบาย
- Virtual Lab — ใช้ซ้ำในงานแล็บแบบโต้ตอบ
- ชุมชน — แชร์สิ่งที่คุณสร้าง และต่อยอดสิ่งที่นักการศึกษาคนอื่นแชร์