31 KiB
शुरुआती के लिए वेब विकास - एक पाठ्यक्रम
Microsoft के Azure Cloud Advocates को 12-सप्ताह, 24-पाठ पाठ्यक्रम सभी JavaScript, सीएसएस और HTML मूल बातें प्रदान करने की कृपा है। प्रत्येक पाठ में पूर्व और बाद के पाठ क्विज़ शामिल हैं, पाठ को पूरा करने के लिए लिखित निर्देश, एक समाधान, एक असाइनमेंट और बहुत कुछ शामिल हैं। हमारी परियोजना-आधारित शिक्षाशास्त्र आपको निर्माण करते समय सीखने की अनुमति देता है, नए कौशल 'stick =' के लिए एक सिद्ध तरीका है।
हमारे लेखकों जेन लूपर, क्रिस नॉरिंग, क्रिस्टोफर हैरिसन, जैस्मीन ग्रीनवे, योहान लसोरा, फ़्लोर ड्रीज़ और स्केचनोट कलाकार टोमोमी इमुरा को हार्दिक धन्यवाद!
शिक्षकों, हमने इस पाठ्यक्रम का उपयोग करने के बारे में कुछ सुझाव शामिल किए हैं। यदि आप अपना स्वयं का पाठ बनाना चाहते हैं, तो हमने एक पाठ टेम्पलेट भी शामिल किया है
छात्र, अपने दम पर इस पाठ्यक्रम का उपयोग करने के लिए, पूरे रेपो को फोर्क करें और अपने दम पर अभ्यास पूरा करें, एक प्री-लेक्चर क्विज़ से शुरू करें, फिर लेक्चर को पढ़ें और बाकी गतिविधियों को पूरा करें। समाधान कोड को कॉपी करने के बजाय पाठों को समझकर परियोजनाओं को बनाने की कोशिश करें; हालाँकि यह कोड प्रत्येक प्रोजेक्ट-ओरिएंटेड पाठ में / समाधान फ़ोल्डर में उपलब्ध है। एक और विचार दोस्तों के साथ एक अध्ययन समूह बनाने और एक साथ सामग्री के माध्यम से जाने का होगा। आगे के अध्ययन के लिए, हम अनुशंसा करते हैं Microsoft Learn और नीचे दिए गए वीडियो देखकर।
परियोजना के बारे में एक वीडियो और इसे बनाने वाले लोगों के लिए ऊपर की छवि पर क्लिक करें!
शिक्षणशास्र
हमने इस पाठ्यक्रम का निर्माण करते समय दो शैक्षणिक सिद्धांतों को चुना है: यह सुनिश्चित करना कि यह परियोजना-आधारित है और इसमें बार-बार क्विज़ शामिल हैं। इस श्रृंखला के अंत तक, छात्रों ने एक टाइपिंग गेम, एक वर्चुअल टेरारियम, एक 'ग्रीन' ब्राउज़र एक्सटेंशन, एक 'स्पेस इनवेस्टर्स' टाइप गेम और एक बिजनेस-टाइप बैंकिंग ऐप बनाया होगा, और जावास्क्रिप्ट की मूल बातें सीखी होंगी। , आज के वेब डेवलपर के आधुनिक टूलचैन के साथ, HTML और सीएसएस।
यह सुनिश्चित करते हुए कि सामग्री परियोजनाओं के साथ संरेखित होती है, प्रक्रिया को छात्रों के लिए अधिक आकर्षक बनाया जाता है और अवधारणाओं की अवधारण को संवर्धित किया जाएगा। हमने अवधारणाओं को पेश करने के लिए जावास्क्रिप्ट मूल बातें में कई स्टार्टर पाठ भी लिखे, वीडियो ट्यूटोरियल के "Beginners Series to: JavaScript" संग्रह के साथ, जिनके कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया।
इसके अलावा, एक कक्षा से पहले एक कम-दांव प्रश्नोत्तरी एक विषय सीखने की दिशा में छात्र का इरादा निर्धारित करता है, जबकि कक्षा के बाद एक दूसरा प्रश्नोत्तरी एक प्रतिधारण सुनिश्चित करता है। इस पाठ्यक्रम को लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया था और इसे पूर्ण या आंशिक रूप से लिया जा सकता है। परियोजनाएं छोटी शुरू होती हैं और 12 सप्ताह के चक्र के अंत तक तेजी से जटिल हो जाती हैं।
जबकि हमने उद्देश्यपूर्ण रूप से जावास्क्रिप्ट फ्रेमवर्क शुरू करने से बचा है, ताकि एक फ्रेमवर्क अपनाने से पहले वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के लिए एक अच्छा अगला कदम वीडियो के एक अन्य संग्रह के माध्यम से Node.js के बारे में सीखना होगा: "Beginner Series to: Node.js".
हमारे आचार संहिता, योगदान, और अनुवाद दिशानिर्देश खोजें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
प्रत्येक पाठ में शामिल हैं:
- वैकल्पिक स्केचनोकोट
- वैकल्पिक पूरक वीडियो
- पूर्व-व्याख्यान वार्मअप प्रश्नोत्तरी
- लिखित पाठ
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट के निर्माण के चरण-दर-चरण मार्गदर्शिकाएँ
- ज्ञान जांच
- एक चुनौती
- पूरक पढ़ना
- असाइनमेंट
- व्याख्यान उपरांत प्रश्नोत्तरी
क्विज़ के बारे में एक नोट:सभी क्विज़ेज़ इस ऐप में शामिल हैं, तीन प्रश्नों के कुल 48 क्विज़ के लिए। वे पाठों के भीतर से जुड़े हुए हैं लेकिन क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है;
quiz-appफ़ोल्डर में दिए गए निर्देश का पालन करें। उन्हें धीरे-धीरे स्थानीयकृत किया जा रहा है।
पाठ
| प्रोजेक्टका नाम | अवधारणाओं जो सिखाया | सीखने के मकसद | लिंक किया हुआ पाठ | लिखा हुआ पाठ | स्केचनोट | असाइनमेंट | शुरुवाती प्रश्नोत्तरी | अंतिम प्रश्नोत्तरी | विडिओ | रचयिता | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 01 | शुरू करना | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के पीछे और सॉफ्टवेयर के बारे में बुनियादी जानकारी जानें जो पेशेवर डेवलपर्स को अपने काम करने में मदद करती हैं | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
| 02 | शुरू करना | गिटहब की मूल बातें, एक टीम के साथ काम करना शामिल है | अपनी परियोजना में गिटहब का उपयोग कैसे करें, कोड आधार पर दूसरों के साथ कैसे सहयोग करें | गिटहब का परिचय | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | फलर |
| 03 | शुरू करना | अभिगम्यता | वेब अभिगम्यता की मूल बातें जानें | अभिगम्यता कोष | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | क्रिस्टोफर |
| 04 | जेएस की मूलबाते | जावास्क्रिप्ट डेटा प्रकार | जावास्क्रिप्ट डेटा प्रकार की मूल बातें | डेटा प्रकार | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
| 05 | जेएस की मूलबाते | फंगक्शनस और मेथड्स | एप्लिकेशन के तर्क प्रवाह को प्रबंधित करने के लिए फंगक्शनस और मेथड्स के बारे में जानें | फंगक्शनस और मेथड्स | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन and क्रिस्टोफर |
| 06 | जेएस की मूलबाते | जेएस के साथ निर्णय करना | निर्णय लेने के मेथड्स का उपयोग करके अपने कोड में स्थितियां बनाना सीखें | निर्णय लेना | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
| 07 | जेएस की मूलबाते | अररेस और लूपस | जावास्क्रिप्ट में अररेस और लूपस का उपयोग कर डेटा के साथ काम करें | अररेस और लूपस | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
| 08 | टेरारियम | एचटीएमएल प्रैक्टिस में | लेआउट बनाने पर ध्यान केंद्रित करते हुए, एक ऑनलाइन टेरारियम बनाने के लिए HTML बनाएँ | एचटीएमएल का परिचय | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 09 | टेरारियम | सीएसएस | पृष्ठ को उत्तरदायी बनाने सहित सीएसएस की मूल बातों पर ध्यान केंद्रित करते हुए, ऑनलाइन टेरेरियम को स्टाइल करने के लिए सीएसएस का निर्माण करें | सीएसएसका परिचय | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 10 | टेरारियम | जावास्क्रिप्ट क्लोजर, डोम मनिप्यलैशन | एक टेरारियम फंगक्शन को ड्रैग/ड्रॉप इंटरफेस के रूप में बनाने के लिए जावास्क्रिप्ट का निर्माण करें ,क्लोजर और डोम मनिप्यलैशन पर ध्यान केंद्रित करके | जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 11 | टायपिंग गेम | एक टायपिंग गेम बनाए | अपने जावास्क्रिप्ट ऐप के तर्क को चलाने के लिए कीबोर्ड घटनाओं का उपयोग करना सीखें | ईवेंट-संचालित प्रोग्रामिंग | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
| 12 | ग्रीन ब्राउजर इक्स्टेन्शन | ब्राउज़रों के साथ काम करना | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले एलिमेंट्स को कैसे मचानते हैं | ब्राउज़रों के बारे में | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 13 | ग्रीन ब्राउजर इक्स्टेन्शन | एक फॉर्म का निर्माण, एक एपीआई को कॉल करना और लोकल स्टॉरिज में चर को संग्रहीत करना | लोकल स्टॉरिज में संग्रहीत चर का उपयोग करके एपीआई को कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट एलिमेंट्स का निर्माण करें | एपीआईज, फॉर्म्स, और लोकल स्टॉरिज | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
| 14 | ग्रीन ब्राउजर इक्स्टेन्शन | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और बनाने के लिए कुछ अनुकूलन के बारे में जानें | पृष्ठभूमि कार्य और प्रदर्शन | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
| 15 | स्पेस गेम | जावास्क्रिप्ट के साथ और अधिक उन्नत खेल विकास | एक खेल के निर्माण की तैयारी में क्लाससेस और काम्पज़िशन और पब/सब पैटर्न दोनों का उपयोग करके इन्हेरीटेन्स के बारे में जानें | उन्नत खेल विकास का परिचय | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 16 | स्पेस गेम | कैनवास पर ड्रॉ करना | कैनवास एपीआई के बारे में जानें, जिसका उपयोग एलिमेंट्स को स्क्रीन पर खींचने के लिए किया जाता है | कैनवास पर ड्रॉ करना | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 17 | स्पेस गेम | स्क्रीन के चारों ओर बढ़ते एलिमेंट्स | पता करे कि कार्टेशियन निर्देशांक और कैनवस एपीआई का उपयोग करके तत्व कैसे गति प्राप्त कर सकते हैं | चारों ओर बढ़ते एलिमेंट्स | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 18 | स्पेस गेम | कॉलिजन डिटेक्शन | एलिमेंट्स को आपस में टकराएं और कीपरेसेस का उपयोग करते हुए एक दूसरे से प्रतिक्रिया करें और खेल के प्रदर्शन को सुनिश्चित करने के लिए एक कुलडाउन फ़ंक्शन प्रदान करें | कॉलिजन डिटेक्शन | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 19 | स्पेस गेम | स्कोर रखना | खेल की स्थिति और प्रदर्शन के आधार पर गणित की गणना करें | स्कोर रखना | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 20 | स्पेस गेम | खेल को समाप्त करना और पुनः आरंभ करना | खेल को समाप्त करने और पुनः आरंभ करने के बारे में जानें,असेट्स को साफ करने और चरकी वैल्यू को रीसेट करने सहित | अंत की स्थिति | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 21 | बैंकिंग एप | एचटीएमएल टेम्पलेट्स और वेब ऐप में रूट | राउटिंग और एचटीएमएल टेम्प्लेट का उपयोग करके एक मल्टीफ़ेज वेबसाइट की वास्तुकला का मचान बनाना सीखें | एचटीएमएल टेम्पलेट और रूट | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 22 | बैंकिंग एप | एक लॉगिन और पंजीकरण फॉर्म बनाएँ | फॉर्म के निर्माण और सत्यापन रूटीन सौंपने के बारे में जानें | फॉर्म्स | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 23 | बैंकिंग एप | डेटा लाने और उपयोग करने के तरीके | डेटा आपके ऐप से कैसे और कैसे बहता है, इसे कैसे लाया जाए, इसे स्टोर करें और इसका दिसपोस करें | डाटा | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 24 | बैंकिंग एप | स्टेट प्रबंधन की अवधारणाएँ | जानें कि आपका ऐप किस तरह से स्थिति को बनाए रखता है और इसे कैसे व्यवस्थित रूप से प्रबंधित करता है | स्टेट प्रबंधन | ✅ | 🛑 | ✅ | ✅ | ✅ | योहन |
ऑफ़लाइन एक्सेस
आप इस दस्तावेज़ को ऑफ़लाइन कर सकते हैं Docsify का उपयोग करके। अपने स्थानीय मशीन पर इस रेपो, स्थापित डॉक्सिफ़ाइस्ट को फोर्क करें, और फिर इस रेपो के रूट फ़ोल्डर में, docsify serve टाइप करें। वेबसाइट को आपके लोकलहोस्ट पर पोर्ट 3000 पर परोसा जाएगा: localhost:3000.