Guides · Generative AI

What Is Vibe Coding? Build Your First App with AI (Beginner Guide with a Working Example)

By Ravindra Bagale, trainer · LinkedIn · Published: 19 October 2026 · Last updated: 19 October 2026 · 12 min read

Vibe coding means building software by describing what you want in plain language and letting an AI write the code, then testing and asking for changes, often without reading every line. The term was coined by AI researcher Andrej Karpathy in February 2025, and Collins Dictionary named it its Word of the Year for 2025. To start: describe one small app clearly, ask an AI chat tool for a single HTML file, open it in your browser, test it with numbers you already know, and change one thing at a time. Do not vibe-code anything that handles passwords, payments or personal data without a developer's review.

1. Suppose we are an engineering student worried about 75%

Suppose we are Omkar, a second-year student at a college in Pune. Our college needs 75% attendance. Every month we sit with a calculator and wonder: "If I have attended 25 of 40 lectures, how many lectures must I attend in a row to reach 75%?"

We cannot code. But we can describe exactly what we want. So we open an AI chat tool and describe the app. Twenty minutes later we have a working Attendance Calculator in our browser, and we share it with our whole class.

2. What is vibe coding, in simple words?

Normal coding: you write every line, and you understand every line.

Vibe coding: you describe the result, the AI writes the code, you run it, you test it, and you ask for changes in plain language. You focus on what the app should do, not on how each line works.

Andrej Karpathy, who coined the term in a post on X on 2 February 2025, described it as fully giving in to the vibes and "forgetting that the code even exists". That works for a weekend project. For anything real, you need the testing habit in section 6.

3. Which tool should I use? (October 2026)

Free limits and prices change often, sometimes every month. Check each tool's pricing page before you rely on it.

For this guide we use a plain AI chat tool, because it needs nothing except a browser, and the result is one file you own.

4. Step 1: describe the app clearly (the "app spec" prompt)

A weak prompt: "make attendance app". The AI must guess everything: what you type in, what it shows, how it looks.

A strong prompt describes 5 things: what it does, inputs, outputs, rules and the format of the code.

Build a simple web app called "Attendance Calculator".

What it does: tells a college student how many lectures they can miss, or must
attend in a row, to stay at or reach a target attendance percentage.

Inputs: lectures attended, total lectures so far, target % (default 75).

Output, after clicking "Calculate":
- If current attendance >= target: "Your attendance is X%. You can miss N more
  lecture(s) and stay at or above T%."
- If below target: "Your attendance is X%. Attend the next N lecture(s) in a row
  to reach T%."

Rules: show an error if attended is more than total or any box is empty.
Round the percentage to 1 decimal place.

Format: ONE single HTML file with the CSS and JavaScript inside it. No external
libraries. Mobile-friendly, simple and clean. Then explain in 5 lines how to run it.

5. Step 2: run it on your computer

1. The AI replies with a block of code that starts with <!DOCTYPE html>.
2. Click Copy on the code block.
3. Open Notepad (Windows) or TextEdit in plain text mode (Mac), and paste.
4. Save the file as attendance.html. In Notepad, choose "Save as type: All files" so it does not become attendance.html.txt.
5. Double-click the file. It opens in your browser. That is your app.

