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
    • Keep a debugging log or notes as you go. Record your process; what issues you spotted first, what strategies you tried, where you got stuck, and how you solved each problem. This can be written like a mini–debugging diary.

  4. Complete a recording that explains the process you used. I suggest downloading a fresh copy of the messy CSS and walk through exactly what you did!

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

Free Recording Software

Check your audio first! Always make a test recording to ensure your sound is working properly.

Reflection

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

You may also choose to explain the following in your video recording

  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