“AI App Development from Zero Knowledge – 1000 Hours” #4:

"Diving into the Depths of Code and Discovering the Truth of 'Parent-Child Relationships'"

Summary (Rough Outline)

"Why? I defined it, but still an error?" "I followed AI's instructions, so why doesn’t it work…?"
This was a week full of confusion and frustration. Yet through trial and error, I slowly began to understand the mechanics of CSS and React. The relationship between parent and child elements in margin-top, the mystery of misaligned placeholders, and even the limits of AI became apparent. In the end, I found myself oddly moved by a purple hex code.
Sometimes, you don't learn tech through theory—you feel it.

"Another error? And now it says 'setCoins is not defined'? No, I did define it!"

This week started with frustration and continued with chaos, as I was tossed around by React and CSS. My motivation was strong—but the code was not cooperative.

---

Learning About Life from margin-top

First, I struggled with adjusting the avatar’s position.

When I applied margin-top to .avatar-container, both the avatar and its speech bubble moved together. But when I set it on .avatar-image, only the avatar moved.

That’s when it finally clicked—"Ah, this is what they mean by a 'parent-child relationship.'"

In the world of CSS, the relationship between parent and child elements changes everything. A parent’s styles affect its children, even if each child has individual rules. Experiencing that firsthand was a major step in my growth.

---

The Placeholder Trap

Next came the placeholder inside the comment input field.

Once I changed the text per task, the left alignment became inconsistent... even though the right side stayed neatly aligned. Why only the left?

Reviewing my CSS, I realized it was small style settings like box-sizing and padding that influenced the appearance.

Until then, I thought these properties were just vague things that seemed to work. But now I understood—they had real, specific meaning.

---

Even AI Has Its Limits

ChatGPT told me, "This code will work," so I pasted it in.
But somehow, the task name and the input field ended up switching places.

From that mistake, I learned:
AI doesn’t give you the shortest path—just a reference point.

I needed to check the actual display with my own eyes and ask myself, "Is this how it’s supposed to look?"
AI doesn’t replace that human judgement.

---

Taking a Breather in the World of Color

Once I got a bit more confident, I wanted to have fun with background and input field colors.

When I saw that #880088 gave me a "poisonous purple," I couldn’t help but smile.
It scratched my inner middle schooler’s itch for something dramatic.

It amazed me how just six characters could change the whole feel of a screen.

---

Conclusion: Each Confusion Deepens Your Understanding

Problems keep coming. But with every one, I feel like I understand a little more.

This app is meant to help users build habits. But right now, I’m the one building habits:
the habit of writing code, the habit of researching and learning, the habit of trying and failing.

With every error, I become more of a developer.
Believing in that, I’ll keep taking another step forward.