AI has changed everything. Building software used to require years of learning syntax, frameworks, and infrastructure. Today, AI handles most of the implementation—you describe what you want, and it writes the code. This is one of the most significant shifts in how software gets built.

But here's what hasn't changed: you still need to understand the ecosystem. Not to write code yourself, but to give AI clear instructions, understand what it generates, and troubleshoot when things go wrong.

Think of it like this: AI is an incredibly skilled co-pilot, but you still need to know the basics of flying—what the instruments mean, where you're headed, and what to do if something looks off. This guide teaches you those fundamentals.

By the end, you'll understand the core concepts that come up constantly when building with AI—terminal commands, version control, how code is organized, what databases do, and how apps get from your computer to the internet. This is the foundation that makes everything else click.

The Terminal: Your Command Center

Every AI coding tool—Cursor, Claude Code, VS Code—eventually asks you to run commands in a terminal. It looks intimidating at first, but it's simply a way to talk to your computer using text instead of clicking.

What is a terminal?

A terminal (also called command line, console, or shell) is a text-based interface to your computer. Instead of clicking icons and menus, you type commands and press Enter. It's how developers have controlled computers since before graphical interfaces existed—and it's still the most powerful way to do many tasks.

Why it matters for AI coding: When AI generates code, it often tells you to run commands like npm install or git push. If you don't know what these mean or where to type them, you're stuck. The terminal is where these commands live.

How to open the terminal

The commands you'll actually use

You only need about five commands to get started. AI handles the complex stuff.

See them in action:

A simple mental model

Think of your computer's files like a building with floors and rooms:

• Folders are rooms
• Files are things inside rooms
• The terminal is you walking through the building
• cd is walking into a room
• ls is looking around to see what's in the room
• pwd is asking "what room am I in?"

Reading error messages

Errors in the terminal look scary but follow a pattern. Here's what to look for:

1. The error type — Usually in caps or at the start (e.g., Error:, ENOENT, ModuleNotFoundError)
2. The message — What went wrong in plain-ish English
3. The location — Which file and line number caused the problem

Example error:

Error: Cannot find module 'react'
    at /Users/you/my-project/src/App.js:1:1

This tells you: React isn't installed, and the problem is in App.js, line 1. The fix is usually npm install react.

Your Code Editor (IDE)

Before you start writing code, you need a place to write it. That's where an IDE comes in—an Integrated Development Environment. Think of it as your coding workspace: a text editor, file browser, and terminal all in one window.

What is an IDE?

An IDE combines everything you need to write code:

• File explorer — Browse and organize your project files (left sidebar)
• Code editor — Where you write and edit code (center)
• Integrated terminal — Run commands without leaving the editor (bottom)
• Extensions — Add features like AI assistance, themes, and language support
• Command palette — Quick access to any feature (Cmd/Ctrl + Shift + P)

You could write code in Notepad and run commands in a separate terminal, but an IDE makes everything faster and more connected.

The two main options for AI coding

VS Code

Visual Studio Code (VS Code) is the most popular code editor in the world. It's free, open-source, and runs on Mac, Windows, and Linux. With the right extensions, it can do almost anything.

For AI coding, you'd add:

• GitHub Copilot — AI code suggestions ($10/month, free for students)
• Claude extension — Access to Claude AI in your editor
• Various AI extensions — Many options available in the marketplace

Cursor

Cursor is a fork of VS Code built specifically for AI-first development. It looks and works like VS Code (same shortcuts, same extensions), but AI is deeply integrated:

• Built-in AI chat — Ask questions about your code, get explanations
• Composer — Describe changes and AI implements them across files
• Cmd+K — Highlight code and ask AI to modify it
• Codebase awareness — AI understands your entire project

Online IDE (no installation needed)

Can't install software? Working on a Chromebook? Just want to try coding without commitment? Replit lets you code from any browser.

Replit

A browser-based IDE with AI assistance, collaborative editing, and one-click deployment. Perfect for beginners who want to understand what they're building.

What makes it great for beginners:

• Zero setup — Start coding instantly in any browser
• AI Agent — Built-in AI that generates and explains code
• Built-in hosting — Your projects go live with one click
• Multiplayer — Code together with others in real-time
• Templates — Huge library of starter projects to learn from

Replit is great for getting started quickly and learning the fundamentals. As your projects grow more complex, you'll likely want to switch to a desktop IDE like Cursor for better performance and more features.

Quick setup guide

Git: Your Safety Net

Git is version control—it saves snapshots of your code so you can go back if something breaks. Think of it like Google Docs' version history, but for code.

