Rookie-to-Builder Academy

Learn the tools, then build real support apps, dashboards, agents, and automations safely.

Sources
0%
Your learning journey is ready.

Complete modules, try the simulators, and build confidence one small win at a time.

Idea to Impact Map

The simplest mental model for building with AI coding tools.

1 Idea

Describe the problem and who it helps.

2 Files

Your app is just organized files in a folder.

3 Repo

GitHub stores the project and its history.

4 Agent

Claude Code or Codex edits, tests, and explains.

5 Deploy

Publish so teammates can actually use it.

Tool Chooser

Tell the app what you are trying to do.

Should This Be an Agent?

Use the smallest tool that can do the job safely.

Learning Path

Short lessons in the order a rookie should learn them.

Claude Foundations

A beginner bridge from "I have used chat AI" to "I understand Claude, projects, artifacts, context, tokens, connectors, and when to use each tool."

1 Understand AI

Learn what Claude, ChatGPT, Gemini, LLMs, context windows, tokens, and memory really mean.

2 Use Claude Well

Set up Projects, Artifacts, Connectors, handovers, and prompting habits before opening a code editor.

3 Flow Into Building

Once the Claude mental model is clear, VS Code and Claude Code will feel much less mysterious.

Files & App Anatomy

A plain-English bridge into folders, file types, JSON, CSS, JavaScript, Python, scripts, frontend/backend thinking, and how coding agents work inside a project folder.

1 The Folder Is The Boundary

Before VS Code or Claude Code, learn why one project should live in one clear folder.

2 Files Have Jobs

Learn what .html, .css, .js, .json, .py, .md, .csv, scripts, and README files usually do.

3 Agents Need Access

See how Codex and Claude Code read, create, edit, and test files inside the folder you give them.

Interactive folder map

Which kind of project am I looking at?

Choose a project type and see what the folder usually contains, why those pieces exist, and where the risk points are.

Beginner rule: open the right folder

When you open a folder in VS Code, that folder becomes the main working area. If Claude Code or Codex is helping you, ask it to confirm the folder name before it edits anything.

Beginner rule: ask before running scripts

Scripts can be helpful, but they can also change files, install packages, or touch data. Ask the AI to explain what a script does, what files it touches, and whether it needs credentials.

Beginner rule: keep secrets out of frontend files

If a file can be opened in the browser or published through GitHub Pages, assume other people may inspect it. API keys and passwords belong in approved secret storage or a backend, not in app.js or data.json.

VS Code Basics for Absolute Beginners

A practical guide to folders, workspaces, switching projects, files, terminal, Git, and using Claude Code safely inside VS Code.

A Activity Bar

Switch between Explorer, Search, Source Control, Extensions, and AI tools.

E Explorer

Your project files and folders. This is your home base.

F Editor

The file you are reading or changing opens in the middle.

T Terminal

Run project commands without leaving VS Code.

G Source Control

See what changed before you commit or share anything.

What are you trying to do in VS Code?

Choose a situation and the app will tell you the safest beginner path.

What is the difference between a folder and a workspace?

A folder is the actual place on your computer where files live. A workspace is the folder, or set of folders, currently open in VS Code. For beginners, treat them as the same thing: open one project folder and work there.

How do I know which project VS Code is working on?

Look at the Explorer root name on the left. That top folder is the workspace. Also open the terminal and check its path. If the folder name is wrong, stop before asking AI to edit anything.

Should I use one VS Code window or many?

Use one window per unrelated project. Use multiple windows when comparing separate apps. Add multiple folders to the same workspace only when the folders are part of the same job.

What should I ask Claude Code first?

Start with: "Please explain this project folder in plain English. What files are here, what does each one do, and what should I be careful about before changing anything?"

GitHub From Zero

Think of GitHub as shared project storage with memory, review, teamwork, and simple website publishing.

RepositoryA project folder on GitHub with files and history.
CommitA saved checkpoint with a message.
BranchA safe side copy where changes can be tried.
Pull requestA review request before changes join the main version.
GitHub PagesA way to publish static HTML/CSS/JS sites from a repo.

Workflow Simulator

Click each step to practice the basic GitHub story.

GitHub for Absolute Beginners

A slower, more detailed guide to what GitHub does, how people work inside it, and how simple HTML apps get published.

Words That Matter

The few GitHub terms you will see again and again.

Which GitHub path am I in?

Choose the situation that sounds closest to your work.

Publishing Checklist

Use this before putting a simple web or HTML app on GitHub Pages.

Agents vs Prompts vs Automations

Agentic AI matters when work needs context, tools, decisions, and safe handoffs.

P

Prompt

One instruction you run manually. Best for drafting, explaining, summarizing, or brainstorming.

Question -> Answer
A

Automation

A fixed trigger and predictable steps. Best when the process does not need much judgment.

Trigger -> Fixed steps -> Output
G

Agent

A goal-seeking helper that can inspect context, choose tools, adapt, verify, and ask humans before risky actions.

