Zero to Website | KrackedDevs

Chapter 01 · Learn0:00 to 0:20You know the three layers of a website, and the chat from the builder.

Learn · Zero to Website

Tonight you can leave with a live website and a way to talk about it.

No coding experience needed. You will plan with an AI coach, build in a browser, publish to a real link, and pitch it in sixty seconds.

What are you here to make?

A useful websiteA personal toolA community ideaI'm not sure yet

You are ready whenYour direction is marked on one of the four cards, including “I'm not sure yet”.

Next stop · 2 · Web basics

Ambassador notes

Say this: Nobody here needs to know how to code. You need one small idea, and we will find it together if you do not have one.
Ask this: What is one thing you wish existed for you, a friend, or a small business you know?
Watch for this: People apologising for not being technical, or waiting for permission to pick a card.
Move on when: Everyone has marked a direction, including the people who marked not sure yet.

If someone is stuck

Not sure yet is a real answer. The next few steps are how people find one.
Online tip: ask everyone to type their card choice in the chat. It warms the room up.

Learn · What a website is made of

Every website is three layers, and you will not type any of them.

HTML is the bones, CSS is the look, JavaScript is the behaviour. People used to write all three by hand. Now you describe the page and the AI writes them.

Watch first

One minute: the three layers, what AI changed, and what is still yours.

1HTML · The bonesWhat is on the page: headings, text, buttons, pictures, links.
```
<h1>Kedai Kopi Ali</h1>
<button>Order now</button>
```
2CSS · The lookHow it looks: colours, fonts, spacing, where things sit.
```
h1 { color: #166534; }
button { border-radius: 12px; }
```
3JavaScript · The behaviourWhat happens when you tap: a menu opens, a form sends, a number updates.
```
const btn = document.querySelector("button");
btn.onclick = () => alert("Order sent");
```

Before AI, and now

Before: A person typed all three layers by hand, line by line, and hunted every typo. A first website took days and a lot of searching.
Now: You describe the page in plain words. The AI writes all three layers in minutes.

What did not change: someone still decides what the page is for, checks that it works, and owns it. Tonight that someone is you.

Five words for tonight

Website: A page or set of pages anyone can open with a link.
Prompt: The instruction you write for an AI. Better instruction, better result.
Builder: An AI tool that turns your prompt into a real website you can open.
Publish: Putting the website on the internet so other people can open the link.
Deploy: The developer word for publish. Same thing.

What this gives youWhen the builder shows you code, you will know what you are looking at, and you will know that your job is to decide, check and own, not to type.

Next stop · 3 · AI words

Ambassador notes

Say this: Three layers. Bones, look, behaviour. You will see all three fly past in your builder tonight, and none of it is yours to type.
Ask this: If a button is the wrong colour, which layer is that? If it does nothing when tapped, which layer?
Watch for this: People trying to memorise the code samples. They are there to be recognised, not learned.
Move on when: The room can name the three layers and say which one changes the look.

If someone is stuck

You do not need to understand the code yet.
Play the one-minute film together first; it shows all three layers coming apart. On a screen-share, go fullscreen with captions on and share the sound: inline it is too small to read on a phone.

Learn · The AI words, sorted

The chat you plan in is not the same thing as the builder you build in.

Four different things get called AI. Tonight you use two of them: a chat to plan, and a builder to make the page. Sort the names to see the difference.

1. Pick a name

2. Put it in a layer

Pick a name first.

If it helps, one comparison, used once and then dropped.

Model: the engine
Chat workspace: the counter where you place the order
Builder: the kitchen that makes the meal
Your prompt: the order you give

What this gives youYou will know which tab to open. The chat writes words about your project. The builder makes the website itself.

Next stop · 4 · Your idea

Ambassador notes

Say this: A model is the engine. A chat is where you talk to it. A builder makes the thing. Tonight: chat first, builder second.
Ask this: Which one would you open to plan? Which one to get a real page?
Watch for this: Learners believing every AI brand is the same thing, or opening the builder before they have a plan.
Move on when: The room can separate a chat from a builder.

If someone is stuck

Use the analogy once, then drop it. It stops helping after that.

