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 6: Working reliably with AI coding tools · Lab

Split the Bundled Request

30 min hands-on · Core

Browser only. The bundled request below is provided as starter material; you split it before anything is sent.

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

  • Split one bundled request into three single-change messages
  • Order them by dependency: structure, wording, additions
  • Attach file scope and criterion to each

  1. Step 1

    Take the bundle

    The bundle: 'Update the menu styling, fix validation messages and add a photo gallery.' List what each part touches and which depends on which.

    bundle.mdmarkdown
    BUNDLE (synthetic practice material)
---
'Update the menu styling, fix validation messages and add a photo gallery.'

Project: bakery one-page site (index, styles, app).

  2. Step 2

    Write three messages

    Message one: menu rows in styles.css with the 360px criterion. Message two: validation wording in app.js with the multi-fault submit check. Message three: gallery markup plus images with per-image verification. Each under 120 words with fence.

  3. Step 3

    State the order reason

    One line per message saying why it goes in its position (wording before styling would re-break layout; gallery last as pure addition).

How to confirm it worked

  • Three messages, each one change in named files
  • Dependency order with one-line reasons
  • Every message under 120 words with fence and check
  • No message contains two changes

Workspace

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

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

Wording changes break layouts; styling fits words. So validation wording goes before menu styling only if wording changes markup; otherwise styling first. State your assumption.

Stage 2: a direction

The gallery is pure addition and always last. Additions on shifting foundations get rebuilt.

Stage 3: almost the answer

Read each message asking: could the diff for this touch more than one file? If yes, split again.

Worked solution (open after an honest attempt)

Worked solution. Message one (styles.css only): menu row price alignment at 360px, keep text/colors/form. Message two (app.js only): validation wording to field/rule/example, keep values, check by multi-fault submit. Message three (index.html plus images/): gallery with three labeled images, check image by image. Order: wording-affecting-markup first if it changes structure, else styling, gallery last as addition. Three sends, three checks, zero tangles.