Vibe Coding · درس

ما الذي يمكنك بناؤه

تطبيقات ومواقع وألعاب وأدوات — باستخدام التوجيهات

ما الذي يمكنك بناؤه درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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!

الأسئلة الشائعة

هل درس «ما الذي يمكنك بناؤه» مجاني؟

نعم — نص درس «ما الذي يمكنك بناؤه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «ما الذي يمكنك بناؤه»؟

تطبيقات ومواقع وألعاب وأدوات — باستخدام التوجيهات تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «ما الذي يمكنك بناؤه»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

عقلية البرمجة بالإحساس
من كتابة التعليمات البرمجية إلى التحدث مع AI
ما الذي يمكنك بناؤه
كيف يعمل هذا المسار

← العودة إلى Vibe Coding