Code Fixer: Web Dev Puzzle
Repair broken website interfaces by typing or tapping code snippets to match the target design.
How to play
- Read the mission text to understand what part of the interface is broken.
- Type code into the editor or tap the snippet chips to insert text.
- Watch the live preview panel update immediately as you alter the code.
- Wait 420 milliseconds for the auto-check, or press the Check button to verify.
- Complete all 5 levels to fully restore the website design.
Controls
- Touch
- Tap snippet chips to insert code and use on-screen buttons.
- Keyboard
- Type code directly into the patch editor.
- Mouse
- Click snippet chips to insert code and use on-screen buttons.
More about this game
Your goal is to fix 5 broken website interfaces using real code. Read the mission text, then type the correct syntax into the patch editor or tap the provided snippet chips. The live preview updates immediately as you build your code. The game automatically checks your solution after a 420-millisecond delay. If your code matches the target exactly, the UI is repaired and you advance to the next bug.
Tips
- If you get stuck on a tricky bug, use the Hint button to instantly reveal the first 8 characters of the correct code solution.
- Pay close attention to syntax like semicolons, colons, and brackets. The auto-check system requires an exact string match to accept your patch.
- You can freely mix typing on your keyboard and tapping the provided chips. The editor automatically inserts spaces between chips unless they are closing brackets.
Questions
How many levels are there?
There are exactly 5 levels to complete in this puzzle. They cover basic code elements and CSS properties like background colors, an 18px border radius, and flexbox layouts.
Do I have to click check every time?
No, the game features an auto-check system. If your code is correct, it will automatically verify it after a 420-millisecond delay and advance to the next bug.
What happens if I make a mistake?
The live preview will show your broken code, and clicking Check will display a 'Still broken' message. You can press Reset to clear the editor and try again.