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

Overflow Hunt and Label Repair

35 min hands-on · Core

Browser only. The faulty page files below are provided as starter material; save, open, hunt overflow at 360px, repair labels.

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

  • Find every horizontal-overflow cause at 360px with evidence
  • Fix each with a one-line wrapping, capping or fluid change
  • Convert every placeholder-only field to a labeled field

  1. Step 1

    Hunt the overflow

    Save the files, open index.html, narrow to 360px and try scrolling sideways. List each cause: the nowrap menu, the 900px photo, the 500px-fixed inputs.

    index.htmlhtml
    <!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Bakery overflow (practice)</title><link rel="stylesheet" href="styles.css"></head>
<body>
<h1>Bakery</h1>
<p class="menu">Fresh bread 2 USD, Rye 3 USD, Cake 5 USD, Coffee 1 USD, Soup 3 USD, Salad 4 USD, Pie 6 USD.</p>
<img src="photo.jpg" alt="Practice photo of bread on a counter" width="900">
<form id="order-form"><input id="f1" placeholder="Name"><input id="f2" placeholder="Items"><input id="f3" placeholder="Pickup time"><button>Send</button></form>
<script src="app.js"></script>
</body>
</html>
    styles.csscss
    body { font-family: system-ui; max-width: 40rem; margin: 2rem auto; }
.menu { white-space: nowrap; }
img { width: 900px; }
input { width: 500px; display: block; margin: 0.5rem 0; }
    app.jsjavascript
    document.getElementById('order-form').addEventListener('submit', function (e) { e.preventDefault(); alert('Order received.'); });

  2. Step 2

    Fix one line each

    Fix wrapping (normal), image cap (max-width 100%), inputs fluid (width 100% with box-sizing). Re-check: narrow to 360px, confirm zero sideways scroll.

  3. Step 3

    Repair the labels

    Add label elements for f1/f2/f3 (Your name, Items, Pickup time), keep shorter placeholders as hints. Fill the form and read each value back against its label.

How to confirm it worked

  • Three overflow causes listed with one-line fixes each
  • Zero sideways scroll at 360px confirmed after fixes
  • Three label elements present and visible with values filled
  • Placeholders shortened to hints, not removed entirely

Try it here

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

The starter project is loaded below. Edit, preview with Run, then run the behaviour checks. No account needed; your draft stays in this browser.

Up to 10 files, .html/.css/.js only, 100 KB each. A failed import never touches your draft.

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

Three fixed widths cause three overflows: nowrap text, 900px image, 500px inputs. Each fix is one CSS line.

Stage 2: a direction

img max-width 100% plus height auto keeps proportions. Inputs need width 100% and box-sizing border-box to stay inside.

Stage 3: almost the answer

The label check is fill-and-read-back. If you cannot tell which value is which after filling, labels are still missing.

Worked solution (open after an honest attempt)

Worked solution. Fixes: .menu white-space normal; img { max-width: 100%; height: auto; }; input { width: 100%; box-sizing: border-box; }. Verification: 360px narrow, no sideways scroll, desktop still fine. Labels: <label for="f1">Your name</label> and likewise for items and pickup time; placeholders shortened to examples ('e.g. Aylin'). Fill test: enter values, read each back against its label. Five lines changed, page passes both widths.