Microsoft क्लाउड एड्भोकेट्स द्वारा तयार पारिएको हाम्रो १२ हप्ता लामो सम्पूर्ण कोर्ससँग वेब विकासका आधारहरू सिक्नुहोस्। २४ पाठहरू प्रत्येकले JavaScript, CSS, र HTML मा टेरारियम, ब्राउजर एक्सटेन्सनहरू, र अन्तरिक्ष खेलजस्ता व्यावहारिक परियोजनाहरू मार्फत गहिराइमा जान्छन्। क्विजहरू, छलफलहरू, र व्यावहारिक कार्यहरूमा सहभागिता जनाउनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षाशैलीसँग तपाईंका सीपहरू बढाउनुहोस् र ज्ञानलाई प्रभावकारी रूपमा सम्झन सक्नुहोस्। आजै आफ्नो कोडिङ यात्रा सुरु गर्नुहोस्!
Azure AI Foundry Discord समुदायमा सामेल हुनुहोस्
यी स्रोतहरू प्रयोग गर्न सुरू गर्न यी चरणहरू पछ्याउनुहोस्:
- रेपोजिटोरी फोर्क गर्नुहोस्: क्लिक गर्नुहोस्
- रेपोजिटोरी क्लोन गर्नुहोस्:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord मा सामेल हुनुहोस् र विशेषज्ञहरू र सहकर्मी विकासकर्ताहरूसँग भेट्नुहोस्
स्थानीय रूपमा क्लोन गर्न रुचाउनुहुन्छ?
यो रेपोजिटोरीमा ५०+ भाषाका अनुवादहरू समावेश गरिएको छ जसले डाउनलोड आकार उल्लेखनीय रूपमा बढाउँछ। अनुवादहरू बिना क्लोन गर्न, 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'यसले तपाईंलाई कोर्स पूरा गर्न आवश्यक सबै सामग्री छिटो डाउनलोड गर्ने सुविधा दिन्छ।
यदि थप अनुवाद भाषाहरू समर्थन चाहनुहुन्छ भने, ती यहाँ सूचीबद्ध छन्
विद्यार्थी हब पृष्ठ भ्रमण गर्नुहोस् जहाँ तपाईंले शुरुवाती स्रोतहरू, विद्यार्थी प्याकहरू र निशुल्क प्रमाणपत्र भौचर प्राप्त गर्ने तरिकाहरू पाउनुहुनेछ। यो पृष्ठ तपाईंले समय-समयमा हेर्दै जानुपर्ने हो किनकि हामी प्रत्येक महिना सामग्री अद्यावधिक गर्छौं।
नयाँ चुनौती थपिएको छ, धेरै अध्यायहरूमा "GitHub Copilot Agent Challenge 🚀" खोज्नुहोस्। यो तपाईंलाई GitHub Copilot र Agent मोड प्रयोग गरेर पूरा गर्न नयाँ चुनौती हो। यदि अहिलेसम्म Agent मोड प्रयोग गर्नुभएको छैन भने, यसले मात्र टेक्स्ट सिर्जना गर्ने होइन, फाइलहरू सिर्जना र सम्पादन गर्ने, कमाण्डहरू चलाउने लगायतका कामहरू गर्न सक्छ।
नयाँ AI सहायक परियोजना थपिएको छ, जाँच गर्नुहोस् परियोजना
हामीले नयाँ Generative AI पाठ्यक्रम जारी गरेका छौं!
सुरु गर्न https://aka.ms/genai-js-course भ्रमण गर्नुहोस्!
- आधारहरूदेखि RAG सम्म सबै विषयहरू समेटिएका पाठहरू।
- GenAI र हाम्रो साथी एप प्रयोग गरेर ऐतिहासिक पात्रहरूसँग अन्तरक्रिया गर्नुहोस्।
- रमाइलो र आकर्षक कथा, तपाईं समयको यात्रा गर्दै हुनुहुनेछ!
प्रत्येक पाठमा पूरा गर्नको लागि कार्य, ज्ञान जाँच र चुनौती समावेश छ जसले तपाईंलाई यी विषयहरूमा मार्गदर्शन गर्दछ:
- प्रॉम्प्टिङ र प्रॉम्प्ट इन्जिनियरिङ
- टेक्स्ट र छवि एप निर्माण
- खोज एपहरू
सुरु गर्न https://aka.ms/genai-js-course भ्रमण गर्नुहोस्!
शिक्षकहरू, हामीले यस पाठ्यक्रम प्रयोग गर्ने केही सुझावहरू समावेश गरेका छौं। कृपया तपाईंको प्रतिक्रिया हाम्रो छलफल फोरम मा दिनुहोस्!
शिक्षार्थीहरू, प्रत्येक पाठको लागि, प्रि-लेक्चर क्विजसँग सुरु गर्नुहोस् र त्यसपछि लेक्चर सामग्री पढ्नुस्, विभिन्न गतिविधिहरू पूरा गर्नुस् र पोष्ट-लेक्चर क्विजमा आफ्नो बुझाइ जाँच गर्नुहोस्।
आफ्नो सिकाइ अनुभव सुधार गर्न, सहकर्मीहरूसँग मिलेर परियोजनाहरूमा काम गर्नुहोस्! छलफलहरू हाम्रो छलफल फोरम मा प्रोत्साहित गरिन्छ जहाँ हाम्रो मोडरेटर टिम तपाईंका प्रश्नहरूको उत्तर दिन उपलब्ध हुनेछ।
तपाईंको शिक्षालाई थप मजबूत बनाउन, हामी अत्यन्त रूपले अतिरिक्त अध्ययन सामग्रीका लागि Microsoft Learn अन्वेषण गर्न सिफारिस गर्छौं।
यस पाठ्यक्रमसँग विकास वातावरण तयार छ! सुरु गर्दा तपाईं यसलाई Codespace (ब्राउजरमा आधारित, कुनै स्थापना आवश्यक छैन) मा वा तपाईंको कम्प्युटरमा स्थानीय रूपमा Visual Studio Code जस्तो टेक्स्ट एडिटर प्रयोग गरेर चलाउन सक्नुहुन्छ।
आफ्नो काम सजिलै सुरक्षित गर्नको लागि, आफ्नो GitHub खातामा यो रेपोजिटोरीको एउटा प्रतिलिपि बनाउनु सिफारिस गरिन्छ। तपाईँले पृष्ठको माथि रहेको Use this template बटन थिचेर यो गर्न सक्नुहुन्छ। यसले सहपाठ्यक्रमको प्रतिलिपि सहित नयाँ रेपोजिटोरी बनाउनेछ।
यी चरणहरू अनुसरण गर्नुहोस्:
- रेपोजिटोरी फोर्क गर्नुहोस्: पृष्ठको माथि-दायाँ कुनामा रहेको "Fork" बटन थिच्नुहोस्।
- रेपोजिटोरी क्लोन गर्नुहोस्:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
तपाईंले सिर्जना गरेको आफ्नो रेपोजिटोरीमा Code बटन थिच्नुहोस् र Open with Codespaces चयन गर्नुहोस्। यसले तपाईंको लागि नयाँ Codespace सिर्जना गर्नेछ।
यस पाठ्यक्रमलाई स्थानीय रूपमा चलाउन, तपाईंलाई एउटा टेक्ट्स एडिटर, ब्राउजर, र कमाण्ड लाइन उपकरण चाहिन्छ। हाम्रो पहिलो पाठ, Introduction to Programming Languages and Tools of the Trade, यी उपकरणहरूको विभिन्न विकल्पहरू मार्फत तपाईंलाई मार्गदर्शन गर्नेछ ताकि तपाईंलाई सबैभन्दा उपयुक्त छान्न सकियोस्।
हामी सिफारिस गर्छौं कि तपाईं Visual Studio Code प्रयोग गर्नुहोस्, जसमा इनबिल्ट Terminal पनि छ। तपाईं Visual Studio Code यहाँबाट डाउनलोड गर्न सक्नुहुन्छ: यहाँ।
-
आफ्नो रेपोजिटोरीलाई आफ्नै कम्प्युटरमा क्लोन गर्नुहोस्। यो गर्नको लागि Code बटन थिचेर URL कपी गर्नुहोस्:
CodeSpace त्यसपछि, भित्र टर्मिनल खोल्नुहोस् भिजुअल स्टुडियो कोड र तलको आदेश चलाउनुहोस्,
<your-repository-url>सँग तपाईले भर्खरै कपी गर्नुभयो URL प्रतिस्थापन गर्दै:git clone <your-repository-url>
-
भिजुअल स्टुडियो कोडमा फोल्डर खोल्नुहोस्। तपाईं यो File > Open Folder क्लिक गरेर र भर्खरै क्लोन गरेको फोल्डर चयन गरेर गर्न सक्नुहुन्छ।
सिफारिस गरिएको भिजुअल स्टुडियो कोड विस्तारहरू:
- Live Server - भिजुअल स्टुडियो कोड भित्र HTML पृष्ठहरूको पूर्वावलोकन गर्न
- Copilot - तपाईंलाई छिटो कोड लेख्न मद्दत गर्न
- वैकल्पिक स्केचनोट
- वैकल्पिक पूरक भिडियो
- पूर्वपाठ वार्मअप क्विज
- लिखित पाठ
- परियोजना-आधारित पाठहरूका लागि, परियोजना बनाउन चरण-द्वारा-चरण मार्गदर्शकहरू
- ज्ञान जाँचहरू
- चुनौती
- पूरक पठन
- असाइन्मेन्ट
- पोस्ट-पाठ क्विज
क्विजहरू बारे नोट: सबै क्विजहरू Quiz-app फोल्डरमा छन्, ४८ कुल क्विजहरू प्रत्येक तीन प्रश्नका साथ। तपाई यहाँबाट उपलब्ध छन् यहाँ; क्विज एप स्थानीय रूपमा चलाउन सकिन्छ वा Azure मा परिनियोजन गर्न सकिन्छ;
quiz-appफोल्डरमा निर्देशनहरू पालन गर्नुहोस्।
| परियोजनाको नाम | सिकाइ जाने अवधारणाहरू | सिकाइ उद्देश्यहरू | सम्बद्ध पाठ | लेखक | |
|---|---|---|---|---|---|
| 01 | सुरु गर्दै | प्रोग्रामिङ परिचय र व्यापारका उपकरणहरू | प्रायः प्रोग्रामिङ भाषाहरूको आधारभूत सिद्धान्तहरू र पेशेवर विकासकर्ताहरूलाई मद्दत गर्ने सफ्टवेयर बारे जान्नुहोस् | प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय | Jasmine |
| 02 | सुरु गर्दै | GitHub का आधार, टिमसँग काम गर्ने समावेश | तपाईंको परियोजनामा GitHub कसरी प्रयोग गर्ने, कोड बेसमा अरूसँग कसरी सहकार्य गर्ने | GitHub परिचय | Floor |
| 03 | सुरु गर्दै | पहुँचयोग्यता | वेब पहुँचयोग्यताको आधारभूत कुरा सिक्नुहोस् | पहुँचयोग्यता आधारभूत कुरा | Christopher |
| 04 | JS आधारहरू | Javascript डाटा प्रकारहरू | Javascript डाटा प्रकारहरूको आधारभूत कुरा | डाटा प्रकारहरू | Jasmine |
| 05 | JS आधारहरू | फङ्सनहरू र मेथडहरू | अनुप्रयोगको लॉजिक प्रवाह व्यवस्थापन गर्न फङ्सन र मेथडहरूबारे जान्नुहोस् | फङ्सनहरू र मेथडहरू | Jasmine र Christopher |
| 06 | JS आधारहरू | JS संग निर्णयहरू गर्ने | निर्णय-निर्माण विधिहरू प्रयोग गरी तपाईंको कोडमा शर्तहरू कसरी सिर्जना गर्ने जान्नुहोस् | निर्णय लिनु | Jasmine |
| 07 | JS आधारहरू | एरेहरू र लूपहरू | 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 कल गर्न | API, फारमहरू, र स्थानीय भण्डारण | Jen |
| 14 | Green Browser Extension | ब्राउजरमा ब्याकग्राउण्ड प्रक्रियाहरू, वेब प्रदर्शन | एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको ब्याकग्राउण्ड प्रक्रियाहरू प्रयोग गर्नुहोस्; वेब प्रदर्शन र केही अनुकूलनहरू बारे जान्नुहोस् | ब्याकग्राउण्ड कार्य र प्रदर्शन | Jen |
| 15 | Space Game | Javascript सँग अझ उन्नत खेल विकास | वर्गहरू र सङ्गठन दुवै प्रयोग गरेर इनहेरिटेन्स र पब/सब् ढाँचाबारे जान्नुहोस्, खेल निर्माणको तयारीका लागि | उन्नत खेल विकास परिचय | Chris |
| 16 | Space Game | क्यानभासमा चित्रण | स्क्रिनमा तत्वहरू तान्न प्रयोग हुने क्यानभास एपीआईबारे जान्नुहोस् | क्यानभासमा चित्रण | Chris |
| 17 | Space Game | स्क्रिनमा तत्वहरू सर्नु | कार्टेसियन निर्देशांक र क्यानभास एपीआई प्रयोग गरी तत्वहरू कसरी गति लिन सक्छन् पत्ता लगाउनुहोस् | तत्वहरू सार्न | 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" भिडियो शृंखलाबाट एक भिडियोसँग जोडिएको छ, जसका केही लेखकहरूले यस पाठ्यक्रममा योगदान दिएका छन्।
थप रूपमा, कक्षाको लागि पहिले एक कम जोखिम क्विजले विद्यार्थीहरूको विषय सिकाइमा चाहना सेट गर्दछ, जबकि कक्षापछि दोस्रो क्विजले थप सम्झना सुनिश्चित गर्दछ। यो पाठ्यक्रम लचिलो र रमाइलो बनाउन डिजाइन गरिएको छ र पूरै वा भागमा लिन सकिन्छ। परियोजनाहरू सानाबाट सुरु हुन्छन् र १२ हप्ता चक्रको अन्त्यमा क्रमशः जटिल हुँदै जान्छन्।
हामीले सचेत रूपमा Javascript फ्रेमवर्कहरू प्रस्तुत नगरेका छौं किनकि फ्रेमवर्क स्वीकार्नुभन्दा पहिले वेब विकासकर्ताका लागि आवश्यक आधारभूत सीपहरूमा ध्यान केन्द्रित गर्नको लागि, यस पाठ्यक्रम पूरा गर्नको राम्रो अर्को चरण भनेको अर्को भिडियो संग्रहबाट Node.js सिक्नु हो: "Beginner Series to: Node.js"।
हाम्रो व्यवहार संहिता र योगदान गर्ने तरिका दिशानिर्देशहरू भेट्नुहोस्। हामी तपाईंको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!
तपाईं यो कागजातलाई अफलाइनमा Docsify प्रयोग गरेर चलाउन सक्नुहुन्छ। यो भण्डार फोर्क गर्नुहोस्, तपाईंको स्थानीय मेसिनमा Docsify स्थापना गर्नुहोस्, र त्यसपछि यस भण्डारको मूल फोल्डरमा docsify serve टाइप गर्नुहोस्। वेबसाइट तपाईंको लोकलहोस्टमा पोर्ट ३००० मा सेवा हुनेछ: localhost:3000।
सबै पाठहरूको PDF यहाँ फेला पार्न सकिन्छ।
हाम्रो टोलीले अन्य कोर्सहरू पनि उत्पादन गर्दछ! जाँच गर्नुहोस्:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
यदि तपाइँ अल्झनु हुन्छ वा AI अनुप्रयोगहरू निर्माण गर्दा केहि प्रश्नहरू छन् भने। MCP सम्बन्धी छलफलहरूमा साथी सिक्नेहरू र अनुभवी विकासकर्ताहरू सामेल हुनुहोस्। यो एक सहयोगी समुदाय हो जहाँ प्रश्नहरू स्वागतयोग्य छन् र ज्ञान स्वतन्त्र रूपमा साझा गरिन्छ।
यदि तपाइँसँग उत्पादन प्रतिक्रिया वा गल्तीहरू छन् भने निर्माण गर्ने क्रममा भ्रमण गर्नुहोस्:
यो रिपोजिटरी MIT अनुमति अन्तर्गत लाइसेन्स गरिएको छ। थप जानकारीको लागि LICENSE फाइल हेर्नुहोस्।
अस्वीकरण:
यस दस्तावेजलाई AI अनुवाद सेवा Co-op Translator द्वारा अनुवाद गरिएको हो। हामी सही अनुवाद गर्न प्रयास गरिरहेका छौँ भने पनि, कृपया ध्यान दिनुहोस् कि स्वत: अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। मूल दस्तावेज यसको मूल भाषामा नै प्रामाणिक स्रोत मानिनु पर्छ। महत्वपूर्ण जानकारीको लागि व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न भएका कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार छैनौं।