यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने हेतु एक शैक्षिक पाठ्यक्रम रिपॉज़िटरी है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन पाठ शामिल हैं।
यह शुरुआती लोगों को वेब विकास के मूल सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित 12 सप्ताह का एक व्यापक कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन लेसन शामिल हैं।
### मुख्य घटक
- **शैक्षिक सामग्री**: 24 संरचित पाठ जो परियोजना-आधारित मॉड्यूल में व्यवस्थित हैं
- **व्यावहारिक परियोजनाएं**: टेरियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट
- **इंटरैक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (पाठ से पहले/बाद में आकलन)
- **बहुभाषी समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं में स्वचालित अनुवाद
- सीखने वालों के लिए अनुशंसित [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त पाठ्यक्रम: जनरेटिव AI, डेटा साइंस, एमएल, IoT पाठ्यक्रम उपलब्ध
- शिक्षार्थियों के लिए सिफारिश की गई [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त कोर्स: जनरेटिव AI, डेटा साइंस, ML, IoT पाठ्यक्रम उपलब्ध
### विशिष्ट परियोजनाओं के साथ काम करना
व्यक्तिगत परियोजनाओं के विस्तृत निर्देश के लिए, निम्न README फ़ाइल देखें:
व्यक्तिगत परियोजनाओं के विस्तृत निर्देशों के लिए, निम्न README फ़ाइल देखें:
- `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन
- `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन
- `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास
- `6-space-game/README.md` - कन्वास आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट असिस्टेंट प्रोजेक्ट
- `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) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानवीय अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या मिसइंटरप्रिटेशन के लिए हम जिम्मेदार नहीं हैं।
Microsoft क्लाउड एडवोकेट्स द्वारा हमारे 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास के मूल बातें सीखें। 24 पाठों में से प्रत्येक JavaScript, CSS, और HTML को हाथों-हाथ प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशनों, और स्पेस गेम्स के माध्यम से गहराई से समझाता है। क्वीज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स में भाग लें। हमारी प्रभावी परियोजना-आधारित शिक्षा पद्धति के साथ अपनी कौशलों को बढ़ाएं और आपकी ज्ञान की स्मृति को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!
# शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम
माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा हमारे 12 सप्ताह के व्यापक कोर्स के साथ वेब डेवलपमेंट के मूल सिद्धांत सीखें। 24 पाठों में से प्रत्येक में टेरारियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे हैंड्स-ऑन प्रोजेक्ट्स के जरिए JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स के साथ जुड़ें। अपनी कौशल को बढ़ाएं और हमारे प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने ज्ञान को यादगार बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!
> 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) सूचीबद्ध हैं**
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> यह आपको कोर्स पूरा करने के लिए आवश्यक सब कुछ देता है और डाउनलोड भी तेज होता है।
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**यदि आप अतिरिक्त अनुवाद भाषा चाहते हैं, तो वे [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) सूचीबद्ध हैं**
#### 🧑🎓 _क्या आप छात्र हैं?_
#### 🧑🎓 _क्या आप एक छात्र हैं?_
[**स्टूडेंट हब पेज**](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 एजेंट मोड चुनौतियाँ पूरी करें!
### 📣 घोषणा - नए GitHub Copilot Agent मोड चुनौतियाँ पूरी करें!
नई चुनौती जोड़ी गई है, ज्यादातर अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपके लिए GitHub Copilot और एजेंट मोड का उपयोग करके पूरी करने के लिए नई चुनौती है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ।
नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" ढूंढें। यह GitHub Copilot और Agent मोड का उपयोग करके पूरी करने के लिए आपकी एक नई चुनौती है। यदि आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट उत्पन्न करने में सक्षम नहीं है, बल्कि यह फ़ाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ कर सकता है।
### 📣 घोषणा - _जनरेटिव AI का उपयोग करते हुए नया प्रोजेक्ट बनाएं_
### 📣 घोषणा - _Generative AI का उपयोग करके निर्माण करने के लिए नया प्रोजेक्ट_
नया AI असिस्टेंट प्रोजेक्ट हाल ही में जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
### 📣 घोषणा - _JavaScript के लिए जनरेटिव AI पर नया पाठ्यक्रम_ अभी जारी हुआ है
### 📣 घोषणा - _Javascript के लिए Generative AI_ पर नया पाठ्यक्रम अभी जारी किया गया है
हमारा नया जनरेटिव AI पाठ्यक्रम मिस न करें!
हमारा नया Generative 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" बटन पर क्लिक करें।
2. **रिपॉजिटरी को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace में पाठ्यक्रम चलाना
#### एक Codespace में पाठ्यक्रम चलाएँ
आपने जो रिपॉजिटरी की प्रति बनाई है, उसमें**Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। इससे आपके लिए एक नया Codespace बनेगा जिसमें आप काम कर सकते हैं।
आपकी बनाई गई इस रिपॉजिटरी की कॉपी में,**Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए काम करने के लिए एक नया Codespace बनाएगा।
#### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना
इस पाठ्यक्रम को अपने कंप्यूटर पर चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [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) का उपयोग करें, जो एक अंतर्निर्मित [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)।
अपने कंप्यूटर पर स्थानीय रूप से इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट संपादक, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), आपको इन टूल्स के विभिन्न विकल्पों के बारे में गाइड करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें।
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) खोलें और निम्नलिखित कमांड चलाएँ, `<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) - कोड तेजी से लिखने में मदद के लिए
## 📂 प्रत्येक पाठ में शामिल हैं:
## 📂 हर पाठ में शामिल हैं:
- वैकल्पिक स्केचनोट
- वैकल्पिक पूरक वीडियो
- प्री-लेसन वार्मअप क्विज़
- लिखित पाठ
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के चरण-दर-चरण गाइड
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के चरण-दर-चरण मार्गदर्शिकाएँ
> **क्विज़ के बारे में एक नोट**: सभी क्विज़ Quiz-app फोल्डर में रखे गए हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं, क्विज़ ऐप को लोकली चला सकते हैं या Azure पर तैनात कर सकते हैं; `quiz-app` फ़ोल्डर में निर्देशों का पालन करें।
> **क्विज़ के बारे में एक नोट**: सभी क्विज़ क्विज़-ऐप फ़ोल्डर में हैं, कुल 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 और 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 | [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 | [टाइपिंग गेम](./4-typing-game/solution/README.md) | टाइपिंग गेम बनाना | अपने JavaScript ऐप की लॉजिक चलाने के लिए कीबोर्ड ईवेंट का उपयोग करना सीखें | [ईवेंट-ड्रिवन प्रोग्रामिंग](./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 कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं, स्थानीय स्टोरेज में रखें गए वेरिएबल्स का उपयोग करें | [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) | JavaScript के साथ अधिक उन्नत गेम विकास | क्लासेज और कम्पोजीशन दोनों का उपयोग करके इनहेरिटेंस और 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 | [Browser/VScode Code](../../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 |
| 05 | JS बेसिक्स | फंक्शन और मेथड्स| किसी एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन और मेथड्स के बारे में जानें | [फंक्शन और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और 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 की बुनियादें शामिल हैं और पेज को उत्तरदायी बनाना | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [टेरियम](./3-terrarium/solution/README.md) | जावास्क्रिप्ट क्लोज़र्स, DOM हेरफेर | टेरियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में बनाने के लिए जावास्क्रिप्ट बनाएं, क्लोज़र्स और 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) | जावास्क्रिप्ट के साथ अधिक उन्नत गेम विकास | इनहेरिटेंस के बारे में जानें, क्लासेस और कंपोजीशन और 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 | [एआई सहायक](./9-chat-project/README.md) | AI के साथ काम करना | अपना खुद का AI सहायक बनाना सीखें | [AI सहायक प्रोजेक्ट](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षा पद्धति
हमारा पाठ्यक्रम दो मुख्य शैक्षिक सिद्धांतों के साथ डिज़ाइन किया गया है:
* प्रोजेक्ट-आधारित सीखना
* नियमित क्विज़
* बारम्बार क्विज़
कार्यक्रम JavaScript, HTML, और CSS के मूलभूत सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्र व्यापक अनुभव प्राप्त करने के लिए टाइपिंग गेम, वर्चुअल टेरारीयम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इन्वे़डर-शैली का गेम, और व्यवसायों के लिए बैंकिंग ऐप बना पाएंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त होगी।
यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल्स और तकनीकों को सिखाता है। छात्र टाइपिंग गेम, वर्चुअल टेरियम, इको-फ्रेंडली ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली के गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करेंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी।
> 🎓 आप माइक्रोसॉफ्ट लर्न पर इस पाठ्यक्रम की पहली कुछ कक्षाएँ [Lear Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं!
> 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में Microsoft Learn पर ले सकते हैं!
यह सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के अनुरूप हो, प्रक्रिया छात्रों के लिए अधिक आकर्षक हो जाती है और अवधारणाओं को बनाए रखने में सहायता मिलती है। हमने कई शुरुआती पाठ JavaScript के मूल सिद्धांतों पर भी लिखे हैं ताकि अवधारणाओं का परिचय हो सके, ये "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह का एक वीडियो के साथ जोड़ा गया है, जिनके कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं।
सुनिश्चित करके कि सामग्री प्रोजेक्ट के अनुरूप हो, प्रक्रिया को छात्रों के लिए अधिक आकर्षक बनाया जाता है और अवधारणाओं की पकड़ बढ़ती है। हमने जावास्क्रिप्ट बेसिक्स में कई प्रारंभिक पाठ भी तैयार किए हैं, जो अवधारणाओं का परिचय देते हैं, साथ ही "[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)"।
जबकि हमने जावास्क्रिप्ट फ्रेमवर्क पेश करने से जानबूझकर बचा है ताकि एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद अगला अच्छा कदम 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.md) और [योगदान देने के नियम](CONTRIBUTING.md) देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
> हमारे [व्यवहार संहिता](CODE_OF_CONDUCT.md) और [योगदान](CONTRIBUTING.md) दिशानिर्देश देखें। हम आपके रचनात्मक सुझावों का स्वागत करते हैं!
## 🧭 ऑफ़लाइन पहुँच
## 🧭 ऑफ़लाइन एक्सेस
आप यह दस्तावेज़ [Docsify](https://docsify.js.org/#/) का उपयोग करके ऑफ़लाइन चला सकते हैं। इस रिपॉजिटरी को फॉर्क करें, अपनी स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), फिर इस रिपॉजिटरी के रूट फोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट के पोर्ट 3000 पर सर्व होगी: `localhost:3000`।
## 📘 पीडीएफ
सभी पाठों का PDF [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
आप [Docsify](https://docsify.js.org/#/) का उपयोग करके इस दस्तावेज़ को ऑफ़लाइन चला सकते हैं। इस रिपोजिटरी को फोर्क करें, अपने स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), और फिर इस रिपोजिटरी के रूट फ़ोल्डर में टाइप करें `docsify serve`। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व होगी: `localhost:3000`।
## 📘 PDF
सभी पाठों का एक पीडीएफ [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
## 🎒 अन्य पाठ्यक्रम
हमारी टीम अन्य कोर्स भी बनाती है! देखें:
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -221,16 +208,16 @@ Azure AI Foundry Discord समुदाय में शामिल हों
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative AI Series
### जनरेटिव 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)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Core Learning
### मुख्य शिक्षण
[](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)
@ -240,30 +227,30 @@ Azure AI Foundry Discord समुदाय में शामिल हों
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Series
### कॉपिलट श्रृंखला
[](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) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या असत्यताएँ हो सकती हैं। मूल दस्तावेज़ अपनी मातृभाषा में ही आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
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)
[](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アカウントにカリキュラムのコピーが作成されます。
作業を簡単に保存できるよう、このリポジトリのコピーを作成することをおすすめします。ページ上部の**Use this template**ボタンをクリックすると、あなたの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)のエディター使用で、内蔵の[ターミナル](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)からダウンロードできます。
コンテンツをプロジェクトに連動させることで、学習者の関与を高め、概念の定着を助けるように設計しています。また、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フレームワークの導入を意図的に避け、ウェブ開発者としての基本スキルを身につけることに集中していますが、カリキュラム修了後の次のステップとしてNode.jsを学ぶための別コレクション動画「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」もお勧めします。
フレームワーク導入をあえて避けているため、まずはウェブ開発者としての基本スキルを身につけることに集中できます。次のステップとしては別の動画シリーズ「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」を通じてNode.jsを学ぶことが推奨されます。
[](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)
[](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)
[](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 번역 서비스 [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을 깊이 있게 탐구합니다. 퀴즈, 토론, 실습 과제에도 참여하세요. 효과적인 프로젝트 기반 교육법으로 실력을 향상시키고 지식 유지력을 최적화하세요. 오늘부터 코딩 여정을 시작하세요!
> 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://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 에이전트 모드 챌린지!
### 📣 공지 - 완료할 수 있는 새로운 GitHub Copilot Agent 모드 챌린지!
새로운 챌린지가 업데이트 되어 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 확인하세요. 이 챌린지는 GitHub Copilot과 에이전트 모드를 사용해 완료할 수 있습니다. 에이전트 모드를 처음 사용하신다면, 텍스트 생성뿐 아니라 파일 생성, 편집, 명령 실행 등도 할 수 있습니다.
새로운 챌린지가 추가되었습니다. 대부분의 장에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. 이는 GitHub Copilot과 Agent 모드를 사용하여 완료하는 새로운 도전입니다. Agent 모드를 처음 사용한다면, 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 할 수 있습니다.
### 📣 안내 - _생성 AI를 활용한 새로운 프로젝트_
### 📣 공지 - _생성 AI를 사용하여 만들 수 있는 새 프로젝트_
새로운 AI 어시스턴트 프로젝트가 추가되었습니다, [프로젝트 확인](./9-chat-project/README.md)
새로운 AI Assistant 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 [project](./9-chat-project/README.md)
각 레슨에는 과제, 지식 점검, 도전 과제가 포함되어 있어 다음과 같은 주제 학습을 안내합니다:
- 프롬프트 및 프롬프트 엔지니어링
각 수업에는 완료해야 할 과제, 지식 확인, 그리고 다음 주제를 학습하는 데 도움이 되는 챌린지가 포함되어 있습니다:
- 프롬프트 작성 및 프롬프트 엔지니어링
- 텍스트 및 이미지 앱 생성
- 검색 앱
@ -83,131 +92,130 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
## 🌱 시작하기
> **교사 여러분**, 이 커리큘럼 사용법에 대한 [제안](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-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) 내에서 [터미널](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)을 열고, 방금 복사한 URL을 `<your-repository-url>` 대신 사용하여 다음 명령어를 실행하세요:
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) - 코드를 더 빠르게 작성하는 데 도움
## 📂 각 수업에는 다음이 포함됩니다:
- 선택적 스케치노트
- 선택적 보조 동영상
- 수업 전 워밍업 퀴즈
- 서면 수업 내용
- 프로젝트 기반 수업의 경우, 프로젝트를 단계별로 만드는 안내서
- 선택적 보충 동영상
- 수업 전 준비 퀴즈
- 작성된 수업 내용
- 프로젝트 기반 수업의 경우, 프로젝트를 구축하는 단계별 가이드
- 지식 점검
- 도전 과제
- 보조 읽기 자료
- 보충 독서 자료
- 과제
- [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/)
> **퀴즈 관련 참고:** 모든 퀴즈는 Quiz-app 폴더에 들어 있으며, 각각 세 문제로 이루어진 총 48개의 퀴즈가 있습니다. [여기](https://ff-quizzes.netlify.app/web/)에서 이용 가능하며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다;`quiz-app` 폴더의 지침을 따르세요.
> **퀴즈에 대한 안내**: 모든 퀴즈는 Quiz-app 폴더에 있으며, 총 48개의 퀴즈, 각 퀴즈는 3문제로 구성되어 있습니다. 퀴즈는 [여기](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 기본 | JavaScript로 의사결정 하기 | 의사결정 방법을 사용하여 코드에 조건 만들기 학습 | [의사결정 만들기](./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 및 반응형 페이지 만들기 포함 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [테라리움](./3-terrarium/solution/README.md) | JavaScript 클로저, DOM 조작 | 테라리움을 드래그/드롭 인터페이스로 작동하게 만드는 JavaScript 작성, 클로저와 DOM 조작에 중점 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타이핑 게임](./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 요소 빌드, 로컬 스토리지에 저장된 변수 사용 | [API, 폼, 로컬 스토리지](./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 | [스페이스 게임](./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) | 화면 요소 이동시키기 | Cartesian 좌표와 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 | [Browser/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 기본 | 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 | [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 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 사용해 JavaScript 앱 로직 제어하는 법 학습 | [이벤트 주도 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 작동 원리 | 브라우저 작동원리, 역사, 그리고 브라우저 확장 첫 요소 구성 학습 | [브라우저에 대하여](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 폼 만들기, API 호출 및 로컬 저장소 변수 저장 | 브라우저 확장을 위한 JavaScript 구축, API 호출과 로컬 저장소 변수 사용 | [API, 폼, 로컬 저장소](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스 및 웹 성능 | 브라우저 백그라운드 프로세스를 이용해 확장 아이콘 관리하기; 웹 성능 및 최적화 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [우주 게임](./6-space-game/solution/README.md) | JavaScript를 통한 고급 게임 개발 | 클래스와 컴포지션을 이용한 상속과 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 | [Browser/VScode Code](../../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 |
## 🏫 교수법
우리 커리큘럼은 두 가지 주요 교육 원칙을 기반으로 설계되었습니다:
* 프로젝트 기반 학습
* 자주 퀴즈 진행
* 빈번한 퀴즈
이 프로그램은 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 기초 개념을 소개하는 여러 기초 수업과, 이 과정에 기여한 저자들이 참여한 "[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 초보자 시리즈](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)" 영상을 통해 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:3000`.
[Docsify](https://docsify.js.org/#/)를 사용하면 이 문서를 오프라인으로도 실행할 수 있습니다. 이 저장소를 포크한 후, 로컬 머신에 [Docsify를 설치](https://docsify.js.org/#/quickstart)하고, 이 저장소 루트 폴더에서 `docsify serve` 명령을 입력하면 됩니다. 웹사이트는 localhost의 3000 포트(`localhost:3000`)에서 서비스됩니다.
## 📘 PDF
모든 강의의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다.
전체 수업 자료 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다.
## 🎒 다른 강의
## 🎒 기타 강의
우리 팀은 다른 강좌도 제작합니다! 확인해 보세요:
우리 팀은 다른 강의도 제공합니다! 확인해 보세요:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -224,7 +232,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
---
### Generative AI Series
### 생성 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)
@ -232,7 +240,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
---
### Core Learning
### 핵심 학습
[](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)
@ -243,29 +251,29 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
---
### Copilot Series
### 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)
이 저장소는 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)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역된 내용에는 오류나 부정확한 부분이 있을 수 있음을 유의해 주시기 바랍니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 본 번역물의 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
localizeflow[bot]
2 days ago