|
|
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 | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| docs | ||
| lesson-template | ||
| memory-game | 2 months ago | |
| quiz-app | ||
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| README.md | 2 months ago | |
| SECURITY.md | ||
| SUPPORT.md | ||
| _404.md | ||
| for-teachers.md | 2 months ago | |
README.md
इन संसाधनों का उपयोग शुरू करने के लिए निम्नलिखित चरणों का पालन करें:
- रेपो को फोर्क करें: क्लिक करें
- रेपो को क्लोन करें:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord से जुड़ें और विशेषज्ञों और अन्य डेवलपर्स से मिलें
शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम
Microsoft Cloud Advocates द्वारा तैयार किए गए हमारे 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब डेवलपमेंट के मूल सिद्धांत सीखें। प्रत्येक 24 पाठ JavaScript, CSS, और HTML को प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशन, और स्पेस गेम्स के माध्यम से सिखाते हैं। क्विज़, चर्चाओं, और व्यावहारिक असाइनमेंट के साथ जुड़ें। हमारी प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने कौशल को बढ़ाएं और अपने ज्ञान को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!
🌐 बहु-भाषा समर्थन
GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अद्यतन)
French | Spanish | German | Russian | Arabic | Persian (Farsi) | Urdu | Chinese (Simplified) | Chinese (Traditional, Macau) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Taiwan) | Japanese | Korean | Hindi | Bengali | Marathi | Nepali | Punjabi (Gurmukhi) | Portuguese (Portugal) | Portuguese (Brazil) | Italian | Polish | Turkish | Greek | Thai | Swedish | Danish | Norwegian | Finnish | Dutch | Hebrew | Vietnamese | Indonesian | Malay | Tagalog (Filipino) | Swahili | Hungarian | Czech | Slovak | Romanian | Bulgarian | Serbian (Cyrillic) | Croatian | Slovenian | Ukrainian | Burmese (Myanmar)
यदि आप अतिरिक्त भाषाओं में अनुवाद चाहते हैं, तो समर्थित भाषाओं की सूची यहां उपलब्ध है।
🧑🎓 क्या आप छात्र हैं?
Student Hub पेज पर जाएं, जहां आपको शुरुआती संसाधन, छात्र पैक और यहां तक कि मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करना चाहेंगे और समय-समय पर जांचना चाहेंगे क्योंकि हम मासिक रूप से सामग्री बदलते हैं।
📣 घोषणा - जेनरेटिव AI का उपयोग करके नया प्रोजेक्ट बनाएं
नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें प्रोजेक्ट
📣 घोषणा - जेनरेटिव AI पर नया पाठ्यक्रम JavaScript के लिए अभी जारी किया गया है
हमारा नया जेनरेटिव 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 - HTML पेजों को Visual Studio Code के भीतर प्रीव्यू करने के लिए
- 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 कॉल करने के लिए बनाएं | APIs, फॉर्म्स, और लोकल स्टोरेज | जेन |
| 14 | ग्रीन ब्राउज़र एक्सटेंशन | ब्राउज़र में बैकग्राउंड प्रोसेस, वेब प्रदर्शन | ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करके एक्सटेंशन के आइकन को प्रबंधित करें; वेब प्रदर्शन और कुछ ऑप्टिमाइज़ेशन के बारे में जानें | बैकग्राउंड टास्क्स और प्रदर्शन | जेन |
| 15 | स्पेस गेम | जावास्क्रिप्ट के साथ अधिक उन्नत गेम डेवलपमेंट | गेम बनाने की तैयारी में क्लासेस और कंपोज़िशन का उपयोग करके इनहेरिटेंस और पब/सब पैटर्न के बारे में जानें | उन्नत गेम डेवलपमेंट का परिचय | क्रिस |
| 16 | स्पेस गेम | कैनवास पर ड्रॉ करना | कैनवास API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को ड्रॉ करने के लिए किया जाता है | कैनवास पर ड्रॉ करना | क्रिस |
| 17 | स्पेस गेम | स्क्रीन पर तत्वों को मूव करना | जानें कि कैसे तत्वों को कार्टेशियन कोऑर्डिनेट्स और कैनवास API का उपयोग करके गति दी जा सकती है | तत्वों को मूव करना | क्रिस |
| 18 | स्पेस गेम | टकराव का पता लगाना | तत्वों को टकराने और एक-दूसरे पर प्रतिक्रिया देने के लिए कीप्रेस का उपयोग करें और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें | टकराव का पता लगाना | क्रिस |
| 19 | स्पेस गेम | स्कोर रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें | स्कोर रखना | क्रिस |
| 20 | स्पेस गेम | गेम को समाप्त करना और पुनः शुरू करना | गेम को समाप्त करने और पुनः शुरू करने के बारे में जानें, जिसमें एसेट्स को साफ करना और वेरिएबल्स के मानों को रीसेट करना शामिल है | एंडिंग कंडीशन | क्रिस |
| 21 | बैंकिंग ऐप | HTML टेम्पलेट्स और वेब ऐप में रूट्स | रूटिंग और HTML टेम्पलेट्स का उपयोग करके मल्टीपेज वेबसाइट की आर्किटेक्चर का स्कैफोल्ड बनाना सीखें | HTML टेम्पलेट्स और रूट्स | योहान |
| 22 | बैंकिंग ऐप | लॉगिन और रजिस्ट्रेशन फॉर्म बनाना | फॉर्म्स बनाना और वैलिडेशन रूटीन को संभालना सीखें | फॉर्म्स | योहान |
| 23 | बैंकिंग ऐप | डेटा को फेच और उपयोग करने के तरीके | डेटा आपके ऐप में कैसे प्रवाहित होता है, इसे कैसे फेच करें, स्टोर करें, और डिस्पोज करें | डेटा | योहान |
| 24 | बैंकिंग ऐप | स्टेट मैनेजमेंट के कॉन्सेप्ट्स | जानें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित करें | स्टेट मैनेजमेंट | योहान |
| 25 | ब्राउज़र/VScode कोड | VScode के साथ काम करना | कोड एडिटर का उपयोग करना सीखें | VScode कोड एडिटर का उपयोग करें | क्रिस |
| 26 | AI असिस्टेंट्स | AI के साथ काम करना | अपना AI असिस्टेंट बनाना सीखें | AI असिस्टेंट प्रोजेक्ट | क्रिस |
🏫 शिक्षण पद्धति
हमारे पाठ्यक्रम को दो प्रमुख शिक्षण सिद्धांतों को ध्यान में रखकर डिज़ाइन किया गया है:
- प्रोजेक्ट-आधारित सीखना
- बार-बार क्विज़
यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS की मूल बातें सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल्स और तकनीकों को भी। छात्रों को टाइपिंग गेम, वर्चुअल टेरारियम, इको-फ्रेंडली ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-स्टाइल गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाने का व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। इस श्रृंखला के अंत तक, छात्रों को वेब डेवलपमेंट की ठोस समझ प्राप्त हो जाएगी।
🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ Microsoft Learn पर एक Learn Path के रूप में ले सकते हैं!
सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बन जाती है और कॉन्सेप्ट्स की अवधारण को बढ़ाया जाता है। हमने जावास्क्रिप्ट की मूल बातें सिखाने के लिए कई प्रारंभिक पाठ भी लिखे हैं, जिन्हें "Beginners Series to: JavaScript" वीडियो ट्यूटोरियल संग्रह के वीडियो के साथ जोड़ा गया है, जिनमें से कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया है।
इसके अलावा, कक्षा से पहले एक लो-स्टेक्स क्विज़ छात्र को विषय सीखने के इरादे की ओर सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ आगे की अवधारण सुनिश्चित करता है। इस पाठ्यक्रम को लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया था और इसे पूरे या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट्स छोटे से शुरू होते हैं और 12-सप्ताह के चक्र के अंत तक धीरे-धीरे जटिल हो जाते हैं।
हालांकि हमने जानबूझकर जावास्क्रिप्ट फ्रेमवर्क्स को पेश करने से बचा है ताकि वेब डेवलपर के रूप में फ्रेमवर्क अपनाने से पहले आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद एक अच्छा अगला कदम Node.js के बारे में सीखना होगा, जो वीडियो के एक अन्य संग्रह में उपलब्ध है: "Beginner Series to: Node.js".
हमारे Code of Conduct और Contributing दिशानिर्देश देखें। हम आपके रचनात्मक फीडबैक का स्वागत करते हैं!
🧭 ऑफलाइन एक्सेस
आप इस डॉक्यूमेंटेशन को Docsify का उपयोग करके ऑफलाइन चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, Docsify इंस्टॉल करें अपने लोकल मशीन पर, और फिर इस रिपॉजिटरी के रूट फ़ोल्डर में docsify serve टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: localhost:3000.
सभी पाठों का PDF यहां पाया जा सकता है।
🎒 अन्य पाठ्यक्रम
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें:
- Generative AI 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 Development for Beginners
- Mastering GitHub Copilot for Agentic use
- Mastering GitHub Copilot for C#/.NET Developers
- अपना खुद का Copilot एडवेंचर चुनें
सहायता प्राप्त करें
यदि आप अटक जाते हैं या AI ऐप्स बनाने के बारे में कोई प्रश्न हैं, तो शामिल हों:
यदि आपको उत्पाद पर प्रतिक्रिया देनी है या निर्माण के दौरान कोई त्रुटि आती है, तो यहां जाएं:
लाइसेंस
यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए LICENSE फ़ाइल देखें।
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।


