41 KiB

Raw Permalink Blame History

यी स्रोतहरू प्रयोग गर्न सुरु गर्न निम्न चरणहरू अनुसरण गर्नुहोस्:

रिपोजिटरीलाई Fork गर्नुहोस्: मा क्लिक गर्नुहोस्।
रिपोजिटरीलाई Clone गर्नुहोस्: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Azure AI Foundry Discord मा सामेल हुनुहोस् र विशेषज्ञहरू तथा अन्य विकासकर्तासँग भेट गर्नुहोस्

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

Microsoft Cloud Advocates द्वारा तयार गरिएको हाम्रो १२ हप्ताको व्यापक पाठ्यक्रमको साथ वेब विकासको आधारभूत कुराहरू सिक्नुहोस्। प्रत्येक २४ पाठले JavaScript, CSS, र HTML मा व्यावहारिक परियोजनाहरू जस्तै terrariums, ब्राउजर एक्सटेन्सनहरू, र स्पेस गेमहरू मार्फत गहिरो जानकारी दिन्छ। क्विजहरू, छलफलहरू, र व्यावहारिक असाइनमेन्टहरूमा संलग्न हुनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षण विधिको साथ आफ्नो सीप सुधार गर्नुहोस् र ज्ञानको प्रतिधारणलाई अनुकूल बनाउनुहोस्। आजै आफ्नो कोडिङ यात्रा सुरु गर्नुहोस्!

🧑‍🎓 के तपाईं विद्यार्थी हुनुहुन्छ?

Student Hub पृष्ठ मा जानुहोस् जहाँ तपाईंलाई शुरुआती स्रोतहरू, विद्यार्थी प्याकहरू, र नि:शुल्क प्रमाणपत्र भौचर प्राप्त गर्ने तरिकाहरू भेट्न सकिन्छ। यो पृष्ठलाई बुकमार्क गर्नुहोस् र समय-समयमा जाँच गर्नुहोस् किनभने हामी मासिक रूपमा सामग्री परिवर्तन गर्छौं।

📣 घोषणा - नयाँ पाठ्यक्रम JavaScript को लागि Generative AI

हाम्रो नयाँ Generative AI पाठ्यक्रम छुटाउनुहोस्!

https://aka.ms/genai-js-course मा जानुहोस् र सुरु गर्नुहोस्!

आधारभूतदेखि RAG सम्मका पाठहरू।
GenAI र हाम्रो साथी एप प्रयोग गरेर ऐतिहासिक पात्रहरूसँग अन्तरक्रिया गर्नुहोस्।
रमाइलो र आकर्षक कथा, तपाईं समय यात्रा गर्दै हुनुहुनेछ!

प्रत्येक पाठमा समावेश छ:

असाइनमेन्ट पूरा गर्नुहोस्।
ज्ञान जाँच।
चुनौतीहरू।
विषयहरू सिक्न मार्गदर्शन।
Prompting र prompt engineering।
Text र image app निर्माण।
Search apps।

https://aka.ms/genai-js-course मा जानुहोस् र सुरु गर्नुहोस्!

🌱 सुरु गर्दै

शिक्षकहरू, हामीले केही सुझावहरू समावेश गरेका छौं यो पाठ्यक्रम कसरी प्रयोग गर्ने। हाम्रो छलफल मञ्चमा तपाईंको प्रतिक्रिया चाहन्छौं!

शिक्षार्थीहरू, प्रत्येक पाठको लागि, प्रि-लेक्चर क्विजबाट सुरु गर्नुहोस् र लेक्चर सामग्री पढ्दै, विभिन्न गतिविधिहरू पूरा गर्दै, र पोस्ट-लेक्चर क्विजको साथ आफ्नो बुझाइ जाँच गर्नुहोस्।

तपाईंको सिकाइ अनुभवलाई सुधार गर्न, आफ्नो सहपाठीहरूसँग परियोजनाहरूमा काम गर्न जडान गर्नुहोस्! छलफलहरू हाम्रो छलफल मञ्चमा प्रोत्साहित गरिन्छ जहाँ हाम्रो मोडरेटरहरूको टोली तपाईंको प्रश्नहरूको उत्तर दिन उपलब्ध हुनेछ।

