# Build With AI — The Independent Creator's AI Workshop

**Edition:** 001 / 24 October 2026  
**Canonical domain, only after publication:** https://buildwithai.sahiltayal.com/  
**Status:** complete static **production candidate**, **not deployed** and **browser-tested via an inline local harness**, but **not tested over a real HTTP Pages deployment**.

## The work

An original, substantive standalone workshop for people who want to publish AI-assisted websites responsibly: 14 lessons with exercises, acceptance checks and counterarguments; a deterministic six-stage ship simulation; four deliberately broken examples; a restricted browser-only HTML/CSS preview; three copyable build/review prompts; a local Markdown project-plan exporter; a separate downloadable starter ZIP; four verified-at-check-time Sahilverse examples; official technical references, provenance labels and a glossary.

### Deployment root contents

- `index.html` — fully rendered, readable/indexable curriculum and all interaction markup.
- `styles.css` — responsive styling, layout, design tokens, reduced-motion support.
- `app.js` — no dependencies; simulator, challenge, preview, export, progress and copy.
- `404.html` — helpful fallback page.
- `_headers` — Cloudflare Pages headers including CSP and `pages.dev` noindex rules.
- `robots.txt`, `sitemap.xml` — crawler support for the intended canonical domain.
- `icon.svg`, `cover.svg` — original SVG favicon and social preview.
- `starter-kit.zip` — downloadable, independently usable three-file example and its README.
- `README.md`, `RESEARCH_AND_CREDITS.md`, `TEST_REPORT.md` — implementation, sources and quality evidence.
- `tests/smoke_test.py` — optional reproducible source/DOM/layout/interaction test suite (uses Python BeautifulSoup and Playwright Chromium).

No build, framework, external font, API, analytics code, cookie, user account or backend is required. All code lives in static files. The exercises do not persist their state; reload clears the page. Exported project briefs leave the browser as downloads, never server form submissions. Emails use `mailto:` and are not claimed as sent.

## Local smoke check (before deployment)

1. Unzip the archive into a new empty directory; `index.html` must be **at the root**, not `dist/index.html`.
2. Run `python3 -m http.server 8000` from that directory; visit `http://localhost:8000/`.
3. Open the browser developer tools Console and Network. Confirm `styles.css`, `app.js`, `icon.svg` and `starter-kit.zip` load successfully. The source has a strict Pages CSP; localhost's generic Python server does **not** apply `_headers`. Test CSP again on Cloudflare staging.
4. Test the six simulation answers: stages 1–6 correct indices (zero-based) are `1,0,2,1,2,1`. Verify an empty answer and a bad answer, restart and completion.
5. Test each of the four bug cases: zero-based correct indices `1,0,2,1`, score 4/4, then reset.
6. In preview, enter text, test empty state, try a `<script>` tag (must be removed), try external images and forms (must be removed), restore the sample. Only a limited HTML/CSS subset is supported. **Never paste secrets into any preview.**
7. In project planner, test required validation, file download (inspect Markdown), reset; copy a prompt (if Clipboard permission is denied, selection/fallback directions should appear).
8. Toggle all 14 exercise checks and reset them. Tab through navigation/controls; check visible focus, link names, label relationships, announcement text, and screen reader output.
9. Test at 360px, 768px and 1440px, at 200% zoom, on keyboard-only and touch hardware; check for content clipping and horizontal scroll. Turn on `prefers-reduced-motion`. Repeat on an actual mobile browser.
10. Open `/this-page-does-not-exist` after deployment and ensure your custom `404.html` is served with a proper 404 status. Verify `/_headers` policies in the Network panel; a plain local server does not process this special Cloudflare file.

## Cloudflare Pages deployment, safely

1. **Keep a versioned backup** of the current live site (if any), including the last known working ZIP and a deployment identifier. Do not overwrite an existing Pages project without reviewing the change.
2. Create a separate staging project or deploy a **preview branch** in an existing Cloudflare Pages project. Use Direct Upload or Wrangler to upload the **contents of this ZIP**, with the root `index.html` file at the build/output root. Cloudflare docs: https://developers.cloudflare.com/pages/get-started/direct-upload/ . Direct Upload projects cannot be converted to Git-integrated projects later; choose deliberately.
3. Inspect the `*.pages.dev` staging URL, Console, Network, `/404-probe`, downloaded starter ZIP, CSP, layout, keyboard access, and all interactive flows. Confirm the preview alias is not indexed (`X-Robots-Tag: noindex` or Cloudflare's platform defaults).
4. Check your exact DNS and deployment configuration before attaching `buildwithai.sahiltayal.com`. **Do not invent a CNAME target or assume the subdomain resolves.** Add the domain through Cloudflare Pages' Custom Domains workflow; configure the DNS record it requests. Confirm HTTPS/TLS and that the page and sitemap resolve.
5. After preview acceptance, choose the production deployment intentionally. Confirm canonical metadata and publicly served headers, sitemap and 404 behaviour from the real domain. Keep the previous working version available.
6. If production regresses, use the Pages project **Deployments → All deployments → … → Rollback to this deployment** on an eligible previous **production** deployment. Preview deployments are not rollback targets. See https://developers.cloudflare.com/pages/configuration/rollbacks/ . Domain changes may require separate reversal.
7. Add the verified URL to the shared Sahilverse directory and submit the sitemap to Search Console if relevant. This build has not changed the directory, DNS, Cloudflare account or Search Console on your behalf.

## Security model and limitations

- No user-submitted string is put directly into the host page as HTML. Form and status messages use `textContent`.
- The preview uses an HTML tag allowlist, drops active/unsafe elements and attributes, limits input to 8,000 characters, renders only inside `iframe sandbox=""` without permissions, and sets a restrictive in-document CSP. Inline CSS that attempts `@import`, `url(` or suspicious expressions is dropped. This is teaching isolation, **not** a secure malware analysis service or complete HTML sanitizer suitable for general hostile content. Do not paste private information.
- The _headers CSP only takes effect after deployment on Cloudflare Pages static responses. Any new external dependency must be deliberately reflected in security policy after reviewing its implications.
- The project-plan export uses a temporary Blob download. No persistent browser storage is used, so progress and form fields disappear on reload. The host may still log ordinary web requests; “no application analytics” does not mean “no server infrastructure metadata”.
- All examples and text are teaching artefacts, not empirically proven interventions. AI-assisted authorship is not an assertion of independent hand coding or peer review.

## Quality status

See `TEST_REPORT.md`. Automated static checks and JavaScript syntax checks passed. Full local URL navigation was denied by Chromium (`net::ERR_BLOCKED_BY_ADMINISTRATOR`), but **75 source and browser-DOM assertions passed** by injecting the actual HTML/CSS/JS into a browser page for interaction and layout testing at 360/768/1440 pixels. This does not exercise HTTP routing, real Cloudflare headers, DNS, TLS, or assistive-technology behaviour. The reproducible suite is included under `tests/`; to run it, install `beautifulsoup4` and `playwright`, install Chromium, and execute `python tests/smoke_test.py` from the unpacked root. Set `BROWSER_PATH` if your Chromium executable is not in PATH. The actual staging/mobile/keyboard checks listed above remain necessary before calling this production verified.

## Editorial policy

The [source and credits notes](RESEARCH_AND_CREDITS.md) distinguish original editorial arguments, fictional educational scenarios, linked technical documentation and exploratory Sahilverse projects. Fix an unsupported claim before styling it. A brief remains a draft until tests and sources justify a release.