Build with AI: From Zero to Your First App · Module 3: Understanding websites and files · Lab
Three Console Errors, Three Addresses
30 min hands-on · Core
Browser only. The three error cases below are provided with their lines; you diagnose each to file, line and one-line fix.
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
- Convert three console errors into file, line and plain-word message
- Separate the one warning from the two blocking errors
- Write the four-line error report for the hardest case
Step 1
Diagnose the three cases
Case 1: 'Cannot read properties of null (reading value) at app.js:18' with document.getElementById('phone').value and an input id phone-number. Case 2: yellow 'UnhandledPromiseRejection is deprecated' style warning with a working page. Case 3: 'Failed to load resource: styles.css 404' with a link href style.css while the file is named styles-main.css.
error-cases.mdmarkdown ERROR CASES (synthetic practice material) --- Case 1: red error, app.js:18, getElementById('phone').value, input id is phone-number. Case 2: yellow warning about a deprecated pattern; page works. Case 3: 404 for styles.css; folder holds styles-main.css; link tag points at styles.css.Step 2
Rank and report
Rank the cases by fix-first order (blocking errors before warnings). For the hardest case write the four-line report: did, expected, exact message with file and line, last change.
Step 3
State the fixes
One line per fix: case 1 id string, case 3 href or rename, case 2 deferred until the page works with a note of what it says.
How to confirm it worked
- All three cases carry file, line and plain-word message
- Blocking errors ranked before the warning with the reason stated
- Four-line report complete for one case including the last change
- Three one-line fixes, each touching exactly one file
Workspace
0/2 checks passing · Coverage only, not a quality score.
Draft kept in this browser.
Hints, in three stages
Stage 1: a nudge
Case 1 is the lesson-12 rename bug: code asks for an id the HTML no longer has. One string fixes it.
Stage 2: a direction
Case 3 is a name mismatch between the link tag and the disk. Either rename the file or the href, never both.
Stage 3: almost the answer
Yellow means continue. Fix the two reds, confirm the page works, then read the warning with a calm mind.
Worked solution (open after an honest attempt)
Worked solution. Case 1: app.js line 18, code asks for id phone, HTML holds phone-number; fix the string to phone-number. Case 3: HTML link asks for styles.css, disk holds styles-main.css; point the href at the real file (or rename the file to styles.css). Case 2: warning, page runs, fix last. Report example for case 1: did (submitted the order form), expected (confirmation echo), message (Cannot read properties of null at app.js:18), last change (renamed the input id during file cleanup). Three addresses, three one-line fixes, zero rewrites.