आफ्नो शिक्षा अगाडि बढाउन, हामी Microsoft Learn मा थप अध्ययन सामग्री अन्वेषण गर्न अत्यधिक सिफारिस गर्छौं।

📋 आफ्नो वातावरण सेटअप गर्दै

यो पाठ्यक्रमको विकास वातावरण तयार छ! सुरु गर्दा तपाईं Codespace (ब्राउजर-आधारित, कुनै स्थापना आवश्यक छैन) वा आफ्नो कम्प्युटरमा स्थानीय रूपमा Visual Studio Code जस्ता टेक्स्ट एडिटर प्रयोग गरेर चलाउन सक्नुहुन्छ।

आफ्नो रिपोजिटरी बनाउनुहोस्

आफ्नो काम सजिलै बचत गर्न, तपाईंले यो रिपोजिटरीको आफ्नै प्रतिलिपि बनाउनु सिफारिस गरिन्छ। तपाईंले पृष्ठको माथि रहेको Use this template बटनमा क्लिक गरेर यो गर्न सक्नुहुन्छ। यसले तपाईंको GitHub खातामा पाठ्यक्रमको प्रतिलिपि सहित नयाँ रिपोजिटरी बनाउनेछ।

यी चरणहरू अनुसरण गर्नुहोस्:

रिपोजिटरीलाई Fork गर्नुहोस्: पृष्ठको माथि-दायाँ कुनामा रहेको "Fork" बटनमा क्लिक गर्नुहोस्।
रिपोजिटरीलाई Clone गर्नुहोस्: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespace मा पाठ्यक्रम चलाउँदै

तपाईंले बनाएको यो रिपोजिटरीको प्रतिलिपिमा, Code बटनमा क्लिक गर्नुहोस् र Open with Codespaces चयन गर्नुहोस्। यसले तपाईंलाई काम गर्न नयाँ Codespace बनाउनेछ।

!Codespace

आफ्नो कम्प्युटरमा स्थानीय रूपमा पाठ्यक्रम चलाउँदै

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

हाम्रो सिफारिस Visual Studio Code प्रयोग गर्नु हो, जसमा Terminal पनि समावेश छ। तपाईं यहाँ बाट Visual Studio Code डाउनलोड गर्न सक्नुहुन्छ।

आफ्नो रिपोजिटरीलाई कम्प्युटरमा Clone गर्नुहोस्। तपाईंले Code बटनमा क्लिक गरेर URL प्रतिलिपि गर्न सक्नुहुन्छ:

!CodeSpace

त्यसपछि, Visual Studio Code भित्र Terminal खोल्नुहोस् र तलको कमाण्ड चलाउनुहोस्, <your-repository-url> लाई तपाईंले प्रतिलिपि गरेको URL सँग प्रतिस्थापन गर्नुहोस्:
```
git clone <your-repository-url>
```
Visual Studio Code मा फोल्डर खोल्नुहोस्। तपाईंले File > Open Folder मा क्लिक गरेर Clone गरिएको फोल्डर चयन गर्न सक्नुहुन्छ।

सिफारिस गरिएको Visual Studio Code एक्सटेन्सनहरू:

Live Server - HTML पृष्ठहरू Visual Studio Code भित्र प्रिभ्यू गर्न।

Copilot - कोड छिटो लेख्न मद्दत गर्न।

📂 प्रत्येक पाठमा समावेश छ:

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

क्विजहरूको बारेमा नोट: सबै क्विजहरू Quiz-app फोल्डरमा समावेश छन्, प्रत्येकमा तीन प्रश्न सहित ४८ कुल क्विजहरू। तिनीहरू यहाँ उपलब्ध छन्। Quiz-app स्थानीय रूपमा चलाउन वा Azure मा डिप्लोय गर्न सकिन्छ; quiz-app फोल्डरमा निर्देशनहरू अनुसरण गर्नुहोस्।

