You are vibe coding. Things are going well. Claude is building, you are directing, and then it says something like “I’ll add a media query for the responsive breakpoint and lazy-load the below-fold images.”

You nod. You have no idea what that means. It probably did the right thing. But a small part of you wonders.

This guide is for that moment. Every term is explained the way you would explain it to a smart friend over coffee — no condescension, no unnecessary depth. Just enough to know what is happening and whether you should care.

Don’t panic. Bookmark this page. You will come back to it.

A

Agent — An AI that can take actions on its own, not just respond to one message at a time. An agent can plan a series of steps, run tools, check results, and adjust — all without you prompting every single move. Claude Code works this way. You say “build me a portfolio site,” and it plans, creates files, runs the project, checks for errors, and keeps going until it is done.

Agentic coding — The next step beyond vibe coding. Instead of prompting back and forth, you give the AI a goal and let it run. It plans, builds, tests, and fixes on its own. You become the creative director, not the operator. Think of it as the difference between driving a car and telling a driver where to go.

AJAX — A way for a web page to fetch new data without reloading the entire page. When you scroll Instagram and new posts appear without the page refreshing, that is AJAX. You will rarely ask for this by name; Claude uses it automatically when appropriate.

Alt text — A description attached to an image that screen readers read aloud for visually impaired users. Also appears when an image fails to load. “A photograph of morning light through birch trees” is good alt text. “image1.jpg” is not. Claude should be adding this to every image. If it is not, tell it to.

API — A way for two pieces of software to talk to each other. When your portfolio site pulls your latest Instagram posts, it is using Instagram’s API. Think of it as a waiter: you (the website) tell the waiter (the API) what you want, and the waiter brings it from the kitchen (the server). You will encounter this word a lot. You will rarely need to do anything about it.

API key — A unique password that proves to an external service that it is really you making the request. When you connect to services like Stripe for payments or Google for maps, they give you an API key. Never share it publicly — anyone with your key can run up charges on your account. Claude will ask you for these when connecting to services. Keep them in a safe place.

B

Backend — The invisible part of a website or app. The server, the database, the logic that runs behind the scenes. If a restaurant is a website, the backend is the kitchen — you never see it, but it is where everything gets made. When Claude says “this needs to happen on the backend,” it means the work happens on the server, not in the browser.

Branch — A separate copy of your project where you can try things without affecting the main version. Like having a draft copy of a document while the original stays untouched. If the experiment works, you merge the branch back in. If it does not, you delete it. No harm done.

Breakpoint — The screen width at which a layout changes its behaviour. A common one: 768 pixels, where a desktop layout switches to a tablet layout. When Claude says “I added a breakpoint at 768px,” it means your site rearranges itself when the screen gets narrower than that. Like a newspaper that knows when to switch from broadsheet to tabloid.

Browser — Chrome, Safari, Firefox, Edge. The thing you use to look at websites. Claude can open it for you.

Build — The process of converting your project files into something ready for the internet. For simple sites, there is no build — the files just work. For complex ones, building is like baking: raw ingredients go in, finished thing comes out. Claude handles this.

C

Cache — A saved copy of something so it loads faster next time. Your browser caches images from websites you visit, so the second visit is quicker. When Claude says “I’ll add cache headers,” it means returning visitors will see your site load faster.

CLAUDE.md — A text file you keep in your project that Claude reads at the start of every session. It contains your rules, preferences, project structure, and anything Claude needs to know to work the way you want. Without it, Claude starts every conversation blank. With it, Claude picks up exactly where you left off. Think of it as a briefing document you hand to a new team member. Other tools have their own versions — Cursor uses .cursorrules, for example.

CLI — Command Line Interface. The text-based way of talking to a computer — the terminal. You do not need this if you use the desktop app. Some tutorials assume you do. They are behind the times.

Commit — A saved snapshot of your project at a specific moment. Like pressing “save” in a video game. You can go back to any commit if something goes wrong. Claude makes commits for you. The word “commit” is also a verb: “commit your changes” means “save this snapshot.”

Context rot — What happens when a long session with an AI goes on too long. The conversation fills with clutter — failed attempts, contradictions, repeated instructions — and the AI’s responses start getting worse. Like a whiteboard covered in so many layers of writing you cannot read any of it. The fix is simple: start a fresh conversation and give the AI a clean summary of where you are.