Chapter 02 · Plan0:20 to 0:40Your idea is one page for one person, and its build prompt is pasted in the deck.

Plan · Your idea, your words

One person. One problem. One page.

Write it your way: who it is for, what annoys them today, and the one thing they can do on your page. Stuck? Tap a starter, then make it yours.

Who is it for?

One kind of person or group. A role, not a real name.

Stuck? Tap one, then make it yours:

What is annoying for them today?

The pain they have now. Painkiller, not pills.

Stuck? Tap one, then make it yours:

What can they do on your page?

One action. If you wrote “and” twice, cut one.

Stuck? Tap one, then make it yours:

Give it a name (optional)

A working title is fine. You can change it later.

Answer the three questions and your idea appears here, in your own words.

Too big, then smaller

A food delivery app for all of Malaysia.A menu page for my mum's kuih, with one Order on WhatsApp button.
A platform to manage every club on campus.One page that shows what my club is doing this week.
A tutoring marketplace with payments.A page where first-years can book a free study session with me.

You are ready whenYour three answers are on screen and your idea sentence has appeared, in your own words.

Next stop · 5 · Plan in chat

Ambassador notes

Say this: Painkiller, not pills. Who suffers most, and what do they do about it today? That is your idea.
Ask this: Who wants to read their idea sentence out, or paste it in the chat?
Watch for this: People tapping a starter and moving on without making it theirs, and ideas with logins, payments or the word platform in them.
Move on when: Everyone has an idea sentence on screen, and a few have been shared in the chat.

If someone is stuck

Let us shrink the idea, not abandon it.
That is a version-two feature.
Think of one real person you know with this problem. Write it for them.

Plan · Plan with the KD Master Prompt

Let the AI interview you, then write the build prompt for you.

Copy the KD Master Prompt into a free chat. It asks you one question at a time and ends with a block called BUILD PROMPT, written to work in any AI website builder. Paste that block back here so you do not lose it.

Watch first

Ninety seconds: the whole trip, from this page to a link on your phone. Watch it once before you start.

Your idea sentence is already inside it. Paste the whole thing as the first message in a new chat.

Your KD Master Prompt

You are a KrackedDevs build coach. I am a beginner at a KrackedDevs session and tonight I will build one small website with an AI website builder of my choice. Your job is to interview me, then write the exact prompt I will paste into that builder.

How to work with me:
- Ask ONE question at a time and wait for my answer.
- With each question, offer 4 or 5 concrete options, then say "or type your own".
- Plain words. If you must use a technical word, explain it in one line.
- I may answer in English, Malay, or a mix. Reply in the language I use.
- Keep me small: one page, one kind of visitor, one main action. If I describe something big, help me shrink it. Do not refuse it.
- Do not write the final prompt until every question below is answered.

My starting idea: I do not have one yet. Start by helping me find one.
If my starting idea already answers a question below, show me what you understood and ask me to confirm it, instead of asking it fresh.

Ask me, in this order:
1. Who is this for? One kind of person, and what they struggle with today.
2. What is the one thing a visitor should be able to do on this page?
3. A name for the site.
4. The 3 to 5 sections the page needs, in order.
5. The words for those sections: a headline, one line under it, and a short line for each section. Draft them for me, then let me change them.
6. The look: colours, mood, simple or bold. Offer a few styles I can pick from.
7. Anything the page must not have in version one. My answer may be "nothing".

When we are done, reply with ONE block titled BUILD PROMPT, written as an instruction to an AI website builder. Do not name a builder or rely on one builder's features: it must work the same when pasted into any of them. Include:
- the site name, who it is for, and the problem it solves
- the one main action and where it sits on the page
- the sections in order, with the agreed words written out in full
- the style direction, with a colour palette that fits the idea
- mobile-first, fast, readable, generous spacing, realistic sample content, no placeholder text, no generic gradients
- use AI-generated images where they help, such as a hero image or a picture for each section, and keep them relevant to the idea
- version-one constraints: one page, no login, no payments, no database, no external services, and do not add features I did not ask for
- if anything must be remembered, keep it in the browser only for version one; do not turn on any database, cloud or backend feature the builder offers
- the page will be public: made-up contact details and names only, never real ones
- this exact line: "Before you build, show me your plan in five lines and wait for my OK."
- a checklist of five things I can check on the finished page

