Build accessible signup flow inside the persistent Field notes: Accessible signup flow starter project.
Capstone builds
htmlcssjsa11yseocheck
In index.html, add the exact heading, live status, and native button.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
In index.html, add the exact heading, live status, and native button.
Target index.html · Replace the placeholder inside main. Evidence The project has a heading, live status, and keyboard-friendly button. Snippet<h1>Field notes: Accessible signup flow</h1>
<p data-status aria-live="polite">Ready for review.</p>
<button type="button" data-action>Review project</button>
Next up
Switch to styles.css and add the exact grid, spacing, width, padding, and focus rules.
Target styles.css · Replace the starter comment in styles.css. Evidence The project has bounded layout rules and visible keyboard focus. Snippet.capstone-shell, main[data-project="web-capstone-builds-003"] {
display: grid;
gap: 1rem;
max-width: 52rem;
padding: 1.5rem;
}
button:focus-visible {
outline: 3px solid #5eead4;
outline-offset: 3px;
}
Next up
Switch to app.js and add the exact selector, listener, and textContent update, then Run and Check.
Target app.js · Replace the starter comment in app.js. Evidence The script selects existing elements and describes one reviewed click outcome. Snippetconst reviewButton = document.querySelector("[data-action]");
const reviewStatus = document.querySelector("[data-status]");
reviewButton.addEventListener("click", () => {
reviewStatus.textContent = "Accessible signup flow reviewed";
});
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped accessible signup flow build while preserving each passing edit.
Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.
Capstone builds becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
Run
Render a simulated preview from the current lesson snippet.
Check
Save the lesson after the required task snippets are complete.
Hint
Show the lesson hint without changing progress.
Reset
Clear local Web lab scratch state for this browser.