Context window — How much the AI can “see” at once — its short-term memory. It includes everything: your instructions, the conversation so far, any files it has read, and its own previous responses. When a context window fills up, the AI starts forgetting the earlier parts of your conversation. This is why long sessions degrade and why starting fresh sometimes helps.

CSS — The language that controls how a website looks. HTML is the skeleton; CSS is the skin, the clothes, the posture. Colours, fonts, spacing, animations — all CSS. You will never write CSS. But when Claude says “I adjusted the CSS,” it means it changed how something looks, not what it does.

D

Database — Where an app stores information so it can remember things between visits and between users. Your login details, your saved posts, your order history — all in a database. Without one, your app starts completely fresh every time someone visits. Like a shop with no inventory records.

Dependencies — The pre-built pieces of software your project relies on. Every project stands on the shoulders of other people’s work. Dependencies are those building blocks — you did not write them, but your project needs them to function. When Claude says “installing dependencies,” it is fetching those building blocks.

Deploy — Put your website on the internet so other people can see it. Your site exists as files on your computer. Deploying copies those files to a server that anyone with the URL can access. Claude can deploy for you in about sixty seconds.

Dev server — A temporary local version of your website that runs on your computer for testing. Only you can see it. When Claude starts a dev server, your site runs at an address like “localhost:3000” — which is just a fancy way of saying “on this machine, nowhere else.” The preview panel in the desktop app does this automatically.

DOM — Document Object Model. A structured version of your web page that the browser builds internally. You do not need to know this. If Claude mentions it, it is talking about the page structure. Nod and carry on.

E

Endpoint — A specific address that a service listens at. If an API is a building, an endpoint is a specific office door inside it. One endpoint handles payments. Another handles user logins. Another returns a list of products. When Claude creates an endpoint, it is building a door that other software can knock on.

Environment variables — Secret values stored outside your visible project files — things like API keys, passwords, and settings that change between your computer and the live site. They live in a file called .env that never gets shared publicly. When Claude says “add this to your environment variables,” it means “store this secret safely, not in the code itself.”

F

Favicon — The tiny icon that appears in your browser tab next to the page title. Usually 32x32 pixels. A small thing that makes a site feel finished.

Framework — A pre-built structure that gives you shortcuts for building websites. React, Next.js, Astro, Svelte — these are frameworks. They save time on complex projects but add complexity. For vibe coding, you usually do not need one. A single HTML file with CSS works for most creative projects.

Frontend — Everything the user sees and interacts with in the browser. Buttons, layouts, text, images, animations. If the backend is the kitchen, the frontend is the dining room — the part the customer actually experiences. When Claude says “this is a frontend change,” it means it is changing what the site looks like or how it behaves in the browser.

G

Git — A system for tracking changes to files over time. Every commit is a snapshot. Every snapshot is recoverable. Git is your safety net — if Claude makes a change you do not like, you can go back. Claude uses git automatically. You do not need to learn it, but it is working in the background, saving your progress.

GitHub — A website that stores git projects online. Think of it as Google Drive for code. Your project files live on your computer; GitHub keeps a backup in the cloud. Also needed for deploying to most hosting services.

H

Hallucination — When the AI confidently states something that is completely wrong. It does not know it is wrong — it is pattern-matching, not looking things up. It might invent a feature that does not exist, reference a tool that was never made, or write code that calls a function with the wrong name. This is why you test everything. Trust but verify.

Hot reload — When you make a change and the browser updates instantly, without you pressing refresh. The dev server watches your files. When one changes, it pushes the update to the browser automatically. Makes building feel immediate and fluid, like sculpting in real time.

Hover state — What an element looks like when your mouse is over it. A button that changes colour when you hover over it has a hover state. A good site has them on every clickable thing.

HTML — The language that defines the structure of a web page. What goes where: the heading, the paragraph, the image, the link. CSS makes it look good; HTML makes it exist. When Claude creates an “HTML file,” it is creating the page itself. You can think of HTML files as “web page files.”

I

IDE — Integrated Development Environment. A fancy text editor for writing code. VS Code, Cursor, and Zed are IDEs. You do not need one. Claude Code in the desktop app replaces the IDE for vibe coders.