After the block, add one line telling me to read the whole prompt before I paste it.

Open a free chat in a new tab

Any one of these. Use the one you already have an account for. Free is fine.

ChatGPT Gemini Claude

Paste the BUILD PROMPT back here

The last block the chat gives you. Paste all of it, so it is on this page when you need it. Made-up names and numbers only.

0 of 12000 characters

Saved in this browser tab only. Nothing is sent anywhere, and closing the tab clears it.

You are ready whenThe BUILD PROMPT from your chat is pasted into the box on this page, in your own project's words.

Next stop · 6 · Pick a builder

Ambassador notes

Say this: Paste the master prompt, answer one question at a time, short answers, Malay or English. When it gives you the BUILD PROMPT, copy the whole block and paste it back on this page.
Ask this: Has your chat asked you question one yet? Say so in the chat.
Watch for this: People answering everything in one giant message, accepting a build prompt they have not read, or losing it by closing the chat.
Move on when: Most of the room has a build prompt pasted back, and the rest have been paired with someone who does.

If someone is stuck

Play the ninety-second film first: it shows the whole trip, so nobody gets lost between tabs. On a screen-share, go fullscreen with captions on and share the sound.
Keep this page's tab open: the pasted prompt is kept in this tab only, and closing it clears the box.
If the chat writes code, tell it: do not write code, just ask me the next question.
Read the build prompt once. If a section is wrong, tell the chat to fix that one thing.
Nothing private goes into the chat. Use made-up names and numbers.

Chapter 03 · Build0:40 to 1:10A first version of your page is on screen in your builder.

Build · Your builder tonight

Pick your builder, then open it.

Three AI website builders, one build prompt: it works the same in each. Lovable is our pick tonight; v0 and Bolt are just as good a home for it. Sign up with a new account so you start with free credits. If one blocks you, paste the same prompt into another.

Names, limits and features change. Check what you see today.

Our pick tonight
Lovable
AI website builder
A browser-based builder. You paste a written brief, it builds a real website, and one button publishes it to a public link.
Tonight's build: one page from your build prompt, published to a link you can share.
Open lovable.dev
v0
AI website builder
A browser-based builder from Vercel. Paste the same build prompt, read its plan, and it builds the page.
A good second choice, or your first if you already have a Vercel account.
Open v0.app
Bolt
AI website builder
A browser-based builder from StackBlitz. Paste the same build prompt and it builds the page in your browser.
Another choice if Lovable or v0 blocks you, or if you already use it.
Open bolt.new

Working in Lovable

You need: Open lovable.dev and sign up with a new account tonight. Use an email you can open right now.
Do this first: Paste your build prompt as the first message. Read the plan it replies with before you let it build.
Worth knowing: Make a new Lovable account tonight so you start with free credits. A first build with images uses about two, and the plan reply uses one more, so ask for one fix at a time. If your credits show zero, use v0 instead.
Done for today looks like: One page you can open on your phone, published at a lovable.app link, with one fix you asked for yourself.
If it blocks you: Keep your build prompt. It is still tonight's result. If sign-in fails or your credits show zero, paste the same prompt into v0 or Bolt.

Account or card may be required
Free tier or trial

Before you open it

Am I signed in to my builder, and does it show free credits or free use?
Is my build prompt pasted back into this page, so I will not lose it?
Am I clear that version one is one page, on purpose?
Is everything I am about to paste safe to share?
Do I know who I will show this to tonight?

You are ready whenOne builder is marked as yours on its card, and you are signed in to it with free credits or free use.

Next stop · 7 · Build

Ambassador notes

Say this: Pick one builder: Lovable is our pick tonight, and v0 and Bolt take the same prompt. Sign up with a brand new account so you start with free credits, and ask for one fix at a time. If one blocks you, move to another with the same prompt.
Ask this: Which builder did you pick, and are you signed in? Say it in the chat.
Watch for this: People stuck at sign-in, people who reused an old account and have zero credits, people typing a short message instead of pasting the build prompt, and people burning credits chatting.
Move on when: Everyone has a builder open, or has said in the chat that sign-in blocked them.