What is Git?

Git is software that tracks changes to your files over time. Every time you save a "snapshot" (called a commit), Git remembers exactly what every file looked like at that moment. You can go back to any previous snapshot whenever you want.

GitHub is a website that stores your Git projects online. It's like Google Drive for code—your projects are backed up, and you can access them from anywhere.

Why Git matters even more with AI

AI can make sweeping changes to your codebase in seconds. Sometimes those changes break things. Without Git, you'd have to manually undo everything. With Git, you just roll back to a working version.

Git is your undo button for AI mistakes.

The five commands you need

The basic workflow

1. Make changes to your code (or AI makes them)
2. git add .          → Stage the changes
3. git commit -m "Added login page"   → Save a snapshot
4. git push           → Upload to GitHub

See it visually:

That's it. This covers 90% of what you'll do with Git.

GitHub: Where your code lives online

GitHub is a website that stores your Git repositories (projects) online. It's important because:

• Backup — Your code isn't just on your laptop
• Deployment — Services like Vercel and Netlify connect to GitHub to publish your app
• Collaboration — Others can see and contribute to your code

When things go wrong

Made a mess and want to start over from your last commit?

git checkout .

This throws away all changes since your last save. It's your "undo everything" button.

Understanding Code Without Writing It

Here's the key insight: AI writes the code, but you need to read it well enough to know if something's wrong.

You're the director. AI is the screenwriter. You need to understand the script well enough to give feedback and catch problems—not write every word yourself.

Core concepts to recognize

You don't need to master these—just recognize them when you see them:

Variables — Named containers that hold values

const userName = "Sarah"
const itemCount = 5

Functions — Reusable blocks of code that do something

function calculateTotal(price, quantity) {
  return price * quantity
}

Conditionals — Code that makes decisions

if (userLoggedIn) {
  showDashboard()
} else {
  showLoginPage()
}

Loops — Code that repeats

for (let i = 0; i < 10; i++) {
  console.log(i)
}

File types and what they mean

The skill that matters most: Reading errors

When AI-generated code doesn't work, the error message tells you why. Learning to parse errors is the single most valuable skill for AI-assisted development.

Pattern to look for:

1. What type of error? (syntax, reference, type, network)
2. What file and line number?
3. What's the actual message saying?

Then tell AI: "I'm getting [error] in [file] on line [number]. Here's the code around that line: [paste code]. What's wrong?"

Tech Stacks Explained

A tech stack is the combination of technologies used to build an app. Different stacks are better for different projects. Knowing the basics helps you tell AI which tools to use.

The Web Stack (JavaScript/TypeScript)

This is the most versatile stack—it can build almost anything on the web.

Best for: Web apps, SaaS products, marketing sites, dashboards, most startup ideas.

The Data/AI Stack (Python)

Python is the language of data science, machine learning, and quick utility tools.

Best for: Data analysis tools, AI-powered utilities, automations, internal tools, prototypes.

The Mobile Stack

Best for: Mobile apps that need to be on app stores.

Which stack should you choose?

Frontend vs Backend

Every app has two parts: what users see (frontend) and what runs on servers (backend). Understanding this split helps you communicate with AI about where code should live.

Frontend: The user interface

Everything you can see and interact with:

• Buttons, forms, menus
• Layouts and styling
• Animations and transitions
• What happens when you click something

Technologies: React, Next.js pages, HTML, CSS, Tailwind

Backend: The behind-the-scenes

Everything that happens on servers:

• Storing and retrieving data from databases
• User authentication (login/logout)
• Processing payments
• Sending emails
• Talking to external services (APIs)

Technologies: Next.js API routes, Supabase, server functions

How they communicate: APIs

The frontend and backend talk to each other through APIs (Application Programming Interfaces). Think of it like a restaurant:

• Frontend = The dining room (what customers see)
• Backend = The kitchen (where food is made)
• API = The waiter (takes orders to kitchen, brings food back)

When you click "Submit" on a form, the frontend sends a request to the backend API. The backend processes it (maybe saves to database), then sends a response back.

Why this matters for AI coding

AI will often ask or suggest things like:

• "Should this be a client component or server component?"
• "Do you want this logic on the frontend or in an API route?"
• "This needs to run on the server for security"

Now you understand what it's asking. Generally:

• Show something to users → Frontend
• Store data, authenticate, process sensitive info → Backend

Databases 101

A database is where your app stores information permanently. Without it, everything disappears when users close the browser.

What is a database?

Think of a database as a collection of spreadsheets that your app can read and write to automatically:

