Workshop и станции
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS станция
Собирайте живые веб-фрагменты в многопанельном пространстве авторства — с этапами сборки, параметрическими переменными и автономным экспортом HTML, когда страница нужна вне TeachForge.
ИИ может подготовить черновик. Вы решаете, что увидит класс.
Что такое HTML / CSS / JS
HTML / CSS / JS — многопанельная веб-станция авторства. Вы пишете разметку, стили и скрипты рядом, смотрите страницу в изолированном iframe и — когда нужно — экспортируете автономный HTML-файл для использования вне TeachForge.
Это важно в преподавании: веб-навыки имеют смысл, когда учащиеся сразу видят результат. Смените стиль, шагните этап сборки или покажите небольшую интерактивную страницу — вживую, ничего не разворачивая.
Зачем учителям HTML / CSS / JS
Живые веб-демо
Покажите, как HTML, CSS и JavaScript ведут себя вместе в реальном времени.
Уроки совместной сборки
Зафиксируйте этапы и покажите их по шагам в презентация, чтобы класс следил за сборкой.
Параметрические темы
Ведите цвета и переменные элементами управления вместо охоты за каждым значением CSS вручную.
Самостоятельные раздатки
Экспортируйте один HTML-файл для использования за пределами станция.
В TeachForge HTML / CSS / JS — станция Workshop: для учебных страниц, а не только для быстрых сниппетов кода.
Внутри станции HTML / CSS / JS
Как и в остальном Workshop, у вас знакомый ритм авторства — с тремя панелями вместо одной.
- Редакторы HTML, CSS и JS с быстрым переключением панелей
- Обновление прямой или вручную в песочный предпросмотр iframe
- Этапы сборки — захват, шаг и режим презентация
- Параметрические переменные для переиспользуемых элементов темы и значений
- Рамки превью устройства и необязательные библиотеки вроде KaTeX
- Автономный HTML-экспорт, «Расширенный JSON», общий доступ, встраивание и отправка на Whiteboard
Как панели становятся страницей
Начните с шаблона или правьте три панели
Добавьте этапы и параметрические переменные, когда они нужны уроку.
Запустите превью прямой или ручной
Изолированный iframe показывает страницу так, как её встретят учащиеся.
Покажите этапы, экспортируйте или отправьте вживую
Отнесите результат на доску, в вопрос или наружу как автономный HTML.
Одна страница. Каждая её версия.
Эта станция поддерживает параметрические переменные и этапы совместной сборки: сохраните структуру страницы, меняйте тему и раскрывайте сборку по порядку — вместо двенадцати чуть разных HTML-файлов.
Меняйте прямо на уроке
Подстройте параметрические значения или шагните к следующему этапу в режиме презентация.
Сохраните структуру, меняйте тему
Тот же пакет страницы завтра может показать другой акцент, набор данных или сложность.
Учите сборку, а не только финал
Этапы позволяют классу смотреть, как страница собирается.
Оставайтесь рядом с оцениванием
Сохраните переносимый пакет JSON и используйте его на следующих уроках или в лабораториях.
Нужен быстрый сниппет Run-and-консоль? код песочница — родственная станция для этого. HTML / CSS / JS — для авторских страниц с этапами и экспортом.
Готовые страницы для старта
Откройте шаблон и перестройте его под свой урок:
| площадь | Что можно открыть |
|---|---|
| Основы | Пусто; карточка профиля; площадка флексбокс |
| Сборка вместе | Этапы кнопок; переключатель цветовой темы |
| Интерактивный | Анимация холста; UI викторины; таблица данных |
Помощь ИИ — по-вашему
Нужен черновик? Используйте ИИ как помощника — затем проверьте, отредактируйте и утвердите, прежде чем что-либо увидят учащиеся.
Скопируйте промпт
Создайте готовый промпт и вставьте его в чат-инструмент, которым уже пользуетесь.
Используйте свой GPU
Подключите локальный конечная точка модели в настройках и запускайте генерацию на своём оборудовании.
Используйте свой API-ключ
Добавьте ключ провайдера в настройках, выберите модель и генерируйте со своего аккаунта.
ИИ может ошибаться. Именно поэтому преподаватель остаётся в контуре.
Перенесите страницу туда, где идёт урок
- Whiteboard — разместите на живой доске и подстройте перед классом
- Quest Ladder — вставьте в вопросы и пояснения
- Virtual Lab — используйте снова в интерактивной лабораторной работе
- сообщество — делитесь тем, что создали, и опирайтесь на то, чем поделились другие