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 3: Understanding websites and files · Lab

Sort Page Failures by Layer

30 min hands-on · Core

Browser only. The broken page files below are provided as starter material; save them, open index.html, and reproduce each failure.

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

  • Open a local three-file page and reproduce four failures
  • Assign each failure to HTML, CSS or JavaScript with evidence
  • Fix one failure per layer with a one-line change

  1. Step 1

    Open the page

    Save the three starter files into one folder, open index.html by double-click, and confirm the four reported failures: wrong hours text, overlapping menu on narrow screens, dead order button, labels that vanish when typing.

    index.htmlhtml
    <!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Bakery (practice)</title><link rel="stylesheet" href="styles.css"></head>
<body>
<h1>Neighborhood Bakery</h1>
<h2>Hours</h2><p>Open daily 08:00 to 25:00.</p>
<h2>Menu</h2><p class="menu">Bread 2 USD, Cake 5 USD, Coffee 1 USD, Soup 3 USD, Salad 4 USD, Pie 6 USD.</p>
<h2>Order</h2><form id="order-form"><input id="name" placeholder="Your name"><input id="items" placeholder="Items"><button type="submit" id="send">Send order</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; }
input { display: block; margin: 0.5rem 0; }
    app.jsjavascript
    document.getElementById('order-form').addEventListener('submit', function (e) {
  e.preventDefault();
  var name = document.getElementById('customer-name').value;
  alert('Thanks ' + name + ', order received.');
});

  2. Step 2

    Sort the four failures

    Assign each failure to its layer with one line of evidence: hours text (content), menu overlap (layout), dead button (behavior), vanishing labels (mislabeled HTML). No fix yet, only sorting.

  3. Step 3

    Fix one per layer

    Fix the hours text in HTML, the menu wrapping in CSS (wrap instead of nowrap), and the button in JS (the code asks for id customer-name but the input is id name). Reload and confirm all three checks pass.

How to confirm it worked

  • Four failures each assigned to the correct layer with evidence
  • Hours fixed in HTML, wrapping fixed in CSS, id fixed in JS
  • Page reloads with readable hours, wrapped menu and a working confirmation
  • Vanishing-label fault identified as placeholder-instead-of-label

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

The JS asks for customer-name while the HTML input is id name. That mismatch alone kills the button; the console names it.

Stage 2: a direction

white-space nowrap forces the menu onto one line. The fix is one CSS word, not a rewrite.

Stage 3: almost the answer

Placeholder text is not a label. Note it as the HTML fault even though the visible symptom looks like behavior.

Worked solution (open after an honest attempt)

Worked solution. Hours: HTML content fault, change 25:00 to 19:00. Menu: CSS fault, change nowrap to normal so the line wraps. Button: JS fault, getElementById('customer-name') must be getElementById('name'), then the confirmation alert works. Labels: HTML fault, placeholder attributes where label elements belong; note it for the M04 rebuild. Each fix touches one layer, verified by reload: read, narrow, submit.