All tracks
Dev Vocabulary, Conquered: The 26-Card Vibe Coding Dictionary
Free · Basics

Dev Vocabulary, Conquered: The 26-Card Vibe Coding Dictionary

From agents to SSL, one analogy each and you'll never mix them up again

about 30 min12 steps

What you will have built

Explain 26 core terms in your own words, analogies included: vibe coding, agents, MCP, DB, BYO, deploy, DNS, SSL, and more.

What you need

  • A VibeCampus accountrequired

    You need to be signed in to collect the quiz rewards (Vibes). Signing up is free.

  • The First 15 Minutes courseoptional

    Not required, but the vocabulary lands much faster once you've seen the Studio screen at least once.

1

Why the vocabulary comes first

Half of why a new field feels hard is not the ideas but the words. Take a sentence like 'connect your own Supabase as BYO'. Know three words and it becomes plain common sense: hook up your own data warehouse under your own name.

The method here is simple. Tap a term card and an analogy comes first, then the definition and why it matters. Don't memorize; picture the analogy. Each block ends with a quiz, and a wrong answer costs you nothing. Reading the explanation actually makes it stick longer.

Tip

As you read a card, ask yourself 'what would this be in my neighborhood?' A term you've re-analogized into your own life never leaves you.

2

Basics block: the five words that make vibe coding run

The first block is the five words holding up this whole platform: vibe coding, prompt, AI model, token, API. Get these five and the entire mystery of 'why does a site come out when I write a sentence' resolves at once.

Tap the cards below one by one. The five link into a single sentence: you write a prompt, it passes through a service window called an API, an AI model reads and thinks in tokens, and hands back the result. That is all vibe coding is.

If you see this, it worked

Open all five cards, then reread the one-sentence summary above. If it reads naturally, you've passed this block.

Term cards · tap to open

Vibe coding

Instead of cooking yourself, you describe the taste you want to a top chef and receive the dish.

A way of building software by asking an AI in plain language instead of typing code line by line. The clearer the picture in your head, the better the result, and the VibeCampus Studio builds websites, apps, and games exactly this way.

Prompt

The order slip you hand the chef. 'Medium spicy, noodles firm' gets you the dish you wanted; 'surprise me' does not.

The request you send to the AI. The more it says about who it's for, what's needed, and what mood, the more accurate the result. Every sentence you type into the Studio's input box is a prompt, and polishing them matters enough to have its own course.

AI model

The chef in person, the one who reads the order slip and actually cooks.

The brain of the AI, the part that actually thinks and produces answers. Names like Claude, GPT, and Gemini are all model names, and which model is on duty changes the quality and speed of the result. The Studio picks the model that fits each job.

Token

The amount of ingredients a dish consumes. A long, complicated order uses more ingredients.

The unit of text chunks an AI counts as it reads and writes. An AI's workload is measured in tokens, so for the same content, short and clear wording is more efficient. All you need is the sense that longer text means more tokens.

API

The order window between the dining room and the kitchen. Food comes out without customers ever walking into the kitchen.

The standard window through which programs exchange data and features. When your app borrows weather, maps, or AI from outside, it all goes through APIs. This is how the world's services shake hands.

3

Basics quiz

Which of these best describes a token?

4

Building block: five words for how AI gets work done

The second block answers the question 'how does one sentence turn into something that complex?'. Agent, orchestration, MCP, hook, skill. These are the names for what actually happens behind the Studio's build gauge.

Know these cards and the Studio stops looking like a magic box and starts looking like a well-run workshop. And people who can see the workshop ask for things better, because they know which counter to ask at.

Term cards · tap to open

Agent

A capable employee who says 'I'll report back when it's done' and gets moving on their own.

An AI that takes one instruction, then plans, uses tools, checks results, and carries multiple steps through by itself. While the build gauge fills, the agent is writing code to the blueprint and verifying as it goes. The decisive difference from a simple Q&A AI is exactly this 'carries it through by itself'.

Orchestration

The conductor who binds many players into one piece of music.