🗃️ पाठहरू

	परियोजनाको नाम	सिकाइ अवधारणाहरू	सिकाइ उद्देश्यहरू	लिंक गरिएको पाठ	लेखक
01	सुरु गर्दै	प्रोग्रामिङ र उपकरणहरूको परिचय	अधिकांश प्रोग्रामिङ भाषाहरूको आधारभूत कुराहरू र पेशेवर विकासकर्ताहरूले आफ्नो काम गर्न प्रयोग गर्ने सफ्टवेयरको बारेमा जान्नुहोस्	प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय	Jasmine
02	सुरु गर्दै	GitHub को आधारभूत कुराहरू, टोलीसँग काम गर्ने समावेश	आफ्नो परियोजनामा GitHub कसरी प्रयोग गर्ने, कोड बेसमा अरूसँग कसरी सहकार्य गर्ने	GitHub को परिचय	Floor
03	सुरु गर्दै	पहुँचयोग्यता	वेब पहुँचयोग्यताको आधारभूत कुराहरू सिक्नुहोस्	पहुंचयोग्यता आधारभूत	Christopher
04	JS आधारभूत	JavaScript डेटा प्रकार	JavaScript डेटा प्रकारहरूको आधारभूत कुराहरू	डेटा प्रकार	Jasmine
05	JS आधारभूत	कार्यहरू र विधिहरू	अनुप्रयोगको तर्क प्रवाह व्यवस्थापन गर्न कार्यहरू र विधिहरूको बारेमा जान्नुहोस्	कार्यहरू र विधिहरू	Jasmine and Christopher
06	JS आधारभूत	JS प्रयोग गरेर निर्णय लिने	निर्णय लिने विधिहरू प्रयोग गरेर आफ्नो कोडमा सर्तहरू कसरी सिर्जना गर्ने	निर्णय लिने	Jasmine
07	JS आधारभूत	Arrays र Loops	JavaScript मा डेटा प्रयोग गरेर Arrays र Loops काम गर्नुहोस्	Arrays र Loops	Jasmine
08	Terrarium	HTML अभ्यासमा	अनलाइन Terrarium निर्माण गर्न HTML बनाउनुहोस्, लेआउट निर्माणमा ध्यान केन्द्रित गर्दै	HTML को परिचय	Jen
09	Terrarium	CSS अभ्यासमा	अनलाइन Terrarium लाई शैली दिन CSS बनाउनुहोस्, CSS को आधारभूत कुराहरूमा ध्यान केन्द्रित गर्दै जसमा पृष्ठलाई उत्तरदायी बनाउने समावेश छ	CSS को परिचय	Jen
10	Terrarium	जाभास्क्रिप्ट क्लोजरहरू, DOM म्यानिपुलेसन	टेरारियमलाई ड्र्याग/ड्रप इन्टरफेसको रूपमा काम गर्न बनाउन जाभास्क्रिप्ट निर्माण गर्नुहोस्, क्लोजरहरू र DOM म्यानिपुलेसनमा ध्यान केन्द्रित गर्दै	जाभास्क्रिप्ट क्लोजरहरू, DOM म्यानिपुलेसन	Jen
11	Typing Game	टाइपिङ गेम बनाउनुहोस्	आफ्नो जाभास्क्रिप्ट एपको तर्कलाई चलाउन किबोर्ड इभेन्टहरू कसरी प्रयोग गर्ने सिक्नुहोस्	इभेन्ट-ड्रिभन प्रोग्रामिङ	Christopher
12	Green Browser Extension	ब्राउजरसँग काम गर्दै	ब्राउजरहरू कसरी काम गर्छन्, तिनीहरूको इतिहास, र ब्राउजर एक्सटेन्सनको पहिलो तत्वहरू कसरी स्क्याफोल्ड गर्ने भनेर सिक्नुहोस्	ब्राउजरको बारेमा	Jen
13	Green Browser Extension	फारम निर्माण, API कल गर्नु र स्थानीय स्टोरेजमा भेरिएबलहरू भण्डारण गर्नु	आफ्नो ब्राउजर एक्सटेन्सनको जाभास्क्रिप्ट तत्वहरू निर्माण गर्नुहोस् जसले स्थानीय स्टोरेजमा भण्डारण गरिएका भेरिएबलहरू प्रयोग गरेर API कल गर्दछ	APIहरू, फारमहरू, र स्थानीय स्टोरेज	Jen
14	Green Browser Extension	ब्राउजरमा पृष्ठभूमि प्रक्रिया, वेब प्रदर्शन	एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको पृष्ठभूमि प्रक्रियाहरू प्रयोग गर्नुहोस्; वेब प्रदर्शन र केही अनुकूलनहरूबारे जान्नुहोस्	पृष्ठभूमि कार्यहरू र प्रदर्शन	Jen
15	Space Game	जाभास्क्रिप्टसँग थप उन्नत गेम विकास	कक्षाहरू र कम्पोजिसन दुवै प्रयोग गरेर इनहेरिटेन्स र गेम निर्माणको तयारीमा पब/सब ढाँचाबारे जान्नुहोस्	उन्नत गेम विकासको परिचय	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

