Vibe Coding for Beginners: Build a Website with AI (No Coding Needed)

By Ravindra Bagale, trainer · LinkedIn · Last updated: 23 October 2026

Generative AI course · Chapter 33 · Estimated reading time: 15 minutes

1. Suppose Meera needs a web page by Sunday

Suppose Meera asks us on Thursday: "Can you make me a web page for my spice mixes? Three products, prices, a photo of each and a WhatsApp button." We have no web designer and no budget.

The old way: learn HTML and CSS for a few weeks, or pay someone. The vibe coding way:

1. Describe the page in plain English, like you would to a designer.
2. Generate: AI writes the whole page, and you see a live preview.
3. Test: open it on a phone, click every button, read every word. Then ask for changes.

You repeat steps 1 to 3 until the page is right. You never type code yourself, but you are still the boss: you decide what it says, and you check that it works.

2. What vibe coding means

The term was coined in February 2025 by AI researcher Andrej Karpathy. He described a way of programming where you direct AI in plain language and accept the code it writes, without reading every line. He also said it suits quick, throwaway projects.

That last part matters. Vibe coding is great for:

• a simple landing page, a personal page, an event page
• a quiz, a calculator, a to-do list for yourself
• a first version (prototype) to show someone your idea

It is not enough on its own for:

• anything that stores customers' personal data or passwords
• taking payments inside the website
• apps that many people depend on every day

For those, you still need someone who reads and understands the code. Vibe coding gets you a working first version fast; it does not replace learning.

3. Free tools you can start with (October 2026)

You need only a browser and a free account. These tools can make a web page from a prompt and show a live preview:

A few important points, checked on Google's pages on 23 October 2026:

• Gemini Canvas share links are public. Anyone with the link can see the page and, for apps that save data, see and change that data. Never put private information into a shared canvas.
• AI Studio Build mode is free to start, but some models and heavy use have limits or costs. Eligibility for free publishing depends on your account type.
• Free plans and limits change often. Check the tool's own page before you plan a project around a limit.

4. Worked example 1: a shop landing page

Step 1: write the brief as a prompt.

Make a single-page website for "Meera's Spice Kitchen", homemade spice mixes from Kolhapur.
Visitors: families who order on WhatsApp, mostly on their phones.

Sections, in this order:
1. Header: shop name and the line "Homemade spice mixes, made fresh every week".
2. Three product cards, each with a photo placeholder, name, price and pack size:
   Garam masala, Rs 120 for 100 g. Biryani masala, Rs 140 for 100 g. Tea masala, Rs 90 for 50 g.
3. "How to order": 3 short steps.
4. A big green "Order on WhatsApp" button that opens a WhatsApp chat.
5. Footer: phone number and "Delivery in Kolhapur city only".

Style: warm red and cream colours, large readable text, works well on a phone.
Use plain HTML and CSS in one file. Use a placeholder for the phone number.

Step 2: generate. Paste it into Gemini Canvas (or any tool in section 3) and press Enter.

Expected output (yours will be similar, not the same): a live preview of a one-page shop with a coloured header, three cards in a row on a laptop (one under another on a phone), a "How to order" list and a green button. The code panel shows one HTML file.

Step 3: test. Do not trust the preview. We saved the page AI gave us as index.html and ran a small checker in Python that looks for the things beginners most often miss:

# Quick test of an AI-made web page: the things beginners most often forget.
import re, sys
from html.parser import HTMLParser

class P(HTMLParser):
    def __init__(s):
        super().__init__(); s.imgs, s.links, s.ids, s.viewport, s.title = [], [], set(), False, False
    def handle_starttag(s, tag, a):
        a = dict(a)
        if "id" in a: s.ids.add(a["id"])
        if tag == "img": s.imgs.append(a)
        if tag == "a": s.links.append(a.get("href", ""))
        if tag == "meta" and a.get("name") == "viewport": s.viewport = True
        if tag == "title": s.title = True

