Gallery
Discover apps people built on Collabby by chatting. Run them, then remix to make them yours.
Make Your Own Function
🧰 What if the same code repeats 4 times? Just bundle it up and give it a name! Changing ⭐ to 🌙 takes 4 clicks without functions, but only 1 click with a function — compare the clicks yourself! 🎛️ Passing arguments lets the same function do something different each time, and ↩️ returning values teaches you return. See what happens when you omit return — it even runs live to show undefined on screen! This app was built with code too · Remix it and create your own functions!
When You Type
⌨️ You learned button clicks, now let's type! Type in the box and watch the screen react instantly — counting letters, changing colors, or growing bigger. Try replacing input with change to see how it waits until you finish typing! In 🔍 What to Type?, read the code to solve the puzzle, and in ✅ Validation, set rules like "4+ letters to pass" and test them with the 🧪 button like a real coder. Built with code · Remix to create your own input box!
Line Up the Boxes
📦 One value fits in one box, but what about many? Line them up and give each an index! Try push, pop, unshift, and shift—see how adding to the front shifts all numbers, while adding to the back keeps them in place. You'll instantly see why counting starts at 0! 🔍 In "Step-by-Step", watch a loop visit each box to calculate totals, find max values, count items, locate positions, or double numbers. 🎯 "Target Match" has 6 puzzle levels where you create target lines in as few moves as possible. Built with code—remix it to make your own box lineup!
When You Press a Button
👆 Your page comes alive at last! Pick "When (click) + What (background)" to build real working code — tap the button below and watch the box change live! Switch to double-click, and a single tap won't budge it! 🔢 With Memory Buttons, try adding 1, doubling, toggling 🌞🌙, growing bigger, or showing 🎉 on click 3. You'll see firsthand why variables are so useful! 🎮 In Remote Control, assign different tasks to 3 buttons. This app was made with code too — ready to remix and create your own buttons?
Conditional Crossroads
🔀 The robot is at a fork in the road! If the door is 🔴, the star goes left; if 🔵, right. Make one rule like "If door is 🔴 go ←, else go →" and the robot chooses the right path by itself! Try it without conditions to see why they matter when it only succeeds half the time. 🗺️ Solve 5 condition puzzles with just one rule despite different doors, expanding into 3-way forks, numbered doors, and condition order. 🎟️ Create 5 rules for amusement park height limits, weather outfits, and contest ranks. Discover the real fun when a 120cm guest makes all the difference between > and ≥! Built with code · Remix it to create your own crossroads!
Bug Hunter
🐛 The code is broken! 🎯 Expected values and ❌ actual values don't match, right? Tap the line where the bug is hiding. Choose how to fix it, run the updated code, and check if you get the ⭕ correct result! If you pick the wrong fix, you'll see what happens so you can learn why. Includes 7 common real-world bugs: off-by-one errors, out-of-bounds arrays, missing variable assignments, confusing = and ===, and more. Features 7 main challenges + Endless Hunt + 💡 Bug Encyclopedia! Built with code too — remix it to hide your own bugs!
Daily Code Quiz
💻 Read the code and guess "What will this output?" Every day, 3 new challenges unlock for everyone worldwide! Master variable updates, string concatenation, for-loop counts, 0-indexed arrays, and return values — key concepts for beginners. Don't worry if you make mistakes: 💡 Hint Notes explain the rules, and the 🧪 Practice tab lets you solve unlimited problems by topic. Share your ⭕❌ result card with friends! 🔥 How long can you keep your daily streak going?
CSS Styling Lab
🎨 If HTML is the skeleton, CSS is the clothes! Click buttons for color, background, font size, weight, and alignment to see CSS code generate line by line and change text instantly. Press undo to reset both code and screen—learn hands-on that code creates the screen! 📦 In the Box Model tab, move sliders for padding, border, and margin to see how every element is a box with three layers. 🎯 Finish with 5 challenge levels—match properties to target (it tells you how many differ). This app was made with code too · Remix it to add more colors!
HTML Tag Playground
🏷️ How does code change what's on screen? Pick a word and press tag buttons — <b> makes it bold and <mark> highlights it! With code above and the preview below, see instantly what changes. 🧱 Next, build a page: stack titles, paragraphs, lists, dividers, and buttons to create a real webpage. 🔍 Finish with 5 code-reading quizzes — guess the screen just by reading the code. This app was built with code too. Want to remix and add more tags?
Variable Boxes & Function Machines
📦 Put numbers in labeled boxes — that's a 'variable'! Copy values between a and b, then swap them. ⚙️ Next up: 'Function Machines'! Put a number in, and it changes by a rule. Build tables to guess the secret rules of 5 machines. 🧩 Solve 5 puzzles by connecting boxes and machines to reach target values. Remix this app to create your own machines!
Robot Command Puzzle
🤖 Give commands to the robot! Arrange ⬆️ Move Forward and ↩️↪️ Turn blocks in order, then press ▶ Run to see it move — learn sequencing hands-on. If you bump into a wall, find and fix the wrong step (debugging!). 🔁 Put actions inside a repeat box to navigate long paths with just one block — discover the power of loops. Enjoy Free Play + 8 puzzles; count your blocks and try finding even shorter paths! The puzzle boards are built with code too — remix them to create your own!