Move with the arrow keys, a presentation clicker, or the buttons at the bottom left; the gear at the bottom right opens the slide settings.
Imagine asking a coding agent to make a small lesson where students explore planets and answer three questions.
Create a folder named orbit_lab. In VS Code, choose File → Open Folder and select it.
| Search text | Publisher | How to open it |
|---|---|---|
| Codex | OpenAI | Codex icon, or Command Palette → Codex: Open Codex Sidebar |
| Claude Code | Anthropic | Spark icon, Activity Bar, or Command Palette → Claude Code |
Windows shortcuts are shown. Extension names and interface details can change, so verify the publisher and follow the current official documentation. A school may distribute an approved extension through managed VS Code settings.
| Extension | Conservative starting controls |
|---|---|
| Codex | Plan first; use the permissions control beneath the prompt and choose Ask for approval |
| Claude Code | Plan mode first; use Manual mode when edits begin |
A coding agent can inspect project context and can request permission to edit files or run commands.
| Context or action | Teacher choice |
|---|---|
| Workspace files | Open a dedicated project folder that contains only the application |
| Open file or selected text | Attach only the material needed for the task |
| File edits | Review the diff and keep approval controls enabled |
| Terminal commands | Read the command, working folder, and expected effect |
| Network access | Allow downloads only from known package sources when the project needs them |
| Part | What to tell the agent | Orbit Lab example |
|---|---|---|
| Goal | The visible result | A planet quiz students can use |
| Context | Audience, folder, and existing files | Grade 9 science; empty folder |
| Constraints | Tools, limits, and safety requirements | Static HTML; keyboard friendly; no accounts |
| Done when | Checks that prove the work is complete | Serve locally; test all three questions |
A prompt is a work order. A clear finish line helps the agent inspect its own work.
Create README.md with the exact start, test, and stop commands so another teacher can repeat the setup.
Keep durable instructions in the project so each new agent session receives the same expectations.
Include:
index.html is the page the browser opens.
styles.css controls appearance.
app.js controls behavior.
assets/ holds images, sounds, and other files.
A diff shows the old and new versions of a file. Removed lines and added lines receive different colors.
removed: <h1>Planets</h1> added: <h1>Orbit Lab</h1>
Claude Code can show a side by side proposal before an edit. Codex and VS Code Source Control can show changed lines beside the file. Use the agent chat for follow up changes.
No. JavaScript can run inside the browser and make a page highly interactive.
A static HTML application is delivered as files. Each visitor receives the same program files.
It can still:
| Classroom need | Static application? | Reason |
|---|---|---|
| Public lesson or simulation | Yes | Everyone can receive the same files |
| Quiz feedback during one visit | Yes | The browser can calculate a score |
| Remember a display preference | Usually | The browser can store a small local setting |
| Teacher sees every student result | Needs more | Results must reach a shared system |
| Private accounts or secret answer key | No | Browser files can be inspected |
Microsoft's Live Preview extension starts a local server and opens a static page inside VS Code.
Live Preview remains under development, so its buttons and requirements can change. Follow the current Microsoft project documentation.
VS Code opens a terminal in the workspace folder through View → Terminal or Ctrl+`.
python -m http.server --bind 127.0.0.1 8000
The terminal stays busy while the server runs.
Visit http://127.0.0.1:8000.
Press Ctrl+C in that terminal to stop the server.
| http | Protocol | The communication standard |
| 127.0.0.1 | Host | The computer to contact |
| 8000 | Port | The program door on that computer |
| index.html | Path | The file or resource being requested |
localhost is a special name for this same device.
127.0.0.1 is the usual IPv4 loopback address for this same device.
::1 is the IPv6 loopback address.
💻
The student contacts the Chromebook.
“Local” always depends on who is speaking.
python -m http.server 8000 --bind 0.0.0.0
0.0.0.0 tells the server to listen through every network connection on the teacher computer.
Students visit the teacher computer's local network address, such as http://192.168.1.42:8000.
The sample address is illustrative. Find the actual address in the computer's network settings.
A port identifies one server program on a computer. It works like a room number after a street address.
A firewall decides which incoming network connections may enter. It works like a security desk with a list of permitted rooms.
| What you see | Likely cause | First action |
|---|---|---|
| “Address already in use” | Another program has that port | Stop it or choose port 8001 |
| Teacher computer works; students fail | Loopback binding or firewall rule | Check binding, private network, and firewall |
| Some devices fail | Different WiFi or network isolation | Confirm every device is on the same allowed network |
Windows Firewall blocks unsolicited incoming traffic unless a rule permits it. Keep the rule specific to the application, port, and private network.
Node.js runs JavaScript outside the browser. Development tools can use it to prepare a web application.
npm downloads JavaScript packages and runs project commands.
A package is reusable code published for other projects. A dependency is a package that this project needs.
node --version npm --version
If either command is missing, install a current Long Term Support release from the official Node.js website, then restart VS Code. School managed devices may require help from IT.
package.json names the packages and useful project commands.
package-lock.json records the exact dependency tree. Commit it with the source.
node_modules/ contains downloaded packages. npm install can recreate it, so leave it out of Git.
npm can remain a development tool and package manager while the finished application remains entirely frontend.
three.js is a JavaScript library for drawing interactive 3D scenes in a browser.
Vite is a development and build tool. It serves source files while you work, then prepares compact files for publishing.
“Frontend framework” means a larger system such as React or Vue. A small activity often needs less machinery.
| Command | When | What it does |
|---|---|---|
| npm install | After download or dependency change | Creates or updates node_modules/ |
| npm run dev | While editing | Starts a fast local development server |
| npm run build | Before publishing | Creates the finished files in dist/ |
| npm run preview | After building | Serves the finished files for a final local check |
Edit source → build → preview → publish
The coding agent can run these commands after approval. Read the integrated terminal output because it records warnings, addresses, and failures.
Git records versions of files in the project folder.
GitHub can store a copy of that Git project online and can publish a static site.
A repository is a project folder together with its saved Git history.
Commit:
Ignore:
VS Code uses the Git installation on the computer. Ask school IT for Git when Source Control reports that Git is unavailable. With a GitHub Actions deployment, dist/ can remain a generated artifact.
Publish to GitHub uploads the repository. A Pages deployment creates the website. Treat the Pages website as public.
| Symptom | Cause to check | Repair |
|---|---|---|
| Page is blank | JavaScript error or wrong asset path | Open developer tools; inspect Console and Network |
| Site works at home page; files show 404 | Vite base path misses repository name | When the address contains the repository name, set base: '/REPOSITORY/' and rebuild |
| Old version appears | Build is pending, failed, or missing | Check Actions, rebuild, then refresh |
| Python route fails | Pages serves static files only | Use a backend host for the Flask application |
GitHub Pages sends HTML, CSS, JavaScript, images, and other files to the browser.
The visitor can download and inspect those files.
Anything sent to the browser must be considered visible to the visitor.
The frontend runs in the browser. The backend runs as a server program and can enforce access policy, use secrets, and reach a database.
An API is an agreed way for programs to ask for data or actions.
Frontend asks:
GET /api/planets
fetch('/api/planets')
.then(r => r.json())
Backend answers with JSON:
{
"name": "Earth",
"moons": 1
}
JSON is a text format for structured data.
HTTP also carries a status such as 200 for success or 404 for a missing resource.
A browser origin is the protocol, host, and port together.
| Address | Origin compared with the first row |
|---|---|
| http://127.0.0.1:5173 | Starting origin |
| http://127.0.0.1:5000 | Different port, so different origin |
| https://example.org | Different protocol and host |
CORS is the browser's permission system for frontend requests to another origin.
During development, use a Vite proxy or permit the exact frontend origin in Flask. Avoid a wildcard origin for authenticated applications.
Flask is a Python web framework. It maps URL paths to Python functions.
python -m venv .venv .\.venv\Scripts\Activate.ps1 python -m pip install Flask python -m flask --app app run --host=127.0.0.1 --port=5000
.venv keeps Python packages for this project separate.
app.py contains the Flask application.
127.0.0.1:5000 keeps the development server on this computer.
| Term | Plain meaning | School office memory aid |
|---|---|---|
| Database | Organized information that persists | A protected records cabinet |
| Password hash | A one way value used to verify a password | A check that avoids keeping the original phrase |
| Session | A server record that remembers a signed in browser | A temporary visitor pass |
| Cookie | A small value the browser returns with later requests | The pass carried by the visitor |
A secret is a credential such as (i) a database password, (ii) a private API key, or (iii) a session signing key.
An environment variable is a named value supplied to the server process outside the source files. Store backend secrets there or in a managed secret store. Keep local values in .env and add that file to .gitignore.
Vite variables exposed to frontend code become part of the browser files. Every bundled value is public, regardless of its name.
SQLite stores this demonstration database in one local file. requirements.txt records the required Python packages.
| Method | Who can reach it | Best use | Main responsibility |
|---|---|---|---|
| Loopback | One computer | Private development | Keep the terminal open |
| Classroom LAN | Allowed local devices | One class session | Binding, firewall, and WiFi |
| Temporary tunnel | People with a public address | Short remote demonstration | Quota, access control, and laptop uptime |
| Static host | Public web visitors | Lessons without private data | Deployment and public content |
| Managed backend host | Authorized web visitors | Accounts and shared data | Security, capacity, cost, and policy |
ngrok gives a temporary public address that forwards requests through its service to a server on your computer.
Current free plan examples: 1 GB data transfer and 20,000 HTTP requests per month, plus a browser interstitial.
Illustrative load: 300 first visits at 4 MB each use about 1.2 GB. A page with 20 requests per visit uses about 6,000 requests. Assets, repeat visits, and quota changes alter the result.
ngrok free plan limits, accessed July 20, 2026: ngrok.com/docs/pricing-limits/free-plan-limits
An IP address identifies a network destination. A domain name, resolved through DNS, gives people a stable name. Reliable public hosting requires more than binding a server to 0.0.0.0.
| Obstacle | Why it matters |
|---|---|
| Private address and NAT | The router shares a public address; internet visitors cannot directly use a 192.168 address |
| Changing public address | A shared link may later point elsewhere |
| Firewall and school policy | Incoming service may be blocked or prohibited |
| Sleep, restart, and WiFi loss | The application disappears when the laptop disconnects |
| Domain, HTTPS certificate, updates, and logs | The teacher becomes the operator of a public service |
Serverless means a provider runs and scales the servers that execute your code. Servers still exist.
You usually pay according to usage, such as requests, execution time, storage, or data transfer.
The provider operates the servers and meters selected resources. Every plan has technical and financial limits.
| Illustrative situation | Practical starting point | Test before use |
|---|---|---|
| One teacher develops privately | Loopback server | Browser console and full activity |
| One class uses a static activity | Classroom LAN or static host | WiFi access, firewall, devices, and asset size |
| Hundreds visit a public static lesson | Static host with cached files | Published path, mobile use, and accessibility |
| Hundreds need accounts or shared records | Approved managed backend | Capacity, privacy, security, budget, and recovery |
A simple static application may serve hundreds of visitors from a local server on suitable hardware and a suitable network. Capacity still depends on (i) the application, (ii) the teacher computer, (iii) the WiFi, and (iv) the network policy. A public audience also needs a stable address and continuous operation.
Audience counts are illustrative. Measure with the actual application and network.
| Claim | What actually happens |
|---|---|
| “Static means motionless.” | Browser JavaScript can provide rich interaction and animation. |
| “Using npm creates a backend.” | npm may only prepare frontend files during development. |
| “Students can visit my localhost.” | Each student's localhost refers to that student's device. |
| “A private repository hides a key in the published site.” | Published browser files reveal values included in them. |
| “GitHub Pages runs my Flask file.” | GitHub Pages publishes static files. Flask requires a Python host. |
| “Serverless means free and without servers.” | A provider operates servers and meters selected resources. |
| Layer | Where to look | Question |
|---|---|---|
| Agent context | Open files and attached references | Did the prompt identify the correct file and expected result? |
| Editor checks | VS Code Problems and Output | Which warning or extension message appears first? |
| Browser behavior | Developer tools → Console | Which JavaScript error appears first? |
| Files and API calls | Developer tools → Network | Which request failed, and with what status? |
| Local server | VS Code integrated terminal | Did the request arrive? Did the server report an error? |
| Address | Browser address bar | Are protocol, host, port, and path correct? |
| Published site | Build output and deployment log | Was the newest dist folder deployed successfully? |
Learning and access
Technical checks
Privacy and security
Operations
Planned topics include (i) raw Python and C, (ii) command line and desktop programs, (iii) virtual environments and compilers, and (iv) executable files, permissions, packaging, and offline distribution.
Documentation accessed July 20, 2026.
Documentation accessed July 20, 2026.
Plan limits and service behavior can change. Recheck provider documentation before a live deployment. Documentation accessed July 20, 2026.
Mehmet Kerem Turkcan; Associate Research Scientist; Center for Smart Streetscapes, Columbia University; New York, USA; keremturkcan.com; mkt2126@columbia.edu