Skip to content

CSS Debugging Challenge

Your mission: fix a broken and messy CSS file. This is your chance to sharpen your eye for detail, practice using shorthand, and improve your understanding of how CSS works in the real world.

🔎 How many errors can you find!?!?

Instructions

  1. Fix the errors in the provided CSS file -> broken.css
  2. Use shortcuts where appropriate.

  3. Add comments next to the changes you make to explain (you can also do this in your reflection if you wish):

    • What the error was
    • What you changed
    • Why it matters

  4. Complete a debugging reflection that explains what you learned.

Tips!

  • Use CSS Validation tools to help locate errors
  • Keep your code neat and readable (indentation counts!)
  • Think like a detective—look for clues, and don’t rush

Reflection

In a separate file debug-reflection, answer the following:

  1. How did you approach debugging this file? Where did you start? Did you have a method for finding all the errors?

  2. Describe what was wrong, how you fixed it, and why the fix mattered (you can also include this as comments in your corrected CSS file).

  3. Identify 2 places where you used CSS shortcut. What longhand did you replace?

  4. What was one challenge you didn’t expect while debugging?

  5. What advice would you give another student who’s about to debug this CSS?

You can write this in full sentences or use bullet points. Be honest and thoughtful.

Academic Integrity

This assignment is about learning to debug and explain your thinking. Do not use AI tools to auto-correct your CSS. Your work must reflect your own understanding. If your file appears copied, AI-generated, or lacks thoughtful comments and reflection, you will not receive credit.

How to Submit

Upload your corrected CSS and your reflection to Brightspace under Challenges > CSS Debugging Challenge