🏫 शिक्षण विधि

हाम्रो पाठ्यक्रम दुई प्रमुख शिक्षण सिद्धान्तहरूमा आधारित छ:

परियोजना-आधारित शिक्षण
बारम्बार क्विजहरू

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

🎓 तपाईले यो पाठ्यक्रमका केही प्रारम्भिक पाठहरू Microsoft Learn मा Learn Path को रूपमा लिन सक्नुहुन्छ!

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

त्यसका साथै, कक्षाको अघि कम-जोखिमको क्विजले विद्यार्थीलाई विषयवस्तु सिक्ने उद्देश्यतर्फ केन्द्रित गराउँछ, जबकि कक्षापछि अर्को क्विजले थप सम्झना सुनिश्चित गर्दछ। यो पाठ्यक्रम लचिलो र रमाइलो बनाउन डिजाइन गरिएको हो र पूर्ण वा आंशिक रूपमा लिन सकिन्छ। परियोजनाहरू साना बाट सुरु हुन्छन् र १२ हप्ताको चक्रको अन्त्यसम्ममा क्रमशः जटिल बन्छन्।

हामीले जाभास्क्रिप्ट फ्रेमवर्कहरूलाई जानाजानी समावेश नगरेका छौं ताकि फ्रेमवर्क अपनाउनु अघि वेब विकासकर्ताको रूपमा आवश्यक आधारभूत सीपहरूमा ध्यान केन्द्रित गर्न सकियोस्। यो पाठ्यक्रम पूरा गरेपछि अर्को राम्रो कदम भनेको "Beginner Series to: Node.js" भिडियोहरूको अर्को संग्रह मार्फत Node.js सिक्नु हुनेछ।

हाम्रो Code of Conduct र Contributing दिशानिर्देशहरू हेर्नुहोस्। हामी तपाईंको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!

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

तपाईं Docsify प्रयोग गरेर यो डकुमेन्टेसन अफलाइन चलाउन सक्नुहुन्छ। यो रिपोजिटरी फोर्क गर्नुहोस्, आफ्नो स्थानीय मेसिनमा Docsify इन्स्टल गर्नुहोस्, र त्यसपछि यो रिपोजिटरीको रुट फोल्डरमा docsify serve टाइप गर्नुहोस्। वेबसाइट तपाईंको लोकलहोस्टमा पोर्ट ३००० मा सर्भ हुनेछ: localhost:3000।

📘 PDF

सबै पाठहरूको PDF यहाँ फेला पार्न सकिन्छ।

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

हाम्रो टोलीले अन्य पाठ्यक्रमहरू उत्पादन गर्दछ! हेर्नुहोस्:

लाइसेन्स

यो रिपोजिटरी MIT लाइसेन्स अन्तर्गत लाइसेन्स गरिएको छ। थप जानकारीको लागि LICENSE फाइल हेर्नुहोस्।

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

41 KiB Raw Permalink Blame History