page = open(sys.argv[1], encoding="utf-8").read()
p = P(); p.feed(page)
problems = []
if not p.viewport: problems.append("No viewport tag: the page will look tiny on phones")
if not p.title: problems.append("No <title>")
for img in p.imgs:
    if not img.get("alt"): problems.append(f"Image without alt text: {img.get('src')}")
for href in p.links:
    if href.startswith("#") and href[1:] not in p.ids: problems.append(f"Link goes nowhere: {href}")
if re.search(r"\d{2}X{6,}", page): problems.append("Placeholder phone number still on the page")
print(f"Checked {sys.argv[1]}: {len(problems)} problem(s)")
for x in problems: print(" -", x)

Real output (we ran python check_page.py index.html on 23 October 2026, on a first version of the page):

Checked index.html: 5 problem(s)
 - No viewport tag: the page will look tiny on phones
 - Image without alt text: garam.jpg
 - Image without alt text: biryani.jpg
 - Link goes nowhere: #order
 - Placeholder phone number still on the page

You do not need to understand the checker to use it. It is a second pair of eyes. Every problem it found is something a visitor would notice: tiny text on a phone, missing image descriptions for people who use screen readers, and an order button that does nothing.

Step 4: ask for the fix, in plain words.

Please fix these: add a viewport meta tag so the page fits phones; add alt text
to every product image; make "Order on WhatsApp" open https://wa.me/ followed by
the phone number; turn the footer phone number into a tap-to-call link.

Real output after the fix (same checker, same day):

Checked index_fixed.html: 1 problem(s)
 - Placeholder phone number still on the page

The last problem is correct and on purpose: the page still has the dummy number +91 XXXXX XXXXX. Only Meera can put in her real number, just before she publishes.

5. Worked example 2: a quiz page

Pages that do something (count a score, show a result) need more testing, because AI can make logic mistakes that look fine in the preview.

The prompt:

Make a 5-question multiple-choice quiz page about road safety for school students.
Show one question at a time with 4 options. After each answer, show "Correct" in
green or "Not quite" in red with a one-line explanation, then a Next button.
At the end, show the score out of 5 and a "Try again" button that resets everything.
One HTML file with CSS and JavaScript inside. Large buttons for phones.

Expected output (yours will be similar, not the same): a quiz with one question on screen, 4 big option buttons, a coloured message after each click, and a final score screen.

Now test it like a user. Do these one by one, and write down anything odd:

1. Answer all 5 correctly. Does it say 5 out of 5?
2. Answer all 5 wrongly. Does it say 0 out of 5?
3. Click two options on the same question. Does the score go up twice? (A very common AI bug.)
4. Click Try again. Does the score really go back to 0?
5. Open it on your phone. Can you tap every button easily?
6. Read every question and explanation. Is each fact true?

If test 3 fails, tell AI exactly what you saw:

Bug: if I click two different options on the same question, the score
goes up twice. After the first click, lock the options for that question.

Expected output (yours will be similar, not the same): AI explains the fix in one or two lines (for example, "the buttons are now disabled after the first answer") and gives you the updated page. Run all 6 tests again, not only the one that failed; a fix can break something else.

6. Worked example 3: from a preview to a real website

A preview inside Gemini or AI Studio is fine for showing a friend. A real shop needs its own address on the internet. You have three levels:

1. A share link from the tool. Quick and free, but it lives inside the tool and is public.
2. One-click publishing from a builder, such as publishing from Google AI Studio to Google Cloud Run (free for eligible accounts, up to 2 full-stack apps, as of October 2026).
3. Your own server, where you control everything: for example a small Linux server on Amazon Web Services (AWS EC2).

Level 3 is where an AI coding agent helps: a tool that can run commands for you, not only write code. That is a big topic, and we cover it step by step in a separate AWS chapter.

A deploy prompt you can use later, once you have a server from that chapter:

I have a single file index.html for a small shop page. I have an Ubuntu server
on AWS EC2 with a public IP (I will paste it when you ask). Explain, step by step,
how to install a web server, copy my file to it and check it in my browser.
Before any command that changes the server, tell me what it does.

