The most detailed free FDE + DevOps library: 140+ lessons, 70+ labs and 80 long-form articles, in English and Turkish. Start learning →

TürkçeSearch

Build with AI: From Zero to Your First App · Module 4: Your first webpage with AI · Lab

Skeleton Plus Real Text, via the Tool

40 min hands-on · Core

Browser only. Brief any chat or coding tool with the handoff shape; no account required, the brief works on paper too.

Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.

Objectives

  • Write a handoff message with project, files, change and fence
  • Get a page skeleton with three headings and a labeled form
  • Fill real text and verify it against the brief line by line

  1. Step 1

    Write the handoff

    Write the handoff for a bakery page skeleton: project line, file names (index.html), one change (skeleton with three headings plus a labeled order form), fence (simple words, no styling yet). Keep it under 120 words.

    handoff-template.mdmarkdown
    HANDOFF TEMPLATE (copy and fill)\n---\nProject: neighborhood bakery one-page site, no styles yet.\nFiles: index.html (new).\nChange: skeleton with three headings (menu, hours, order) plus an order form with labeled name/items/pickup-time fields and a submit button.\nFence: simple words, no CSS, no script yet.\nCheck: I will open it and read the outline plus tab through the fields.

  2. Step 2

    Build skeleton, then text

    Run the handoff through any tool (or write it by hand from the template). Open the result, read the outline, tab through the fields. Then add real menu, hours and order text from your brief and check each line against the brief.

  3. Step 3

    Record the diff

    Write what changed between the skeleton and the text pass: which lines were added, and which brief line each section answers. If the tool added styling or script unasked, note it as scope creep and remove it.

How to confirm it worked

  • Handoff under 120 words with all four slots
  • Skeleton opens with three headings and a labeled, tabbable form
  • Every text section traceable to a brief line
  • Unasked styling or script removed, not kept

Workspace

0/2 checks passing · Coverage only, not a quality score.

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

The fence 'no CSS, no script yet' is load-bearing. Tools love to add styling unasked; the fence forbids it.

Stage 2: a direction

Tab through the form yourself. Sensible tab order (name, items, time, submit) is the skeleton check that screenshots skip.

Stage 3: almost the answer

If the tool returns lorem ipsum anywhere, that section is unfinished. Replace it with brief text before continuing.

Worked solution (open after an honest attempt)

Worked solution. Handoff example: 'Neighborhood bakery one-page site, no styles yet. Files: index.html (new). Change: skeleton with headings menu/hours/order plus labeled form (name, items, pickup time) and submit. Fence: simple words, no CSS, no script. Check: open, read outline, tab fields.' Skeleton check: three headings visible, four tab stops in order. Text pass: menu lists real dishes with prices, hours state 08:00-19:00 closed Mondays, order section tells callers to call before 18:00. Diff note: added three text blocks, removed an unasked style block the tool included. Structure done, style untouched, exactly as ordered.