|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 2 months ago | |
| 3-terrarium | 2 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 2 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 2 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| 10-ai-framework-project | 2 months ago | |
| Git-Basics | 2 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 2 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम
Microsoft Cloud Advocates द्वारा तैयार किए गए हमारे 12-सप्ताह के व्यापक कोर्स के साथ वेब डेवलपमेंट की मूल बातें सीखें। प्रत्येक 24 पाठों में जावास्क्रिप्ट, CSS और HTML को प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशन और स्पेस गेम्स के माध्यम से समझाया गया है। क्विज़, चर्चाओं और व्यावहारिक असाइनमेंट्स के साथ जुड़ें। अपनी स्किल्स को बेहतर बनाएं और प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने ज्ञान को अधिकतम करें। आज ही अपनी कोडिंग यात्रा शुरू करें!
Azure AI Foundry Discord समुदाय में शामिल हों
इन संसाधनों का उपयोग शुरू करने के लिए निम्नलिखित चरणों का पालन करें:
- रेपो को फोर्क करें: क्लिक करें
- रेपो को क्लोन करें:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord में शामिल हों और विशेषज्ञों और अन्य डेवलपर्स से मिलें
🌐 बहु-भाषा समर्थन
GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अपडेटेड)
अरबी | बंगाली | बुल्गेरियन | बर्मी (म्यांमार) | चीनी (सरलीकृत) | चीनी (पारंपरिक, हांगकांग) | चीनी (पारंपरिक, मकाऊ) | चीनी (पारंपरिक, ताइवान) | क्रोएशियन | चेक | डेनिश | डच | एस्टोनियन | फिनिश | फ्रेंच | जर्मन | ग्रीक | हिब्रू | हिंदी | हंगेरियन | इंडोनेशियन | इतालवी | जापानी | कोरियाई | लिथुआनियन | मलय | मराठी | नेपाली | नॉर्वेजियन | फारसी (फारसी) | पोलिश | पुर्तगाली (ब्राजील) | पुर्तगाली (पुर्तगाल) | पंजाबी (गुरमुखी) | रोमानियाई | रूसी | सर्बियाई (सिरिलिक) | स्लोवाक | स्लोवेनियन | स्पेनिश | स्वाहिली | स्वीडिश | टैगालोग (फिलिपिनो) | तमिल | थाई | तुर्की | यूक्रेनी | उर्दू | वियतनामी
यदि आप अतिरिक्त भाषाओं में अनुवाद चाहते हैं, तो समर्थित भाषाओं की सूची यहां दी गई है।
🧑🎓 क्या आप छात्र हैं?
स्टूडेंट हब पेज पर जाएं, जहां आपको शुरुआती संसाधन, छात्र पैक और यहां तक कि मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करना चाहेंगे और समय-समय पर जांचना चाहेंगे क्योंकि हम मासिक रूप से सामग्री बदलते हैं।
📣 घोषणा - जेनरेटिव AI का उपयोग करके नया प्रोजेक्ट बनाएं
नया AI असिस्टेंट प्रोजेक्ट अभी जोड़ा गया है, इसे देखें प्रोजेक्ट
📣 घोषणा - जेनरेटिव AI पर नया पाठ्यक्रम जावास्क्रिप्ट के लिए अभी जारी किया गया है
हमारा नया जेनरेटिव AI पाठ्यक्रम न चूकें!
शुरू करने के लिए https://aka.ms/genai-js-course पर जाएं!
- पाठ जो मूल बातें से लेकर RAG तक सब कुछ कवर करते हैं।
- GenAI और हमारे साथी ऐप का उपयोग करके ऐतिहासिक पात्रों के साथ बातचीत करें।
- मजेदार और आकर्षक कहानी, आप समय यात्रा करेंगे!
प्रत्येक पाठ में एक असाइनमेंट, ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्नलिखित विषयों को सीखने में मदद करेगी:
- प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग
- टेक्स्ट और इमेज ऐप जनरेशन
- सर्च ऐप्स
शुरू करने के लिए https://aka.ms/genai-js-course पर जाएं!
🌱 शुरुआत करना
शिक्षकों, हमने इस पाठ्यक्रम का उपयोग करने के लिए कुछ सुझाव शामिल किए हैं। हमें आपके फीडबैक की आवश्यकता है हमारे चर्चा मंच में!
सीखने वाले, प्रत्येक पाठ के लिए, प्री-लेक्चर क्विज़ से शुरू करें और लेक्चर सामग्री पढ़ने, विभिन्न गतिविधियों को पूरा करने और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ की जांच करें।
अपने सीखने के अनुभव को बढ़ाने के लिए, अपने साथियों के साथ प्रोजेक्ट्स पर काम करें! चर्चाओं को हमारे चर्चा मंच में प्रोत्साहित किया जाता है, जहां हमारे मॉडरेटर आपकी मदद के लिए उपलब्ध होंगे।
अपनी शिक्षा को आगे बढ़ाने के लिए, हम Microsoft Learn पर अतिरिक्त अध्ययन सामग्री का पता लगाने की अत्यधिक अनुशंसा करते हैं।
📋 अपने वातावरण को सेट करना
इस पाठ्यक्रम में एक विकास वातावरण तैयार है! जब आप शुरू करते हैं, तो आप Codespace (एक ब्राउज़र-आधारित, कोई इंस्टॉल की आवश्यकता नहीं) या अपने कंप्यूटर पर स्थानीय रूप से एक टेक्स्ट एडिटर जैसे Visual Studio Code का उपयोग कर सकते हैं।
अपना रेपो बनाएं
अपने काम को आसानी से सहेजने के लिए, यह अनुशंसा की जाती है कि आप इस रेपो की अपनी कॉपी बनाएं। आप पेज के शीर्ष पर Use this template बटन पर क्लिक करके ऐसा कर सकते हैं। यह आपके GitHub खाते में पाठ्यक्रम की एक कॉपी के साथ एक नया रेपो बनाएगा।
इन चरणों का पालन करें:
- रेपो को फोर्क करें: इस पेज के शीर्ष-दाएं कोने में "Fork" बटन पर क्लिक करें।
- रेपो को क्लोन करें:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Codespace में पाठ्यक्रम चलाना
इस रेपो की अपनी कॉपी में, जिसे आपने बनाया है, Code बटन पर क्लिक करें और Open with Codespaces चुनें। यह आपके काम करने के लिए एक नया Codespace बनाएगा।
अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना
इस पाठ्यक्रम को अपने कंप्यूटर पर स्थानीय रूप से चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, प्रोग्रामिंग भाषाओं और टूल्स का परिचय, आपको इन टूल्स के विभिन्न विकल्पों के माध्यम से मार्गदर्शन करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें।
हमारी सिफारिश है कि आप Visual Studio Code का उपयोग करें, जिसमें एक अंतर्निहित टर्मिनल भी है। आप यहां से Visual Studio Code डाउनलोड कर सकते हैं।
-
अपने रेपो को अपने कंप्यूटर पर क्लोन करें। आप Code बटन पर क्लिक करके और URL को कॉपी करके ऐसा कर सकते हैं:
फिर, Visual Studio Code में टर्मिनल खोलें और निम्नलिखित कमांड चलाएं,
<your-repository-url>को उस URL से बदलें जिसे आपने अभी कॉपी किया है:git clone <your-repository-url> -
Visual Studio Code में फोल्डर खोलें। आप File > Open Folder पर क्लिक करके और उस फोल्डर का चयन करके ऐसा कर सकते हैं जिसे आपने अभी क्लोन किया है।
अनुशंसित Visual Studio Code एक्सटेंशन:
- Live Server - Visual Studio Code के भीतर HTML पेजों का पूर्वावलोकन करने के लिए
- Copilot - कोड को तेजी से लिखने में मदद करने के लिए
📂 प्रत्येक पाठ में शामिल हैं:
- वैकल्पिक स्केच नोट
- वैकल्पिक पूरक वीडियो
- प्री-लेसन वार्मअप क्विज़
- लिखित पाठ
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के लिए चरण-दर-चरण मार्गदर्शिका
- ज्ञान जांच
- एक चुनौती
- अतिरिक्त पढ़ाई
- असाइनमेंट
- पाठ के बाद क्विज़
क्विज़ के बारे में एक नोट: सभी क्विज़
Quiz-appफ़ोल्डर में संग्रहीत हैं, कुल 48 क्विज़, प्रत्येक में तीन प्रश्न। ये यहां उपलब्ध हैं। क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है या Azure पर डिप्लॉय किया जा सकता है;quiz-appफ़ोल्डर में दिए गए निर्देशों का पालन करें।
🗃️ पाठ
| प्रोजेक्ट का नाम | सिखाए गए अवधारणाएं | सीखने के उद्देश्य | लिंक किया गया पाठ | लेखक | |
|---|---|---|---|---|---|
| 01 | शुरुआत करना | प्रोग्रामिंग और टूल्स का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के पीछे के मूल सिद्धांतों को जानें और उस सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके काम में मदद करता है | प्रोग्रामिंग भाषाओं और टूल्स का परिचय | जैस्मिन |
| 02 | शुरुआत करना | GitHub की मूल बातें, टीम के साथ काम करना | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें | GitHub का परिचय | फ्लोर |
| 03 | शुरुआत करना | एक्सेसिबिलिटी | वेब एक्सेसिबिलिटी की मूल बातें जानें | एक्सेसिबिलिटी के मूल सिद्धांत | क्रिस्टोफर |
| 04 | JS की मूल बातें | जावास्क्रिप्ट डेटा प्रकार | जावास्क्रिप्ट डेटा प्रकार की मूल बातें | डेटा प्रकार | जैस्मिन |
| 05 | JS की मूल बातें | फंक्शन और मेथड | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन और मेथड के बारे में जानें | फंक्शन और मेथड | जैस्मिन और क्रिस्टोफर |
| 06 | JS की मूल बातें | जावास्क्रिप्ट के साथ निर्णय लेना | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में शर्तें बनाने का तरीका जानें | निर्णय लेना | जैस्मिन |
| 07 | JS की मूल बातें | ऐरे और लूप | जावास्क्रिप्ट में डेटा के साथ काम करने के लिए ऐरे और लूप का उपयोग करें | ऐरे और लूप | जैस्मिन |
| 08 | टेरारियम | HTML का अभ्यास | ऑनलाइन टेरारियम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें | HTML का परिचय | जेन |
| 09 | टेरारियम | CSS का अभ्यास | ऑनलाइन टेरारियम को स्टाइल करने के लिए CSS बनाएं, CSS की मूल बातें सहित पेज को उत्तरदायी बनाने पर ध्यान केंद्रित करें | CSS का परिचय | जेन |
| 10 | टेरारियम | जावास्क्रिप्ट क्लोजर, DOM मैनिपुलेशन | टेरारियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में कार्य करने के लिए जावास्क्रिप्ट बनाएं, क्लोजर और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | जावास्क्रिप्ट क्लोजर, DOM मैनिपुलेशन | जेन |
| 11 | टाइपिंग गेम | टाइपिंग गेम बनाएं | अपने जावास्क्रिप्ट ऐप के लॉजिक को चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें | इवेंट-ड्रिवन प्रोग्रामिंग | क्रिस्टोफर |
| 12 | ग्रीन ब्राउज़र एक्सटेंशन | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनका इतिहास, और ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफोल्ड करना सीखें | ब्राउज़र के बारे में | जेन |
| 13 | ग्रीन ब्राउज़र एक्सटेंशन | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल्स स्टोर करना | लोकल स्टोरेज में स्टोर किए गए वेरिएबल्स का उपयोग करके API कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट तत्व बनाएं | API, फॉर्म, और लोकल स्टोरेज | जेन |
| 14 | ग्रीन ब्राउज़र एक्सटेंशन | ब्राउज़र में बैकग्राउंड प्रोसेस, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन के बारे में जानें | बैकग्राउंड टास्क और प्रदर्शन | जेन |
| 15 | स्पेस गेम | जावास्क्रिप्ट के साथ अधिक उन्नत गेम डेवलपमेंट | गेम बनाने की तैयारी में क्लास और कंपोजिशन का उपयोग करके इनहेरिटेंस और पब/सब पैटर्न के बारे में जानें | उन्नत गेम डेवलपमेंट का परिचय | क्रिस |
| 16 | स्पेस गेम | कैनवास पर ड्रॉ करना | कैनवास API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को ड्रॉ करने के लिए किया जाता है | कैनवास पर ड्रॉ करना | क्रिस |
| 17 | स्पेस गेम | स्क्रीन पर तत्वों को स्थानांतरित करना | जानें कि कैसे तत्वों को गति दी जा सकती है, कार्टेशियन कोऑर्डिनेट्स और कैनवास API का उपयोग करके | तत्वों को स्थानांतरित करना | क्रिस |
| 18 | स्पेस गेम | टकराव का पता लगाना | तत्वों को एक-दूसरे से टकराने और प्रतिक्रिया देने के लिए बनाएं, कीप्रेस का उपयोग करें और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें | टकराव का पता लगाना | क्रिस |
| 19 | स्पेस गेम | स्कोर रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें | स्कोर रखना | क्रिस |
| 20 | स्पेस गेम | गेम को समाप्त करना और पुनः आरंभ करना | गेम को समाप्त करने और पुनः आरंभ करने के बारे में जानें, जिसमें एसेट्स को साफ करना और वेरिएबल्स के मानों को रीसेट करना शामिल है | समाप्ति की स्थिति | क्रिस |
| 21 | बैंकिंग ऐप | HTML टेम्पलेट्स और वेब ऐप में रूट्स | रूटिंग और HTML टेम्पलेट्स का उपयोग करके मल्टीपेज वेबसाइट की आर्किटेक्चर का स्कैफोल्ड बनाना सीखें | HTML टेम्पलेट्स और रूट्स | योहान |
| 22 | बैंकिंग ऐप | लॉगिन और रजिस्ट्रेशन फॉर्म बनाना | फॉर्म बनाने और वैलिडेशन रूटीन को संभालने के बारे में जानें | फॉर्म | योहान |
| 23 | बैंकिंग ऐप | डेटा को प्राप्त करने और उपयोग करने के तरीके | आपके ऐप में डेटा कैसे प्रवाहित होता है, इसे कैसे प्राप्त करें, स्टोर करें, और निपटाएं | डेटा | योहान |
| 24 | बैंकिंग ऐप | स्टेट मैनेजमेंट की अवधारणाएं | जानें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित करें | स्टेट मैनेजमेंट | योहान |
| 25 | ब्राउज़र/VS कोड | VS कोड के साथ काम करना | कोड एडिटर का उपयोग करना सीखें | VS कोड एडिटर का उपयोग करें | क्रिस |
| 26 | AI असिस्टेंट | AI के साथ काम करना | अपना AI असिस्टेंट बनाना सीखें | AI असिस्टेंट प्रोजेक्ट | क्रिस |
🏫 शिक्षाशास्त्र
हमारे पाठ्यक्रम को दो प्रमुख शिक्षाशास्त्रीय सिद्धांतों को ध्यान में रखकर डिज़ाइन किया गया है:
- प्रोजेक्ट-आधारित सीखना
- बार-बार क्विज़
यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल और तकनीकों को सिखाता है। छात्रों को टाइपिंग गेम, वर्चुअल टेरारियम, इको-फ्रेंडली ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-स्टाइल गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाने का व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब डेवलपमेंट की ठोस समझ प्राप्त हो जाएगी।
🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ Microsoft Learn पर एक लर्न पाथ के रूप में ले सकते हैं!
सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बन जाती है और अवधारणाओं की अवधारण बढ़ जाती है। हमने जावास्क्रिप्ट की मूल बातें सिखाने के लिए कई प्रारंभिक पाठ भी लिखे हैं, जिन्हें "Beginners Series to: JavaScript" वीडियो ट्यूटोरियल संग्रह से एक वीडियो के साथ जोड़ा गया है, जिनमें से कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया है।
इसके अलावा, कक्षा से पहले एक कम-दांव वाला क्विज़ छात्र को किसी विषय को सीखने के इरादे की ओर सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ आगे की अवधारण सुनिश्चित करता है। इस पाठ्यक्रम को लचीला और मजेदार बनाने के लिए डिज़ाइन किया गया था और इसे पूरे या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट छोटे से शुरू होते हैं और 12-सप्ताह के चक्र के अंत तक धीरे-धीरे जटिल हो जाते हैं।
हालांकि हमने जानबूझकर जावास्क्रिप्ट फ्रेमवर्क को पेश करने से बचा है ताकि फ्रेमवर्क अपनाने से पहले एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद एक अच्छा अगला कदम Node.js के बारे में सीखना होगा, एक अन्य वीडियो संग्रह के माध्यम से: "Beginner Series to: Node.js"।
हमारे आचार संहिता और योगदान दिशानिर्देशों पर जाएं। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
🧭 ऑफ़लाइन पहुंच
आप इस दस्तावेज़ को Docsify का उपयोग करके ऑफ़लाइन चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, Docsify इंस्टॉल करें अपने स्थानीय मशीन पर, और फिर इस रिपॉजिटरी के रूट फ़ोल्डर में, docsify serve टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: localhost:3000।
सभी पाठों का PDF यहां पाया जा सकता है।
🎒 अन्य पाठ्यक्रम
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें:
- MCP for Beginners
- Edge AI for Beginners
- AI Agents for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- Data Science for Beginners
- ML for Beginners
- Cybersecurity for Beginners
- Web Dev for Beginners
- IoT for Beginners
- शुरुआती लोगों के लिए XR विकास
- एजेंटिक उपयोग के लिए GitHub Copilot में महारत हासिल करें
- C#/.NET डेवलपर्स के लिए GitHub Copilot में महारत हासिल करें
- अपना खुद का Copilot एडवेंचर चुनें
मदद प्राप्त करना
यदि आप अटक जाते हैं या AI ऐप्स बनाने के बारे में कोई सवाल है, तो शामिल हों:
यदि आपको उत्पाद पर प्रतिक्रिया देनी है या निर्माण के दौरान कोई त्रुटि आती है, तो यहां जाएं:
लाइसेंस
यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए LICENSE फ़ाइल देखें।
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।


