Workshop 및 스테이션
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
다중 창 작성 공간에서 실시간 웹 조각을 만드세요 — 따라 만들기 단계, 매개변수 변수, TeachForge 밖에서 페이지가 필요할 때 독립 HTML 내보내기.
AI가 초안을 작성할 수 있습니다. 교실에 무엇을 보여줄지는 여러분이 결정합니다.
HTML / CSS / JS란
HTML / CSS / JS는 다중 창 웹 작성 Station입니다. 마크업, 스타일, 스크립트를 나란히 쓰고, 샌드박스 iframe에서 페이지를 미리 보고, — 필요할 때 — TeachForge 밖에서 쓸 독립 HTML 파일을 내보냅니다.
학습자가 결과를 바로 볼 때 웹 기능이 이해되므로 수업에서 중요합니다. 스타일을 바꾸거나, 따라 만들기 단계를 밟거나, 작은 인터랙티브 페이지를 시연하세요 — 실시간으로, 아무것도 배포하지 않고.
교사가 HTML / CSS / JS를 쓰는 이유
실시간 웹 데모
HTML, CSS, JavaScript가 함께 동작하는 모습을 실시간으로 보이세요.
따라 만들기 수업
단계를 캡처하고 Present로 한 단계씩 보여 반이 구성을 따라가게 하세요.
매개변수 테마
모든 CSS 값을 손으로 찾지 말고 컨트롤로 색과 변수를 움직이세요.
독립 유인물
Station 너머에서 쓸 하나의 HTML 파일을 내보내세요.
TeachForge에서 HTML / CSS / JS는 Workshop Station입니다 — 빠른 코드 조각만이 아니라 수업 페이지를 위해 만들어졌습니다.
HTML / CSS / JS 스테이션 내부
Workshop의 나머지처럼 익숙한 작성 리듬이 있습니다 — 창이 하나가 아니라 셋입니다.
- HTML, CSS, JS 편집기 빠른 창 전환 포함
- Live 또는 수동 새로고침 샌드박스 iframe 미리보기로
- 구축 단계 — 캡처, 단계, Present 모드
- 매개변수 변수 재사용 가능한 테마·값 컨트롤용
- 기기 미리보기 프레임 및 KaTeX 같은 선택 라이브러리
- 독립 HTML보내기, Advanced JSON, 공유, 임베드, Whiteboard 보내기
창이 페이지가 되는 방법
템플릿에서 시작하거나 세 창을 편집하세요
수업에 필요할 때 단계와 매개변수 변수를 추가하세요.
Live 또는 Manual 미리보기 실행
샌드박스 iframe이 학습자가 만날 페이지를 보여 줍니다.
단계 제시, 내보내기 또는 실시간 전송
결과를 보드로, 문항으로, 또는 독립 HTML로 가져가세요.
페이지 하나. 모든 버전.
이 Station은 다음을 지원합니다: 매개변수 변수 및 따라 만들기 단계: 페이지 구조는 유지하고, 테마를 바꾸며, 구성을 순서대로 공개하세요 — 살짝 다른 HTML 파일 열두 개를 유지하지 않습니다.
가르치면서 바꾸기
매개변수 값을 조정하거나 Present 모드에서 다음 단계로 가세요.
구조는 유지하고 테마를 바꾸기
같은 페이지 패키지가 내일은 다른 강조색, 데이터셋, 난이도를 보일 수 있습니다.
완성만이 아니라 구축을 가르치기
단계로 반이 페이지가 모이는 것을 보게 하세요.
평가와 가깝게
휴대용 JSON 패키지를 저장하고 이후 수업이나 랩에서 재사용하세요.
빠른 실행-콘솔 조각이 필요하신가요? 그때는 형제 Station인 Code Sandbox입니다. HTML / CSS / JS는 단계와 내보내기가 있는 작성 페이지용입니다.
시작할 준비가 된 페이지
템플릿을 열고 수업에 맞게 다시 빚으세요:
| Area | 열 수 있는 것 |
|---|---|
| 기초 | 빈; 프로필 카드; Flexbox 놀이터 |
| 따라 만들기 | 버튼 단계; 색 테마 전환 |
| 인터랙티브 | 캔버스 애니메이션; Quiz UI; 데이터 표 |
AI 도움, 원하는 방식으로
초안이 필요하신가요? AI를 보조로 쓴 뒤 — 학습자에게 닿기 전에 검토·편집·승인하세요.
프롬프트 복사
준비된 프롬프트를 만들어 이미 쓰는 채팅 도구에 붙여넣으세요.
내 GPU 사용
설정에서 로컬 모델 엔드포인트를 연결하고 여러분이 제어하는 하드웨어에서 생성을 실행하세요.
내 API 키 사용
설정에 공급자 키를 넣고 모델을 고른 뒤 내 계정으로 생성하세요.
AI는 틀릴 수 있습니다. 그래서 교사가 루프에 남습니다.
수업이 일어나는 곳으로 페이지 가져가기
- Whiteboard — 라이브 보드에 놓고 교실 앞에서 조정하세요
- Quest Ladder — 문항과 설명에 넣으세요
- Virtual Lab — 인터랙티브 랩 작업에서 재사용하세요
- Community — 만든 것을 공유하고 다른 교육자가 공유한 것을 바탕으로 만드세요