Your AI's code will look different from anyone else's. For comparison, here is the version we tested for this guide. You can also open our tested version directly in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Attendance Calculator</title>
<style>
  body { font-family: Arial, sans-serif; max-width: 420px; margin: 40px auto; padding: 0 16px; }
  label { display: block; margin-top: 14px; }
  input { width: 100%; padding: 10px; font-size: 18px; box-sizing: border-box; }
  button { margin-top: 18px; width: 100%; padding: 12px; font-size: 18px; background: #0E7C86; color: #fff; border: 0; border-radius: 8px; }
  #result { margin-top: 18px; font-size: 18px; }
</style>
</head>
<body>
  <h1>Attendance Calculator</h1>
  <label>Lectures attended <input id="attended" type="number" min="0"></label>
  <label>Total lectures so far <input id="total" type="number" min="1"></label>
  <label>Target % <input id="target" type="number" value="75" min="1" max="100"></label>
  <button onclick="calculate()">Calculate</button>
  <p id="result"></p>
<script>
function calculate() {
  const a = Number(document.getElementById("attended").value);
  const t = Number(document.getElementById("total").value);
  const p = Number(document.getElementById("target").value) / 100;
  const out = document.getElementById("result");
  if (!(t > 0) || a < 0 || a > t || !(p > 0 && p < 1)) {
    out.textContent = "Please enter valid numbers (attended cannot be more than total).";
    return;
  }
  const now = (a / t * 100).toFixed(1);
  if (a / t >= p) {
    const canSkip = Math.floor(a / p - t + 1e-9);
    out.textContent = "Your attendance is " + now + "%. You can miss " + canSkip + " more lecture(s) and stay at or above " + (p * 100) + "%.";
  } else {
    const need = Math.ceil((p * t - a) / (1 - p) - 1e-9);
    out.textContent = "Your attendance is " + now + "%. Attend the next " + need + " lecture(s) in a row to reach " + (p * 100) + "%.";
  }
}
</script>
</body>
</html>

6. Step 3: test it with answers you already know

This is the most important step in vibe coding. Never trust an app you have not tested. Work out a few answers by hand first, then check the app gives the same answers.

Real output from our tested version:

Your attendance is 62.5%. Attend the next 20 lecture(s) in a row to reach 75%.
Your attendance is 90.0%. You can miss 8 more lecture(s) and stay at or above 75%.

If your AI's app gives a different number, do not argue with the code. Tell the AI exactly what happened (section 8).

7. Step 4: improve it, one change at a time

In the same chat, ask for one change per message, and test again after each one:

1. "Add a Reset button that clears all the boxes."
2. "Show the result in green when attendance is at or above the target, and in red when below."
3. "Add a small line under the title: 'Made by Omkar, for SE Computer, 2026-27.'"
4. "Make the buttons bigger on mobile."

Why one at a time? If you ask for 5 changes together and something breaks, you will not know which change broke it.

8. Step 5: fix a bug by describing it

Suppose you enter 25 and 40, and the app says "attend the next 19 lectures". You know the right answer is 20. Tell the AI:

Bug: with attended = 25, total = 40, target = 75, the app says 19 but the correct
answer is 20, because (25 + 19) / (40 + 19) = 74.6%, which is below 75%.
Fix the calculation so it always rounds UP to the next whole lecture.
Do not change anything else.

The words "Do not change anything else" stop the AI from rewriting the whole app and creating new bugs.

If the browser shows nothing at all, press F12, open the Console tab, copy the red error message, and paste it to the AI.

9. Step 6: share it with your class

A one-file app is easy to share:

• Send the file on WhatsApp or email. Friends open it in their browser.
• Publish it free on GitHub Pages: create a GitHub account, make a public repository, upload the file as index.html, and turn on Pages in the repository settings. You get a link you can share.
• Or use the publish button of a builder tool like Google AI Studio, Lovable or Replit, if you built it there.

10. When vibe coding is NOT safe

Vibe coding is great for calculators, quizzes, small games, personal dashboards and prototypes. Stop and get a developer's review before you build anything that:

• stores passwords or logs users in;
• takes payments or handles bank or UPI details;
• stores personal data like Aadhaar, phone numbers or health records;
• runs a real business process where a wrong number costs money.

Three safety rules for every project:

1. Never put an API key or password inside front-end code. Anyone can open the page and read it. Ask the AI: "Is there any secret key in this code?"
2. Ask the AI to explain any part you do not understand: "Explain the calculate function line by line for a beginner." Over time, you start to understand your own app.
3. Test edge cases: empty boxes, zero, very big numbers, wrong order. Apps break at the edges.

11. Beginner mistakes and quick fixes

12. Try at home

Recap

Build the attendance calculator tonight and test it with your own real numbers. The moment your own app gives you a correct answer, you will understand why the world is talking about vibe coding.

Learn the prompting skill behind it: Prompt Engineering for Beginners: Role, Task, Context and Format

Ravindra Bagale, trainer: linkedin.com/in/ravindra-bagale. Omkar and his college are made up for learning. The attendance calculator code on this page was written and tested for this guide on 19 October 2026; the test results shown are real. The origin of the term and the Collins Word of the Year were checked on public sources. Tool names and free plans were checked on 19 October 2026 and change often. AI-written code changes every time, so yours will look different.

Related: Vibe Coding for Beginners: Build a Website with AI