44 KiB
इन संसाधनों का उपयोग शुरू करने के लिए निम्नलिखित चरणों का पालन करें:
- रेपो को फोर्क करें: क्लिक करें
- रेपो को क्लोन करें:
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 सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें project
📣 घोषणा - नया पाठ्यक्रम जेनरेटिव 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 बनाएगा।
!Codespace./images/createcodespace.png)
अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना
अपने कंप्यूटर पर इस पाठ्यक्रम को स्थानीय रूप से चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, प्रोग्रामिंग भाषाओं और टूल्स का परिचय, आपको इन टूल्स के विभिन्न विकल्पों के माध्यम से मार्गदर्शन करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें।
हमारी अनुशंसा है कि आप Visual Studio Code का उपयोग करें, जिसमें एक अंतर्निहित टर्मिनल भी है। आप यहां से Visual Studio Code डाउनलोड कर सकते हैं।
-
अपने रेपो को अपने कंप्यूटर पर क्लोन करें। आप Code बटन पर क्लिक करके और URL को कॉपी करके ऐसा कर सकते हैं:
फिर, Visual Studio Code में टर्मिनल खोलें और निम्नलिखित कमांड चलाएं,
<your-repository-url>को उस URL से बदलें जिसे आपने अभी कॉपी किया है:git clone <your-repository-url> -
Visual Studio Code में फ़ोल्डर खोलें। आप File पर क्लिक करके ऐसा कर सकते हैं।
फ़ोल्डर खोलें और उस फ़ोल्डर को चुनें जिसे आपने अभी क्लोन किया है। अनुशंसित Visual Studio Code एक्सटेंशन:
- Live Server - Visual Studio Code में HTML पेज का प्रीव्यू देखने के लिए
- Copilot - कोड को तेजी से लिखने में मदद करने के लिए
📂 प्रत्येक पाठ में शामिल हैं:
- वैकल्पिक स्केच नोट
- वैकल्पिक पूरक वीडियो
- पाठ से पहले वार्मअप क्विज़
- लिखित पाठ
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के चरण-दर-चरण गाइड
- ज्ञान जांच
- एक चुनौती
- पूरक पढ़ाई
- असाइनमेंट
- पाठ के बाद क्विज़
क्विज़ के बारे में एक नोट: सभी क्विज़
Quiz-appफ़ोल्डर में हैं, कुल 48 क्विज़, प्रत्येक में तीन प्रश्न। ये यहां उपलब्ध हैं। क्विज़ ऐप को लोकल या Azure पर डिप्लॉय किया जा सकता है;quiz-appफ़ोल्डर में दिए गए निर्देशों का पालन करें।
🗃️ पाठ
| प्रोजेक्ट का नाम | सिखाए गए अवधारणाएं | सीखने के उद्देश्य | लिंक किया गया पाठ | लेखक | |
|---|---|---|---|---|---|
| 01 | शुरुआत करना | प्रोग्रामिंग का परिचय और उपयोग किए जाने वाले उपकरण | अधिकांश प्रोग्रामिंग भाषाओं के पीछे के मूल सिद्धांतों को जानें और उस सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स की मदद करता है | प्रोग्रामिंग भाषाओं और उपयोग किए जाने वाले उपकरणों का परिचय | जैस्मिन |
| 02 | शुरुआत करना | GitHub की मूल बातें, टीम के साथ काम करना | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें | GitHub का परिचय | फ्लोर |
| 03 | शुरुआत करना | एक्सेसिबिलिटी | वेब एक्सेसिबिलिटी की मूल बातें जानें | एक्सेसिबिलिटी फंडामेंटल्स | क्रिस्टोफर |
| 04 | JS की मूल बातें | JavaScript डेटा प्रकार | JavaScript डेटा प्रकार की मूल बातें | डेटा प्रकार | जैस्मिन |
| 05 | JS की मूल बातें | फंक्शन और मेथड | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन और मेथड के बारे में जानें | फंक्शन और मेथड | जैस्मिन और क्रिस्टोफर |
| 06 | JS की मूल बातें | JS के साथ निर्णय लेना | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में शर्तें बनाने का तरीका जानें | निर्णय लेना | जैस्मिन |
| 07 | JS की मूल बातें | Arrays और Loops | JavaScript में डेटा के साथ काम करने के लिए Arrays और Loops का उपयोग करें | Arrays और Loops | जैस्मिन |
| 08 | Terrarium | HTML का अभ्यास | ऑनलाइन टेरारियम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें | HTML का परिचय | जेन |
| 09 | Terrarium | CSS का अभ्यास | ऑनलाइन टेरारियम को स्टाइल करने के लिए CSS बनाएं, CSS की मूल बातें सहित पेज को रिस्पॉन्सिव बनाने पर ध्यान केंद्रित करें | CSS का परिचय | जेन |
| 10 | Terrarium | JavaScript क्लोजर, DOM मैनिपुलेशन | टेरारियम को ड्रैग/ड्रॉप इंटरफेस के रूप में कार्य करने के लिए JavaScript बनाएं, क्लोजर और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | JavaScript क्लोजर, DOM मैनिपुलेशन | जेन |
| 11 | टाइपिंग गेम | टाइपिंग गेम बनाएं | अपने JavaScript ऐप के लॉजिक को चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें | इवेंट-ड्रिवन प्रोग्रामिंग | क्रिस्टोफर |
| 12 | ग्रीन ब्राउज़र एक्सटेंशन | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनका इतिहास, और ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफोल्ड करना सीखें | ब्राउज़र के बारे में | जेन |
| 13 | ग्रीन ब्राउज़र एक्सटेंशन | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल्स स्टोर करना | लोकल स्टोरेज में स्टोर किए गए वेरिएबल्स का उपयोग करके API कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं | APIs, फॉर्म और लोकल स्टोरेज | जेन |
| 14 | ग्रीन ब्राउज़र एक्सटेंशन | ब्राउज़र में बैकग्राउंड प्रोसेस, वेब प्रदर्शन | ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करके एक्सटेंशन के आइकन को प्रबंधित करें; वेब प्रदर्शन और कुछ ऑप्टिमाइजेशन के बारे में जानें | बैकग्राउंड टास्क और प्रदर्शन | जेन |
| 15 | स्पेस गेम | JavaScript के साथ अधिक उन्नत गेम डेवलपमेंट | गेम बनाने की तैयारी में क्लास और कंपोजिशन का उपयोग करके इनहेरिटेंस और Pub/Sub पैटर्न के बारे में जानें | उन्नत गेम डेवलपमेंट का परिचय | क्रिस |
| 16 | स्पेस गेम | कैनवास पर ड्रॉ करना | स्क्रीन पर तत्वों को ड्रॉ करने के लिए Canvas API के बारे में जानें | कैनवास पर ड्रॉ करना | क्रिस |
| 17 | स्पेस गेम | स्क्रीन पर तत्वों को मूव करना | जानें कि कैसे तत्वों को गति दी जा सकती है, कार्टेशियन कोऑर्डिनेट्स और Canvas API का उपयोग करके | तत्वों को मूव करना | क्रिस |
| 18 | स्पेस गेम | टकराव का पता लगाना | तत्वों को टकराने और एक-दूसरे पर प्रतिक्रिया देने के लिए कीप्रेस का उपयोग करें और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें | टकराव का पता लगाना | क्रिस |
| 19 | स्पेस गेम | स्कोर रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें | स्कोर रखना | क्रिस |
| 20 | स्पेस गेम | गेम को समाप्त करना और पुनः प्रारंभ करना | गेम को समाप्त करने और पुनः प्रारंभ करने के बारे में जानें, जिसमें एसेट्स को साफ करना और वेरिएबल्स के मानों को रीसेट करना शामिल है | समाप्ति की स्थिति | क्रिस |
| 21 | बैंकिंग ऐप | वेब ऐप में HTML टेम्पलेट्स और रूट्स | रूटिंग और HTML टेम्पलेट्स का उपयोग करके मल्टीपेज वेबसाइट की आर्किटेक्चर का स्कैफोल्ड बनाना सीखें | HTML टेम्पलेट्स और रूट्स | योहान |
| 22 | बैंकिंग ऐप | लॉगिन और रजिस्ट्रेशन फॉर्म बनाना | फॉर्म बनाना और वैलिडेशन रूटीन को संभालना सीखें | फॉर्म | योहान |
| 23 | बैंकिंग ऐप | डेटा को प्राप्त करना और उपयोग करना | डेटा आपके ऐप में कैसे प्रवाहित होता है, इसे कैसे प्राप्त करें, स्टोर करें और डिस्पोज करें | डेटा | योहान |
| 24 | बैंकिंग ऐप | स्टेट मैनेजमेंट की अवधारणाएं | जानें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित करें | स्टेट मैनेजमेंट | योहान |
| 25 | ब्राउज़र/VScode कोड | VScode के साथ काम करना | कोड एडिटर का उपयोग करना सीखें | VScode कोड एडिटर का उपयोग करें | क्रिस |
| 26 | AI असिस्टेंट | AI के साथ काम करना | अपना AI असिस्टेंट बनाना सीखें | AI असिस्टेंट प्रोजेक्ट | क्रिस |
🏫 शिक्षाशास्त्र
हमारे पाठ्यक्रम को दो प्रमुख शिक्षाशास्त्रीय सिद्धांतों को ध्यान में रखकर डिज़ाइन किया गया है:
- प्रोजेक्ट-आधारित शिक्षा
- बार-बार क्विज़
यह कार्यक्रम 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।
सभी पाठों का PDF यहां पाया जा सकता है।
🎒 अन्य पाठ्यक्रम
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें:
- Generative AI for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- शुरुआती लोगों के लिए डेटा साइंस
- शुरुआती लोगों के लिए मशीन लर्निंग
- शुरुआती लोगों के लिए साइबर सुरक्षा
- शुरुआती लोगों के लिए वेब विकास
- शुरुआती लोगों के लिए IoT
- शुरुआती लोगों के लिए XR विकास
- एजेंटिक उपयोग के लिए GitHub Copilot में महारत हासिल करना
- C#/.NET डेवलपर्स के लिए GitHub Copilot में महारत हासिल करना
- अपना खुद का Copilot एडवेंचर चुनें
लाइसेंस
यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए LICENSE फ़ाइल देखें।
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल दस्तावेज़, जो इसकी मूल भाषा में है, को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।