Fix the Broken Web Page
What you are doing: A web page is broken. Your job is to find the mistake and fix it. The activity will give you clues. You can try again if you miss one.
How to do the assignment
Example: “The heading should be blue, but it is black.”
Click the tabs and look for a spelling mistake, wrong name, missing file, or other problem.
The clues help you. You are supposed to use them.
Tell the simulator where the problem is and what is wrong.
Tell your teacher what you noticed. Example: “HTML says title but CSS says titel, so they do not match.”
If it is right, click SHOW THE FIX and TEST THE FIX.
When you are finished, click DOWNLOAD MY CANVAS ASSIGNMENT. Upload that file to your teacher's Canvas assignment.
What do I turn in?
One file. The simulator makes it for you. It includes your name, class period, score, completed missions, and the answers/explanations you wrote.
You do NOT need to take screenshots.
Try Mission 1 like this
Problem: The heading is supposed to be blue, but it is black.
HTML clue: <h1 class="title">
CSS clue: .titel { color: blue; }
Compare the two names carefully. title and titel are not the same. You would choose CSS as the problem area and choose CSS selector mismatch as the answer. Then you could write: “The class is title, but the CSS is spelled titel, so the CSS rule does not connect to the heading.”
That is exactly what you will do in the rest of the activity.
What the four tabs mean
| Tab | What you are looking at | Simple question to ask yourself |
|---|---|---|
| PAGE | What the visitor sees in the browser. | What looks wrong? |
| HTML | The structure and content of the web page. | Is something misspelled, missing, or pointing to the wrong file? |
| CSS | The code that controls colors, spacing, size, borders, and layout. | Does the CSS actually match the HTML? Is a CSS word or value wrong? |
| NETWORK | Whether the browser was able to get files such as the page, CSS, images, or scripts. | Did the browser get the file, or did the request fail? |
On a phone, swipe sideways to see the complete table.
Web Page Debugging Simulator
Before you start
Type your name and class period. This information will be put on the file you turn in.
Do this for each mission
Read → Look → Open clues → Choose → Write one sentence → Check → Fix → Test. When class is over, use the green Canvas button to download your work.
Clues
Open the clues. Read what each clue tells you before choosing an answer.
Save your assignment for Canvas
Finished for today?
Click the button below. Your browser will download a small HTML assignment report. That is the file you upload to Canvas.
How to turn it in
- Click DOWNLOAD MY CANVAS ASSIGNMENT.
- Open your class in Canvas.
- Open this assignment.
- Choose the option to upload a file.
- Select the file you just downloaded. Its name starts with web-debugging-.
- Submit the assignment in Canvas.
Teacher note: Set the Canvas assignment submission type to File Upload and allow .html files. The downloaded report opens in any browser and does not need internet access.
One successful file does not mean the whole website is working
Here is an important idea in normal language: a website is made of several pieces. The browser might successfully download the CSS file, but the CSS code inside that file can still contain a mistake. A website name might also work correctly while the web server has a different problem. Use each clue to cross one possibility off your list.
| Evidence | What this tells you | What it does NOT tell you | What to check next |
|---|---|---|---|
styles.css → 200 OK | The requested stylesheet was successfully retrieved. | That selectors match, declarations are valid, or the visual result is correct. | Which rules actually match the element and win the cascade? |
image.png → 404 | The server could not find that requested resource. | That the entire server or Internet connection is down. | Does the HTML path match the deployed filename and directory? |
| Correct DNS answer | The tested name resolved to the expected address. | That TCP/HTTPS or the application works. | Can the client establish the required connection to that address? |
| Gateway reachable | The client can communicate with that local checkpoint. | That remote routing, DNS, or the web service works. | What is the next unresolved dependency? |
500 Internal Server Error | The server encountered an unexpected condition while handling the request. | That CSS or HTML is the cause. | What do server-side logs/configuration show? |
Swipe horizontally to see the complete evidence table.
Turn the simulator into a 45–60 minute class lab
Round 1 — Web structure
Assign Foundation missions. Students must identify the exact HTML or CSS evidence before making a change. Do not award full credit for “I fixed it” without a reason.
Round 2 — Browser evidence
Move to Applied missions. Require students to distinguish a code problem from a resource-delivery problem using the simulated Network panel.
Round 3 — Networking crossover
Assign Advanced missions involving DNS, HTTP, server errors, and reachability. Ask students to preserve every successful checkpoint.
Exit ticket
Have each student write one sentence explaining why 200 OK does not mean “the website is correct” and why 404 does not mean “the Internet is down.”
A browser does two jobs: it builds the page and asks for the files
When a student types a URL, the browser may need name resolution, a network path, a transport connection, an HTTP exchange, successful retrieval of HTML/CSS/images/scripts, and then correct parsing/rendering. A failure at one layer can create a similar surface symptom—“the page looks wrong”—but the evidence is different. Modern browser developer tools expose the rendered DOM and applied CSS, while their Network panels expose resource requests. That is why web debugging is an effective bridge between web design and networking. citeturn0search11turn0search14turn0search4
HTTP status codes describe the outcome of specific requests: 2xx responses indicate success, 4xx responses are client-error class responses such as 404 Not Found, and 5xx responses indicate server-error class conditions. A 404 specifically means the requested resource was not found; a 500 is a generic server-side failure. citeturn0search1turn0search0turn0search2