KDBM Lite · 05 / 10

Your Builder Workspace

Understand the project folder, IDE, terminal, browser preview, localhost, Git, and GitHub in beginner language.

Goal

Understand the workspace before downloading the starter.

Do now

Identify the editor, files, terminal, preview, and AI helper roles.

Output

You know where to look when the build, preview, or agent gets stuck.

Stop when

You can point to the part of the workspace that runs, edits, previews, and explains the app.

Cockpit map

Where each part lives

Recognise each part before you download anything. Setup stops feeling like a black screen.

Project folder

Everything lives here

Files panel

Find and open files

Editor

Change one file

Terminal

Run project commands

Browser preview

localhost is private to you

AI helper

Explains and edits with permission

Rule for the whole session: never run a command you cannot explain.

Your Builder Workspace

What this is

This is a tour of the cockpit you will build in. You have not downloaded anything yet. The goal is simply to recognise each part when you see it.

Copy

Project folder → IDE → Files panel → Editor → Terminal → Browser preview → AI helper

That single line is the whole map. Everything below explains one piece of it.

Why it matters

Most beginner panic in a build session is not about code. It is about not knowing which window is which, and being asked to type something into a black screen.

The terminal is not magic and it is not automatically dangerous. It is a command counter. Instead of clicking through menus, you type a short instruction like npm run dev to start the preview, or git status to ask what changed.

Localhost is worth understanding early too. A preview at localhost runs only on your machine. Nobody else can open it. Publishing is a separate step later.

The one safety rule

Do not run a command you do not understand. Ask the coach to explain it first: what it does, whether it is safe, and what you should see afterwards.

What to do

Do this now

Open your coding workspace and physically find each part on your screen. You are not building anything, just pointing.

Check yourself

Tick each one only after you have actually found it:

I can point to my files panel: the list of project files.
I can open or find my terminal: the typed command window.
I know where the browser preview will appear.
I know localhost is private to my machine and not public.
I know where my AI helper sits in this workspace.

You are ready when

You can identify the files panel, the terminal, the AI helper, and where the browser preview will appear, without asking anyone.

The terms, if you want them

Term	What it means	Category
Project folder	The home of the build. The files inside it are the project.	Build
IDE	Integrated Development Environment: the app where you open, edit, search, and run a coding project.	Build
Editor	The area where an open file is changed.	Build
Files panel	The list of files and folders in the project.	Build
Terminal	A typed command window that talks to your computer or project.	Commands
Command	A typed instruction, such as “start the app” or “show the version”.	Commands
Browser preview	Where you see the result the way a user would.	Preview
Localhost	A private preview running on your own machine, not on the public internet.	Preview
Git	A save-history system for code.	Publish
GitHub	A service for storing and sharing Git projects online.	Publish
Repository	A project stored with its Git history. Often shortened to “repo”.	Publish

Three habits to carry into the build:

When you reach Start, open the whole project folder, not a single file.
During build time keep three things visible where your screen allows: the files panel, the AI chat, and the browser preview.
When the AI asks to run a command, ask: What does it do? Is it safe? What should I see afterwards?

Common mistakes

Opening one file instead of the project folder.
Treating terminal output as meaningless noise. It usually names the problem.
Running an install or delete command without understanding it.
Thinking a localhost preview is already public.
Thinking Git and GitHub are the same thing. Git saves history; GitHub stores and shares it.

Next step

Now learn what kind of AI helper can sit inside this workspace in AI Coding Tools, Agents & Models.