README.md

शुरुआती लोगों के लिए वेब विकास - एक पाठ्यक्रम

Microsoft Cloud Advocates द्वारा प्रदान किए गए हमारे 12-सप्ताह के समग्र पाठ्यक्रम के साथ वेब विकास की मूल बातें सीखें। 24 पाठों में से प्रत्येक JavaScript, CSS, और HTML को टेरारियम, ब्राउज़र एक्सटेंशन्स, और स्पेस गेम जैसी प्रायोगिक परियोजनाओं के माध्यम से गहराई से समझाता है। क्विज़, चर्चा, और व्यावहारिक असाइनमेंट में भाग लें। हमारे प्रभावी परियोजना-आधारित शिक्षण पद्धति के साथ अपनी कौशल को बढ़ाएं और ज्ञान धारण करने को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!

Azure AI Foundry Discord समुदाय में शामिल हों

इन संसाधनों का उपयोग शुरू करने के लिए इन चरणों का पालन करें:

1. रिपॉजिटरी को फोर्क करें: क्लिक करें
2. रिपॉजिटरी क्लोन करें: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 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 | 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+ भाषा अनुवाद शामिल हैं, जो डाउनलोड आकार को काफी बढ़ा देता है। केवल मूल को क्लोन करने के लिए sparse checkout का उपयोग करें:

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 और एजेंट मोड का उपयोग करके पूरी की जाने वाली एक नई चुनौती है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है, तो यह सिर्फ टेक्स्ट जनरेट करने में सक्षम नहीं है बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और अधिक कर सकता है।

📣 घोषणा - नई जनरेटिव AI परियोजना बनाएं

नई AI सहायक परियोजना अभी जोड़ी गई है, इसे देखें project

📣 घोषणा - JavaScript के लिए नई जनरेटिव 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 खाते में पाठ्यक्रम की एक कॉपी के साथ नई रिपॉजिटरी बन जाएगी।

इन चरणों का पालन करें:

1. रिपॉजिटरी को फोर्क करें: इस पेज के शीर्ष-दाईं कोने में "Fork" बटन पर क्लिक करें।
2. रिपॉजिटरी क्लोन करें: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespace में पाठ्यक्रम चलाना

आपकी बनाई गई इस रिपॉजिटरी की कॉपी में, Code बटन पर क्लिक करें और Open with Codespaces चुनें। यह आपके लिए एक नया Codespace बनाएगा जिसमें आप काम कर सकते हैं।

अपने कंप्यूटर पर पाठ्यक्रम लोकल रूप से चलाना

अपने कंप्यूटर पर यह पाठ्यक्रम चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, कार्यक्रम भाषा और व्यापार उपकरणों का परिचय, आपको प्रत्येक उपकरण के लिए विभिन्न विकल्पों के माध्यम से मार्गदर्शन करेगा ताकि आप सही विकल्प चुन सकें।

हम अनुशंसा करते हैं कि आप अपने एडिटर के रूप में Visual Studio Code का उपयोग करें, जिसमें एक अंतर्निहित टर्मिनल भी है। आप Visual Studio Code यहाँ से डाउनलोड कर सकते हैं।

1. अपनी रिपॉजिटरी को अपने कंप्यूटर पर क्लोन करें। आप यह Code बटन पर क्लिक करके और URL कॉपी करके कर सकते हैं:

   CodeSpace फिर, Visual Studio Code के भीतर Terminal खोलें और निम्नलिखित कमांड चलाएँ, <your-repository-url> को उस URL से बदलते हुए जिसे आपने अभी कॉपी किया है:

   git clone <your-repository-url>

2. Visual Studio Code में फ़ोल्डर खोलें। आप यह File > Open Folder पर क्लिक करके और उस फ़ोल्डर का चयन करके कर सकते हैं जिसे आपने अभी क्लोन किया है।

अनुशंसित Visual Studio Code एक्सटेंशंस:

• Live Server - Visual Studio Code के भीतर HTML पेजों का पूर्वावलोकन करने के लिए
• Copilot - कोड तेजी से लिखने में आपकी मदद के लिए

📂 प्रत्येक पाठ में शामिल है:

• वैकल्पिक स्केचनोट
• वैकल्पिक पूरक वीडियो
• प्री-लेसन वेर्मअप क्विज़
• लिखित पाठ
• परियोजना-आधारित पाठों के लिए, परियोजना को बनाने के लिए चरण-दर-चरण गाइड
• ज्ञान जांच
• एक चुनौती
• पूरक पठन
• असाइनमेंट
• पाठ के बाद क्विज

क्विज के बारे में एक नोट: सभी क्विज़ क्विज-ऐप फ़ोल्डर में रखे गए हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये यहाँ उपलब्ध हैं; क्विज ऐप को स्थानीय रूप से चलाया जा सकता है या Azure पर डिप्लॉय किया जा सकता है; निर्देशों का पालन करें जो quiz-app फ़ोल्डर में हैं।

🗃️ पाठ

	परियोजना का नाम	सिखाए गए अवधरणाएँ	सीखने के उद्देश्य	संबंधित पाठ	लेखक
