Anatomy of a Project

What Are You Actually Building?

You've planned your project, chosen your tools, and designed your data. Now it's time to build. But before you start creating pages and bringing your project to life, let's make sure you understand what a finished project actually looks like — structurally.

Every project you could build in this course falls into one of a few categories:

• Web apps (like a habit tracker or quiz app): Interactive tools that users click, type into, and get responses from. They have interfaces, logic, and data.
• Websites (like a portfolio or community resource): Primarily display content. Users read, browse, and navigate but don't input much data.
• Dashboards (like a spending tracker or data visualizer): Display data in organized, visual formats. Charts, tables, summaries. Data goes in, insights come out.
• Hybrid tools (combinations): A portfolio with an interactive recommendation feature. A dashboard that also lets users input data. Most real projects are hybrids.

Knowing which category your project falls into helps you understand what components you need to build.

Frontend vs. Backend (Simplified)

You'll hear these terms a lot in building. Here's what they mean in plain language:

Frontend: Everything the user sees and interacts with. The buttons, the text, the colors, the layout, the charts. If you can see it on screen, it's frontend. HTML provides the structure, CSS provides the styling, and JavaScript provides the interactivity.

Backend: Everything that happens behind the scenes. Storing data, processing information, managing user accounts. The user doesn't see the backend directly — they see its effects (like data being saved or a chart updating).

For your projects in this course, the frontend is where you'll spend most of your time. Your backend will be simple — a Google Sheet, localStorage in the browser, or a simple JSON file — AI will set this up for you when you describe what data your project needs to save. You don't need a complex backend for a first project.

When you ask AI to build something, specifying "this is frontend" or "this is about data storage" helps it give you the right kind of code and guidance.

Why Modular Structure Matters

Here's a mistake new builders make: they try to build everything at once, in one giant file or one massive page. Then when something breaks, they can't figure out where the problem is because everything is tangled together.

Modular structure means breaking your project into separate, independent pieces that each do one thing. Think of it like LEGO: each brick is simple on its own, but together they build something complex.

What modular looks like in practice:

• A habit tracker has separate components: the habit list, the check-in form, the streak display, the settings page
• A portfolio has separate sections: the hero/intro, the project gallery, the about section, the contact form
• A dashboard has separate elements: the data input area, each chart/visualization, the summary statistics

Why this matters: when the streak display breaks, you know to look at the streak code, not the entire project. When you want to change the gallery layout, you edit the gallery section without worrying about breaking the contact form.

When you ask AI to build components, ask for one component at a time. "Build the habit check-in form" is better than "build the entire habit tracker." You'll get better code and you'll understand what each piece does.

Mapping Your Project Into Components

Before building, map your project into components. This is your construction plan. Here's a framework:

1. List every page or screen your project has.
2. For each page, list the sections or components on it.
3. For each component, note: what it displays, what user input it takes (if any), and what data it needs.
4. Identify the order to build: start with the most essential component, then add others one at a time.