Dividing work among multiple AIs and tools, each doing what it does best, and coordinating the sequence. Text to this model, images to that one, verification to yet another tool. Split the roles and quality and stability rise together. Even a single Studio result has many players in it.

MCP

A connection standard like USB: plug anything in and it just works.

The standard spec (Model Context Protocol) for connecting external tools and data to an AI. With a unified standard, an AI can safely pick up tools like calendars, databases, and search. The most common misunderstanding is thinking it's a payment method; it's a way of connecting.

Hook

A device that fires automatically at a set moment, like a bell that rings whenever the door opens.

A link that automatically runs a predefined action the instant a certain event happens. Automation like running checks on every save or sending a notice when a deploy finishes is built from hooks. It's how the system remembers even when humans forget.

Skill

A chef's proven recipe card. Pull it out and failures drop sharply.

A package of proven techniques like 3D staging, charts, or parallax scrolling. You can search the Studio's skill library and add them to a build, and even if you don't pick any, skills matching your prompt are chosen and combined automatically.

Heads up

Many people mistake MCP for a payment method or a pricing plan. MCP is a connection standard and has nothing to do with money. Check the card.

5

Building quiz

What exactly is MCP (Model Context Protocol)?

6

Data block: five words guarding your service's vault

The third block is where money and data are on the line. DB, Supabase, BYO, API key, environment variable. To build a real service that takes bookings and manages members, these five are the wall you must climb.

The spirit behind them is one sentence: the data your service creates should belong to you. That is why VibeCampus supports connecting your own Supabase directly (BYO), and every card in this block explains that spirit.

Term cards · tap to open

Database (DB)

A big refrigerator with tidy compartments. Whatever you put in is still there next time you open it.

A store that keeps information like customers, bookings, and posts in an organized structure. What's on screen vanishes when you close it, but data in the DB stays. It's the heart of any service that takes bookings or manages members.

Supabase

A complete warehouse service that rents you the refrigerator with the locks and a delivery window included.

A service that bundles a DB with extras like login and file storage. On VibeCampus you can connect your own Supabase account directly to the Studio, so your service's data is under your ownership from day one.

BYO

Bringing your own wine to a favorite restaurant. It's yours, so both the contents and the bill stay under your control.

Bring Your Own: connecting with your own account and keys. Data and usage are in your name, so your service never gets locked into a platform as it grows, and you can pack up and move everything at any time.

API key

The membership card that proves it's you at the order window. If someone else uses it, the bill lands on you.

A secret string proving an API request belongs to your account. Usage is billed against this key, so treat it like a password and never expose it on screen or in public code.

Environment variable

The safe backstage. Actors act on stage; valuables stay in the safe.

A settings space that keeps secrets like API keys outside your code. Share or publish the code and no secrets leak, and when your environment changes you swap the values while the code stays untouched.

Heads up

An API key is a password. Never expose it in screenshots, community posts, or code. If it leaks, the rule is simple: retire that key and issue a new one.

7

Data quiz

What is the biggest reason to keep an API key in an environment variable instead of writing it into the code?

8

Launch block: six words for sending it into the world

The fourth block covers the words you meet when releasing what you've finished. GitHub and version control, deploy, domain, DNS, SSL, hosting. Six cards, but really one story: keep your code safe, put it on the internet, hang up a name, and lock the door.

You will meet these words again as actual buttons in the Website Master and Launch courses. Pin the analogies down now and your hands won't hesitate then.

If you see this, it worked

Opened all six? Then retell the journey of 'my site reaching its first visitor' out loud. If it flows storage, open, sign, lock, you've passed.

Term cards · tap to open

GitHub · version control

A game's save points. You can always return to an earlier save.

A service that records your code's change history (version control) and stores it online. Mistakes can be rolled back to yesterday's code, and when several people build together it keeps their work from colliding and breaking. Most of the world's software lives here.

Deploy

Opening day for the shop. The moment what you built opens its doors to customers.

Putting your finished work on the internet so anyone can reach it. On VibeCampus it's one click, and the moment you deploy you get a shareable address. A build before deploy is still a prototype that only exists in your workshop.

Domain

The shop sign, and the address you print on business cards.

