Vibe Coding · บทเรียน

สิ่งที่คุณสร้างได้

แอป เว็บไซต์ เกม และเครื่องมือ — ด้วยการเขียนพรอมป์

บทเรียน 3 จาก 413 ขั้นตอน

สิ่งที่คุณสร้างได้ เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vibe Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

So... What Can You Build?

So what can you build? Short answer: a lot. The same skill — describing what you want — makes websites, apps, games, and tools. Let's tour what's possible.

Websites and Landing Pages

The easiest start: web pages — a portfolio, a landing page, a simple blog. Tools like v0 and Lovable turn one line into a polished page in seconds.

Build a landing page for a coffee shop called "Bean There" with a hero image, a menu section, and an opening-hours block.

Interactive Web Apps

Beyond static pages, you can build apps that do things: a to-do list, a budget tracker, a quiz. They react to clicks and typing, and AI wires up the logic.

Make a tip calculator: I enter the bill amount and tip percent, and it shows the tip and total.

A Tiny App in Action

Here's the kind of logic behind a tip calculator — the part the AI writes for you. Run it to see it work.

const bill = 60;
const tipPercent = 18;
const tip = bill * (tipPercent / 100);
const total = bill + tip;
console.log("Tip: $" + tip.toFixed(2) + ", Total: $" + total.toFixed(2));

Games and Fun Stuff

Yes, games too — a guessing game, memory match, a clicker. They're visual and instantly fun to test. Describe the rules, and let AI build the playground. 🎮

Build a number guessing game: the computer picks a number 1-100, I guess, and it tells me higher or lower until I win.

Tools and Automations

You can build small tools that save time: a unit converter, a password maker, a CSV cleaner. Later, even automations that run multi-step tasks for you.

Make a tool that converts a list of temperatures from Celsius to Fahrenheit and shows them in a table.

Apps with Real Data

Real apps store and fetch data — saving notes, loading weather, pulling headlines. You don't need to master databases; describe the data and AI handles the plumbing.

Show today's weather for a city I type in, using a free weather API, with the temperature and a simple icon.

Beautiful Interfaces

It doesn't have to look plain. Describe a look and feel — colors, layout, dark mode — and AI styles it. Tools like v0 shine at clean, modern components.

Give it a modern look: soft purple gradient background, white rounded cards, and large friendly buttons.

Full Products and Startups

This scales up. Founders use vibe coding to build MVPs and even launch real businesses, going from idea to a live product with tools like Bolt, Replit, and Vercel.

Start Small, Dream Big

Here's the secret: start tiny. Your first build should be small enough to finish — one page, one tool. Finishing builds momentum, then the big stuff comes.

A simple page that shows a random motivational quote each time I click a button.

Picture Your First Project

Take a moment. What's one small thing you'd love to exist — a page about your hobby, a tool for a boring task? Hold that idea; by track's end, you'll have built it.

Quick Check

Which is the best first project for a new vibe coder?

Recap: The Possibilities

You saw the range: websites, apps, games, tools, data, and even full products. Best advice: start small, dream big. Next, let's see how this track works!

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
25
บทเรียน
100

คำถามที่พบบ่อย

บทเรียน “สิ่งที่คุณสร้างได้” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สิ่งที่คุณสร้างได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สิ่งที่คุณสร้างได้”

แอป เว็บไซต์ เกม และเครื่องมือ — ด้วยการเขียนพรอมป์ คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “สิ่งที่คุณสร้างได้” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม

ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. แนวคิดการเขียนโค้ดแบบ Vibe
  2. จากการพิมพ์โค้ดสู่การพูดคุยกับปัญญาประดิษฐ์
  3. สิ่งที่คุณสร้างได้
  4. เส้นทางการเรียนนี้ทำงานอย่างไร
← กลับไปที่ Vibe Coding