A community radio station's website, built for IE4 and Netscape 4, with the modern web banned by name. Anyone can make a page that looks like 1998; this asks whether the model knows the era from the inside, and the compatibility notes at the end are where that gets settled.
Grep first, and it is a long list: flex, grid, border-radius, box-shadow, rgba(, opacity, transform, transition, @keyframes, --, @media, const , let , =>, class , backtick, querySelector, addEventListener, <section, <header, <nav, data-. Each hit is a broken constraint and they are trivially countable — a hit count per model is a clean, honest scoreboard graphic before you have judged anything subjective.
Constraint violations, counted. Zero is achievable and some models will manage it. Expect the most common leaks to be const, arrow functions in an event handler, and border-radius sneaking into a button, because those are so deep in the training distribution that they arrive without deliberation. That is itself the interesting finding: the model knows what 1998 looked like and cannot stop writing like 2026.
It is March 1998. You build websites. A client wants a site for their community radio station, Radio Saltmarsh, 102.3 FM, broadcasting from a caravan on the east coast.
Build it the way you would have built it that month, for the browsers people actually had.
Internet Explorer 4 and Netscape Navigator 4. It must render acceptably in both. Assume 800 × 600, thousands of colors, and a 33.6k modem, so keep the weight down.
Write the copy yourself. Give the presenters names and the programs titles. Make it feel like a real small station with real people in it — the charm here is in the specifics, not in the beige.
Banned, because they did not exist or did not work:
flex, grid, position:sticky, CSS variables, media queriesborder-radius, , , , , , Period technique, which is the positive half. Tables for layout, <font>, bgcolor, cellpadding, a single-pixel transparent GIF as a data URI used as a spacer, <center>, document.all and document.layers branched properly, script contents wrapped in HTML comments. A model that uses the spacer GIF and knows why is demonstrating real knowledge. One that writes <marquee> and a starry background has produced a costume — the prompt says as much, so score it accordingly.
The compatibility notes decide the top band. Real facts to check against: getElementById is DOM Level 1, in IE5 and NS6, so IE4/NS4 needed document.all and document.layers — a model that lists getElementById as safe has not checked. <spacer> was Netscape-only. CSS positioning in NS4 worked only on <layer>-ish absolutely positioned blocks and would drop styling entirely on a resize. Nested tables were a known NS4 rendering hazard. Animated GIFs were universal; data: URIs were specified in August 1998 and were not usable in NS4 at all — a model that flags its own data URIs as anachronistic for the target browsers has read its own file honestly, and that is the single best line available in this challenge.
Charm as tiebreak, and do not undervalue it. The prompt asks for real presenters and real program titles. A schedule with a Tuesday-night sea shanty hour presented by a man called Derek is doing something a generic template is not, and it is the difference between a clip worth showing and a screenshot.
Watch for the model that hedges — writes a modern accessible page and then apologises for the period constraints in a preamble. That is a refusal to do the exercise, not caution, and it should score as an incomplete.
box-shadowopacityrgba()transformtransition@keyframesconst, let, arrow functions, class, template literals, Array.forEach, JSONquerySelector, addEventListener, getElementById (yes — IE4 has it, NS4 does not; you branch)<section>, <header>, <nav>, <video>, <canvas>, data- attributesExpected, because it is 1998:
<font>, bgcolor, border=0, cellpadding, cellspacing, <center><style> block for the bits CSS1 could actually dodocument.all for IE and document.layers for Netscape, branched properly<!-- --> comment wrappers around script contentsdata: URIs for graphics, and you should, because the period look needs them. Draw them yourself; no placeholder services.html block.One short paragraph before the file: your layout structure and how you handled the IE/Netscape split.
The single fenced html block.
The honest part. Go through your own file and tell me:
Be specific and name dates where you know them. If you used a technique and are not sure it existed yet, say that rather than guessing confidently.
Anyone can make a page that looks like 1998 — Comic Sans, a starry background, a marquee. That is a costume.
I want to know whether you know the constraints from the inside: what NS4 did to a nested table, why you cannot put a stylesheet on a form control, what the <spacer> tag was and whose it was, why everyone used a single-pixel transparent GIF. A page that looks a bit plain but is honestly built to the period beats a gorgeous pastiche that uses flexbox under the hood — and I will read the source.