The name people type to reach your site (like mysite.com). A memorable domain of your own is what turns a site into a brand, and VibeCampus domain search lets you find the name you want and connect it right away.

DNS

The internet's phone book, turning a sign's name into the building's actual location.

The system that translates a domain name into a server's real address (IP). Connecting a domain ultimately means writing 'guests for this name go to this server' into DNS. The record can take a little while to spread.

SSL

Sending a letter in a sealed envelope. Nobody can read it in transit.

The security layer encrypting traffic between your site and its visitors. The padlock in the address bar means SSL is on; without it, browsers warn that the site is not secure and visitors turn back. These days it's not optional, it's the baseline.

Hosting

The building your shop occupies. The lights never go out, 24 hours a day.

Renting server space that keeps your site running day and night. VibeCampus handles hosting along with deploys, so there's no server to buy or babysit. You build; the building management is covered.

Tip

Remember the six as a grand-opening sequence: storage (GitHub), open the doors (deploy and hosting), the sign (domain and DNS), the lock (SSL).

Heads up

A site without the padlock (SSL) in the address bar gets flagged as not secure by browsers. Most visitors who see that warning turn around. Check it when you deploy in the Launch course.

9

Launch quiz

Which best describes what DNS does?

10

Advanced block: five words one level deeper

The last block holds the words that, once known, make the architecture of every service around you visible. Frontend, backend, SaaS, sandbox, embed. From here on you'll never need an interpreter to talk with developers.

The frontend and backend split in particular becomes the skeleton of the app-building course later. Keep just one picture: the dining room and the kitchen. Where guests look, and where the work gets done.

If you see this, it worked

Opened all five? Pick a service you love and split it: 'the dining room (frontend) is this, the kitchen (backend) is that'. If it splits cleanly, you've passed this block.

Term cards · tap to open

Frontend

The shop's interior and display windows. Everything guests see and touch.

The visible part: layout, buttons, colors, type. Requests like 'more premium, bigger buttons' are polishing exactly this area, and it's also the part you can touch directly with Click to edit.

Backend

The kitchen and the storeroom. Guests never see it, but this is where the shop actually runs.

The processing behind the screen: storing data, logins, payments. Form submissions actually saving and logins actually working happen because a backend exists. It's the essential other half of any app where data stays alive.

SaaS

Renting a water purifier instead of buying one. Installation, upkeep, and filter changes are all included.

Software you subscribe to over the internet with nothing to install (Software as a Service). Notion and Netflix are classic examples, and the subscription services you'll build and sell are SaaS too. Not a one-time sale but a relationship that renews monthly.

Sandbox

A sandpit where children play only inside the box. Nothing outside gets messy.

A safety device that runs code in a space isolated from the real service. It's why Trust & Fact-Check can actually execute your code in an E2B sandbox: whatever happens, the live service is untouched.

Embed

A finished picture frame you can rehang on any wall.

A way to drop your creation into another site or blog with a few lines of code. The Studio's embed feature produces copy-paste-ready code, so your build can go straight onto a homepage that's already running.

11

Advanced quiz

Which best describes a sandbox?

12

Completion: now lock it in with the game

You've turned all 26 cards. From now on, no Studio settings screen, no developer conversation, no course text will stop you over a strange word. Vocabulary isn't knowledge; it's a map. And now that you have the map, you can go anywhere.

How about one round to lock it in? Take on the term-match game with the Try it now button below. It pairs up the words you learned today, and the first clear each day comes with a Vibes reward. What you memorize fades; what you play with stays.

Try it now

Tip

The game resets daily. One round before each new course pushes the vocabulary into long-term memory.

Remember this

  • Congratulations. The 26 core words of vibe coding are yours now. Sentences like 'connect Supabase directly as BYO' should read like plain language.
  • Vocabulary goes strange again when unused. Luckily, this platform makes you use it daily. Every build in the Studio, every verification run brings today's cards back in the flesh.
  • Next we recommend The Art of the Prompt. With today's words in hand, it's time to learn how to raise the quality of what comes out. And if an unknown word ever surfaces again, come back any time. The cards will be right here.
Try it in the Studio
ClassesNew build