3DVR Education Suite

Interactive web design lab

Change the layout, spacing, type scale, radius, and palette. The preview updates live, and the CSS panel shows the system choices behind the design.

Live preview

Browser-rendered site surface

AA contrast

Northstar Studio

Design system practice

Build clearer pages faster

A strong page gives people orientation, one useful action, and enough structure to understand what comes next.

Hierarchy Put the most important decision first.

Rhythm Use spacing to group related ideas.

Feedback Make actions and states visible.

Inspector

CSS output

1. Structure Use semantic regions before styling the page.

2. Layout Choose grid, flex, and spacing from the content shape.

3. Responsive rules Collapse columns when reading becomes cramped.

4. Accessibility Check contrast, focus states, labels, and tap targets.

Plan for the full suite

Browser-first computer science path

The suite should run locally in the browser whenever possible, then call cloud servers for heavier execution, shared grading, AI review, persistent projects, or safe sandboxing.

Phase 1

Interactive web design

HTML structure, CSS layout, responsive design, accessibility, page audits, and live previews.

Runtime: browser DOM, CSS, local storage.

Phase 2

Python in the browser

Variables, functions, files, data cleaning, notebooks, and small automations.

Runtime: Pyodide locally, cloud workers for packages and long jobs.

Phase 3

Programming languages

JavaScript, Python, shell, C basics, TypeScript, and language tradeoffs through tiny projects.

Runtime: WebAssembly compilers where practical, container runners when needed.

Phase 4

Databases

Tables, indexes, SQL, document stores, sync, migrations, privacy, and backups.

Runtime: SQLite in WASM, IndexedDB, optional hosted Postgres labs.

Phase 5

Cloud systems

APIs, queues, auth, deployments, logs, observability, serverless limits, and cost controls.

Runtime: portal API routes, ephemeral sandboxes, GitHub-backed project history.

Phase 6

Capstone builder track

Ship a complete browser app with design, code, data, deployment, docs, and a demo video.

Runtime: local-first app shell with cloud sync and review hooks.