J

JavaScript — The language that makes web pages interactive. HTML is the skeleton, CSS is the appearance, JavaScript is the behaviour — clicks, animations, things that change when you interact. Claude writes it when your page needs to do something, not just look like something.

JSON — A format for storing structured data as text. It looks like a grocery list with labels: {"name": "Sarah", "role": "photographer"}. Claude uses it for configuration files. You will see it occasionally. You do not need to edit it by hand.

L

Lazy-load — Loading images only when they scroll into view, instead of loading all of them when the page first opens. Makes the page feel faster. When Claude says it will lazy-load images, it means below-the-fold images wait until you scroll to them before downloading.

LLM — Large Language Model. The AI brain behind tools like Claude, ChatGPT, and Gemini. A massive system trained on enormous amounts of text, capable of reading, writing, reasoning, and generating code. When people say “the model” or “the LLM,” they mean the AI itself — the engine under the hood.

Localhost — Your own computer, acting as a server. “localhost:3000” means “this machine, port 3000.” It is just your preview. Nobody else can see it.

M

Markdown — A simple way to write formatted text using plain characters. # Heading, **bold**, - bullet point. CLAUDE.md files use this format. You are already reading Markdown if you have looked at a CLAUDE.md file.

MCP — Model Context Protocol. A universal standard that lets AI tools connect to other apps and services. Think of it as USB-C for AI — instead of every AI tool needing a custom connection to every app, MCP provides one standard that works for all of them. There are MCP connections for GitHub, Google Drive, Slack, databases, and hundreds more. When someone says “install the Slack MCP,” they mean “give the AI a way to talk to Slack.”

MCP server — A small piece of software that gives an AI access to a specific tool or service. There is one for GitHub, one for Slack, one for your database — each one teaches the AI how to read from and write to that service. Think of it as a translator that sits between the AI and the app. You install them; the AI uses them.

Media query — A CSS rule that changes the design based on screen size. “If the screen is narrower than 768 pixels, stack the columns vertically.” That is a media query. Related to breakpoints.

Merge conflict — When two different changes have been made to the same part of a file, and the system cannot figure out which one to keep. It freezes and asks a human to decide. This can happen if you edit a file while the AI is also editing it, or when combining two branches. Claude can usually resolve these for you — just ask.

Minify — Remove all the spaces, comments, and line breaks from code to make the file smaller and faster to load. The code becomes unreadable to humans but identical to the browser. Claude does this automatically when deploying.

Model — The specific AI version your tool is using. Claude Sonnet, Claude Opus, GPT-4o — these are all different models. Different models have different strengths: some are faster, some are smarter, some are cheaper. When a tool asks you to “choose a model,” it is asking which AI brain you want driving.

N

npm — Node Package Manager. A tool for installing pre-built code packages that your project needs. Think of it as an app store for code building blocks. You do not need to learn it — if Claude mentions it, it is installing a tool or library it needs. Let it.

O

Open source — Software whose code is publicly available for anyone to use, modify, and distribute. Many of the tools Claude uses are open source.

P

Pixel — A single dot on your screen. A 1920x1080 display has about two million of them. When Claude says “20px gap,” it means 20 dots of space.

PR (Pull Request) — A proposal to merge changes into a project. Claude creates these when deploying or when working with teams. It is basically saying “here are the changes I made, please review before we make them official.”

Prompt — The message you type (or speak) to the AI. Your prompt is your instructions. Everything — what you want, how you want it, what style, what to avoid — goes in the prompt. A good prompt is specific, visual, and describes the result you want, not the technical steps to get there.

Prompt drift — When the AI’s style and approach gradually shift away from your original instructions over a long session. It starts introducing inconsistencies, forgets your preferences, or quietly changes decisions it made earlier. Like a game of telephone played with code. The fix: keep a CLAUDE.md file with your core rules, and start fresh sessions when things feel off.

Prompt engineering — The craft of writing better prompts to get better results. Not as mystical as it sounds — mostly about being specific, giving examples, and describing what you want to see. “Make it elegant with lots of whitespace, like a high-end magazine” works better than “make it look nice.” This is the core skill of vibe coding.

