F5 — Your First Real (Hand-Built) Project
Track 1: Foundations · Put it all together
You've learned the pieces (F1–F4). Now build something small, end to end, that you fully understand. This is the project that turns knowledge into ability.
🎯 The goal
Not impressive — understood. A small thing you grasp completely beats a big thing the AI built that you can't explain. Pick something modest you can finish:
- A tip calculator
- A simple quiz
- A weather card (using a free public API)
- A habit tracker
🗺️ The developer's loop: plan → build → debug
- Plan. Write, in plain words, what it should do and the steps to get there. Break it into small pieces. (Planning is the work; code is just typing it up.)
- Build. One small piece at a time. Get one thing working before starting the next.
- Debug. It will break — that's normal. Read the error message (it's a clue, not an insult). Use the F3 debugging mindset: reproduce, isolate, hypothesize, test.
📖 The real skill: reading docs & errors
- Error messages tell you what went wrong and often where. Read them slowly; they're on your side.
- Documentation is how you learn any tool. Googling "how do I X in JavaScript" and reading the result is not cheating — it's literally the job.
🛠️ Your mission
Plan, build, and debug a small project using only F1–F4 (hand-built, no AI doing the thinking). When it works, write 2–3 sentences on what broke and how you fixed it — then post it. The struggle is the curriculum.
✅ You're done when…
- You planned it in plain words before coding
- It works, and you can explain every part of it
- You debugged at least one real problem yourself
➡️ Next: F6 — Now You're Ready: AI-Assisted Coding, Done Right. Build It Right, Or Don't Build It At All. 🏛️