Learn
We explain the idea using simple words.
Start the Guide →
Free online guided eBook • No coding experience required
EVERYBODY STARTS HERE
Welcome to Vibe Coding Knows No Boundaries
This guide was created for people who are starting from zero.
What does “starting from zero” mean?
It means you do not need to know how to code.
You do not need to know what HTML, CSS or JavaScript mean yet.
You do not even need to understand how a website is made.
We will explain those things together.
HOW THIS GUIDE WORKS
We Will Learn One Small Step at a Time
This is not a book that only tells you what something means. You will actually try things while you learn.
See
We show you an example.
Try
You follow one clear instruction.
Check
We tell you what you should see.
Understand
We explain why it happened.
Fix
If it did not work, we help you check it.
Build
You use what you learned to create something.
FIRST WORD TO KNOW
What Is AI?
AI
AI means Artificial Intelligence.
AI is technology that can work with information and produce useful responses or results.
Different AI tools can do different things.
Simple examples
Some AI tools can help with writing.
Some can work with pictures.
Some can help explain information.
Some can help us work with code.
Important
AI can make mistakes.
We still need people to think, check, decide and understand what is being created.
MEET OUR MAIN AI TOOL
What Is ChatGPT?
ChatGPT is an AI assistant created by OpenAI.
Think of it like a conversation.
You type what you need.
ChatGPT responds.
You can then ask another question, request a change, ask for an example, or say that you do not understand.
You
I have never coded before. Please explain what a webpage is using simple words.
ChatGPT
A webpage is one page that you can view in a web browser. It can contain words, pictures, buttons and other things.
ANOTHER WORD TO KNOW
What Is Coding?
Coding is a way of writing instructions that a computer can understand and follow.
Think about a recipe.
A recipe gives instructions in an order.
Code also contains instructions.
The computer follows those instructions to help produce a result.
A tiny example:
<h1>Hello!</h1>Do I need to memorize that?
No.
For now, just know that this little piece of HTML can tell a browser to show a large heading that says:
Hello!
NOW THE BIG QUESTION
What Is Vibe Coding?
In this guide, Vibe Coding means using ordinary language to work with an AI assistant such as ChatGPT while creating something with code.
💭
1. You have an idea.
↓
💬
2. You explain the idea to ChatGPT.
↓
💻
3. ChatGPT can help create or explain
code.
↓
👀
4. You look at the result.
↓
🛠️
5. You test, change and improve it.
BuildFrame Principle
AI is part of our development toolkit—not a replacement for software development.
Our goal is not to teach you to blindly copy whatever AI produces.
We want you to begin understanding what you are building.
TALKING TO CHATGPT
What Is a Prompt?
A prompt is simply the message or instruction you give to an AI tool.
💬 Example Prompt
I am completely new to coding. Help me create a very simple webpage. Please explain one step at a time using simple words.
Why is this useful?
We told ChatGPT that we are new.
We explained what we want to create.
We asked for one step at a time.
We asked for simple words.
LET'S LEARN THE LANGUAGE
A Few Digital Words You Will See
You do not need to memorize these. We will use them again during the projects.
Browser
A program used to open and view websites.
Examples: Chrome, Edge, Firefox, Safari.Webpage
One page that you can view in a browser.
Folder
A place on your computer where related files can be kept together.
File
Something saved on your computer, such as a picture, document or webpage file.
Link
Something you can click to go to another page or location.
Save
Store the changes you made so they are not lost.
THREE NAMES YOU WILL MEET
HTML, CSS and JavaScript
These names may look technical now. Let's make them simple.
HTML
HTML gives a webpage its basic structure and content.
Think: the structure of a house.CSS
CSS controls how the webpage looks.
Think: colors, decoration and appearance.JavaScript
JavaScript can help a webpage react and do things.
Think: behavior and actions.BEFORE THE FUN BEGINS
A Few Simple Safety Rules
Keep private information private.
Do not paste passwords, banking details or other sensitive private information into a prompt.
AI can be wrong.
Check important information instead of assuming every answer is correct.
Look before you copy.
When ChatGPT gives us code, we will try to understand what the important parts are doing.
Younger learners need guidance.
Children should use online tools with appropriate parent, guardian or teacher guidance and follow the service's age requirements.
🎉
Foundation Complete!
You have already met AI, ChatGPT, coding, Vibe Coding, prompts, browsers, files, folders, HTML, CSS and JavaScript.
You do not need to remember everything.
Now we're going to use these ideas.
🧒 KIDS CHAPTER
Imagine It. Create It. Make It Move!
Two fun beginner projects are waiting for you.
Let's Play & Build →🌟 WELCOME, CREATOR!
You Have an Idea. Let's Make Something!
We are going to make two tiny animated stories using pictures, words and simple code.
Choose a story below. Click the button under your choice to start the step-by-step tutorial.
🌸🦋✨
Mia's Magical Garden
Make a colorful little story with a garden, butterflies and a magical flower.
🌸 Start Mia's Tutorial
🚀🪐⭐
Leo's Space Adventure
Launch a rocket, travel through the stars and discover a tiny planet.
🚀 Start Leo's Tutorial💡 Important!
Anyone can choose either story.
Or you can change the story and create your own idea.
🌸 KIDS PROJECT 01
Mia's Magical Garden Step-by-Step Tutorial
We are going to create a tiny magical garden webpage with words, colors, flowers and a butterfly.
🎯 What are we making?
A small webpage about Mia discovering a magical flower in her garden.
We will ask ChatGPT to help us create it.
🧰 What do you need?
You need ChatGPT, a computer, and the program you are using to work with your code.
Don't worry if you do not know what to do yet. We will take it one small step at a time.
💬 Your First Prompt
I am completely new to coding. Help me create a very simple webpage called Mia's Magical Garden. It should have a garden, colorful flowers, a butterfly and a magical flower. Please use simple HTML, CSS and JavaScript. Teach me one small step at a time. Tell me exactly what file to create, where to paste the code, how to save it and what I should see. Please use simple words and do not assume I know how to code.
👆 What do I do with that prompt?
Click Copy Prompt.
Open ChatGPT and paste the prompt into the message box.
Then send the message.
🛑 Stop after ChatGPT gives you the first step.
Do not rush through all the instructions at once.
Complete one step, look at what happened, and then continue.
MIA'S MAGICAL GARDEN - STEP 2
Choose Where You Will Build
ChatGPT can help us create the code. Now we need a place where we can use that code to build Mia's webpage.
Your Building Workspace
You may be using Webby, GHL, HLA, an online website builder, a code editor, or another platform that accepts website code.
Different tools may look different, and that is okay.
Some tools have separate areas for HTML, CSS and JavaScript.
Other tools may let you place code together in one custom-code area.
HTML
This gives the webpage its content and structure.
CSS
This helps control the webpage's appearance and design.
JavaScript
This can give the webpage behavior and actions.
Your screen may look different.
Look for words such as HTML, CSS, JavaScript, Custom Code, Embed, Code or something similar.
The exact name and location depend on the tool or platform you are using.
What are we learning?
We are not learning one particular website-building tool.
We are learning how to work with AI, understand the pieces it creates, place those pieces in an appropriate building workspace, and test the result.
MIA'S MAGICAL GARDEN - STEP 3
Let's Create the HTML
HTML gives our webpage its content and basic structure.
What will our HTML contain?
For Mia's Magical Garden, our HTML can include the title, welcome message, garden, flowers, butterfly, magical flower and magic button.
Think of HTML as the part that tells the webpage what should be there.
Where will the HTML go?
That depends on the tool you are using.
Your platform may have an area called HTML, Custom HTML, Custom Code, Embed, Code or something similar.
If you are using a code editor, HTML is commonly placed in a file such as index.html.
You do not need to create anything yet. In the next step, we will ask ChatGPT to help us create the HTML.
Remember the important part
The location may change depending on your building platform.
The job of HTML stays the same: content and structure.
MIA'S MAGICAL GARDEN - STEP 4
Ask ChatGPT for Our HTML
We know what HTML does. Now let's ask ChatGPT to help us create the HTML for Mia's Magical Garden.
Ask ChatGPT
Help me create the HTML for Mia's Magical Garden.
The webpage should have a title that says Mia's Magical Garden, a short welcome message, a garden area, colorful flower elements, a butterfly, a magical flower, and a button that says Make Some Magic.
Keep the HTML simple for a complete beginner. Give me the HTML in one code block.
I may be using a website builder, custom-code area, online coding tool or code editor, so do not assume I am using a specific platform.
After the code, briefly explain the important parts using simple words.
Send the prompt
Click Copy Prompt and send it to ChatGPT.
ChatGPT should give you a block containing the HTML code.
What should I copy?
Copy the complete HTML code block that ChatGPT gives you.
Do not include ChatGPT's explanation as part of your website code.
Put the HTML in your building workspace
Go to the tool or platform you are using to build the webpage.
Look for the appropriate HTML, Custom HTML, Custom Code, Embed, Code or similar area.
Place the HTML code there.
If your platform uses files instead, HTML may be placed in an HTML file such as index.html.
Save or apply your work
Your tool may use a button called Save, Apply, Update, Done or something similar.
Use the method provided by your chosen platform.
What did we just do?
We described what we wanted.
ChatGPT helped create the HTML.
We identified the code we needed and placed it in our building workspace.
That is part of the Vibe Coding workflow.
MIA'S MAGICAL GARDEN - STEP 5
Let's Make the Garden Beautiful!
HTML gave our webpage its content and structure. Now CSS can help us change how it looks.
Remember CSS?
CSS helps control the appearance of a webpage.
It can add colors, spacing, sizes, backgrounds and other visual effects.
Ask ChatGPT for the CSS
Now help me style Mia's Magical Garden with CSS.
Use the HTML you already created in this conversation.
Make the webpage cheerful, colorful and magical, with a soft sky, green garden, colorful flowers, a butterfly, a special magical flower and a beautiful Make Some Magic button.
Keep the CSS simple for a beginner and make the design work well on different screen sizes.
Give me the CSS in one code block. Do not assume I am using a specific building platform.
Copy the CSS
Send the prompt in the same ChatGPT conversation you are using for Mia's project.
This helps ChatGPT work with the HTML it already helped you create.
Copy only the CSS code block. Do not include ChatGPT's explanation as part of the code.
Where does the CSS go?
Go to your chosen building tool or platform.
Look for an area called CSS, Custom CSS, Styles, Custom Code or something similar.
Place the CSS there.
Some platforms may allow HTML and CSS together in one custom-code area.
If your tool uses separate code files, CSS is commonly placed in a file such as style.css.
Save or apply the change
Your platform may use a button called Save, Apply, Update, Done or something similar.
Use the method provided by the tool you are using.
What should change?
When the CSS is applied, Mia's webpage should begin to look more colorful and designed.
Your version may look a little different because AI can create different designs from the same idea.
That's okay.
What did we learn?
HTML gave us the content and structure.
CSS changed the appearance.
HTML ? content and structure
CSS ? appearance and designMIA'S MAGICAL GARDEN - STEP 6
Let's Make the Garden Do Something!
HTML gave us the content. CSS changed how it looks. Now JavaScript can help our webpage react and do something.
Remember JavaScript?
JavaScript can give a webpage behavior and actions.
For Mia's project, we will make the Make Some Magic button do something when it is clicked.
Ask ChatGPT for JavaScript
Ask ChatGPT to add simple JavaScript to Mia's Magical Garden.
Tell it to use the HTML and CSS already created in the same conversation.
When the Make Some Magic button is clicked, we want something fun and easy to notice to happen.
Copy the JavaScript
Send the prompt in the same ChatGPT conversation you have been using for Mia.
Copy only the JavaScript code block.
Do not include ChatGPT's explanation as part of the code.
Where does JavaScript go?
Go to your chosen building tool or platform.
Look for an area called JavaScript, JS, Custom JavaScript, Scripts, Custom Code or something similar.
Place the JavaScript in the appropriate area provided by your tool.
If your tool uses separate code files, JavaScript is commonly placed in a file such as script.js.
Some website builders may combine code or have special rules for JavaScript. Follow the method provided by your platform.
Save or apply your work
Your platform may use a button called Save, Apply, Update, Done or something similar.
Use the method provided by the tool you are using.
Three pieces, three jobs
HTML ? content and structure
CSS ? appearance and design
JavaScript ? behavior and actionsYour building platform may change. These basic ideas stay useful.
MIA'S MAGICAL GARDEN - STEP 7
Preview and Test Your Website!
We have worked with HTML, CSS and JavaScript. Now it is time to see the result and test whether our webpage works.
Find your preview
Go to the building tool or platform you are using.
Look for a way to see or test your webpage.
Your platform may call this Preview, View, Run, Test, Open or something similar.
Use the preview or testing method provided by your chosen platform.
What should you see?
Look for the main parts of Mia's Magical Garden.
Mia's Magical Garden
Welcome message
Garden
Colorful flowers
Butterfly
Magical flower
Make Some Magic buttonYour version may look a little different because AI can create different designs from the same idea.
That is okay.
Test the magic
Find the Make Some Magic button and click it.
Something noticeable should happen, such as a glow, movement or cheerful message.
If something happens, your webpage is responding.
Changed something?
If you change your code, use the Save, Apply, Update, Done or similar method provided by your platform.
Then preview or test the webpage again.
This simple habit helps you check whether your latest change worked.
Look what you just did!
YOUR IDEA
|
ASK CHATGPT
|
HTML
|
CSS
|
JAVASCRIPT
|
PREVIEW
|
TEST
|
IMPROVEYou did not need to memorize all the code before you started.
You learned what the pieces do, asked AI for help, used the code and tested the result.
🚀 KIDS PROJECT 02
Leo's Space Adventure Step-by-Step Tutorial
We are going to create a tiny space adventure webpage with stars, a rocket and a little planet.
🎯 What are we making?
A small webpage about Leo launching a rocket, traveling through the stars and discovering a tiny planet.
We will ask ChatGPT to help us create it.
🧰 What do you need?
You need ChatGPT, a computer, and the program you are using to work with your code.
We will take it one small step at a time.
💬 Your First Prompt
I am completely new to coding. Help me create a very simple webpage called Leo's Space Adventure. It should have a rocket, stars, space and a tiny planet. Please use simple HTML, CSS and JavaScript. Teach me one small step at a time. Tell me exactly what file to create, where to paste the code, how to save it and what I should see. Please use simple words and do not assume I know how to code.
👆 What do I do with that prompt?
Click Copy Prompt.
Open ChatGPT and paste the prompt into the message box.
Then send the message.
🛑 One step at a time.
When ChatGPT gives you instructions, do not rush through everything at once.
Complete one step, check what happened, and then continue.
⚡ MISSION 01
Build Your Digital Space
Pick something you enjoy. We will turn it into a webpage.
🏆
Your first mission
Choose what your webpage will be about. No code yet. Start with your idea.
🌈 ADULTS & EVERYONE IN BETWEEN
Turn an Idea Into Something Useful
Personal. Creative. Professional. You choose the purpose.
Build Something Real →YOUR PRACTICAL BUILD
Your First Useful Website
The same lesson can become different things. Choose what is useful to you.
Personal Page
Introduce yourself and your interests.
Service Page
Explain a service you provide.
Portfolio
Show examples of your work.
Idea Page
Turn an idea into a simple digital presentation.
PRACTICAL APPLICATION
What Could This Mean for Your Work?
Vibe Coding can also be used to explore simple digital ideas connected to your profession or business.
01
Start with a real need.
Example: You provide a service and want customers to understand what you do.
02
Describe it simply.
Tell ChatGPT what the webpage needs to explain.
03
Build a simple first version.
Test the page, read it and improve it.
Beginner project ≠ complete business system
A real business system can require more, including data, security, accounts, integrations, testing and maintenance.
This guide is helping you understand the beginning.
OUR GENTLE PROJECT
Create a Family Memories Page
We will make a simple webpage where you can place a family photograph and write a short memory.
1
First, we will decide what memory to share.
You do not need to open anything yet.
Think of one photograph or one family memory that makes you smile.
✓ That's all for this step.
When you are ready, we will take the next small step.