All 4 labs

ROOM 01 · from Book 01 FRONTEND

The web page playground

Build a web page with HTML, CSS and JavaScript and see the result instantly

01

LAB 01 — Frontend Construction Chamber

The web page playground

IDLESimulation

This practice page runs in your browser. The code below is the code a real page would use, so you can see how the picture and the languages connect.

Result · what the user sees

HTML5 pieces on the page
CSSStyling the page
JavaScriptOff · nobody listening

What just happened?

This page is built from three languages. Pick a tab on the left to control one part at a time. Try starting with turning CSS off in the CSS tab, or switch on the HTML X-ray to see that every piece of the page has a name.

banpaeng.example

Flour House Menu · Contact

Fresh bread every morning

Our own dough, baked in a charcoal oven, delivered to your door

HTML says what is on the page

index.html · the code that matches the screen right now

<body>
  <header>Flour House · Menu · Contact</header>
  <h1>Fresh bread every morning</h1>
  <p>Our own dough, baked in a charcoal oven, delivered to your door</p>
  <img src="bread.png" alt="A round loaf of bread">
  <button id="order">Order bread</button>
</body>

ROOM 02 · from Book 02 BACKEND

The server’s coffee shop

Order a coffee and follow the request and response — when it works and when it fails

Read the chapter that uses this lab →

02

LAB 02 — Request Processing Engine

The server’s coffee shop

IDLESimulation

Everything in this lab happens only in your browser. No real data is sent out over the internet.

Scenario · choose one before you order

The server works as usual

coffee.example/order

Browser · customer side

Server · coffee.example

IDLE · waiting for requests

Receive the requestWaiting
Check the dataWaiting
Check stockWaiting
Save and brewWaiting
Send the responseWaiting

Shop stock · the browser can’t see this

Latte6 cups
Americano8 cups
Cocoa4 cups

Request · draft to send (follows the form)

POST /api/orders HTTP/1.1
Host: coffee.example
Content-Type: application/json
Accept: application/json

{
  "drink": "latte",
  "qty": 1,
  "customerName": "Mali"
}

Response · waiting

// No response yet
// Press 'Order now' to send the request

What happened?

Press Order now and watch the blue envelope travel. That envelope is the request: the browser wraps up your order and sends it to the server. Then try changing the scenario above to see how each kind of failure is different — or set the quantity to 0, or delete the name.

4 kinds of outcome · Tried 0/4

2xx
Success
You got what you asked for, e.g. 201 Created
4xx
Request problem
The sender must fix the request, e.g. 400, 409
5xx
Server problem
Not the customer’s fault, e.g. 500
No code
Never arrived / no answer
A problem on the way. No response

ROOM 03 · from Book 03 DATABASE

The data drawers

Add, find, edit and delete rows, and link the customers table to the orders table

Read the chapter that uses this lab →

03

LAB 03 — Data Memory Vault

The data drawers

IDLESimulation

This is a simulation: all the data lives only in your browser’s memory and disappears when you refresh. A real database lives on a server, and the browser should never touch it directly.

The SQL a real program would send to the database

SELECT *
FROM customers;

What happened?

The coffee shop’s database has two drawers: customers holds the customers and orders holds the orders. Choose an action above, from Create to Delete, and watch how the tables change.

Drawer · TABLE

customers shop customers

4 rows

The customers table: the coffee shop’s customers. Press a name to see the orders linked to it.
id (Primary Key)	name	city
1		Chiang Mai
2		Bangkok
3		Khon Kaen
4		Phuket

Try itPress a customer’s name in the top table to see which orders in the bottom table point back to them.

Drawer · TABLE

orders coffee orders

6 rows

The orders table: the shop’s orders. The customer_id column is a foreign key that points to customers.id.
id (Primary Key)	item	total ฿
101	Iced latte	65
102	Hot Americano	55
103	Blended cocoa	70
104	Thai iced tea	50
105	Cappuccino	60
106	Espresso	45

Who may write to the database?

Browser vs. server

Try changing the price of order #101 (Iced latte, 65 baht) by three routes, and see where each request is stopped.

ROOM 04 · from Book 04 WEBSITE ONLINE

Publish to the world

Take a website from one computer out to users in many countries

Read the chapter that uses this lab →

04

LAB 04 — Global Network Observatory

Publish to the world

IDLESimulation

A model for learning: the IP address, domain name, request counts, capacity and response times in this lab are made-up numbers. Use them to see trends only — they don’t predict how real servers perform.

Not securehttp://localhost:3000

Who can open itOnly one person can open it: the developer

Step 0 · The website still lives on the developer’s machine

The website is running at localhost:3000. The word localhost means “this machine,” so the browser on our own machine can open it. But if a friend types the same thing, their browser looks for the site on their own machine, not ours.

The command that runs the site on your own machine

$ npm run dev
> Ready at http://localhost:3000

Load test: when everyone shows up at once

Load & Capacity · made-up numbers

Right now nobody except the developer can open the site, so there is no load to test yet. Publish up to the Browser → Server step first, and this section will let you change the number of users.