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

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

Brief a Coding Tool With Context

A coding assistant is only as good as the context you hand it. This lesson shows the handoff message that makes edits land in the right file, first try.

10 min reading

Objectives

  • Give a coding tool project context before asking for edits
  • List current files, goal and limits in one handoff message
  • Ask for one change in a narrow file scope
  • Check the returned edit by reading the diff, not by trusting it

Why this matters

Coding assistants see your files, but they do not know your intent. "Fix the menu" with five files open produces edits in whichever file looks plausible. A handoff message with three lines (what the project is, which files matter, what one change you want) aims the tool like the brief aimed the chat. Every M04 to M07 edit uses this shape.

Concepts

The handoff has four slots: project (one line from your README), files (the names that matter, pasted fresh), change (one change with its acceptance criterion from M02L8), and fence (what must stay untouched). Example: "Neighborhood bakery one-page site (index, styles, app). Files: index.html menu section, styles.css menu rules. Change: dish names larger than descriptions at phone width. Fence: keep all text, colors and the form."

One change, narrow scope. "Restyle the menu" is a change; "restyle the menu and improve the form and add photos" is three requests wearing one message. Narrow scope also means naming the file: "in styles.css only" beats "somewhere in the project". When the edit returns, read what changed before accepting: which file, which lines, does it match the criterion? Accepting blind is lesson M01L1's trust error in editor form.

Context goes stale. After renames or big edits, re-paste the file list. A tool working from yesterday's names edits yesterday's files. Lesson M06L23 turns the handoff into a reusable project summary; for now, paste fresh every time the file list changes.

Worked example

Bad handoff: "The menu looks off, fix it." The tool restyles the wrong file, renames a class the HTML does not use, and the menu looks the same while something else shifts. Good handoff: project line, two file names, one change with criterion ("dish names larger than descriptions, prices right-aligned at 360px"), fence ("keep text, colors, form"). The edit touches styles.css only, you verify at 360px in thirty seconds, done.

Expected result: a handoff message for your next real edit, under 120 words, with all four slots filled.

The common wrong move

Paste-and-hope: dumping the whole project into the tool with "make it better" and accepting the result without reading. Big pastes produce big diffs nobody reviews, which is how working forms die during styling sessions.

Lab and next step

Lab A10 briefs the tool for a bakery page skeleton and verifies the edit by reading. Next, lesson 14 sets the build order: structure first, then text, style and behavior, each checked before the next.

Quick check

An optional 4-question self-check. Answers never leave your device, are not stored, and never count toward any assessment.

Lesson feedback

No published feedback yet.

Log in and complete the lesson to leave feedback.

Exercise

Write the handoff message for one real edit on your project: project line, file names, one change with criterion, fence. Keep it under 120 words.

Pass criteria

Four slots present (project, files, change with criterion, fence); one change only with a named file; under 120 words; criterion checkable in a minute.

Log in to track progressFree account: stores only your lesson progress and quiz results.