यह शुरुआती लोगों को वेब विकास के मूल तत्व सिखाने के लिए एक शैक्षिक पाठ्यक्रम रिपॉजिटरी है। यह पाठ्यक्रम एक संपूर्ण 12-सप्ताह का कोर्स है जिसे Microsoft क्लाउड एडवोकेट्स द्वारा विकसित किया गया है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 व्यावहारिक पाठ होते हैं।
यह शुरुआती लोगों को वेब विकास की बुनियाद सिखाने के लिए एक शैक्षिक पाठ्यक्रम रिपॉजिटरी है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS और HTML को कवर करने वाले 24 व्यावहारिक पाठ शामिल हैं।
### प्रमुख घटक
### मुख्य घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **व्यावहारिक परियोजनाएँ**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और एआई चैट असिस्टेंट
- **इंटरएक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (पाठ से पहले और बाद में मूल्यांकन)
- **बहु-भाषा समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद
- `6-space-game/README.md` - कैनवास-आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट असिस्टेंट प्रोजेक्ट
### मोनोरिपॉ संरचना
### मोनोरिपो संरचना
हालांकि यह पारंपरिक मोनोरिपॉ नहीं है, इस रिपॉजिटरी में कई स्वतंत्र परियोजनाएँ हैं:
हालांकि यह पारंपरिक मोनोरिपो नहीं है, इस रिपॉजिटरी में कई स्वतंत्र प्रोजेक्ट्स हैं:
- प्रत्येक पाठ स्वतंत्र है
- परियोजनाएँ निर्भरताओं को साझा नहीं करती हैं
- अन्य परियोजनाओं को प्रभावित किए बिना व्यक्तिगत परियोजनाओं पर काम करें
- पूर्ण पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें
- प्रोजेक्ट्स निर्भरताएं साझा नहीं करते
- एक प्रोजेक्ट पर काम करें बिना दूसरों को प्रभावित किए
- पूरा पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकृति**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
**अस्वीकरण**:
इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या असत्यताएँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
माइक्रोसॉफ्ट क्लाउड अधिवक्ताओं द्वारा हमारे 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास के मूल सिद्धांत सीखें। 24 पाठों में से प्रत्येक जावास्क्रिप्ट, CSS, और HTML को हाथ से किए जाने वाले प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशन्स, और स्पेस गेम्स के माध्यम से गहराई से समझाता है। क्विज़, चर्चाओं और व्यावहारिक असाइनमेंट्स में भाग लें। हमारे प्रभावी प्रोजेक्ट-आधारित पद्धति के साथ अपनी क्षमताओं को बढ़ाएं और अपने ज्ञान को अधिकतम करें। आज ही अपनी कोडिंग यात्रा शुरू करें!
Microsoft Cloud Advocates द्वारा प्रस्तुत हमारे 12 सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास की मूल बातें सीखें। 24 पाठों में से प्रत्येक में तरैरियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे प्रायोगिक परियोजनाओं के माध्यम से JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं और व्यावहारिक असाइंमेंट्स के साथ जुड़ें। हमारे प्रभावी परियोजना-आधारित शिक्षण पद्धति के साथ अपने कौशल को निखारें और अपनी ज्ञान धारणा को बढ़ाएं। अपनी कोडिंग यात्रा आज ही शुरू करें!
Azure AI Foundry Discord समुदाय में शामिल हों
Azure AI Foundry Discord से जुड़ें और विशेषज्ञों और साथी डेवलपर्स से मिलें।
> यह रिपॉजिटरी 50+ भाषा अनुवाद शामिल करती है जो डाउनलोड आकार को काफी बढ़ा देती है। बिना अनुवाद के क्लोन करने के लिए स्पार्स चेकआउट का उपयोग करें:
> इस रिपॉजिटरी में 50+ भाषा अनुवाद शामिल हैं जो डाउनलोड साइज को काफी बढ़ा देते हैं। अनुवाद के बिना क्लोन करने के लिए sparse checkout का उपयोग करें:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,96 +36,96 @@ Azure AI Foundry Discord समुदाय में शामिल हों
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> इससे आपको कोर्स पूरा करने के लिए आवश्यक सब कुछ अधिक तेजी से डाउनलोड मिलेगा।
> यह आपको तेज़ डाउनलोड के साथ पूरा पाठ्यक्रम पूरा करने के लिए सब कुछ प्रदान करता है।
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**यदि आप अतिरिक्त अनुवाद भाषाओं को शामिल करना चाहते हैं, तो ये यहाँ सूचीबद्ध हैं [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**यदि आप अतिरिक्त अनुवाद चाहते हैं, तो समर्थित भाषाएँ यहां सूचीबद्ध हैं। [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _क्या आप छात्र हैं?_
[**Student Hub पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं जहाँ आप शुरुआती संसाधन, छात्र पैक और मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके पा सकते हैं। यह पेज आपका पसंदीदा होना चाहिए और समय-समय पर जांचते रहना चाहिए क्योंकि हम मासिक रूप से कंटेंट अपडेट करते हैं।
[**Student Hub पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं जहां आपको शुरुआती संसाधन, छात्र पैक और मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आपको बुकमार्क करना चाहिए और नियमित रूप से जांचना चाहिए क्योंकि हम मासिक आधार पर सामग्री को अपडेट करते हैं।
### 📣 घोषणा - नए GitHub Copilot एजेंट मोड चुनौतियाँ पूरी करें!
नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपकी नई चुनौती है जिसे आप GitHub Copilot और Agent मोड का उपयोग करके पूरा कर सकते हैं। अगर आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और बहुत कुछ कर सकता है।
नया चैलेंज जोड़ा गया है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपके लिए GitHub Copilot और एजेंट मोड का उपयोग करके पूरी करने के लिए एक नया चैलेंज है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है तो यह न केवल टेक्स्ट जनरेट कर सकता है बल्कि फाइलें बना और संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ।
### 📣 घोषणा - _Generative AI का उपयोग करके नया प्रोजेक्ट बनाएँ_
### 📣 घोषणा - _जनरेटिव AI का उपयोग करके नया प्रोजेक्ट बनाएं_
नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
नया AI असिस्टेंट प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
### 📣 घोषणा - _Generative AI के लिए नया पाठ्यक्रम_ JavaScript के लिए अभी जारी किया गया
### 📣 घोषणा - _जनरेटिव AI पर नया पाठ्यक्रम_ जावास्क्रिप्ट के लिए जारी हुआ
हमारा नया Generative AI पाठ्यक्रम खोना मत!
हमारा नया जनरेटिव AI पाठ्यक्रम मत चूकिये!
शुरू करने के लिए जाएं [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
शुरू करने के लिए यहां जाएं: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
हर पाठ में एक असाइंमेंट, ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों को सीखने में मार्गदर्शन करेगी:
प्रत्येक पाठ में पूरा करने के लिए एक असाइनमेंट, एक ज्ञान परीक्षा और एक चैलेंज शामिल है जो आपको निम्नलिखित विषयों से परिचित कराएगा:
- प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग
- टेक्स्ट और छवि ऐप जनरेशन
- टेक्स्ट और इमेज ऐप निर्माण
- खोज ऐप्स
शुरू करने के लिए जाएं [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
शुरू करने के लिए यहां जाएं: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 शुरुआत करना
## 🌱 शुरूआत करना
> **शिक्षक**, हमने [कुछ सुझाव शामिल किए हैं](for-teachers.md) कि इस पाठ्यक्रम का उपयोग कैसे करें। हम आपके फीडबैक का स्वागत करते हैं [हमारे चर्चा मंच पर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **शिक्षकगण**, हमने [कुछ सुझाव शामिल किए हैं](for-teachers.md) कि इस पाठ्यक्रम का उपयोग कैसे करें। हम आपकी प्रतिक्रिया चाहते हैं [हमारे चर्चा मंच में](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[सीखने वाले](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठ के लिए, प्री-लेक्चर क्विज़ से शुरू करें और फिर व्याख्यान सामग्री पढ़ें, विभिन्न गतिविधियों को पूरा करें और पोस्ट-लेक्चर क्विज़ से अपनी समझ जांचें।
**[शिक्षार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, हर पाठ के लिए, पहले प्री-लेक्चर क्विज़ से शुरू करें और फिर व्याख्यान सामग्री पढ़ें, विभिन्न गतिविधियाँ पूरी करें और अपनी समझ जांचने के लिए पोस्ट-लेक्चर क्विज़ करें।
अपने सीखने के अनुभव को बढ़ाने के लिए, अपने साथियों के साथ जुड़ें और परियोजनाओं पर मिलकर काम करें! चर्चाएँ हमारे [चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में प्रोत्साहित की जाती हैं जहाँ हमारे मॉडरेटर आपकी प्रश्नों का जवाब देंगे।
अपनी सीखने की प्रक्रिया को बेहतर बनाने के लिए, अपने साथियों के साथ मिलकर परियोजनाओं पर काम करें! चर्चाओं का स्वागत है हमारे [चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में जहां हमारे मॉडरेटर्स आपकी प्रश्नों का उत्तर देने के लिए उपलब्ध होंगे।
अपनी शैक्षिक यात्रा को और आगे बढ़ाने के लिए, हम अतिरिक्त अध्ययन सामग्री के लिए [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) का पता लगाने की सलाह देते हैं।
अपनी शिक्षा को और आगे बढ़ाने के लिए, हम अत्यधिक अनुशंसा करते हैं कि आप अतिरिक्त अध्ययन सामग्री के लिए [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) का अन्वेषण करें।
### 📋 अपना परिवेश सेट करना
### 📋 अपना पर्यावरण सेटअप करना
इस पाठ्यक्रम के लिए विकास पर्यावरण तैयार है! शुरुआत करते समय, आप इसे [Codespace](https://github.com/features/codespaces/) (_एक ब्राउज़र-आधारित, बिना इंस्टॉल के पर्यावरण_) में चला सकते हैं, या अपने कंप्यूटर पर कोई टेक्स्ट एडिटर जैसे [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग कर सकते हैं।
इस पाठ्यक्रम के लिए एक विकास पर्यावरण तैयार है! जैसे ही आप शुरू करते हैं, आप पाठ्यक्रम को [Codespace](https://github.com/features/codespaces/) (_एक ब्राउज़र-आधारित, बिना इंस्टॉल के पर्यावरण_) में या स्थानीय रूप से अपने कंप्यूटर पर [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जैसे टेक्स्ट एडिटर का उपयोग करके चला सकते हैं।
#### अपनी रिपॉजिटरी बनाएँ
अपने कार्य को आसानी से संग्रहीत करने के लिए अपनी कॉपी बनाना अनुशंसित है। ऐसा करने के लिए पृष्ठ के शीर्ष पर **Use this template** बटन पर क्लिक करें। इससे आपके GitHub खाते में पाठ्यक्रम की कॉपी के साथ एक नई रिपॉजिटरी बन जाएगी।
#### अपनी रिपॉजिटरी बनाएं
अपना काम आसानी से सहेजने के लिए, यह अनुशंसित है कि आप इस रिपॉजिटरी की अपनी प्रति बनाएं। आप ऐसा पेज के शीर्ष पर **Use this template** बटन पर क्लिक करके कर सकते हैं। यह आपके GitHub खाते में पाठ्यक्रम की एक प्रति के साथ एक नई रिपॉजिटरी बनाएगा।
इन चरणों का पालन करें:
1. **रिपॉजिटरी फोर्क करें**: इस पृष्ठ के ऊपरी-दाएँ कोने में "Fork" बटन पर क्लिक करें।
1. **रिपॉजिटरी का फोर्क करें**: इस पेज के ऊपर-दाएँ कोने में "Fork" बटन पर क्लिक करें।
जिस कॉपी की आपने बनाई है, उसमें**Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। इससे आपके काम के लिए नया Codespace बन जाएगा।
अपनी बनाई गई इस रिपॉजिटरी की प्रति में,**Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए एक नया Codespace बनाएगा जिसमें आप काम कर सकते हैं।
#### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना
अपने कंप्यूटर पर इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की ज़रूरत होगी। हमारा पहला पाठ, [प्रोग्रामिंग भाषाओं और ट्रेड टूल का परिचय](../../1-getting-started-lessons/1-intro-to-programming-languages), आपके लिए इन उपकरणों की विभिन्न विकल्पों के बारे में मार्गदर्शन करेगा।
अपने कंप्यूटर पर स्थानीय रूप से इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), आपको प्रत्येक उपकरण के विकल्पों के बारे में मार्गदर्शन करेगा ताकि आप अपने लिए सबसे उपयुक्त चयन कर सकें।
हमारी सिफारिश है कि आप अपने संपादक के रूप में [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग करें, जिसमें एक अंतर्निर्मित [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी है। आप Visual Studio Code को [यहाँ से डाउनलोड कर सकते हैं](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)।
1. अपने कंप्यूटर पर अपने रिपॉजिटरी को क्लोन करें। आप इसे**Code** बटन पर क्लिक करके और URL कॉपी करके कर सकते हैं:
हमारी सिफारिश है कि आप अपने एडिटर के रूप में [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग करें, जिसमें एक अंतर्निहित [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी होता है। आप Visual Studio Code को [यहां](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) से डाउनलोड कर सकते हैं।
1. अपने रिपॉज़िटरी को अपने कंप्यूटर पर क्लोन करें। आप यह**Code** बटन पर क्लिक करके और URL कॉपी करके कर सकते हैं:
[CodeSpace](./images/createcodespace.png)
फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) के भीतर [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्न कमांड चलाएं, `<your-repository-url>` को उस URL से बदलते हुए जिसे आपने अभी कॉपी किया है:
फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) के अंदर [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्न कमांड चलाएँ, `<your-repository-url>` को उस URL से बदलते हुए जो आपने अभी कॉपी किया है:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code में फोल्डर खोलें। आप इसे**File** > **Open Folder** पर क्लिक करके और उस फोल्डर को चुनकर कर सकते हैं जिसे आपने अभी क्लोन किया है।
2. Visual Studio Code में फ़ोल्डर खोलें। आप यह**File** > **Open Folder** पर क्लिक करके और उस फ़ोल्डर का चयन करके कर सकते हैं जिसे आपने अभी क्लोन किया है।
> अनुशंसित Visual Studio Code एक्सटेंशन:
> अनुशंसित Visual Studio Code एक्सटेंशन्स:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code के भीतर HTML पेजों का पूर्वावलोकन करने के लिए
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड तेजी से लिखने में मदद करने के लिए
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code के अंदर HTML पेज का पूर्वावलोकन करने के लिए
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड लिखने में तेज़ी से मदद के लिए
## 📂 प्रत्येक पाठ में शामिल हैं:
@ -145,75 +133,75 @@ Azure AI Foundry Discord समुदाय में शामिल हों
- वैकल्पिक पूरक वीडियो
- पूर्व-पाठ वार्मअप क्विज़
- लिखित पाठ
- प्रोजेक्ट-आधारित पाठों के लिए, परियोजना कैसे बनाएं पर चरण-दर-चरण मार्गदर्शिकाएँ
- प्रोजेक्ट-आधारित पाठों के लिए, परियोजना बनाने के चरण-दर-चरण मार्गदर्शिका
> **क्विज़ के बारे में नोट**: सभी क्विज़ Quiz-app फोल्डर में निहित हैं, कुल 48 क्विज़, प्रत्येक में तीन प्रश्न। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं; क्विज़ ऐप स्थानीय रूप से चलाया जा सकता है या Azure पर तैनात किया जा सकता है; `quiz-app` फोल्डर में निर्देश का पालन करें।
> **क्विज़ के बारे में एक नोट**: सभी क्विज़ क्विज़-ऐप फ़ोल्डर में संग्रहित हैं, प्रत्येक में तीन प्रश्नों के साथ कुल 48 क्विज़ हैं। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं। क्विज़ ऐप को स्थानीय रूप से या Azure पर चलाया जा सकता है; `quiz-app` फ़ोल्डर में निर्देशों का पालन करें।
## 🗃️ पाठ
| | परियोजना का नाम | सिखाई गई अवधारणाएं | शिक्षण उद्देश्य | लिंक्ड पाठ | लेखक |
| | परियोजना का नाम | सिखाए गए अवधारणाएँ | सीखने के उद्देश्य | लिंक्ड पाठ | लेखक |
| 01 | Getting Started | प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल तत्व और ऐसे सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके कार्यों में मदद करते हैं | [प्रोग्रामिंग भाषाओं और उपकरणों का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub की बुनियादी बातें, जिसमें टीम के साथ काम शामिल है | अपने प्रोजेक्ट में GitHub कैसे उपयोग करें, एक कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | पहुंच योग्यता | वेब पहुंच योग्यता के मूल बातें सीखें | [पहुंच योग्यता के मूल तत्व](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Basics | फ़ंक्शंस और मेथड्स | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शंस और मेथड्स के बारे में जानें | [फ़ंक्शंस और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher |
| 06 | JS Basics | JS के साथ निर्णय लेना | निर्णय लेने की विधियों का उपयोग करके अपने कोड में शर्तें कैसे बनाएं सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | ऐरे और लूप्स | JavaScript में डेटा के साथ ऐरे और लूप्स का उपयोग करें | [ऐरे और लूप्स](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML का अभ्यास | एक ऑनलाइन टेरैरियम बनाने के लिए HTML बनाएं, लेआउट निर्माण पर केंद्रित | [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS का अभ्यास | ऑनलाइन टेरैरियम को स्टाइल करने के लिए CSS बनाएं, CSS के मूल बातें सीखते हुए पृष्ठ को उत्तरदायी बनाना | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोजर, DOM मैनिपुलेशन | टेरैरियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में काम करने के लिए JavaScript बनाएं, क्लोजर और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | [JavaScript क्लोजर, DOM मैनिपुलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | एक टाइपिंग गेम बनाना | अपने JavaScript ऐप की लॉजिक को नियंत्रित करने के लिए कीबोर्ड इवेंट्स का उपयोग कैसे करें | [इवेंट-ड्रिवन प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनके इतिहास के बारे में जानें, और एक ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफोल्ड कैसे करें | [ब्राउज़र्स के बारे में](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | एक फॉर्म बनाना, API कॉल करना और स्थानीय स्टोरेज में वेरिएबल्स स्टोर करना | अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं ताकि स्थानीय स्टोरेज में संग्रहित वेरिएबल्स का उपयोग करते हुए API कॉल करें | [APIs, फॉर्म, और स्थानीय स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएँ, वेब प्रदर्शन | एक्सटेंशन के आइकन का प्रबंधन करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन की जानकारी प्राप्त करें | [पृष्ठभूमि कार्य और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript के साथ अधिक उन्नत गेम विकास | इनहेरिटेंस के बारे में जानें, दोनों क्लासेस और कॉम्पोजीशन के साथ, और Pub/Sub पैटर्न के साथ, एक गेम निर्माण की तैयारी में | [उन्नत गेम विकास का परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | कैनवास पर चित्र खींचना | स्क्रीन पर तत्वों को ड्रॉ करने के लिए उपयोग की जाने वाली Canvas API के बारे में जानें | [कैनवास पर ड्रॉइंग](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को घुमाना | पता लगाएं कि कैसे तत्व कार्टेशियन समन्वय और Canvas API का उपयोग करके गति प्राप्त कर सकते हैं | [तत्वों को घुमाना](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | टक्कर का पता लगाना | तत्वों को आपस में टकराने और कीप्रेस का उपयोग करके प्रतिक्रिया देने के लिए बनाएं और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फ़ंक्शन प्रदान करें | [टक्कर का पता लगाना](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | स्कोर बनाए रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणना करें | [स्कोर बनाए रखना](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | गेम खत्म करना और पुनः प्रारंभ करना | गेम को समाप्त करने और पुनः प्रारंभ करने के बारे में जानें, जिसमें संसाधनों की सफाई और वेरिएबल मानों को रीसेट करना शामिल है | [समाप्ति शर्त](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | वेब ऐप में HTML टेम्पलेट्स और रूट्स | राउटिंग और HTML टेम्पलेट्स का उपयोग करके एक मल्टीपेज वेबसाइट की संरचना का निर्माण करना सीखें | [HTML टेम्पलेट्स और रूट्स](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | लॉगिन और रजिस्ट्रेशन फ़ॉर्म बनाएं | फॉर्म बनाने और वैधता प्रक्रियाओं के बारे में जानें | [फॉर्म](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | डेटा प्राप्त करने और उपयोग करने के तरीके | आपके ऐप में डेटा कैसे आता है और जाता है, इसे कैसे प्राप्त करें, संग्रहित करें और निपटान करें | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | राज्य प्रबंधन की अवधारणाएँ | अपने ऐप में राज्य कैसे रखा जाता है और इसे प्रोग्रामिंग द्वारा कैसे प्रबंधित करें | [राज्य प्रबंधन](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode के साथ काम करना | कोड संपादक के उपयोग के बारे में सीखें | [VScode कोड संपादक का उपयोग करें](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI के साथ काम करना | अपना स्वयं का AI सहायक कैसे बनाएं सीखें | [AI सहायक प्रोजेक्ट](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षणशास्त्र
हमारा पाठ्यक्रम दो मुख्य शिक्षण सिद्धांतों के साथ डिजाइन किया गया है:
* प्रोजेक्ट-आधारित शिक्षण
| 01 | शुरुआत | प्रोग्रामिंग का परिचय और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल तत्वों को सीखें और उन सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को अपना काम करने में मदद करते हैं | [प्रोग्रामिंग भाषाओं और उपकरणों का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | शुरुआत | GitHub के मूल बातें, एक टीम के साथ काम करना | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | शुरुआत | पहुंचीयता | वेब पहुँच की बुनियादी बातें सीखें | [पहुंचीयता के मूलभूत सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS मूल बातें | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों के मूल बातें | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS मूल बातें | फ़ंक्शन और मेथड | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शन और मेथड के बारे में सीखें | [फ़ंक्शन और मेथड](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS मूल बातें | JS के साथ निर्णय लेना | निर्णय लेने की विधियों का उपयोग करके अपने कोड में शर्तें कैसे बनाएं सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS मूल बातें | Arrays और Loops | JavaScript में डेटा के साथ काम करने के लिए arrays और loops का उपयोग करें | [Arrays और Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML प्रैक्टिस में | एक ऑनलाइन टेरीरियम बनाने के लिए HTML बनाएं, मुख्य रूप से लेआउट बनाने पर केंद्रित | [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS प्रैक्टिस में | ऑनलाइन टेरीरियम को स्टाइल करने के लिए CSS बनाएं, CSS के मूलभूत सिद्धांतों सहित पेज को उत्तरदायी बनाना | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM मैनेजमेंट | टेरीरियम को ड्रैग/ड्रॉप इंटरफेस के रूप में कार्य करने के लिए JavaScript बनाएं, closures और DOM मैनेजमेंट पर ध्यान केंद्रित | [JavaScript Closures, DOM मैनेजमेंट](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | टाइपिंग गेम बनाएं | अपने JavaScript ऐप के लॉजिक को चलाने के लिए कीबोर्ड इवेंट का उपयोग कैसे करें सीखें | [इवेंट-ड्रिवन प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़रों के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनका इतिहास, और ब्राउज़र एक्सटेंशन के पहले तत्व बनाए जाने के बारे में सीखें | [ब्राउज़रों के बारे में](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल्स स्टोर करना | API को कॉल करने के लिए ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं, जो लोकल स्टोरेज में संग्रहित वेरिएबल्स का उपयोग करते हैं | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़र में बैकग्राउंड प्रोसेस, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करें; वेब प्रदर्शन और प्रदर्शन बेहतर बनाने के कुछ ऑप्टिमाइज़ेशन सीखें | [बैकग्राउंड टास्क और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript के साथ और अधिक उन्नत गेम डेवलपमेंट | कक्षाओं और संयोजन दोनों का उपयोग करके वंशानुक्रम और Pub/Sub पैटर्न के बारे में जानें, गेम बनाने की तैयारी के लिए | [उन्नत गेम डेवलपमेंट का परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | कैनवास पर ड्राइंग | स्क्रीन पर तत्वों को ड्रॉ करने के लिए उपयोग किए जाने वाले Canvas API के बारे में जानें | [कैनवास पर ड्राइंग](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को घूमाना | तर्कसंगत निर्देशांकों और Canvas API का उपयोग करके तत्वों को गति प्राप्त करने के तरीके खोजें | [तत्वों को घुमाना](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | टकराव का पता लगाना | तत्वों को टकराने और एक-दूसरे के साथ प्रतिक्रिया करने दें, कीप्रेस का उपयोग करें और गेम के प्रदर्शन सुनिश्चित करने के लिए कूलडाउन फ़ंक्शन प्रदान करें | [टकराव पहचान](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | स्कोर रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें | [स्कोर रखना](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | गेम खत्म करना और पुनः आरंभ करना | गेम को खत्म और पुनः आरंभ करने के बारे में जानें, जिसमें संसाधनों को साफ़ करना और वेरिएबल मानों को रीसेट करना शामिल है | [समाप्ति शर्त](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | वेब ऐप में HTML टेम्पलेट्स और रूट्स | रूटिंग और HTML टेम्पलेट्स का उपयोग करके मल्टीपेज वेबसाइट के ढाँचे को बनाना सीखें | [HTML टेम्पलेट्स और रूट्स](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | लॉगिन और रजिस्ट्रेशन फ़ॉर्म बनाएं | फ़ॉर्म बनाने और वैलिडेशन रुटीन को नियंत्रित करने के बारे में जानें | [फ़ॉर्म](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | डेटा प्राप्त करने और उपयोग करने के तरीके | आपके ऐप में डेटा कैसे आता और जाता है, इसे कैसे प्राप्त करें, स्टोर करें और समाप्त करें | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | राज्य प्रबंधन के अवधारणाएँ | जानें कि आपका ऐप राज्य को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित करें | [राज्य प्रबंधन](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode के साथ काम करना | सीखें कि कोड संपादक का उपयोग कैसे करें| [VScode कोड संपादक का उपयोग](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI के साथ काम करना | अपना खुद का AI सहायक कैसे बनाएं सीखें | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षाशास्त्र
हमारे पाठ्यक्रम को दो मुख्य शिक्षाशास्त्रीय सिद्धांतों के साथ डिज़ाइन किया गया है:
* परियोजना-आधारित शिक्षा
* बार-बार क्विज़
यह कार्यक्रम JavaScript, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्रों को टाइपिंग गेम, वर्चुअल टेरैरियम, पर्यावरण के अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली गेम, और व्यवसायों के लिए एक बैंकिंग ऐप बनाने के माध्यम से व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी।
यह प्रोग्राम JavaScript, HTML, और CSS के बुनियादी सिद्धांतों को सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को भी। छात्र टाइपिंग गेम, वर्चुअल टेरीरियम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-शैली गेम, और व्यावसायिक बैंकिंग ऐप बनाकर व्यावहारिक अनुभव विकसित करने का अवसर पाएंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ होगी।
> 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठों को Microsoft Learn पर [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं!
> 🎓 आप Microsoft Learn पर इस पाठ्यक्रम के पहले कुछ पाठों को एक [सीखने के पथ](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं!
सुनिश्चित करके कि सामग्री परियोजनाओं के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बनती है और अवधारणाओं का प्रतिधारण बढ़ता है। हमने कई शुरुआती पाठ JavaScript बुनियादी बातें में लिखे हैं ताकि अवधारणाओं का परिचय दिया जा सके, जिनके साथ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह का एक वीडियो है, जिनमें से कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं।
सुनिश्चित करके कि सामग्री परियोजनाओं के अनुरूप है, प्रक्रिया छात्रों के लिए अधिक रोचक बनती है और अवधारणाओं की अवधारण क्षमता बढ़ती है। हमने JavaScript मूल बातों में कई प्रारंभिक पाठ भी लिखे हैं ताकि अवधारणाएँ परिचित कराई जा सकें, जो "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह से एक वीडियो के साथ संयोजित हैं, जिनमें से कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया है।
इसके अतिरिक्त, कक्षा से पहले एक कम-दांव वाला क्विज़ छात्र की सीखने की इच्छा को निर्धारित करता है, जबकि कक्षा के बाद दूसरा क्विज़ और अधिक अवधारणाओं को स्थायी बनाता है। यह पाठ्यक्रम लचीला और मजेदार होने के लिए डिजाइन किया गया है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। परियोजनाएँ छोटी शुरुआत से शुरू होकर 12-सप्ताह के चक्र के अंत तक अधिक जटिल होती जाती हैं।
इसके अलावा, कक्षा से पहले एक कम जोखिम वाला क्विज़ छात्र की एक विषय सीखने की मनोदृष्टि तय करता है, जबकि कक्षा के बाद दूसरा क्विज़ और भी बेहतर अवधारण सुनिश्चित करता है। यह पाठ्यक्रम लचीला और मज़ेदार है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। परियोजनाएं छोटी शुरू होती हैं और 12-सप्ताह के चक्र के अंत में अधिक जटिल होती जाती हैं।
हमने जानबूझकर JavaScript फ्रेमवर्क पेश करने से बचा है ताकि एक वेब डेवलपर के रूप में बुनियादी कौशलों पर ध्यान केंद्रित किया जा सके, फ्रेमवर्क अपनाने से पहले; इस पाठ्यक्रम को पूरा करने का अगला अच्छा कदम Node.js के बारे में सीखना होगा एक अन्य वीडियो संग्रह के माध्यम से: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
जबकि हमने एक फ़्रेमवर्क अपनाने से पहले वेब डेवलपर के रूप में आवश्यक बुनियादी कौशलों पर ध्यान केंद्रित करने के लिए जानबूझकर JavaScript फ्रेमवर्क पेश करने से बचा है, इस पाठ्यक्रम को पूरा करने का एक अच्छा अगला कदम Node.js के बारे में सीखना होगा, जो एक अन्य वीडियो संग्रह से होता है: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> हमारे [Code of Conduct](CODE_OF_CONDUCT.md) और [Contributing](CONTRIBUTING.md) गाइडलाइन्स देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
> हमारे [Code of Conduct](CODE_OF_CONDUCT.md) और [Contributing](CONTRIBUTING.md) दिशानिर्देश देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
## 🧭 ऑफ़लाइन एक्सेस
## 🧭 ऑफलाइन पहुंच
आप [Docsify](https://docsify.js.org/#/) का उपयोग करके इस दस्तावेज़ को ऑफलाइन चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, अपने स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), और फिर इस रिपॉजिटरी की रूट फ़ोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर संचालित होगी: `localhost:3000`।
आप [Docsify](https://docsify.js.org/#/) का उपयोग करके इस दस्तावेज़ को ऑफ़लाइन चला सकते हैं। इस रिपॉज़िटरी को फोर्क करें, अपनी स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), फिर इस रिपॉज़िटरी की रूट फ़ोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: `localhost:3000`।
## 📘 पीडीएफ
सभी पाठों का एक पीडीएफ [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) उपलब्ध है।
## 📘 PDF
सभी पाठों का एक PDF [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
## 🎒 अन्य कोर्स
## 🎒 अन्य पाठ्यक्रम
हमारी टीम अन्य कोर्स भी बनाती है! देखें:
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -222,7 +210,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / एजेंट्स
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -230,7 +218,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों
---
### जनरेटिव AI श्रृंखला
### जनरेटिव एआई श्रृंखला
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -238,7 +226,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों
---
### कोर सीखना
### कोर लर्निंग
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -249,29 +237,29 @@ Azure AI Foundry Discord समुदाय में शामिल हों
---
### Copilot श्रृंखला
### कोपायलट श्रृंखला
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
यदि आप फंस गए हैं या AI एप्लिकेशन बनाने के बारे में कोई प्रश्न हैं। MCP के बारे में चर्चा में अन्य सीखने वालों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहां प्रश्न स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है।
यदि आप फंस जाते हैं या AI ऐप्स बनाने के बारे में कोई प्रश्न हैं, तो MCP के बारे में चर्चा में सहपाठी शिक्षार्थियों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहाँ प्रश्न स्वागत योग्य हैं और ज्ञान स्वतंत्र रूप से साझा किया जाता है।
यह रिपॉजिटरी MIT लाइसेंस के अंतर्गत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें।
यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें।
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
यह दस्तावेज़ एआई अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
## 🎥 वीडियो
## [पाठ से पहले का क्विज़](../../../lesson-template/quiz-url)
> एक एम्बेडेड वीडियो या पाठ लिंक यहां जोड़ें।
[विवरण दें कि हम क्या सीखेंगे]
---
## पूर्व व्याख्यान प्रश्नोत्तरी
> उपलब्ध होने पर यहां प्रश्नोत्तरी लिंक जोड़ें।
---
छात्र इस पाठ में क्या सीखेंगे इसका संक्षिप्त अवलोकन प्रदान करें।
---
### परिचय
बताएं कि इस पाठ में क्या कवर किया जाएगा
संक्षिप्त परिचय प्रदान करें जिसमें वर्णित हो कि इस पाठ में क्या कवर किया जाएगा।
> नोट्स
### पूर्वापेक्षा
---
इस पाठ से पहले किन चरणों को पूरा किया जाना चाहिए?
### पूर्वापेक्षाएँ
उन अवधारणाओं या विषयों की सूची बनाएं जिनसे छात्र इस पाठ को शुरू करने से पहले परिचित होने चाहिए।
---
### तैयारी
इस पाठ को शुरू करने के लिए तैयारी के चरण
पाठ शुरू करने से पहले आवश्यक किसी भी सेटअप कदमों या उपकरणों की सूची बनाएं।
---
[सामग्री को ब्लॉक्स में चरणबद्ध करें]
### सामग्री
संरचित अनुभागों में पाठ की सामग्री में कदम रखें।
## [विषय 1]
---
## विषय 1
### कार्य:
साझा कोड के साथ प्रोजेक्ट बनाने के लिए अपने कोडबेस को प्रगतिशील रूप से बेहतर बनाने के लिए मिलकर काम करें:
प्रोजेक्ट को साझा कोड के साथ बनाने के लिए अपने कोडबेस को क्रमिक रूप से सुधारने के लिए साथ मिलकर काम करें:
```html
code blocks
```
✅ ज्ञान जांच - छात्रों के ज्ञान को खुले प्रश्नों के साथ बढ़ाने के लिए इस समय का उपयोग करें
✅ ज्ञान जांच
छात्रों के ज्ञान को खोलने वाले प्रश्नों के साथ विस्तार देने के लिए इस क्षण का उपयोग करें।
## [विषय 2]
## विषय 2
## विषय 3
## [विषय 3]
🚀 चुनौती
छात्रों के लिए प्रोजेक्ट को बेहतर बनाने के लिए एक सहयोगात्मक चुनौती जोड़ें।
🚀 चुनौती: छात्रों को कक्षा में प्रोजेक्ट को बेहतर बनाने के लिए सामूहिक रूप से काम करने की चुनौती दें
वैकल्पिक: उपयुक्त होने पर पूरा किए गए पाठ के UI का स्क्रीनशॉट जोड़ें।
वैकल्पिक: यदि उपयुक्त हो, तो पूर्ण पाठ के UI का स्क्रीनशॉट जोड़ें
## पोस्ट-व्याख्यान प्रश्नोत्तरी
## [पाठ के बाद का क्विज़](../../../lesson-template/quiz-url)
पाठ पूरा करने के बाद यहां प्रश्नोत्तरी लिंक जोड़ें।
## समीक्षा और स्व-अध्ययन
**असाइनमेंट की समय सीमा [MM/YY]**: [असाइनमेंट का नाम](assignment.md)
**कार्य सौंपने की तारीख [MM/YY]**: [असाइनमेंट नाम](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान रखें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
Microsoft Cloud Advocates による12週間の総合的なコースでウェブ開発の基本を学びましょう。24回の各レッスンは、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的プロジェクトを通じてJavaScript、CSS、HTMLを深掘りします。クイズやディスカッション、実践課題に参加してください。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングを始めましょう！
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。全24レッスンでは、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的なプロジェクトを通してJavaScript、CSS、HTMLを深く掘り下げます。クイズやディスカッション、実践的な課題に参加してスキルを磨き、効果的なプロジェクトベースの教育法で知識の定着を最適化しましょう。今すぐコーディングの旅を始めましょう！
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
このカリキュラムは、すぐに使える開発環境が用意されています！開始時に、ブラウザー上でインストール不要の[Codespace](https://github.com/features/codespaces/)で実行するか、ローカルのテキストエディター（例: [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）で実行することが選べます。
このカリキュラムはすぐに使える開発環境が用意されています！開始時に[Codespace](https://github.com/features/codespaces/)（ブラウザー上でインストール不要の環境）を使うか、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディターを使いローカルのパソコンで実行する方法を選べます。
#### リポジトリを作成する
作業内容を簡単に保存できるよう、このリポジトリのコピーを作成することをおすすめします。ページ上部の**Use this template** ボタンをクリックすると、ご自身のGitHubアカウントにカリキュラムのコピーを作成できます。
#### リポジトリの作成
作業を簡単に保存できるよう、このリポジトリのコピーを作成することをおすすめします。ページ上部の<strong>Use this template</strong>ボタンをクリックすると、あなたのGitHubアカウントにカリキュラムのコピーが入った新しいリポジトリが作成されます。
推奨は [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) です。VS Codeには[統合ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も備わっています。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。
おすすめはエディターに[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)を使うことで、組み込みの[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も備わっています。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロード可能です。
次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 内の[Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) を開き、先ほどコピーしたURLを `<your-repository-url>` に置き換えて、以下のコマンドを実行します:
次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)の[Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。`<your-repository-url>`はコピーしたURLに置き換えてください：
```bash
git clone <your-repository-url>
```
2. Visual Studio Codeでフォルダーを開きます。これは、**File** > **Open Folder** をクリックし、先ほどクローンしたフォルダーを選択することで行えます。
2. Visual Studio Codeでフォルダーを開きます。**File** > <strong>Open Folder</strong>をクリックし、先ほどクローンしたフォルダーを選択してください。
> 推奨される Visual Studio Code 拡張機能:
> 推奨Visual Studio Code拡張機能：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
| 01 | Getting Started | プログラミング入門とツールの基礎 | 多くのプログラミング言語の基本的な仕組みとプロの開発者が仕事で使うソフトウェアについて学ぶ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHubの基礎、チームでの作業を含む | プロジェクトでGitHubを使う方法、コードベースで他者と協働する方法 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
コンテンツがプロジェクトと連動していることで、学習者はより集中しやすくなり、概念の定着も促進されます。JavaScriptの基本概念を紹介するために、いくつかの入門レッスンと、動画チュートリアルコレクション「[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」の映像も組み合わせています。本カリキュラムの著者の一部もこの動画シリーズに寄稿しています。
内容がプロジェクトと一貫していることで、学生にとってより興味深くなり、概念の定着が促進されます。また、JavaScript基本のスターターレッスンもいくつか用意し、「[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」のビデオチュートリアル（本カリキュラム作者の一部も参加）に連動しています。
あえてJavaScriptのフレームワークは導入せず、基礎スキルの習得に集中しています。カリキュラム修了後の次のステップとしては、別の動画シリーズ「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」でNode.jsを学ぶことをお勧めします。
JavaScriptフレームワークを意図的に避け、フレームワーク導入前に必要な基本スキルを磨くことに集中しています。カリキュラム修了後の次のステップとして、別のビデオ集「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」を学ぶことをお勧めします。
이 저장소는 웹 개발 기초를 초보자에게 가르치기 위한 교육용 커리큘럼 저장소입니다. 이 커리큘럼은 Microsoft Cloud Advocates가 개발한 12주 과정의 포괄적인 교육 과정으로, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다.
이 저장소는 초보자를 위한 웹 개발 기초 교육 커리큘럼 저장소입니다. 해당 커리큘럼은 Microsoft Cloud Advocates가 개발한 총 12주 과정으로, JavaScript, CSS 및 HTML을 다루는 24회의 실습 중심 수업으로 구성되어 있습니다.
### 주요 구성 요소
### Key Components
- **교육 콘텐츠**: 프로젝트 기반 모듈로 조직된 24개의 체계적인 수업
- **실습 프로젝트**: 테라리움, 타이핑 게임, 브라우저 확장 프로그램, 우주 게임, 은행 앱, 코드 편집기 및 AI 채팅 어시스턴트
- **인터랙티브 퀴즈**: 각 3문항씩 구성된 48개의 퀴즈 (수업 전/후 평가)
- **다국어 지원**: GitHub Actions를 통한 50개 이상 언어 자동 번역
- **교육 콘텐츠**: 프로젝트 기반 모듈로 구성된 24개의 체계적인 수업
- **실습 프로젝트**: 테라리움, 타이핑 게임, 브라우저 확장, 우주 게임, 뱅킹 앱, 코드 편집기, AI 채팅 도우미
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 유의하시기 바랍니다. 원본 문서는 해당 언어로 된 원문이 권위 있는 출처로 간주되어야 합니다. 중요 정보의 경우 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 모든 오해나 오역에 대해 당사는 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의하시기 바랍니다. 원문 문서가 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역문 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS 및 HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제를 통해 참여하고 학습하세요. 효과적인 프로젝트 기반 교육법으로 기술을 향상시키고 지식 습득을 최적화하세요. 지금 코딩 여정을 시작하세요!
Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배우세요. 24개의 각 레슨에서는 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 다룹니다. 퀴즈, 토론, 실습 과제로 참여하세요. 효과적인 프로젝트 기반 학습법으로 기술을 향상시키고 지식 유지력을 최적화하세요. 오늘부터 코딩 여정을 시작하세요!
Azure AI Foundry Discord 커뮤니티에 참여하세요
Azure AI Foundry Discord에 참여하여 전문가 및 다른 개발자들과 만날 수 있습니다.
> 이 저장소는 50개 이상의 언어 번역본을 포함하고 있어서 다운로드 크기가 상당히 큽니다. 번역 없이 클론하려면 sparse checkout을 사용하세요:
> 이 리포지토리에는 50개 이상의 언어 번역이 포함되어 있어 다운로드 크기가 크게 증가합니다. 번역 없이 클론하려면 스파스 체크아웃을 사용하세요:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,41 +48,42 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 이렇게 하면 더 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것을 얻을 수 있습니다.
> 이렇게 하면 훨씬 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것을 얻을 수 있습니다.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**추가 지원 희망 언어는 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 확인하세요**
**추가 번역을 원하시면, 지원되는 언어 목록은 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 확인하세요.**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _학생이신가요?_
초보자용 자료, 학생 팩, 무료 수료증 바우처를 받을 수 있는 방법이 마련된 [**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 이 페이지는 매월 콘텐츠가 교체되므로 즐겨찾기해 두고 가끔 확인하는 것이 좋습니다.
초보자 자료, 학생 팩, 무료 인증서 바우처 받는 방법 등 다양한 자료가 있는 [**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 콘텐츠가 매월 교체되니 이 페이지를 북마크해두고 수시로 확인하세요.
### 📣 공지 - 완수 가능한 새 GitHub Copilot Agent 모드 챌린지!
### 📣 공지 - 완료해야 할 새로운 GitHub Copilot Agent 모드 챌린지!
새로운 챌린지가 추가되었습니다, 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. GitHub Copilot과 Agent 모드를 사용해 완수할 수 있는 새로운 도전입니다. 이전에 Agent 모드를 사용해 본 적 없다면 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등이 가능한 기능입니다.
각 장에서 "GitHub Copilot Agent Challenge 🚀"라는 새 챌린지가 추가되었습니다. GitHub Copilot과 Agent 모드를 사용하여 완료할 수 있습니다. Agent 모드를 처음 사용하는 경우 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 가능합니다.
### 📣 공지 - _생성 AI를 이용한 새 프로젝트_
### 📣 공지 - _생성형 AI를 활용한 새 프로젝트_
새 AI 어시스턴트 프로젝트가 추가되었습니다. 확인해보세요 [프로젝트](./9-chat-project/README.md)
새로운 AI 어시스턴트 프로젝트가 방금 추가되었습니다. [프로젝트](./9-chat-project/README.md)를 확인하세요.
각 레슨에는 과제, 지식 점검, 그리고 다음과 같은 주제 학습을 안내하는 챌린지가 포함되어 있습니다:
- 프롬프트 작성 및 프롬프트 엔지니어링
각 레슨에는 완성할 과제, 지식 점검, 도전 과제가 포함되어 있어 다음 주제들을 안내합니다:
- 프롬프트 및 프롬프트 엔지니어링
- 텍스트 및 이미지 앱 생성
- 검색 앱
@ -92,129 +93,130 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
## 🌱 시작하기
> <strong>교사분들</strong>, 이 커리큘럼을 사용하는 방법에 대한 [몇 가지 제안](for-teachers.md)을 포함했습니다. 의견은 [우리 토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 들려주세요!
> <strong>교사분들께</strong>, 이 커리큘럼을 사용하는 방법에 대한 [일부 제안](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 여러분의 피드백을 기다립니다!
**[학습자님들](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 각 레슨에서는 사전 퀴즈로 시작하여 강의 자료를 읽고 여러 활동을 완료하며 강의 이후 퀴즈로 이해도를 확인하세요.
**[학습자분들](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 각 레슨마다 사전 강의 퀴즈로 시작하고 강의 자료를 읽은 다음 다양한 활동을 완료하고 사후 강의 퀴즈로 이해도를 확인하세요.
학습 효과를 높이려면 동료 학습자와 함께 프로젝트를 진행하고 토론하세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 토론이 활발히 권장되며, 모더레이터 팀이 질문에 응답할 준비가 되어 있습니다.
학습 경험을 향상하려면 동료들과 함께 프로젝트를 진행하며 교류하세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 토론을 장려하며, 우리 모더레이터 팀이 질문에 답변해드립니다.
더 깊은 학습을 위해 추가 학습 자료를 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)에서 살펴보시길 강력히 추천합니다.
더 깊이 있는 학습을 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)을 탐색하는 것을 강력히 추천합니다.
### 📋 개발 환경 설정
이 커리큘럼은 이미 개발 환경이 준비되어 있습니다! 시작할 때 [Codespace](https://github.com/features/codespaces/)(_브라우저 기반 설치 불필요 환경_)에서 실행하거나, 로컬 컴퓨터에서 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 같은 텍스트 편집기를 사용해 진행할 수 있습니다.
이 커리큘럼은 바로 사용할 수 있는 개발 환경을 제공합니다! 시작할 때는 설치가 필요 없는 브라우저 기반 환경인 [Codespace](https://github.com/features/codespaces/)에서 실행하거나, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 같은 텍스트 편집기를 사용해 로컬에서 실행할 수 있습니다.
#### 저장소 생성하기
작업 내용을 쉽게 저장하려면 이 저장소의 자신의 복사본을 만드는 것이 권장됩니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 커리큘럼 복사본이 포함된 새 저장소가 GitHub 계정에 생성됩니다.
#### 리포지토리 생성하기
작업을 쉽게 저장하려면 이 리포지토리의 사본을 만드는 것이 권장됩니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 GitHub 계정에 커리큘럼 복사본이 포함된 새 리포지토리를 만들 수 있습니다.
로컬 컴퓨터에서 이 커리큘럼을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 레슨인 [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서 각 도구별 다양한 옵션을 안내하니 자신에게 가장 알맞은 것을 선택하세요.
로컬 환경에서 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 수업인 [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서 각각에 대해 선택할 수 있는 다양한 옵션을 안내합니다.
추천 텍스트 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)로, 내장 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 함께 제공합니다. Visual Studio Code는 [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 다운로드할 수 있습니다.
1. 컴퓨터에 저장소를 복제하세요. **Code** 버튼을 클릭하고 URL을 복사하여 할 수 있습니다:
추천 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)입니다. 내장된 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 포함되어 있습니다. Visual Studio Code는 [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 다운로드할 수 있습니다.
1. 리포지토리를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사하면 됩니다:
[CodeSpace](./images/createcodespace.png)
그런 다음 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, 방금 복사한 URL을 `<your-repository-url>` 대신 사용하여 다음 명령어를 실행하세요:
그런 다음, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, 방금 복사한 URL을 `<your-repository-url>`에 대체하여 아래 명령어를 실행하세요:
2. Visual Studio Code에서 폴더를 여세요. **File** > <strong>Open Folder</strong>를 클릭한 후 방금 클론한 폴더를 선택하면 됩니다.
> 추천하는 Visual Studio Code 확장 기능:
> 추천하는 Visual Studio Code 확장 프로그램:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지를 미리 보기 위해
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드 작성 속도를 높이기 위해
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성하는 데 도움을 줌
## 📂 각 강의에는 다음이 포함됩니다:
- 선택적 스케치노트
- 선택적 보충 영상
- 선택적 보조 영상
- 수업 전 워밍업 퀴즈
- 서면 강의
- 프로젝트 기반 강의의 경우 단계별 프로젝트 구축 안내
- 개념 점검
- 도전 과제
- 추가 읽기 자료
- 강의 본문
- 프로젝트 기반 강의의 경우, 프로젝트 구축 단계별 가이드
- 지식 확인
- 챌린지
- 보조 읽기 자료
- 과제
- [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/)
> **퀴즈에 대한 참고:** 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈로 각 퀴즈는 세 문제로 구성되어 있습니다. 퀴즈는 [여기](https://ff-quizzes.netlify.app/web/)에서 이용할 수 있으며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다; `quiz-app` 폴더 내 지침을 따르세요.
> **퀴즈에 관한 참고:** 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 각 3문항씩 총 48개 퀴즈가 있습니다. [여기](https://ff-quizzes.netlify.app/web/)에서 이용 가능하며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다; `quiz-app` 폴더의 지침을 따르세요.
| 01 | 시작하기 | 프로그래밍 소개 및 도구 기초 | 대부분의 프로그래밍 언어의 기본 개념과 전문 개발자가 업무에 사용하는 소프트웨어에 대해 배우기 | [프로그래밍 언어 및 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 시작하기 | GitHub 기초, 팀과 협업하기 | 프로젝트에서 GitHub 사용법과 코드 기반에서 다른 사람과 협업하는 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 시작하기 | 접근성 | 웹 접근성의 기본을 배우기 | [접근성 기초](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 기초 | JavaScript 데이터 타입 | JavaScript 데이터 타입의 기초 | [데이터 타입](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기초 | 함수와 메서드 | 애플리케이션의 논리 흐름을 관리하는 함수와 메서드에 대해 배우기 | [함수와 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기초 | JS로 의사결정 만들기 | 조건문을 만들어 코드에서 의사결정을 구현하는 방법 배우기 | [의사결정 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기초 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용해 데이터를 다루기 | [배열과 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [테라리움](./3-terrarium/solution/README.md) | HTML 실습 | 온라인 테라리움을 만드는 HTML 레이아웃 구축에 집중 | [HTML 소개](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [테라리움](./3-terrarium/solution/README.md) | CSS 실습 | 온라인 테라리움을 스타일링하는 CSS 구축, 반응형 페이지 만들기 기본 포함 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [테라리움](./3-terrarium/solution/README.md) | JavaScript 클로저, DOM 조작 | 드래그/드롭 인터페이스 기능을 구현하는 자바스크립트 작성, 클로저와 DOM 조작 집중 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타자 게임](./4-typing-game/solution/README.md) | 타자 게임 만들기 | 키보드 이벤트를 사용하여 자바스크립트 앱의 논리를 구동하는 방법 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 작동 원리 | 브라우저 작동 원리와 역사, 브라우저 확장 첫 요소 스캐폴딩 방법 배우기 | [브라우저에 관하여](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | API 호출, 폼 만들기, 로컬 스토리지에 변수 저장 | 브라우저 확장의 자바스크립트 요소를 구축해 API 호출 및 로컬 스토리지 변수 사용 | [API, 폼 및 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스, 웹 성능 | 확장 아이콘 관리를 위한 브라우저 백그라운드 프로세스 사용법, 웹 성능 및 최적화 기술 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [우주 게임](./6-space-game/solution/README.md) | 자바스크립트 고급 게임 개발 | 클래스 및 컴포지션을 이용한 상속, Pub/Sub 패턴 학습, 게임 개발 준비 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [우주 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 요소를 화면에 그릴 때 사용하는 Canvas API 학습 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [우주 게임](./6-space-game/solution/README.md) | 화면 상에서 요소 움직이기 | 카르테시안 좌표와 Canvas API를 통해 요소에 움직임 부여하는 법 배우기 | [요소 움직이기](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [우주 게임](./6-space-game/solution/README.md) | 충돌 감지 | 요소 간 충돌 및 반응 구현, 쿨다운 함수로 게임 성능 보장 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [우주 게임](./6-space-game/solution/README.md) | 점수 관리 | 게임 상태와 성과를 기반으로 수학적 계산 수행 | [점수 관리](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [우주 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 게임 종료 및 재시작 방법, 자원 정리, 변수 초기화 방법 배우기 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱의 HTML 템플릿과 라우트 | 라우팅과 HTML 템플릿을 사용해 다중 페이지 웹사이트 아키텍처 골격 만들기 | [HTML 템플릿과 라우트](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 회원가입 폼 만들기 | 폼 작성과 검증 루틴 처리 방식 배우기 | [폼](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 가져오기 및 사용 방법 | 앱 내 데이터 흐름, 데이터 페치, 저장 및 폐기 방법 | [데이터](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱의 상태 유지 방법과 상태 프로그래밍적 관리법 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [브라우저/VScode 코드](../../8-code-editor) | VScode 사용하기 | 코드 편집기 사용법 배우기| [VScode 코드 편집기 사용](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 작업하기 | 나만의 AI 어시스턴트 만들기 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris |
| 01 | 시작하기 | 프로그래밍과 도구 입문 | 대부분 프로그래밍 언어의 기본 개념과 전문 개발자를 돕는 소프트웨어에 대해 학습 | [프로그래밍 언어 및 도구 입문](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 시작하기 | GitHub 기초, 팀 작업 포함 | 프로젝트에서 GitHub 사용법 및 코드베이스 협업 방법 | [GitHub 입문](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 시작하기 | 접근성 | 웹 접근성 기초 학습 | [접근성 기본](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 기초 | 자바스크립트 데이터 타입 | 자바스크립트 데이터 타입 기초 | [데이터 타입](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기초 | 함수와 메서드 | 애플리케이션 로직 흐름 관리 함수와 메서드에 대해 학습 | [함수와 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기초 | JS로 조건 만들기 | 조건문 사용법과 의사 결정 방법 학습 | [의사결정](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기초 | 배열과 반복문 | 자바스크립트 배열과 반복문을 통한 데이터 처리 | [배열과 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [테라리움](./3-terrarium/solution/README.md) | HTML 실습 | 온라인 테라리움 레이아웃을 만드는 HTML 구축 | [HTML 입문](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [테라리움](./3-terrarium/solution/README.md) | CSS 실습 | 온라인 테라리움 스타일링을 위한 CSS 구축, 반응형 페이지 만들기 포함 | [CSS 입문](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [테라리움](./3-terrarium/solution/README.md) | 자바스크립트 클로저, DOM 조작 | 드래그 앤 드롭 인터페이스로 작동하는 테라리움 자바스크립트 구축 | [자바스크립트 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타자 게임](./4-typing-game/solution/README.md) | 타자 게임 만들기 | 키보드 이벤트를 사용한 자바스크립트 앱 로직 구동 학습 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 작동 방식 | 브라우저 작동 원리, 역사 및 첫 브라우저 확장 요소 스캐폴딩 학습 | [브라우저 소개](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | API 호출, 폼 작성, 로컬 스토리지 변수 저장 | 변수를 로컬 스토리지에 저장하여 API 호출하는 브라우저 확장 자바스크립트 작성 | [API, 폼 및 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스, 웹 성능 | 확장 아이콘 관리 위한 브라우저 백그라운드 프로세스 사용; 웹 성능 최적화 및 관련 개념 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [우주 게임](./6-space-game/solution/README.md) | 더 고급 자바스크립트 게임 개발 | 클래스와 컴포지션을 이용한 상속, 퍼블리셔/구독자 패턴 학습, 게임 개발 준비 | [고급 게임 개발 입문](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [우주 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 화면 요소를 그리기 위한 Canvas API 학습 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [우주 게임](./6-space-game/solution/README.md) | 화면 요소 이동 | 데카르트 좌표와 Canvas API를 사용한 요소 이동 방법 발견 | [요소 이동](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [우주 게임](./6-space-game/solution/README.md) | 충돌 감지 | 키 입력을 이용한 요소 충돌 및 반응 구현, 게임 성능 위한 쿨다운 함수 제공 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [우주 게임](./6-space-game/solution/README.md) | 점수 계산 | 게임 상태 및 성능 기반 수학 계산 수행 | [점수 계산](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [우주 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 게임 종료 및 재시작 방법, 자원 정리 및 변수 초기화 학습 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱의 HTML 템플릿 및 라우팅 | 라우팅과 HTML 템플릿을 이용하여 다중 페이지 웹 사이트 구조 구축 | [HTML 템플릿과 라우팅](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 회원가입 폼 만들기 | 폼 작성 및 유효성 검사 처리 학습 | [폼](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 페치 및 사용 방법 | 앱 내 데이터 흐름, 데이터를 가져오고 저장하고 폐기하는 방법 | [데이터](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱 상태 유지 및 프로그래밍 방식의 상태 관리 학습 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [브라우저/VS코드 코드](../../8-code-editor) | VS코드 사용법 | 코드 에디터 사용법을 배우세요 | [VS코드 코드 에디터 사용](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 활용 | 나만의 AI 어시스턴트 만들기 학습 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris |
## 🏫 교수법
우리 커리큘럼은 두 가지 핵심 교수 원칙에 기반하여 설계되었습니다:
본 커리큘럼은 두 가지 핵심 교수 원칙을 기반으로 설계되었습니다:
* 프로젝트 기반 학습
* 빈번한 퀴즈
본 프로그램은 JavaScript, HTML, CSS의 기본 원리와 최신 웹 개발자들이 사용하는 도구 및 기술을 가르칩니다. 학생들은 타자 게임, 가상 테라리움, 친환경 브라우저 확장, 우주 침입자 스타일 게임, 그리고 기업용 뱅킹 앱을 만들어 실습 경험을 쌓게 됩니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다.
본 프로그램은 JavaScript, HTML, CSS의 기초와 현재 웹 개발자들이 사용하는 최신 도구 및 기법을 가르칩니다. 학생들은 타자 게임, 가상 테라리움, 친환경 브라우저 확장, 우주 침입자 스타일 게임, 기업용 뱅킹 앱 구축을 통해 실무 경험을 쌓을 기회를 얻게 됩니다. 쌓아온 경험을 통해 수업이 끝날 무렵 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다.
> 🎓 이 커리큘럼의 처음 몇 강의는 Microsoft Learn에서 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다!
> 🎓 이 커리큘럼의 초기 몇 강의를 Microsoft Learn의 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로도 들을 수 있습니다!
콘텐츠가 프로젝트와 잘 연계되어 있어 학습 대상자의 참여도가 높아지고 개념의 이해와 기억이 향상됩니다. 또한 JavaScript 기초 개념을 소개하는 몇몇 스타터 강의와 “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 영상 시리즈의 영상도 함께 제공합니다. 일부 저자들이 본 커리큘럼 제작에 기여했습니다.
프로젝트와 콘텐츠를 연계하여 학생들의 참여도를 높이고 개념의 유지력을 강화합니다. 자바스크립트 기본 개념을 소개하는 여러 시작 강의를 작성했고, 영상 강의 컬렉션 "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"의 영상도 함께 제공합니다. 해당 컬렉션 저자가 일부 커리큘럼 작업에 참여했습니다.
수업 전 간단한 퀴즈는 학생의 주제 학습 의도를 설정하고, 수업 후 두 번째 퀴즈는 개념의 지속적 이해를 돕습니다. 본 커리큘럼은 유연하고 재미있도록 설계되어 있으며 전체 또는 부분적으로 수강할 수 있습니다. 프로젝트는 작게 시작해 12주 과정이 끝날 때 점진적으로 난이도가 높아집니다.
또한 수업 전 저강도 퀴즈는 학습 의도를 세우고, 수업 후 퀴즈는 개념 유지에 도움을 줍니다. 본 커리큘럼은 유연하고 재미있게 학습할 수 있도록 설계되었으며, 전부 또는 일부만 수강해도 됩니다. 프로젝트들은 처음에 작게 시작해 12주 주기 말에 갈수록 복잡해집니다.
의도적으로 JavaScript 프레임워크 도입을 피하여 웹 개발자로서 필요한 기본 스킬에 집중했으며, 커리큘럼 완료 후 좋은 다음 단계는 “[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)” 영상 시리즈를 통해 Node.js를 배우는 것입니다.
웹 개발자로서 프레임워크 사용 전 필요한 기본기를 집중할 수 있도록, 일부러 자바스크립트 프레임워크 도입은 피했습니다. 이후 진행해야 할 좋은 다음 단계는 "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 영상 컬렉션을 통해 Node.js를 배우는 것입니다.
> [행동 강령](CODE_OF_CONDUCT.md) 및 [기여 안내](CONTRIBUTING.md)를 참조하세요. 건설적인 피드백을 환영합니다!
> 우리의 [행동 강령](CODE_OF_CONDUCT.md) 및 [기여 가이드](CONTRIBUTING.md)를 방문해 주세요. 건설적인 피드백을 환영합니다!
## 🧭 오프라인 접속
## 🧭 오프라인 접근
[Docsify](https://docsify.js.org/#/)를 사용하면 이 문서를 오프라인에서 실행할 수 있습니다. 리포를 포크하고, 로컬 컴퓨터에 [Docsify 설치](https://docsify.js.org/#/quickstart) 후, 이 리포의 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 포트 3000에서 localhost로 서비스됩니다: `localhost:3000`.
[Docsify](https://docsify.js.org/#/)를 사용하면 이 문서를 오프라인에서 실행할 수 있습니다. 이 리포지토리를 포크하고, 로컬 머신에 [Docsify 설치](https://docsify.js.org/#/quickstart) 후, 이 리포지토리 루트 폴더에서 `docsify serve`를 입력하세요. 웹 사이트가 로컬호스트 3000번 포트에서 서비스됩니다: `localhost:3000`.
## 📘 PDF
모든 강의의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다.
## 🎒 다른 강의
## 🎒 기타 강좌
저희 팀은 다른 강의도 제작합니다! 확인해 보세요:
우리 팀은 다른 강좌도 제작합니다! 확인해 보세요:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -239,7 +241,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
---
### 핵심 학습
### 기본 학습
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -250,15 +252,15 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
---
### 코파일럿 시리즈
### Copilot 시리즈
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -268,11 +270,11 @@ AI 앱 개발 중 막히거나 질문이 있으면 MCP에 관한 토론에 참
## 라이선스
이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요.
이 저장소는 MIT 라이선스 하에 허가되었습니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의하시기 바랍니다. 원본 문서의 원어 버전이 가장 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 발생하는 오해나 오해석에 대해 당사는 책임을 지지 않습니다.
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확한 부분이 있을 수 있습니다. 원본 문서의 원어 버전을 권위 있는 출처로 간주해야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
프로젝트를 공유 코드로 빌드할 수 있도록 코드베이스를 점진적으로 향상시키기 위해 협력하세요:
```html
code blocks
```
✅ 지식 점검 - 학생들의 지식을 확장할 수 있는 열린 질문을 활용하세요.
✅ 지식 확인
학생들의 지식을 확장할 수 있는 개방형 질문을 이 시점에 활용하세요.
## [주제 2]
## 주제 2
## 주제 3
## [주제 3]
🚀 챌린지
학생들이 프로젝트를 향상시키는 공동 챌린지를 추가하세요.
🚀 도전 과제: 학생들이 수업 중 협력하여 프로젝트를 개선할 수 있는 도전 과제를 추가하세요.
선택 사항: 적절하다면 완료된 수업 UI의 스크린샷을 추가하세요.
선택 사항: 적절하다면 완료된 강의의 UI 스크린샷을 추가하세요.
## 강의 후 퀴즈
## [강의 후 퀴즈](../../../lesson-template/quiz-url)
수업 완료 후 여기에 퀴즈 링크를 추가하세요.
## 복습 및 자기 학습
## 복습 및 자기 주도 학습
**과제 제출 기한 [MM/YY]**: [과제 이름](assignment.md)
**과제 제출 마감 [MM/YY]**: [과제명](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 양지해 주시기 바랍니다. 원문은 해당 언어의 원본 문서를 권위 있는 자료로 간주해야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
localizeflow[bot]
2 weeks ago