01	Getting Started	प्रोग्रामिंग और टूल्स का परिचय	अधिकांश प्रोग्रामिंग भाषाओं के मूल और उन सॉफ्टवेयर के बारे में सीखें जो पेशेवर डेवलपर्स को उनके काम में मदद करते हैं	प्रोग्रामिंग भाषाओं और टूल्स का परिचय	Jasmine
02	Getting Started	GitHub के मूल, टीम के साथ कार्य करना	अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें	GitHub का परिचय	Floor
03	Getting Started	पहुँच (Accessibility)	वेब पहुँच के मूल बातों को सीखें	पहुँच बुनियादी सिद्धांत	Christopher
04	JS Basics	JavaScript डेटा प्रकार	JavaScript डेटा प्रकारों के मूल बातें	डेटा प्रकार	Jasmine
05	JS Basics	फ़ंक्शन और मेथड	एप्लिकेशन की लॉजिक फ़्लो को प्रबंधित करने के लिए फ़ंक्शन और मेथड के बारे में जानें	फ़ंक्शन और मेथड	Jasmine and Christopher
06	JS Basics	JS के साथ निर्णय लेना	अपने कोड में निर्णय लेने की विधियों का उपयोग कर कंडीशंस बनाना सीखें	निर्णय लेना	Jasmine
07	JS Basics	Arrays और Loops	JavaScript में डेटा के साथ Arrays और Loops के साथ काम करें	Arrays और Loops	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	कैनवास पर चित्र बनाना	कैनवास API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को चित्रित करने के लिए किया जाता है	कैनवास पर चित्र बनाना	Chris
17	Space Game	स्क्रीन पर तत्वों को घुमाना	खोजें कि तत्व कैसे कार्टेसियन निर्देशांकों और कैनवास 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 Code Editor का उपयोग	Chris
26	AI Assistants	AI के साथ काम करना	अपना खुद का AI सहायक कैसे बनाएं सीखें	AI सहायक परियोजना	Chris

🏫 शिक्षाशास्त्र

हमारा पाठ्यक्रम दो प्रमुख शिक्षाशास्त्रीय सिद्धांतों के साथ डिज़ाइन किया गया है:

• परियोजना-आधारित सीखना
• बार-बार क्विज़

यह कार्यक्रम JavaScript, HTML, और CSS की मूल बातें सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को। छात्रों को टाइपिंग गेम, वर्चुअल टेरैरियम, पर्यावरण के अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-शैली के गेम, और व्यापारों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ हो जाएगी।

🎓 आप Microsoft Learn पर इस पाठ्यक्रम के पहले कुछ पाठ Learn Path के रूप में ले सकते हैं!

यह सुनिश्चित करते हुए कि सामग्री परियोजनाओं के अनुरूप है, प्रक्रिया छात्रों के लिए अधिक रोचक हो जाती है और अवधारणाओं को बनाए रखने में वृद्धि होती है। हमने JavaScript के मूल सिद्धांतों वाले कई प्रारंभिक पाठ भी लिखे हैं, जिनमें "Beginners Series to: JavaScript" वीडियो ट्यूटोरियल संग्रह से एक वीडियो जोड़ा है, जिनके कुछ लेखक इस पाठ्यक्रम में योगदानकर्ता हैं।

इसके अलावा, कक्षा से पहले एक कम-जमीनी क्विज़ छात्र की विषय सीखने की मंशा निर्धारित करता है, जबकि कक्षा के बाद एक दूसरा क्विज़ अवधारणाओं को और मजबूत करता है। यह पाठ्यक्रम लचीला और मजेदार बनने के लिए डिज़ाइन किया गया है जिसे पूरे या किसी हिस्से में लिया जा सकता है। परियोजनाएँ शुरू में छोटी होती हैं और 12 सप्ताह के चक्र के अंत तक बढ़ती जटिलता की होती हैं।

जबकि हमने जावास्क्रिप्ट फ्रेमवर्क पेश करने से जानबूझकर बचा है ताकि वेब डेवलपर के रूप में आवश्यक मूल कौशलों पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने का अगला अच्छा कदम Node.js के बारे में सीखना होगा, जो वीडियो संग्रह "Beginner Series to: Node.js" के माध्यम से है।

हमारे Code of Conduct और Contributing दिशानिर्देश देखें। हम आपके रचनात्मक सुझावों का स्वागत करते हैं!

🧭 ऑफलाइन पहुँच

आप Docsify का उपयोग करके इस दस्तावेज़ को ऑफलाइन चला सकते हैं। इस रिपो को फोर्क करें, अपनी स्थानीय मशीन पर Docsify इंस्टॉल करें, और फिर इस रिपॉजिटरी के रूट फोल्डर में docsify serve टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: localhost:3000।

📘 पीडीएफ

सभी पाठों का पीडीएफ यहाँ मिला जा सकता है।

🎒 अन्य पाठ्यक्रम

हमारी टीम अन्य कोर्स भी बनाती है! देखें:

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

मदद प्राप्त करना

यदि आप फंस जाते हैं या AI ऐप बनाने के बारे में कोई सवाल है, तो MCP के बारे में चर्चा में साथी शिक्षार्थियों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहाँ प्रश्नों का स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है।

यदि आपके पास उत्पाद प्रतिक्रिया या निर्माण के दौरान त्रुटियाँ हैं तो यहां जाएं:

लाइसेंस

यह रिपॉजिटरी MIT लाइसेंस के अंतर्गत लाइसेंस प्राप्त है। अधिक जानकारी के लिए LICENSE फ़ाइल देखें।

---

अस्वीकरण: यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ को उसकी मौलिक भाषा में प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या अर्थभ्रष्टता के लिए हम जिम्मेदार नहीं हैं।