Basic Debug Training

What you'll do

You'll get a single folder with a small quiz page that contains 5 deliberate bugs. Every bug is visible the moment you open the page — your job is to find each one with the browser inspector and fix it using Cursor's Debug mode.

• Wrong stylesheet path (page is unstyled)
• Wrong script path (quiz never loads)
• Mis-arranged DIVs (button drops out of the navigation)
• CSS class typo (one button looks unstyled)
• Inverted boolean (correct answers are reported wrong)

Step 1 — Get the folder

You don't need to clone the whole repository. Use git's sparse-checkout to grab just the static/debug-training-standalone/ folder from github.com/Bliblofy/YouthTrivia. These commands work the same in macOS/Linux Terminal, Git Bash, Windows PowerShell, and cmd — only the prompt looks different.

git clone --depth 1 --filter=blob:none --sparse https://github.com/Bliblofy/YouthTrivia.git
cd YouthTrivia
git sparse-checkout set static/debug-training-standalone
cd static/debug-training-standalone

Prefer a single download? Browse the folder directly on GitHub: Bliblofy/YouthTrivia/static/debug-training-standalone.

Step 2 — Open the page

Tier A — Live online (zero install)

Try the same buggy page and the walk-through solutions on this site — nothing to install. Try the bugs yourself before opening the solutions.

The live buggy page is identical to index.html in the folder you clone — same bugs, same files to fix locally.

Tier B — Local, no extra tools

Open index.html directly in your browser (double-click the file, or use a terminal). If you already finished Step 1, your terminal is probably inside this folder — then you can skip the cd lines below.

macOS / Linux / Git Bash

cd static/debug-training-standalone   # or wherever you put the folder
open index.html                       # macOS
xdg-open index.html                   # many Linux desktops

Windows Command Prompt

cd static\debug-training-standalone
start index.html

Windows PowerShell

cd static\debug-training-standalone
Invoke-Item .\index.html

Or open the folder in Cursor and use the built-in browser preview / a Live Preview extension to open index.html.

Tier C — Local web server (optional)

For a closer match to a real website (especially the Network tab), serve the folder with a tiny HTTP server. Use whatever you already have — you do not need Python, Node, or PHP if Tier A or B works for you.

Python 3 — macOS / Linux / Git Bash

cd static/debug-training-standalone
python3 -m http.server 8000

Python — Windows (if the py launcher is installed)

cd static\debug-training-standalone
py -m http.server 8000

Node.js (any shell, if Node is installed)

cd static/debug-training-standalone
npx --yes serve .

PHP (any shell, if PHP is installed)

cd static/debug-training-standalone
php -S localhost:8000

Then open http://localhost:8000 in your browser (some tools print a slightly different URL — use what they show).

Step 3 — Debug

1. Open the folder in Cursor.
2. Open the browser's DevTools (right-click → Inspect, or press F12).
3. Use the Elements, Console, Network, and Styles tabs to spot what's wrong.
4. Switch Cursor into Debug mode, describe the symptom, and let it help you locate and fix each bug.
5. Reload after each fix to confirm.

The standalone page has a Solutions button in its header (with a "try first" overlay). You can also open the same walk-through at /debug-training-standalone/solutions/index.html — but only when you really need a hint.