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

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

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

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 - कोड तेजी से लिखने में मदद करने के लिए

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

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

क्विज़ के बारे में नोट: सभी क्विज़ 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 का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।