|
|
2 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 3 months ago | |
| 3-terrarium | 3 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 3 months ago | |
| 9-chat-project | 3 months ago | |
| 10-ai-framework-project | 3 months ago | |
| Git-Basics | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 3 months ago | |
| quiz-app | 3 months ago | |
| .co-op-translator.json | 2 weeks ago | |
| AGENTS.md | 2 weeks ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 4 weeks ago | |
| Roadmap.md | 3 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 3 months ago | |
README.md
शुरुआती लोगों के लिए वेब विकास - एक पाठ्यक्रम
Microsoft Cloud Advocates द्वारा प्रस्तुत हमारे 12 सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास की मूल बातें सीखें। 24 पाठों में से प्रत्येक में तरैरियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे प्रायोगिक परियोजनाओं के माध्यम से JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं और व्यावहारिक असाइंमेंट्स के साथ जुड़ें। हमारे प्रभावी परियोजना-आधारित शिक्षण पद्धति के साथ अपने कौशल को निखारें और अपनी ज्ञान धारणा को बढ़ाएं। अपनी कोडिंग यात्रा आज ही शुरू करें!
Azure AI Foundry Discord समुदाय में शामिल हों
इन संसाधनों का उपयोग शुरू करने के लिए ये कदम उठाएं:
- रिपॉजिटरी फोर्क करें: क्लिक करें
- रिपॉजिटरी क्लोन करें:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord में शामिल हों और विशेषज्ञों तथा अन्य डेवलपर्स से मिलें
🌐 बहुभाषी समर्थन
GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अपडेटेड)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
स्थानीय रूप से क्लोन करना पसंद है?
यह रिपॉजिटरी 50+ भाषा अनुवाद शामिल करती है जो डाउनलोड आकार को काफी बढ़ा देती है। बिना अनुवाद के क्लोन करने के लिए स्पार्स चेकआउट का उपयोग करें:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"इससे आपको कोर्स पूरा करने के लिए आवश्यक सब कुछ अधिक तेजी से डाउनलोड मिलेगा।
यदि आप अतिरिक्त अनुवाद भाषाओं को शामिल करना चाहते हैं, तो ये यहाँ सूचीबद्ध हैं यहाँ
🧑🎓 क्या आप छात्र हैं?
Student Hub पेज पर जाएं जहाँ आप शुरुआती संसाधन, छात्र पैक और मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके पा सकते हैं। यह पेज आपका पसंदीदा होना चाहिए और समय-समय पर जांचते रहना चाहिए क्योंकि हम मासिक रूप से कंटेंट अपडेट करते हैं।
📣 घोषणा - नए GitHub Copilot एजेंट मोड चुनौतियाँ पूरी करें!
नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपकी नई चुनौती है जिसे आप GitHub Copilot और Agent मोड का उपयोग करके पूरा कर सकते हैं। अगर आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और बहुत कुछ कर सकता है।
📣 घोषणा - Generative AI का उपयोग करके नया प्रोजेक्ट बनाएँ
नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें project
📣 घोषणा - Generative AI के लिए नया पाठ्यक्रम JavaScript के लिए अभी जारी किया गया
हमारा नया Generative 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 के भीतर Terminal खोलें और निम्न कमांड चलाएं,
<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 | Getting Started | प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल तत्व और ऐसे सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके कार्यों में मदद करते हैं | प्रोग्रामिंग भाषाओं और उपकरणों का परिचय | Jasmine |
| 02 | Getting Started | GitHub की बुनियादी बातें, जिसमें टीम के साथ काम शामिल है | अपने प्रोजेक्ट में GitHub कैसे उपयोग करें, एक कोड बेस पर दूसरों के साथ सहयोग कैसे करें | GitHub का परिचय | Floor |
| 03 | Getting Started | पहुंच योग्यता | वेब पहुंच योग्यता के मूल बातें सीखें | पहुंच योग्यता के मूल तत्व | Christopher |
| 04 | JS Basics | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों का परिचय | डेटा प्रकार | Jasmine |
| 05 | JS Basics | फ़ंक्शंस और मेथड्स | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शंस और मेथड्स के बारे में जानें | फ़ंक्शंस और मेथड्स | Jasmine और Christopher |
| 06 | JS Basics | JS के साथ निर्णय लेना | निर्णय लेने की विधियों का उपयोग करके अपने कोड में शर्तें कैसे बनाएं सीखें | निर्णय लेना | Jasmine |
| 07 | JS Basics | ऐरे और लूप्स | JavaScript में डेटा के साथ ऐरे और लूप्स का उपयोग करें | ऐरे और लूप्स | Jasmine |
| 08 | Terrarium | HTML का अभ्यास | एक ऑनलाइन टेरैरियम बनाने के लिए HTML बनाएं, लेआउट निर्माण पर केंद्रित | HTML का परिचय | Jen |
| 09 | Terrarium | CSS का अभ्यास | ऑनलाइन टेरैरियम को स्टाइल करने के लिए CSS बनाएं, CSS के मूल बातें सीखते हुए पृष्ठ को उत्तरदायी बनाना | CSS का परिचय | Jen |
| 10 | Terrarium | JavaScript क्लोजर, DOM मैनिपुलेशन | टेरैरियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में काम करने के लिए JavaScript बनाएं, क्लोजर और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | JavaScript क्लोजर, DOM मैनिपुलेशन | Jen |
| 11 | Typing Game | एक टाइपिंग गेम बनाना | अपने JavaScript ऐप की लॉजिक को नियंत्रित करने के लिए कीबोर्ड इवेंट्स का उपयोग कैसे करें | इवेंट-ड्रिवन प्रोग्रामिंग | Christopher |
| 12 | Green Browser Extension | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनके इतिहास के बारे में जानें, और एक ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफोल्ड कैसे करें | ब्राउज़र्स के बारे में | Jen |
| 13 | Green Browser Extension | एक फॉर्म बनाना, API कॉल करना और स्थानीय स्टोरेज में वेरिएबल्स स्टोर करना | अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं ताकि स्थानीय स्टोरेज में संग्रहित वेरिएबल्स का उपयोग करते हुए API कॉल करें | APIs, फॉर्म, और स्थानीय स्टोरेज | Jen |
| 14 | Green Browser Extension | ब्राउज़र में पृष्ठभूमि प्रक्रियाएँ, वेब प्रदर्शन | एक्सटेंशन के आइकन का प्रबंधन करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन की जानकारी प्राप्त करें | पृष्ठभूमि कार्य और प्रदर्शन | Jen |
| 15 | Space Game | JavaScript के साथ अधिक उन्नत गेम विकास | इनहेरिटेंस के बारे में जानें, दोनों क्लासेस और कॉम्पोजीशन के साथ, और Pub/Sub पैटर्न के साथ, एक गेम निर्माण की तैयारी में | उन्नत गेम विकास का परिचय | Chris |
| 16 | Space Game | कैनवास पर चित्र खींचना | स्क्रीन पर तत्वों को ड्रॉ करने के लिए उपयोग की जाने वाली Canvas API के बारे में जानें | कैनवास पर ड्रॉइंग | Chris |
| 17 | Space Game | स्क्रीन पर तत्वों को घुमाना | पता लगाएं कि कैसे तत्व कार्टेशियन समन्वय और Canvas API का उपयोग करके गति प्राप्त कर सकते हैं | तत्वों को घुमाना | Chris |
| 18 | Space Game | टक्कर का पता लगाना | तत्वों को आपस में टकराने और कीप्रेस का उपयोग करके प्रतिक्रिया देने के लिए बनाएं और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फ़ंक्शन प्रदान करें | टक्कर का पता लगाना | Chris |
| 19 | Space Game | स्कोर बनाए रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणना करें | स्कोर बनाए रखना | Chris |
| 20 | Space Game | गेम खत्म करना और पुनः प्रारंभ करना | गेम को समाप्त करने और पुनः प्रारंभ करने के बारे में जानें, जिसमें संसाधनों की सफाई और वेरिएबल मानों को रीसेट करना शामिल है | समाप्ति शर्त | Chris |
| 21 | Banking App | वेब ऐप में HTML टेम्पलेट्स और रूट्स | राउटिंग और HTML टेम्पलेट्स का उपयोग करके एक मल्टीपेज वेबसाइट की संरचना का निर्माण करना सीखें | HTML टेम्पलेट्स और रूट्स | Yohan |
| 22 | Banking App | लॉगिन और रजिस्ट्रेशन फ़ॉर्म बनाएं | फॉर्म बनाने और वैधता प्रक्रियाओं के बारे में जानें | फॉर्म | Yohan |
| 23 | Banking App | डेटा प्राप्त करने और उपयोग करने के तरीके | आपके ऐप में डेटा कैसे आता है और जाता है, इसे कैसे प्राप्त करें, संग्रहित करें और निपटान करें | डेटा | Yohan |
| 24 | Banking App | राज्य प्रबंधन की अवधारणाएँ | अपने ऐप में राज्य कैसे रखा जाता है और इसे प्रोग्रामिंग द्वारा कैसे प्रबंधित करें | राज्य प्रबंधन | Yohan |
| 25 | Browser/VScode Code | VScode के साथ काम करना | कोड संपादक के उपयोग के बारे में सीखें | VScode कोड संपादक का उपयोग करें | Chris |
| 26 | AI Assistants | AI के साथ काम करना | अपना स्वयं का AI सहायक कैसे बनाएं सीखें | AI सहायक प्रोजेक्ट | Chris |
🏫 शिक्षणशास्त्र
हमारा पाठ्यक्रम दो मुख्य शिक्षण सिद्धांतों के साथ डिजाइन किया गया है:
- प्रोजेक्ट-आधारित शिक्षण
- बार-बार क्विज़
यह कार्यक्रम JavaScript, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्रों को टाइपिंग गेम, वर्चुअल टेरैरियम, पर्यावरण के अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली गेम, और व्यवसायों के लिए एक बैंकिंग ऐप बनाने के माध्यम से व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी।
🎓 आप इस पाठ्यक्रम के पहले कुछ पाठों को Microsoft Learn पर Learn Path के रूप में ले सकते हैं!
सुनिश्चित करके कि सामग्री परियोजनाओं के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बनती है और अवधारणाओं का प्रतिधारण बढ़ता है। हमने कई शुरुआती पाठ JavaScript बुनियादी बातें में लिखे हैं ताकि अवधारणाओं का परिचय दिया जा सके, जिनके साथ "Beginners Series to: JavaScript" वीडियो ट्यूटोरियल संग्रह का एक वीडियो है, जिनमें से कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं।
इसके अतिरिक्त, कक्षा से पहले एक कम-दांव वाला क्विज़ छात्र की सीखने की इच्छा को निर्धारित करता है, जबकि कक्षा के बाद दूसरा क्विज़ और अधिक अवधारणाओं को स्थायी बनाता है। यह पाठ्यक्रम लचीला और मजेदार होने के लिए डिजाइन किया गया है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। परियोजनाएँ छोटी शुरुआत से शुरू होकर 12-सप्ताह के चक्र के अंत तक अधिक जटिल होती जाती हैं।
हमने जानबूझकर JavaScript फ्रेमवर्क पेश करने से बचा है ताकि एक वेब डेवलपर के रूप में बुनियादी कौशलों पर ध्यान केंद्रित किया जा सके, फ्रेमवर्क अपनाने से पहले; इस पाठ्यक्रम को पूरा करने का अगला अच्छा कदम Node.js के बारे में सीखना होगा एक अन्य वीडियो संग्रह के माध्यम से: "Beginner Series to: Node.js"।
हमारे Code of Conduct और Contributing गाइडलाइन्स देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
🧭 ऑफ़लाइन एक्सेस
आप Docsify का उपयोग करके इस दस्तावेज़ को ऑफलाइन चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, अपने स्थानीय मशीन पर Docsify इंस्टॉल करें, और फिर इस रिपॉजिटरी की रूट फ़ोल्डर में docsify serve टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर संचालित होगी: localhost:3000।
📘 पीडीएफ
सभी पाठों का एक पीडीएफ यहाँ उपलब्ध है।
🎒 अन्य कोर्स
हमारी टीम अन्य कोर्स भी बनाती है! देखें:
LangChain
Azure / Edge / MCP / Agents
जनरेटिव AI श्रृंखला
कोर सीखना
Copilot श्रृंखला
मदद प्राप्त करना
यदि आप फंस गए हैं या AI एप्लिकेशन बनाने के बारे में कोई प्रश्न हैं। MCP के बारे में चर्चा में अन्य सीखने वालों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहां प्रश्न स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है।
यदि आपके पास उत्पाद प्रतिक्रिया है या निर्माण के दौरान त्रुटियाँ हो रही हैं तो यहाँ जाएँ:
लाइसेंस
यह रिपॉजिटरी MIT लाइसेंस के अंतर्गत लाइसेंस प्राप्त है। अधिक जानकारी के लिए LICENSE फ़ाइल देखें।
अस्वीकरण:
यह दस्तावेज़ एआई अनुवाद सेवा Co-op Translator का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।


