पहला संस्करण बनाना
कृत्रिम बुद्धिमत्ता से कार्यशील प्रारंभिक बिंदु तैयार करवाएँ।
पहला संस्करण बनाना, CoddyKit पर वाइब कोडिंग का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह वाइब कोडिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सचमुच बनाने का समय
आपके पास बनाने योग्य विचार है। अब वाइब कोडिंग का जादुई क्षण आता है: आप वह विचार AI को देते हैं और उसे काम करने वाला पहला संस्करण बनाते हुए देखते हैं — अक्सर कुछ ही सेकंड में।
इस पाठ में आप सीखेंगे कि अपना प्रॉम्प्ट v0, Bolt, Lovable या Cursor जैसे टूल में कैसे दें, आउटपुट से क्या अपेक्षा रखें, और जब पहला संस्करण सही न हो (आमतौर पर ऐसा ही होता है — और यह ठीक है) तब कैसे प्रतिक्रिया दें।
अपना बिल्डर चुनें
अलग-अलग टूल, विचार एक ही: वर्णन करें, बनाएं, पूर्वावलोकन करें। आपके पहले निर्माण के लिए यह एक त्वरित मार्गदर्शिका है:
- v0 — प्रॉम्प्ट से सुघड़ UI बनाने के लिए शानदार।
- Bolt / Lovable — पूरे ऐप का वर्णन करें और ब्राउज़र में एक लाइव, संपादन योग्य प्रोजेक्ट पाएं।
- Replit — ब्राउज़र में बनाएं और चलाएं; AI वाला पूर्ण कोडिंग वातावरण।
- Cursor / Claude Code — ऐसा AI जो वास्तविक कोड संपादक में सीधे फाइलें लिखता है।
आपके बिल्कुल पहले ऐप के लिए, Bolt या Lovable जैसा ब्राउज़र ऐप-बिल्डर शुरुआत करने की सबसे आसान जगह है।
अपना प्रॉम्प्ट चिपकाएं
पहला संस्करण बनाना उतना ही आसान है जितना अपना निर्माण-प्रॉम्प्ट टूल के चैट बॉक्स में चिपकाकर भेज देना। पिछले पाठ में तैयार किया गया पूरा प्रॉम्प्ट इस्तेमाल करें — यह क्या है, इसका उपयोग कौन करता है, वे क्या करते हैं और इसकी वाइब।
यहां एक पूरे पहले-संस्करण का प्रॉम्प्ट है, जिसे आप अभी Bolt या v0 में डाल सकते हैं।
Build a single web page "Daily Water Tracker".
The user can:
- See a big counter starting at 0
- Tap a "+1 Glass" button to add a glass
- Tap a "Reset" button to set it back to 0
- See a short encouraging message when they reach 8 glasses
Style: clean and modern, centered card, soft blue colors, big friendly buttons.
Keep it as one self-contained page.‘पहले संस्करण’ का असली मतलब
पहला संस्करण अंतिम पड़ाव नहीं, बल्कि शुरुआत है। AI आपको ऐसा कुछ देता है जो चलता है और आपके शब्दों से मोटे तौर पर मेल खाता है। यह अधिकांश चीज़ें सही करेगा, लेकिन कुछ चीज़ें "गलत" होंगी।
यही पूरा वाइब-कोडिंग चक्र है: बनाएं → देखें → बदलाव मांगें → दोहराएं। पहली कोशिश में पूर्णता की अपेक्षा न करें। ऐसी किसी चीज़ की अपेक्षा करें जिस पर आप प्रतिक्रिया दे सकें — खाली पन्ने से शुरू करने की तुलना में यह बहुत तेज़ है।
प्रतिक्रिया देने से पहले परिणाम पढ़ें
जब AI काम पूरा कर ले, तो तुरंत अपना पूरा प्रॉम्प्ट दोबारा लिखने की इच्छा रोकें। पहले सचमुच देखें कि उसने क्या बनाया है:
- क्या मुख्य चीज़ काम कर रही है? (क्या बटन कुछ करता है?)
- क्या विन्यास मोटे तौर पर सही है?
- आपके प्रॉम्प्ट की तुलना में क्या छूटा हुआ या गलत है?
यह त्वरित समीक्षा आपको ठीक-ठीक बताती है कि अगली बार क्या मांगना है — यह आप पाठ 3 में सीखेंगे। अभी के लिए, आउटपुट बनाना और देख पाना ही सफलता है।
बनाए गए परिणाम पर एक नज़र
पानी-ट्रैकर वाले प्रॉम्प्ट से AI आपके लिए तर्क लिखता है। आपको इसे टाइप नहीं करना होगा — लेकिन इसे देखकर आपको भरोसा होगा कि आपके शब्द किस रूप में बदलते हैं।
काउंटर के तर्क को काम करते हुए देखने के लिए इसे चलाएं; यह ठीक उसी तरह का कोड है जिसे AI आपके प्रॉम्प्ट से बनाता है।
let glasses = 0;
const goal = 8;
function addGlass() {
glasses += 1;
if (glasses >= goal) return glasses + " glasses — goal reached! Great job!";
return glasses + " glasses so far. Keep going!";
}
function reset() { glasses = 0; return "Reset to 0."; }
console.log(addGlass());
console.log(addGlass());
for (let i = 0; i < 6; i++) addGlass();
console.log(addGlass());जब पहला संस्करण गलत दिखे
कभी-कभी AI आपको गलत समझ लेता है। काउंटर गलत संख्या से शुरू होता है, रंग सही नहीं होते या कोई बटन गायब होता है। यह सामान्य है और इसे ठीक करना आसान है।
सब कुछ फिर से न बनाएं। आपने जो चाहा था और जो मिला, उनके बीच के अंतर को लिख लें — वही अंतर आपका अगला निर्देश है। 70% सही पहला संस्करण एक शानदार पहला संस्करण है।
What I wanted: counter starts at 0, blue theme, two buttons.
What I got: counter starts at 1, gray theme, only +1 button.
Next instruction will simply close those gaps. No restart needed.अगर यह बिल्कुल न चले
कभी-कभी पहला संस्करण त्रुटि दिखाता है या खाली स्क्रीन दिखती है। घबराएं नहीं — और अभी खुद त्रुटि पढ़ने की कोशिश भी न करें। बस AI को साफ़-साफ़ बताएं।
ज़्यादातर बिल्डर टूल आपको त्रुटि चिपकाने या "Fix" पर क्लिक करने देते हैं, और AI अपना कोड खुद ठीक कर देता है। बाद में आप डीबगिंग पाठ्यक्रम में इस विषय को विस्तार से सीखेंगे।
The app shows a blank white screen and nothing happens when I click the button.
Here's the error from the console:
[paste the red error text here]
Please fix it so the button adds 1 to the counter, and tell me in one line what was wrong.खोजने के लिए अलग-अलग संस्करण बनाएं
AI बिल्डरों की एक शानदार खूबी यह है कि आप किसी एक विकल्प को चुनने से पहले विकल्पों को परखने के लिए एक साथ कई संस्करण मांग सकते हैं। जब आपको पता न हो कि आप क्या चाहते हैं, तब यह डिज़ाइन के लिए बहुत उपयोगी है।
इससे पहला संस्करण एक अकेले अनुमान के बजाय विकल्पों की सूची बन जाता है।
Generate 3 different visual styles for this water tracker:
1. Calm pastel and minimal
2. Bold and colorful with big rounded buttons
3. Dark mode with neon accents
Keep the same features in all three. I'll pick one to continue with.जो काम कर रहा है उसे बनाए रखें
जब आपको अपना पहला संस्करण पसंद आ जाए, तो चीज़ें बदलने से पहले उसे स्थिर कर लें। ब्राउज़र बिल्डरों में इसका अर्थ किसी संस्करण को सहेजना या वर्तमान स्थिति को लिख लेना हो सकता है।
इस तरह, अगर बाद का बदलाव कुछ बिगाड़ देता है, तो आप किसी ज्ञात, सही स्थिति पर लौट सकते हैं। वाइब कोडिंग तेज़ी से आगे बढ़ती है — सुरक्षित स्थिति रखने से यह तेज़ी लापरवाही में नहीं बदलती।
आपकी पहले-संस्करण जाँच-सूची
पहले संस्करण को इतना पूरा मानने से पहले कि उसमें बदलाव शुरू किए जा सकें, यह त्वरित जाँच-सूची देखें:
- पृष्ठ बिना त्रुटियों के लोड होता है।
- मुख्य कार्रवाई काम करती है (मुख्य बटन कुछ करता है)।
- विन्यास आपके वर्णन से मोटे तौर पर मेल खाता है।
- आप जानते हैं कि अगली बार कौन-सी 1-3 चीज़ें बदलनी हैं।
इन सभी पर निशान लगा दें और अगले पाठ के लिए तैयार हो जाएं: चैट करके बदलाव मांगना।
त्वरित जाँच
आपके AI बिल्डर ने एक ऐसा पहला संस्करण बनाया है जो काम करता है, लेकिन उसके रंग गलत हैं और एक बटन गायब है। अगला सबसे अच्छा कदम क्या है?
पुनरावलोकन: आपने पहला संस्करण बनाया
आपने अपने प्रॉम्प्ट को वास्तविक, चलने वाले पहले संस्करण में बदलना सीखा। याद रखें:
- अपना पूरा प्रॉम्प्ट Bolt, Lovable, v0 या Replit जैसे बिल्डर में चिपकाएं।
- पहला संस्करण शुरुआती बिंदु है — लगभग 70% सही होने की अपेक्षा रखें।
- प्रतिक्रिया देने से पहले समीक्षा करें: क्या काम कर रहा है और क्या गलत है, यह लिख लें।
- अगर यह बिगड़ जाए, तो त्रुटि चिपकाएं और AI को इसे खुद ठीक करने दें।
- बड़े बदलाव करने से पहले अच्छे संस्करण को सहेज लें।
अगला कदम: केवल चैट करके उस पहले संस्करण को ठीक वैसा बनाना जैसा आप चाहते हैं।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 25
- पाठ
- 100
अक्सर पूछे जाने वाले प्रश्न
क्या “पहला संस्करण बनाना” पाठ निःशुल्क है?
हाँ — वाइब कोडिंग अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “पहला संस्करण बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“पहला संस्करण बनाना” में मैं क्या सीखूँगा?
कृत्रिम बुद्धिमत्ता से कार्यशील प्रारंभिक बिंदु तैयार करवाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वाइब कोडिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या वाइब कोडिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वाइब कोडिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“पहला संस्करण बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस वाइब कोडिंग पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर वाइब कोडिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अपने विचार का वर्णन करना
- पहला संस्करण बनाना
- बदलावों के लिए कहना
- प्रीव्यू करना और चलाना