If someone is stuck

If sign-in fails or credits show zero, paste the same build prompt into another builder on the card. Free Lovable credits are granted only on the first six days of a month, so an old Lovable account may have none: a new one is the fix.
Nobody has to publish tonight unless they want to.
Someone already uses a builder that is not on the card? Let them: the build prompt names no builder. They mark the closest card here to move on.

Build · Paste, read the plan, build

One paste. Read the plan. Then say OK.

Paste your build prompt as the first message. The prompt asks your builder for a plan first: read it, cut anything you did not ask for, then let it build. If it builds straight away instead, that is fine. Read what it made and cut the extras in your next message.

Your build prompt is not here yet

Go back to the plan step, finish the chat interview, and paste the BUILD PROMPT block into the box.

You are ready whenYou have pasted your build prompt into your builder, checked its plan or its first build, and a first version of your page is on screen.

Next stop · 8 · Publish

Ambassador notes

Say this: Paste the whole prompt as one message. When the plan comes back, read it. If it added something you did not ask for, say so before it builds. If your builder skips the plan and builds straight away, that is normal: read what it made and cut the extras in the next message.
Ask this: What did the plan add that you did not ask for?
Watch for this: People skipping the plan and saying OK to everything, and people retyping the prompt by hand.
Move on when: Most of the room has a first page on screen, rough is fine.

If someone is stuck

The first result is allowed to be rough.
Describe what you saw, not how you felt about it.
The tool is not failing because you are bad at this. We are finding the next instruction.

Chapter 04 · Ship1:10 to 1:30A live link or a screenshot, a sixty-second pitch, and one next step.

Ship · Fix one thing, then publish

Fix one thing you noticed. Then press Publish and it is real.

Open the preview on your phone. Find one thing that is wrong, describe it in one message, and ask for that one change. Then publish. Publishing is free and the link is yours.

Before you publish, check three things

It opens on your phone and nothing is cut off.
The one main action works: the button, the form, the link.
There is no placeholder text. Every word is yours or the plan's.
Anyone with the link can see this page. No real phone number, address or full name on it, or in the address.

How to publish

Find the Publish or Deploy button. In Lovable it sits top-right in the editor, next to Share.
Keep the suggested address or type your own (no real name in it), then confirm.
Open the live link on your phone. If it loads there, it is live.
After any fix, publish again. The three checks above still apply.

Names, limits and features change. Check what you see today.

What counts as proof tonight

Best: a live link that opens on someone else's phone.
Good: a screenshot of the preview and one sentence about the next fix.
Still counts: your build prompt, if the builder would not let you in.

You are ready whenYour page opens at its live link on your phone, or you have a screenshot of the preview and a sentence about what you would fix next.

Next stop · 9 · Pitch

Ambassador notes

Say this: One fix, in one message: what happened, where, what you expected, what must stay the same. Then Publish, top right. Open the link on your phone. That is a real website.
Ask this: Who has a live link? Paste it in the chat.
Watch for this: People polishing forever instead of publishing, and people asking for five changes in one message.
Move on when: Links are appearing in the chat, and everyone else has a screenshot.

If someone is stuck

Let us test the actual screen.
Publishing from the Publish button is free, even with zero credits left.
A screenshot and one sentence about the next fix still counts.

Ship · Pitch what you published

Sixty seconds. Six slides. Who it helps and why it is better.

Go back to your chat and paste the KD Pitch Prompt. It writes a six-slide outline, a 60-second script and three hard questions, under the host's rules: clear wording, bold and realistic, painkiller not pills.

Clear wordingThe audience reads the slide while you talk. If they cannot understand it without you, rewrite it.
Not an assignment presentationNo bullet walls, no logos for the sake of it, nothing on a slide that does not earn its place.
Bold, and realisticSay what it does today and what it will do next. Do not pretend version one is the finished product.
Painkiller, not pillsName who suffers most, what they do today, and why yours is better. Then always ask why.
Know your judgeA founder, an investor and a celebrity judge want different things. Pitch to the person in front of you.

