Code Fixer: Web Dev Puzzle
Repair broken user interfaces by writing text and CSS snippets to match the target design.
How to play
- Read the mission to understand what element needs fixing.
- Type the correct text or CSS into the patch editor.
- Alternatively, tap the snippet chips to insert text quickly.
- Watch the live preview update as you write.
- Match the exact solution to fix the bug and advance.
Controls
- Touch
- Tap the snippet chips or use the on-screen keyboard to type.
- Keyboard
- Type the text or CSS directly into the editor.
- Mouse
- Click the snippet chips to insert text into the editor.
More about this game
In Code Fixer: Web Dev Puzzle, your goal is to repair a broken website by writing the correct text or CSS. You are given a specific mission, like adding a missing button or changing a background color. You can type the text directly or tap the provided snippet chips. A live preview updates as you type. If your text matches the solution, the bug is fixed and you advance to the next level. The game ends when you successfully complete all 5 levels and fully restore the site.
Tips
- Pay close attention to punctuation, like curly braces and semicolons, as they are required for a correct answer.
- If you get stuck, use the Hint button to reveal the first 8 characters of the solution.
- The auto-check feature will automatically verify your text after exactly 420 milliseconds of inactivity, so you do not always need to press the check button.
Questions
How many levels are there?
There are 5 levels in total, each focusing on a different web development or CSS concept to fix the broken user interface elements.
What happens if I make a mistake?
If your text is incorrect, the live preview will not match the target, and the status will remain 'BUG VISIBLE'. You can press the Reset button to clear your input.
Do I need to know how to program?
Basic knowledge of web development helps, but the game provides snippet chips and hints to guide you toward the correct syntax.