Pull — Downloading the latest version of your project from GitHub to your computer. If another session or a collaborator made changes, pulling brings those changes to you. The opposite of push.

Push — Uploading your saved snapshots (commits) from your computer to GitHub. Like syncing a local document to the cloud. After Claude commits changes, it pushes them to keep the online copy up to date.

R

Repo (Repository) — A project stored in git. Your portfolio site is a repo. The words “project,” “repo,” and “codebase” are used interchangeably.

Responsive — A design that adapts to different screen sizes. A responsive portfolio looks good on a phone, a tablet, and a desktop. This is not optional in 2026. If Claude is not making your project responsive by default, add it to your CLAUDE.md.

S

Server — A computer that serves files to other computers over the internet. When you deploy your site, it goes on a server. Vercel, Netlify, and GitHub Pages are services that give you a server without you having to think about it.

Session — A single conversation with Claude Code. Start a session, do some work, end the session. Each session has its own context and history. Starting a new session starts a new conversation with no memory of the old one (unless you have a CLAUDE.md).

SSH — Secure Shell. A way to connect to a remote computer through text commands. You probably do not need this. It exists in the desktop app for connecting to remote servers, which is an advanced use case.

T

Technical debt — The hidden cost of quick fixes and shortcuts. Every time you take the fast route instead of the right route, you create a small future problem. Those problems stack up. Eventually, adding one simple feature takes ten times longer because the foundations are tangled. The solution: clean up as you go, or set aside regular sessions purely for tidying.

Terminal — A text-based interface for talking to your computer. You type commands; it types back. The Claude desktop app replaces the need for this in most cases. If you hear “open a terminal,” you can instead open the Claude desktop app and ask Claude to do whatever the terminal command would have done.

Tokens — The units AI reads and writes in. Roughly, one token is about three-quarters of a word. Tokens matter because AI tools charge by the token, and every model has a maximum number it can handle at once. “Running out of tokens” means you have hit the session limit and need to start fresh.

Tool use — The ability of an AI to interact with the real world, not just generate text. An AI with tool use can open files, run your project, search the web, write to your computer, and talk to external services. This is what makes Claude Code different from chatting with an AI on a website — it can actually do things, not just talk about them.

U

URL — The address of a web page. https://yourname.vercel.app is a URL. When Claude deploys your site, it gives you one.

V

Variable — A named container for a value. In CSS, --background: #F0EEE6 creates a variable called “background” with the colour cream. Change the variable, and everything that uses it changes too. Claude uses variables to make it easy to update your colour palette in one place.

Vibe coding — Building software by describing what you want to an AI, then letting it write all the code. You guide it, test it, give feedback — but you never touch the actual code yourself. Coined by Andrej Karpathy in February 2025, when he wrote: “fully give in to the vibes, embrace exponentials, and forget that the code even exists.” Collins Dictionary named it their Word of the Year for 2025. It is what you are doing right now.

Viewport — The visible area of your browser window. “100vh” means “the full height of the viewport.” When Claude sets a hero section to viewport height, it takes up exactly one screenful.

W

Webhook — A way for one service to automatically notify your app when something happens. Instead of your app constantly asking “has anything changed?”, the other service taps you on the shoulder. Stripe uses webhooks to tell your app when a payment goes through. You will encounter these when connecting to payment, email, or notification services.

WebP — An image format made by Google. Smaller file sizes than JPEG at the same quality. Claude converts your images to WebP when optimising for the web.

Whitespace — Empty space in a design. Not wasted space — intentional breathing room. The most undervalued design element. Good vibe coding prompts mention it explicitly: “generous whitespace,” “the text should feel like it is breathing.”

A living document

This guide will grow. As new terms become common in vibe coding conversations, they will appear here. If you encounter a word Claude uses that is not in this list, ask Claude: “What does [word] mean, in plain language?” It will tell you. Then mention it in the comments so we can add it.

The best part of vibe coding is that you do not need to memorise any of this. You need to recognise it. When Claude says “I added a breakpoint at 768px,” you do not need to know how to write one. You just need to know it means your site now looks good on tablets. That is enough.

Art & Algorithms publishes guides, tutorials, and prompt packs at the intersection of art and code. Subscribe for the full archive.