Expected output (yours will be similar, not the same): a numbered list of steps, with a short explanation before each command. Never paste passwords, private keys or access keys into a chat.

7. The 6-point test for any AI-made page

Before you share any page, check all six:

1. Phone: open it on a real phone. Is the text readable without zooming?
2. Every link and button: click each one. Does it go where it should?
3. Words: read every line aloud. Any fake text, wrong prices or wrong facts?
4. Images: does each image have alt text, and are you allowed to use it?
5. Placeholders: have you replaced every dummy number, email and address?
6. Privacy: does the page ask for, or show, anything private? If it collects data, stop and get help.

8. Worked example 4: kirana landing page in Lovable

Suppose Meera's cousin runs Shivam Kirana in Nashik and needs a one-page site: shop name, WhatsApp order button, and today's offers. Lovable builds a full preview from chat. Plans and free limits change — check lovable.dev before you promise a client.

Prompt (paste in Lovable):

Build a simple one-page website for Shivam Kirana, a neighbourhood grocery shop in Nashik.
Sections: hero with shop name and 'Order on WhatsApp' button (link placeholder https://wa.me/91XXXXXXXXXX),
Today's offers (3 cards: atta 5kg, milk 1L, oil 1L — use sample prices),
Store hours Mon–Sat 8am–9pm, Sunday 9am–1pm,
Footer with fake address '12 Market Road, Nashik' and a note that prices are samples.
Mobile-first, clean, Hindi+English labels on buttons is OK but keep body English.
No payment gateway, no login, no fake customer reviews.

Expected output (yours will be similar, not the same): a live preview you can click on phone width. Health-check phrase: EXPANDOCT23-LOVABLE-KIRANA-LANDING. Replace the WhatsApp number before sharing. Run the 6-point test from this chapter.

9. Worked example 5: quiz app with Replit Agent

Suppose a coaching class wants a 5-question GST basics quiz students can open in a browser. Replit Agent can scaffold and run the app in the cloud. Replit free tiers and Agent access change — check Replit's pricing page.

Prompt:

Create a simple web quiz: 5 multiple-choice questions on GST basics for Indian students.
Show one question at a time, then a score page out of 5 with short explanations.
No login, no database. Use plain HTML/CSS/JS or a simple React page.
Questions must be educational, not legal advice. Include a footer: 'For learning only'.

Steps after the preview appears:

1. Click through all 5 questions on your phone browser.
2. Ask the Agent to fix any broken Next button.
3. Do not paste student mobile numbers into the app.

10. Worked example 6: UI cards in v0, then export

Suppose you need three neat offer cards for the kirana page (UI only). v0 by Vercel is strong at React/Tailwind UI blocks you can copy into your project. Check v0.app for current free generations.

Prompt:

Three responsive product offer cards in a row on desktop, stack on mobile.
Each card: product title, sample price in INR, 'Add to WhatsApp list' button.
Titles: Atta 5kg, Milk 1L, Sunflower oil 1L. Use clean Tailwind. No stock photos of real brands.

Expected output (yours will be similar, not the same): a component preview. Copy the code into your Lovable/Replit project or VS Code. Always test on a real phone width.

11. Beginner mistakes and quick fixes

12. Try at home

Recap

Build one small page this week, break it on purpose, and ask AI to fix it. Testing is the skill that turns a pretty preview into a page people can use.

Previous chapter: Copyright, Bias and Fair Use of AI Images and Text

Next chapter: Learn Python with ChatGPT: Write, Run and Fix Your First Programs

Ravindra Bagale, trainer: linkedin.com/in/ravindra-bagale. Meera, her shop and the prices on this page are made up for learning, and the phone numbers are dummy placeholders. Tool features were checked on Google's Gemini Canvas and AI Studio help pages on 23 October 2026. The checker output was produced on 19 October 2026. AI output changes every time, so your output will be similar, not the same.