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

Three Pointed Visual Revisions

30 min hands-on · Core

Browser only. Three fault descriptions stand in for screenshots; you write the pointer sentence plus fence for each.

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

  • Describe three fault screenshots in words with width stated
  • Write keep/change/check for each with measurable criteria
  • Verify each fix would be checked at both widths

  1. Step 1

    Take the three faults

    Fault 1: at 360px the third dish price drops under the name. Fault 2: the submit button needs scrolling to reach on phones. Fault 3: on desktop the menu and hours crowd into one narrow column. For each, write the screenshot description (fault plus context plus width).

    faults.mdmarkdown
    THREE FAULTS (synthetic practice material)\n---\n1. 360px: third dish price drops under the dish name.\n2. 360px: submit button below the fold, needs scrolling past empty space.\n3. Desktop: menu and hours squeezed into one narrow column with wide empty margins.

  2. Step 2

    Write the three revisions

    Each revision: KEEP (text, colors, form behavior), CHANGE (one layout rule with a measurable criterion), CHECK (360px plus desktop, eyes plus one tap).

  3. Step 3

    Name the trap in each

    For each fault, write what a vague request would most likely break (full redesign, new colors, moved sections) versus what the pointed request protects.

How to confirm it worked

  • Three screenshot descriptions with width and context each
  • Three keep/change/check revisions, one layout rule each
  • Every check covers both widths with eyes plus one tap
  • Trap-vs-protection line written for all three faults

Workspace

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

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

Fault 1 is one row-layout rule (price alignment). Fault 2 is button placement or spacing above it. Fault 3 is a column-width rule on desktop.

Stage 2: a direction

Keep-lists repeat every time: text, colors, form behavior. Protection is repetition.

Stage 3: almost the answer

Criteria must be yes-or-no: price on the same line at 360px; button visible without scrolling; two readable columns on desktop.

Worked solution (open after an honest attempt)

Worked solution. Revision 1: KEEP text/colors/form. CHANGE menu row layout so the price stays right-aligned on the same line at 360px. CHECK: narrow, read row three. Revision 2: KEEP all fields and text. CHANGE spacing so the submit button is reachable without scrolling at 360px. CHECK: narrow, tap. Revision 3: KEEP content and order. CHANGE desktop columns so menu and hours sit in two readable columns. CHECK: desktop read plus 360px re-check (stacked, no sideways scroll). Vague versions of each would have redesigned the menu, recolored the page or moved sections; pointed versions touch one rule each.