• Tables = Individual spreadsheets
• Rows = Individual records (like one user, one product, one order)
• Columns = Properties of each record (name, email, created_at)
• Relationships = Links between tables (this order belongs to this user)

Two main types

For most projects, use Supabase (PostgreSQL). It handles 95% of use cases and has excellent documentation.

Key vocabulary

When AI talks about databases

Common things you'll hear:

• "Let's create a migration for the new table" → Saving a structural change
• "Add a foreign key relationship" → Linking two tables
• "Query the users table" → Getting data out
• "Set up Row Level Security (RLS)" → Making sure users only see their own data

You don't need to master SQL. AI writes the queries. You just need to understand what a database does and describe what you want stored.

Package Managers & Dependencies

Modern apps are built on top of code other people wrote. Package managers handle downloading and organizing this external code.

What's a package?

A package (also called library or module) is pre-written code you can use in your project. Instead of building everything from scratch, you import packages:

• React — Building user interfaces
• Tailwind — Styling
• Supabase — Database connection
• date-fns — Working with dates

The two main package managers

Key files to know

package.json (JavaScript projects) Lists all the packages your project uses. When you run npm install, it reads this file and downloads everything.

node_modules folder Where all downloaded packages live. It's huge and you never edit it. If something's weird, delete it and run npm install again.

.env file Stores secrets and configuration (API keys, database URLs). Never share this file or commit it to GitHub.

Commands you'll use

npm install              # Install all packages listed in package.json
npm install axios        # Add a new package
npm run dev              # Start the development server
npm run build            # Create production version

APIs: How Apps Talk

APIs (Application Programming Interfaces) let different software systems communicate. Your frontend talks to your backend through APIs. Your app talks to Stripe for payments through their API. Everything connects through APIs.

The restaurant analogy

• You (the frontend) = Customer in dining room
• Menu (API documentation) = What you can order
• Waiter (the API) = Takes your request, brings response
• Kitchen (the backend/server) = Prepares what you asked for

You don't go into the kitchen. You make a request through the waiter, and get a response back.

HTTP methods: Types of requests

What an API request looks like

// Asking for data (GET request)
const response = await fetch('/api/habits')
const habits = await response.json()

// Sending data (POST request)
const response = await fetch('/api/habits', {
  method: 'POST',
  body: JSON.stringify({ name: 'Exercise daily' })
})

Why this matters

When AI creates code, it often separates:

• Frontend components that display data
• API routes that fetch/save data from the database

Understanding that these are separate pieces that talk to each other helps you follow what AI is building and troubleshoot when the connection breaks.

Deployment: Getting Your App Online

Deployment means taking the app running on your computer and putting it on the internet where anyone can access it.

The three environments

Popular deployment platforms

The deployment workflow

1. Push to GitHub → Your code goes to your repository
2. Platform detects change → Vercel/Netlify sees the new code
3. Builds your app → Compiles everything into production format
4. Deploys → Makes it live at your URL

This happens automatically once you connect GitHub to your deployment platform.

Environment variables in production

Your .env file with secrets doesn't go to GitHub (for security). Instead, you add those same variables in your deployment platform's settings. Every platform has a place for "Environment Variables" where you paste your keys.

Putting It All Together

Here's how all these pieces connect when you build an app with AI:

The development rhythm

1. Describe what you want → AI writes code
2. Run locally → npm run dev starts your app at localhost
3. Test it → Click around, see if it works
4. Fix issues → Tell AI what's wrong, iterate
5. Save your progress → git add . + git commit + git push
6. It's live → Deployment platform automatically updates

Your mental model

You (Director) ──describes──▶ AI (Writer) ──generates──▶ Code

Code runs in: Terminal / VS Code / Cursor

Code is saved with: Git → GitHub

Code talks to: Database (Supabase)

Code goes live via: Vercel / Netlify / Railway

When you get stuck

What's Next

You now have the foundational knowledge to start building with AI coding tools. You understand:

• Terminal — What it is, how to open it, and the commands you need
• IDE — Where to write code and which editor to choose
• Git — How to save your work and undo mistakes
• Code literacy — Reading code without writing it
• Tech stacks — Which tools for which job
• Frontend/Backend — Where different code lives
• Databases — How apps store data
• Package managers — How external code is managed
• APIs — How different parts communicate
• Deployment — How apps get on the internet

This isn't everything. But it's enough to start building real things and learn the rest as you go. The best way to solidify this knowledge is to use it.

Last updated: December 2025 Difficulty: Beginner | Estimated time: 15 minutes