D↗ DiscoveryVIPAll guides ↗

THE INTERACTIVE DEVELOPER SERIES / 013

Make sense
of APIs & data.

Go beyond copying a fetch call. Build requests, explore responses, repair data, and learn what to do when things go wrong.

12 deep-dive lessons · 4 hands-on workspaces · No API key needed

Start here Basic HTML and JavaScript help.Learn at your pace Read → predict → experiment → explain.Your work stays here Saved in this browser; export to keep it.

01 / THE GUIDE

Understand it. Then prove it.

Each lesson includes a worked example, a practical activity, and an explained knowledge check.

0 / 12 complete

02 / REQUEST LAB

Change the request. Watch the result.

A local simulation of a fictional API. No network requests are sent; simulated POSTs are not saved.

SAFE TO EXPERIMENT

REQUEST → RESPONSE

Idle · Send a request to begin.

Your response will appear here.

Try a normal request first, then compare a failure.

Explore the simulator’s API contract

GET /api/courses accepts topic (JavaScript, HTML, CSS, or empty) and page (1–99). It returns { items, total, page, pageSize }. POST requires title (1–80 trimmed characters), a supported topic, and minutes (integer 1–600); a valid payload returns a simulated 201. Unknown routes return 404. Empty and malformed-JSON scenarios are GET-only and return 405 for POST. Scenario overrides happen after route and input validation. This teaching model does not implement authentication, CORS, real headers, persistence, or the full HTTP protocol.

03 / JSON WORKSHOP

Raw data. Clear thinking.

Validate the structure, then explore your own course collection. Input is treated as data, never executed.

Required: items array, up to 200 records; unique positive integer id, title, topic, and minutes. Extra fields are ignored in the view.

04 / DEBUGGING CLINIC

Find the cause before the fix.

Choose the next useful action. Each case explains the reasoning behind the answer.

0 / 4 solved

05 / PROJECT WORKBOOK

Build something you can explain.

Apply the guide to a course explorer of your own. Record actual observations alongside each manual check.

Acceptance evidence

Check a row after adding evidence. These are your manual observations, not automated test results.

Saved locally in this browser. Export a backup to transfer your work.

KEEP EXPLORING

Read the source.
Test the assumption.

MDN · Using Fetch ↗MDN · HTTP status codes ↗MDN · Working with JSON ↗MDN · Cross-origin requests ↗DiscoveryVIP · JavaScript guide ↗