Learning Loop Architects · Hands-On Workshop

Create AI-Powered Publications and Dashboards

With educators consuming 3x more digital content than five years ago, the challenge isn’t finding information. Rather, it is transforming it into meaningful learning experiences. This hands-on workshop addresses teacher workload concerns by teaching participants to become “Learning Loop Architects,” mastering AI-powered workflows that turn chaotic content curation into streamlined, professional digital publications. You will see how to make KPI dashboards, save web-based data into Google Sheets via AI-generated AppScripts, and more.

👋 New here? Start in 30 seconds

Every example below works right now with built-in sample content — just click a Open demo button. No account, no setup. When you're ready to use your own content, open that example's setup.md for friendly, click-by-click steps.

📖 Read the Start-Here guide

Five Solutions to Build

Each is a self-contained website in its own folder, with a readme.md, setup.md, the data connector, and a live demo that works offline before you connect your own data. The content examples (Newsletter, Online Magazine, Reading-List Digest, Resource Directory) also have a one-click bar to Copy as Markdown / HTML / formatted-for-email — so you can paste a finished piece straight into Gmail, Mailchimp, a CMS, or a doc.

Google Sheets

1 · Newsletter

A branded, print-ready newsletter (“The Learning Loop” style) built live from a spreadsheet — editors write in tabs, readers get a polished web issue.

How to implement
  1. Run createNewsletterTemplate() in code.gs to auto-build the Sheet.
  2. Deploy code.gs as a Web App; copy the /exec URL.
  3. Paste it into WEB_APP_URL in index.html.
Google Sheets

2 · KPI Dashboard

A performance dashboard with KPI cards, trend & breakdown charts, and a sortable table — numbers pulled straight from a Google Sheet.

How to implement
  1. Run createDashboardTemplate() in code.gs to auto-build the Sheet.
  2. Deploy code.gs as a Web App; copy the /exec URL.
  3. Paste it into WEB_APP_URL in index.html.
Google Docs

3 · Online Magazine

An online magazine whose articles are authored in Google Docs. A script converts each Doc to clean HTML; the site lists and renders every issue.

How to implement
  1. Put article Docs in one Drive folder (with metadata lines).
  2. Set FOLDER_ID in code.gs, deploy as a Web App.
  3. Paste the /exec URL into index.html & article.html.
Markdown

4 · Reading-List Digest

A curated link digest rendered from plain Markdown files — no Google account, no backend. Drop a .md file in content/ to add an issue.

How to implement
  1. Write each issue as a Markdown file in content/.
  2. Add it to the ISSUES array in index.html.
  3. Serve over http (no script to deploy).
Google Sheets

5 · Resource Directory

A searchable, filterable catalog of tools and resources — full-text search, category & tag filters, and sorting, all from a single spreadsheet.

How to implement
  1. Create a Resources tab (title, url, category, tags…).
  2. Deploy code.gs as a Web App; copy the /exec URL.
  3. Paste it into WEB_APP_URL in index.html.

Download the Files

Grab one project, or the whole kit. Each ZIP contains the ready-to-run website plus its readme.md and setup.md.

Everything in one file

All five examples, this menu page, and the Start-Here guide.

⬇ Download all examples (.zip)

Prefer individual projects? Use the ⬇ ZIP button on any card above.

Host It Online — Free

Every example is plain HTML/CSS/JS — no build step — so it runs on any static host. Two easy paths:

Option A · GitHub Pages (free, recommended)

  1. Create a free account at github.com.
  2. Click New repository, name it (e.g. ai-powered-pubs), make it Public, Create.
  3. Upload this whole folder: on the repo page choose Add file → Upload files, drag in everything here (the five example folders, the downloads folder, index.html, and START-HERE.md), then Commit changes. (Or use Git: git init, git add ., git commit -m "publish", git remote add origin <repo-url>, git push -u origin main.)
  4. Go to Settings → Pages. Under Build and deployment, set Source: Deploy from a branch, Branch: main, folder / (root), Save.
  5. Wait ~1 minute. Your site is live at https://<your-username>.github.io/<repo-name>/. The menu is the root index.html; each card links to its example.
HTTPS automatically Custom domain supported Re-deploys on every push

Option B · Any web server

  1. Copy the folders into your server’s web root (e.g. /var/www/html/) or upload via SFTP / your host’s file manager.
  2. Make sure index.html is at the path you want; the example folders sit beside it.
  3. Visit your domain — done. (For a quick local preview first, run python3 -m http.server 8000 in this folder and open http://localhost:8000.)

Why a server and not a double-click? Browsers block fetch() of local files over file://, so the demos need to be served over http(s). GitHub Pages and any web host do this for you.

A note on the Apps Script connectors

The Google-powered examples (1, 2, 3, 5) need their code.gs deployed as a Web App and the resulting /exec URL pasted into the page — see each example’s setup.md. Until then, every demo runs on bundled sample data, so you can host and explore the whole site before connecting any live data.