Goal -> Context -> Decide -> Tools -> Verify

20 Agent Ideas for Global Support

Examples depend on what your company approves. Treat them as safe patterns, not permission.

Azure and Copilot Studio

A practical how-to guide for building support agents that live in Teams, Microsoft 365, SharePoint, Power Platform, or Azure.

Click to flip: Which Microsoft piece does what?

Tap a card to reveal the rookie translation and support use cases.

Build a first support-agent blueprint

Choose a scenario and the app will explain which Microsoft route makes sense, what access it may need, and where a human approval step belongs.

Beginner build path: from idea to deployed agent

Use this as your mental checklist before asking anyone for access or touching real data.

  1. Define the job: Write the one support task the agent should help with and what a good answer looks like.
  2. Choose the home: Teams or Microsoft 365 means Copilot Studio; custom hosted API means Foundry/Azure; simple repeated workflow means Power Automate or agent flows.
  3. Pick knowledge: Start with one approved source such as SharePoint, internal docs, or a curated FAQ. Avoid broad access first.
  4. Add actions carefully: Reading is lower risk. Creating tickets, sending messages, or updating records needs approval gates.
  5. Test with fake examples: Use non-sensitive scenarios and make sure the agent cites sources or explains uncertainty.
  6. Publish small: Start with a small audience, monitor mistakes, and expand only after trust improves.

Claude Code for LinkedIn

A detailed beginner guide based on the Claude Code 101 and 201 training decks, translated into simpler language and support-friendly examples.

1 Goal

Tell Claude what outcome you want, not just what code to write.

2 Context

Open the right folder and give files, screenshots, docs, or ticket details.

3 Plan

Use Plan Mode for bigger changes so Claude proposes before editing.

4 Tools

Let Claude read, edit, test, search, or use approved MCP connections.

5 Verify

Review diffs, run tests, use screenshots, then decide whether to share.

What should I use in Claude Code?

Pick what you are trying to do and get a beginner-friendly recommendation from the 101/201 deck concepts.

Claude Code command and feature reference

Shortcuts from the training decks, rewritten for a rookie builder.

What changed from Claude Code 101 to 201?

Claude Code 101 teaches the foundation: what agents are, how to install and run Claude Code, how to use natural language, Plan Mode, file mentions, IDE integration, CLAUDE.md, MCP, permissions, screenshots, resume, and basic product workflows. Claude Code 201 teaches deeper customization: plugins, skills, slash commands, subagents, hooks, MCP management, parallel Claude, Agent SDK workflows, and CLAUDE.md hierarchy.

What is the simplest first prompt to try?

Try: "Please inspect this folder and explain it to me like I am new to coding. What are the important files, what does this project do, and what is the safest first improvement I could ask you to make?"

What should I avoid?

Avoid opening Claude Code in a giant personal folder, approving edits you do not understand, connecting data sources just because they are available, or asking it to send/share/update records without a human review step.

Claude Setup Checklist

Translated from the setup docs into what each step means, why it matters, and what it enables.

Deploy Apps

How to share what you built: GitHub Pages for static front-end sites, or Google Apps Script for shared-data tools with a lightweight backend.

Which deployment path should I use?

Choose the closest description. The app will recommend a path before you dive into the steps.

Deployment terms you will see

Quick translations for the words that make deployment feel scarier than it is.

GitHub Pages vs Apps Script in one sentence

Use GitHub Pages when your site is front-end-only; use Google Apps Script when the tool needs shared data, Google Sheets sync, or a lightweight backend.

What does "front-end-only" mean?

It means the app can run in the browser from HTML, CSS, JavaScript, and static files. It does not need a private database, server code, hidden API key, or shared write storage.

What does "backend" mean here?

A backend is the part users do not directly see. It can save data, load shared state, write to Sheets, protect secrets, or coordinate multiple users. Apps Script can be a simple backend for small internal Google-based tools.

What should I ask Claude before deploying?

Ask: "Does this app need a backend, shared data, secret keys, customer data, or write actions? If yes, explain the safest deployment path before we publish."

Project Recipes

Practical builds that turn learning into muscle memory.

Glossary

Search rookie-friendly definitions.

Safety and Access

Least access neededOnly connect the folder, repo, or system needed for the task.
Read-only firstAsk tools to explain before asking them to edit, send, or deploy.
Human approvalRequire approval before customer-facing, record-changing, or data-sharing actions.
Approved sourcesUse company-approved MCPs, connectors, and plugins for company data.
Free AI cautionFree tiers change often. Verify current access and never send private data to random external APIs.

Quick Check

A small quiz to make sure the basics stuck.

Sources Used

Claude setup content comes from the two PDFs in this folder. Claude Foundations content comes from index Earlier Claude.html in this folder, with quiz pieces removed. Files & App Anatomy is original beginner teaching added to bridge Claude concepts into VS Code and coding agents. Claude Code for LinkedIn content comes from the two training decks in Downloads plus official docs. Product explanations should be rechecked when access, pricing, or company policy matters.