Paste this into the same chat you planned in. Replace the bracket with your live link first.

Your KD Pitch Prompt

You are a KrackedDevs pitch coach. I just published a small website and I need a short pitch for it: a six-slide outline and a 60-second talk.

What I built: a small one-page website I built tonight
Live link: [paste your live link here]

Rules from my host:
- Clear wording. The audience should understand each slide without me talking.
- Not an assignment presentation. Bold, realistic, nothing unnecessary on a slide.
- Painkiller, not pills: name who suffers most, what they do today, and why this is better.
- Do not invent numbers. If a number is a guess, say so.

Give me:
1. Six slides, each with a title and two or three short lines: Title; Problem (who suffers most, what it costs them, why now); Solution (the live link, one screenshot note, how it works in three steps); Who it is for and how many (TAM, SAM, SOM in plain words); What is next (after tonight, in a year, in five years); The ask.
2. A 60-second script I can read aloud, in the language I write to you in.
3. Three questions a judge might ask, each with a one-line answer.

Ask me at most two questions first if something important is missing. Otherwise, write it.

The six slides it will write

Title. Name, one line on what it does, one picture of the page.
Problem. Who suffers most, what it costs them, why now.
Solution. The live link, one screenshot, how it works in three steps.
Who it is for, and how many. TAM, SAM, SOM in plain words. Real numbers or say it is an estimate.
What is next. Your plan after tonight. In a year, in five years.
The ask. What you want from the room: feedback, users, a partner, a yes.

Turn the outline into a deck or a video

Slides: paste the outline into any slide maker you already use, or an AI slide tool, one idea per slide.
Video: open your live link on your phone, screen-record 60 seconds while you read the script.
Both are fine. One finished thing beats two half-finished ones.

From the host

AI is your teammate tonight: the marketing person, the researcher and the slides person. You are the one with the idea.
Stick with your idea. Do not change it at the last minute.
Beware of AI making things up. If a number matters, check it or label it as a guess.
Ask a second AI chat to review your pitch before you present it.

The full ten-slide template, for a hackathon

Title
The problem
The solution
Market size (TAM, SAM, SOM)
Business model
Go-to-market
Traction
Competition
Team
Call to action

You are ready whenA six-slide outline and a 60-second script for your page are in your chat, in your own words.

Next stop · 10 · Finish

Ambassador notes

Say this: A pitch is not an assignment presentation. Clear words the audience can read without you. Who suffers most, why yours is better, what is next. Sixty seconds.
Ask this: Who wants to pitch theirs to the room right now? Sixty seconds, screen share your link.
Watch for this: Slides full of bullet walls, made-up market numbers, and people pitching the five-year version instead of the page they have.
Move on when: Two or three people have pitched, or everyone has an outline in their chat.

If someone is stuck

Pitch the page you have, then say what comes next.
If a number is a guess, say it is a guess.

Ship · Show it, keep it, keep going

Start small. Make it real. Show someone tonight.

You are done when you have something to show and one sentence about what comes next. A live link, a screenshot or a build prompt all count. Mark how far you got and copy your card.

How far did you get tonight?

Every one of these is a real result. Pick the highest one that is honestly true.

UnderstandI can say what the three layers of a website are, and which AI tool does what.
PlanI have a build prompt an AI coach wrote with me, in my own project's words.
BuildI have a first page I can open in the builder.
ImproveI asked for one specific fix myself and it changed.
PublishMy page is live at a link I can send to someone.
PitchI have a six-slide outline or a 60-second script, and I can say who it helps and why.

My next step

One thing, small enough to do this week.

Show this to

Who they are to you, not their name.

Whatever you have, show it to one person tonight and say what you would add next.

Start small. Make it real. Show someone tonight.

You are ready whenYou have marked how far you got tonight and written one next step.

Last stop

Ambassador notes

Say this: Show what exists, say what is next, and do not pretend the first version is finished. Then come to the KD community and post your link.
Ask this: Who will you show this to tonight?
Watch for this: People hiding imperfect work, and people leaving without copying their card or their build prompt.
Move on when: Everyone has marked a level, and the links are in the chat.

If someone is stuck

Whatever you have, show it to one person and say what you would add next.