The Problem 😕​

Backend Dev: "I want to merge my frontend branch into main, but when I try git checkout main, Git says 'fatal: main is already checked out at ../EcommerceWebsite3-backend'. I can't checkout main because it's being used in my backend worktree!"

Frontend Mentor: "Ah! This is a perfect situation to use one of Git's hidden superpowers - pushing to a local branch without checking it out!"

The Confusion 😕​

Backend Dev: "I'm looking at my Git history and I see that frontend branch has 13 commits that aren't on main, and main has 1 commit that frontend doesn't have. My mentor says I need to rebase. But... why? Why can't I just merge?"

Frontend Mentor: "Excellent question! This is where understanding the LOGIC of rebase becomes crucial. Let me show you exactly why rebase is necessary in this situation."

The Journey Begins 🚀​

Backend Dev: "I just completed my first successful rebase and merge! Let me show you what I learned along the way."

Frontend Mentor: "This is perfect! Let's walk through exactly what happened so others can learn from your success!"

The Confusion 😕​

Backend Dev: "I have two worktrees - one for frontend and one for backend. When I commit in the backend worktree, does it show up in the original worktree? And when I merge backend into main, what happens to the backend branch?"

Frontend Mentor: "Great question! This is where Git worktrees become really magical. Let me show you exactly what's happening in your setup."

The Confusion 😕​

Backend Dev: "I don't understand why we have Phase 2 in rebasing. I thought it would be as simple as running a merge command. But in rebase, I think we do merge command too? Why the extra step?"

Frontend Mentor: "Ah! This is one of the most common confusions about Git rebase. Let me show you what's really happening under the hood."

I'm a backend developer learning React, and I'm confused. Why do I need useState when I can just create my own setEmail function like we do in Java? 🤔 Just set the variable and done! My frontend mentor showed me what happens when you try this—and why React's useState is actually solving a critical problem I didn't even know existed. This conversation revealed the beautiful machinery working behind React's scenes.

I'm a backend developer learning frontend, and I just encountered something confusing. I use await login({ email, password }) and my code waits for the response before continuing—isn't that synchronous? 🤔 But the method is marked async, so it's asynchronous? My frontend mentor explained the beautiful double nature of async/await: it makes code look synchronous inside the function but stay asynchronous to the outside world. This conversation finally made async/await click for me.

I'm learning frontend development, and something weird just happened. I added only w-full to my button, and the text "Click me" became centered horizontally! 🤔 I didn't add any text-centering classes. My frontend mentor revealed something I never knew: browsers have default styles that help us without us even knowing. This conversation opened my eyes to the invisible CSS working behind the scenes.

I removed flex from my button container, expecting them to stack vertically, but they're still sitting side-by-side! 🤨 I thought flex was what made them horizontal. My frontend mentor corrected my misunderstanding: buttons are inline-block by default, which means they naturally sit beside each other. This conversation taught me the crucial difference between "happens to be side-by-side" and "controlled side-by-side layout."

I'm a backend developer learning frontend, and I just noticed something weird in Firefox Inspector. I removed p-8 from my div, and the height changed from 124px to 60px—but the width stayed at 384px! 🤔 My frontend mentor explained the CSS Box Model and why w-96 behaves differently from h-auto. This conversation finally made the box model click for me.