msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

Browse Source
pull/1781/head
localizeflow[bot] 6 months ago
parent 9feaf40a01
commit e6e8dbfb67
9 changed files with 829 additions and 808 deletions
Show Stats Download Patch File Download Diff File

6
translations/hi/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:12:37+00:00", "translation_date": "2026-04-06T18:05:49+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "hi" "language_code": "hi"
}, },
@ -516,8 +516,8 @@
"language_code": "hi" "language_code": "hi"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T14:44:55+00:00", "translation_date": "2026-04-06T18:01:52+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "hi" "language_code": "hi"
}, },

304
translations/hi/AGENTS.md
Unescape View File

@ -2,29 +2,29 @@
## परियोजना अवलोकन ## परियोजना अवलोकन
यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार (रिपॉजिटरी) है। यह पाठ्यक्रम माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करते हुए 24 व्यावहारिक पाठ शामिल हैं। यह शुरुआती लोगों को वेब विकास के मूलभूत सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें जावास्क्रिप्ट, CSS, और HTML को कवर करते हुए 24 व्यावहारिक पाठ शामिल हैं।
### मुख्य घटक ### मुख्य घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ - **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **व्यावहारिक परियोजनाएं**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट - **व्यावहारिक परियोजनाएँ**: टेरारियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और एआई चैट सहायक
- **इंटरैक्टिव क्विज़**: प्रत्येक में 3 प्रश्नों के साथ 48 क्विज़ (पाठ से पहले/बाद मूल्यांकन) - **इंटरैक्टिव क्विज़**: प्रत्येक में 3 प्रश्नों के साथ 48 क्विज़ (पाठ से पहले/बाद के मूल्यांकन)
- **बहुभाषी समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद - **मल्टी-भाषा समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद
- **प्रौद्योगिकियां**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाओं के लिए) - **प्रौद्योगिकियाँ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (एआई परियोजनाओं के लिए)
### संरचना ### वास्तुकला
- शैक्षिक रिपॉजिटरी जो पाठ-आधारित संरचना पर आधारित है - पाठ-आधारित संरचना वाला शैक्षिक भंडार
- प्रत्येक पाठ फ़ोल्डर में README, कोड उदाहरण, और समाधान होते हैं - प्रत्येक पाठ फ़ोल्डर में README, कोड उदाहरण, और समाधान होते हैं
- अलग-अलग निर्देशिकाओं में स्वतंत्र परियोजनाएं (quiz-app, विभिन्न पाठ परियोजनाएं) - स्वतंत्र परियोजनाएँ अलग-अलग निर्देशिकाओं में (quiz-app, विभिन्न पाठ परियोजनाएँ)
- GitHub Actions (co-op-translator) का उपयोग कर अनुवाद प्रणाली - GitHub Actions का उपयोग करते हुए अनुवाद प्रणाली (co-op-translator)
- दस्तावेज़ीकरण Docsify के माध्यम से उपलब्ध और PDF के रूप में भी उपलब्ध - Docsify के माध्यम से प्रलेखन सेवा प्रदान और PDF के रूप में उपलब्ध
## सेटअप कमांड ## सेटअप कमांड
यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री के उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए: यह भंडार मुख्य रूप से शैक्षिक सामग्री उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
### मुख्य रिपॉजिटरी सेटअप ### मुख्य भंडार सेटअप
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -38,20 +38,20 @@ cd quiz-app
npm install npm install
npm run dev # विकास सर्वर शुरू करें npm run dev # विकास सर्वर शुरू करें
npm run build # उत्पादन के लिए निर्माण करें npm run build # उत्पादन के लिए निर्माण करें
npm run lint # ESLint चलाएँ npm run lint # ESLint चलाएं
``` ```
### बैंक परियोजना API (Node.js + Express) ### बैंक प्रोजेक्ट API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # एपीआई सर्वर शुरू करें npm start # एपीआई सर्वर शुरू करें
npm run lint # ESLint चलाएं npm run lint # ESLint चलाएं
npm run format # Prettier के साथ फॉर्मेट करें npm run format # Prettier के साथ स्वरूपित करें
``` ```
### ब्राउज़र एक्सटेंशन परियोजनाएं ### ब्राउज़र एक्सटेंशन परियोजनाएँ
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# ब्राउज़र-विशिष्ट एक्सटेंशन लोडिंग निर्देशों का पालन करें # ब्राउज़र-विशिष्ट एक्सटेंशन लोडिंग निर्देशों का पालन करें
``` ```
### स्पेस गेम परियोजनाएं ### स्पेस गेम परियोजनाएँ
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -80,29 +80,29 @@ python api.py
### सामग्री योगदानकर्ताओं के लिए ### सामग्री योगदानकर्ताओं के लिए
1. **रिपॉजिटरी को फ़ॉर्क करें** अपने GitHub खाते पर 1. **अपने GitHub खाते में** भंडार को फोर्क करें
2. **अपने फ़ॉर्क को स्थानीय रूप से क्लोन करें** 2. **अपने फोर्क को** स्थानीय रूप से क्लोन करें
3. **अपने बदलावों के लिए नई ब्रांच बनाएं** 3. **अपने परिवर्तनों के लिए** एक नई शाखा बनाएं
4. पाठ सामग्री या कोड उदाहरणों में बदलाव करें 4. पाठ सामग्री या कोड उदाहरणों में परिवर्तन करें
5. संबंधित परियोजना निर्देशिकाओं में कोड परिवर्तनों का परीक्षण करें 5. संबंधित परियोजना निर्देशिकाओं में कोड परिवर्तनों का परीक्षण करें
6. योगदान दिशानिर्देशों का पालन करते हुए पुल अनुरोध प्रस्तुत करें 6. योगदान दिशानिर्देशों का पालन करते हुए पुल रिक्वेस्ट सबमिट करें
### शिक्षार्थियों के लिए ### शिक्षार्थियों के लिए
1. रिपॉजिटरी को फ़ॉर्क या क्लोन करें 1. भंडार को फोर्क या क्लोन करें
2. क्रमशः पाठ निर्देशिकाओं में जाएं 2. क्रमशः पाठ निर्देशिकाओं में जाएं
3. प्रत्येक पाठ के README फाइल पढ़ें 3. प्रत्येक पाठ के README फाइल पढ़ें
4. https://ff-quizzes.netlify.app/web/ पर पूर्व-पाठ क्विज़ पूरा करें 4. https://ff-quizzes.netlify.app/web/ पर पूर्व-पाठ क्विज़ पूरी करें
5. पाठ फ़ोल्डरों में कोड उदाहरणों के साथ काम करें 5. पाठ फ़ोल्डर में कोड उदाहरणों पर काम करें
6. असाइनमेंट और चुनौतियाँ पूरा करें 6. असाइनमेंट और चुनौतियाँ पूरी करें
7. पोस्ट-पाठ क्विज़ लें 7. बाद-पाठ क्विज़ लें
### लाइव विकास ### लाइव विकास
- **दस्तावेज़ीकरण**: रूट में `docsify serve` चलाएं (पोर्ट 3000) - **प्रलेखन**: रूट में `docsify serve` चलाएँ (पोर्ट 3000)
- **क्विज़ ऐप**: quiz-app निर्देशिका में `npm run dev` चलाएं - **क्विज़ ऐप**: quiz-app निर्देशिका में `npm run dev` चलाएँ
- **परियोजनाएं**: HTML परियोजनाओं के लिए VS Code Live Server एक्सटेंशन का उपयोग करें - **परियोजनाएँ**: HTML परियोजनाओं के लिए VS Code Live Server एक्सटेंशन का उपयोग करें
- **API परियोजनाएं**: संबंधित API निर्देशिकाओं में `npm start` चलाएं - **API परियोजनाएँ**: संबंधित API निर्देशिकाओं में `npm start` चलाएँ
## परीक्षण निर्देश ## परीक्षण निर्देश
@ -110,82 +110,82 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # कोड स्टाइल समस्याओं के लिए जांच करें npm run lint # कोड स्टाइल समस्याओं की जांच करें
npm run build # सुनिश्चित करें कि निर्माण सफल हो जाता है npm run build # पुष्टि करें कि बिल्ड सफल होता है
``` ```
### बैंक API परीक्षण ### बैंक API परीक्षण
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # कोड शैली की समस्याओं के लिए जाँच करें npm run lint # कोड स्टाइल समस्याओं की जांच करें
node server.js # पुष्टि करें कि सर्वर बिना त्रुटियों के शुरू होता है node server.js # सुनिश्चित करें कि सर्वर बिना त्रुटियों के शुरू होता है
``` ```
### सामान्य परीक्षण दृष्टिकोण ### सामान्य परीक्षण दृष्टिकोण
- यह एक शैक्षिक रिपॉजिटरी है जिसमें व्यापक स्वचालित परीक्षण नहीं हैं - यह एक शैक्षिक भंडार है जिसमें व्यापक स्वचालित परीक्षण नहीं हैं
- मैनुअल परीक्षण पर ध्यान केंद्रित: - मैनुअल परीक्षण इस पर केंद्रित है:
- कोड उदाहरण बिना त्रुटि के चलना चाहिए - कोड उदाहरण त्रुटि बिना चलें
- दस्तावेज़ीकरण में लिंक सही काम करते हैं - प्रलेखन में लिंक सही काम करें
- परियोजना निर्माण सफलतापूर्वक पूरा होता है - परियोजना बिल्ड सफलतापूर्वक पूरी हों
- उदाहरणों में सर्वोत्तम प्रथाओं का पालन होता है - उदाहरण अच्छी प्रथाओं का पालन करें
### सबमिशन से पहले जांच ### प्री-सबमिशन जांचें
- package.json वाले निर्देशिकाओं में `npm run lint` चलाएं - package.json वाले निर्देशिकाओं में `npm run lint` चलाएँ
- मार्कडाउन लिंक मान्य हैं यह सत्यापित करें - मार्कडाउन लिंक मान्य हों
- ब्राउज़र या Node.js में कोड उदाहरणों का परीक्षण करें - ब्राउज़र या Node.js में कोड उदाहरणों का परीक्षण करें
- सुनिश्चित करें कि अनुवाद सही संरचना बनाए रखते हैं - सुनिश्चित करें कि अनुवाद संरचना बनाए रखते हैं
## कोड स्टाइल दिशानिर्देश ## कोड स्टाइल दिशानिर्देश
### JavaScript ### JavaScript
- आधुनिक ES6+ सिंटैक्स का उपयोग करें - आधुनिक ES6+ सिंटैक्स का उपयोग करें
- परियोजनाओं में प्रदान किए गए मानक ESLint विन्यास का पालन करें - परियोजनाओं में उपलब्ध मानक ESLint कंफिगरेशन का पालन करें
- शैक्षिक स्पष्टता के लिए सार्थक चर और फ़ंक्शन नाम उपयोग करें - शैक्षिक स्पष्टता के लिए सार्थक वेरिएबल और फ़ंक्शन नाम चुनें
- शिक्षार्थियों के लिए अवधारणाओं को समझाने वाले टिप्पणियां जोड़ें - शिक्षार्थियों के लिए अवधारणाओं को समझाते हुए टिप्पणियाँ जोड़ें
- जहां कॉन्फ़िगर हो Prettier का उपयोग करें - Prettier का उपयोग करें जहाँ कॉन्फ़िगर हो
### HTML/CSS ### HTML/CSS
- सेमंटिक HTML5 तत्व - सेमांटिक HTML5 तत्व
- उत्तरदायी डिज़ाइन सिद्धांत - उत्तरदायी डिज़ाइन सिद्धांत
- स्पष्ट क्लास नामकरण सम्मेलन - स्पष्ट कक्षा नामकरण सम्मेलन
- शिक्षार्थियों के लिए CSS तकनीकों को समझाने वाली टिप्पणियां - शिक्षार्थियों के लिए CSS तकनीकों की व्याख्या करने वाली टिप्पणियाँ
### Python ### Python
- PEP 8 शैली दिशानिर्देश - PEP 8 शैली दिशानिर्देश
- स्पष्ट, शैक्षिक कोड उदाहरण - स्पष्ट, शैक्षिक कोड उदाहरण
- जहां उपयोगी हो, टाइप हिन्ट्स - जहाँ सहायक हो वहाँ टाइप हिंट्स
### मार्कडाउन दस्तावेज़ीकरण ### Markdown प्रलेखन
- स्पष्ट हेडिंग पदानुक्रम - स्पष्ट शीर्षक पदानुक्रम
- भाषा निर्दिष्ट कोड ब्लॉक - भाषा निर्दिष्ट कोड ब्लॉक्स
- अतिरिक्त संसाधनों के लिंक - अतिरिक्त संसाधनों के लिंक
- `images/` निर्देशिकाओं में स्क्रीनशॉट और छवियां - `images/` निर्देशिकाओं में स्क्रीनशॉट और चित्र
- पहुंच योग्यता के लिए छवियों के लिए Alt टेक्स्ट - पहुँच के लिए छवियों हेतु Alt टेक्स्ट
### फ़ाइल संगठन ### फ़ाइल संगठन
- पाठ क्रमशः क्रमांकित (1-getting-started-lessons, 2-js-basics, आदि) - पाठ क्रमांकित (1-getting-started-lessons, 2-js-basics, आदि)
- प्रत्येक परियोजना में `solution/` और अक्सर `start/` या `your-work/` निर्देशिकाएं होती हैं - प्रत्येक परियोजना में `solution/` और अक्सर `start/` या `your-work/` होती है
- छवियां पाठ-विशिष्ट `images/` फ़ोल्डरों में संग्रहीत - पाठ-विशिष्ट `images/` फ़ोल्डर में चित्र संग्रहीत
- अनुवाद `translations/{language-code}/` संरचना में - अनुवाद `translations/{language-code}/` संरचना में
## निर्माण और परिनियोजन ## निर्माण और परिनियोजन
### क्विज़ ऐप परिनियोजन (Azure Static Web Apps) ### क्विज़ ऐप परिनियोजन (Azure Static Web Apps)
क्विज़-ऐप Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर है: क्विज़ ऐप Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर है:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # dist/ फ़ोल्डर बनाता है npm run build # dist/ फ़ोल्डर बनाता है
# मुख्य शाखा पर पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से तैनाती करता है # मुख्य शाखा में पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से डिप्लॉय करता है
``` ```
Azure Static Web Apps कॉन्फ़िगरेशन: Azure Static Web Apps कॉन्फ़िगरेशन:
@ -193,90 +193,90 @@ Azure Static Web Apps कॉन्फ़िगरेशन:
- **आउटपुट स्थान**: `dist` - **आउटपुट स्थान**: `dist`
- **वर्कफ़्लो**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **वर्कफ़्लो**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### दस्तावेज़ीकरण PDF निर्माण ### प्रलेखन PDF निर्माण
```bash ```bash
npm install # docsify-to-pdf स्थापित करें npm install # docsify-to-pdf इंस्टॉल करें
npm run convert # docs से PDF बनाएँ npm run convert # docs से PDF उत्पन्न करें
``` ```
### Docsify दस्तावेज़ीकरण ### Docsify प्रलेखन
```bash ```bash
npm install -g docsify-cli # Docsify को ग्लोबली इंस्टॉल करें npm install -g docsify-cli # Docsify को ग्लोबली इंस्टॉल करें
docsify serve # localhost:3000 पर सेवा दें docsify serve # localhost:3000 पर सर्व करें
``` ```
### परियोजना-विशिष्ट निर्माण ### परियोजना-विशिष्ट बिल्ड
प्रत्येक परियोजना निर्देशिका में अपना निर्माण प्रक्रिया हो सकती है: प्रत्येक परियोजना निर्देशिका में स्वयं का बिल्ड प्रोसेस हो सकता है:
- Vue परियोजनाएं: `npm run build` उत्पाद बंडल बनाता है - Vue परियोजनाएं: `npm run build` उत्पादन बंडल बनाता है
- स्थैतिक परियोजनाएं: कोई निर्माण चरण नहीं, सीधे फाइलें सर्व करें - स्थिर परियोजनाएं: बिल्ड स्टेप नहीं, सीधे फाइलें सर्व करें
## पुल अनुरोध दिशानिर्देश ## पुल रिक्वेस्ट दिशानिर्देश
### शीर्षक प्रारूप ### शीर्षक प्रारूप
परिवर्तन के क्षेत्र को दर्शाने वाले स्पष्ट, वर्णनात्मक शीर्षक का उपयोग करें: परिवर्तन क्षेत्र को स्पष्ट करने वाले शीर्षक का उपयोग करें:
- `[Quiz-app] Add new quiz for lesson X` - `[Quiz-app] पाठ X के लिए नया क्विज़ जोड़ें`
- `[Lesson-3] Fix typo in terrarium project` - `[Lesson-3] टेरारियम परियोजना में टाइपो सुधारें`
- `[Translation] Add Spanish translation for lesson 5` - `[Translation] पाठ 5 के लिए स्पेनिश अनुवाद जोड़ें`
- `[Docs] Update setup instructions` - `[Docs] सेटअप निर्देश अपडेट करें`
### आवश्यक जांच ### आवश्यक जांच
PR प्रस्तुत करने से पहले: PR सबमिट करने से पहले:
1. **कोड गुणवत्ता**: 1. **कोड गुणवत्ता**:
- प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाएं - प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाएँ
- सभी लिंटिंग त्रुटियों और चेतावनियों को ठीक करें - सभी लिंटिंग त्रुटियाँ और वार्निंग्स ठीक करें
2. **निर्माण सत्यापन**: 2. **बिल्ड सत्यापन**:
- यदि लागू हो तो `npm run build` चलाएं - लागू हो तो `npm run build` चलाएँ
- कोई निर्माण त्रुटि न हो - सुनिश्चित करें कि कोई बिल्ड त्रुटि न हो
3. **लिंक सत्यापन**: 3. **लिंक सत्यापन**:
- सभी मार्कडाउन लिंक जांचें - सभी मार्कडाउन लिंक जांचें
- छवि संदर्भ काम करते हों - छवि संदर्भ काम करते हों
4. **सामग्री समीक्षा**: 4. **सामग्री समीक्षा**:
- वर्तनी और व्याकरण ठीक करें - वर्तनी और व्याकरण जांचें
- कोड उदाहरण सही और शैक्षिक हों - कोड उदाहरण सही और शैक्षिक हों
- अनुवाद मूल अर्थ बनाए रखें - अनुवाद मूल अर्थ बनाए रखें
### योगदान आवश्यकताएं ### योगदान आवश्यकताएँ
- Microsoft CLA से सहमत हों (पहले PR पर स्वचालित जांच) - Microsoft CLA के लिए सहमति (पहली PR पर स्वचालित जांच)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) का पालन करें - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) का पालन करें
- विस्तृत दिशानिर्देशों के लिए [CONTRIBUTING.md](./CONTRIBUTING.md) देखें - विस्तृत दिशानिर्देश के लिए [CONTRIBUTING.md](./CONTRIBUTING.md) देखें
- PR विवरण में समस्या नंबर का संदर्भ दें यदि लागू हो - यदि लागू हो तो PR विवरण में इश्यू नंबर संदर्भित करें
### समीक्षा प्रक्रिया ### समीक्षा प्रक्रिया
- PRs रख-रखावकर्ताओं और समुदाय द्वारा समीक्षा की जाती हैं - PR मेंटेनर्स और समुदाय द्वारा समीक्षा की जाती है
- शैक्षिक स्पष्टता को प्राथमिकता दी जाती है - शैक्षिक स्पष्टता को प्राथमिकता दी जाती है
- कोड उदाहरणों को वर्तमान सर्वोत्तम प्रथाओं का पालन करना चाहिए - कोड उदाहरण नवीनतम सर्वोत्तम प्रथाओं का पालन करें
- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किए जाते हैं - अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किए जाते हैं
## अनुवाद प्रणाली ## अनुवाद प्रणाली
### स्वचालित अनुवाद ### स्वचालित अनुवाद
- GitHub Actions के साथ co-op-translator वर्कफ़्लो का उपयोग - GitHub Actions के साथ co-op-translator वर्कफ़्लो का उपयोग करता है
- 50+ भाषाओं में स्वचालित अनुवाद - 50+ भाषाओं में स्वचालित रूप से अनुवाद करता है
- स्रोत फाइलें मुख्य निर्देशिकाओं में - मुख्य निर्देशिकाओं में स्रोत फ़ाइलें
- अनुवादित फाइलें `translations/{language-code}/` निर्देशिकाओं में - `translations/{language-code}/` निर्देशिकाओं में अनूदित फाइलें
### मैनुअल अनुवाद सुधार जोड़ना ### मैनुअल अनुवाद सुधार जोड़ना
1. `translations/{language-code}/` में फ़ाइल ढूंढें 1. `translations/{language-code}/` में फ़ाइल खोजें
2. संरचना बनाए रखते हुए सुधार करें 2. संरचना बनाए रखते हुए सुधार करें
3. सुनिश्चित करें कि कोड उदाहरण कार्यशील रहें 3. कोड उदाहरण कार्यक्षमता सुनिश्चित करें
4. किसी भी स्थानीयकृत क्विज़ सामग्री का परीक्षण करें 4. स्थानीयकृत क्विज़ सामग्री का परीक्षण करें
### अनुवाद मेटाडेटा ### अनुवाद मेटाडेटा
अनुवादित फाइलों में मेटाडेटा हेडर शामिल है: अनूदित फ़ाइलों में मेटाडेटा हेडर शामिल है:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA:
## डिबगिंग और समस्या निवारण ## डिबगिंग और समस्या निवारण
### आम समस्याएं ### सामान्य समस्याएँ
**क्विज़ ऐप शुरू नहीं होता**: **क्विज़ ऐप शुरू नहीं होता**:
- Node.js संस्करण जांचें (v14+ अनुशंसित) - Node.js संस्करण जांचें (v14+ अनुशंसित)
- `node_modules` और `package-lock.json` हटाएं, फिर `npm install` चलाएं - `node_modules` और `package-lock.json` हटाएँ, फिर `npm install` चलाएँ
- पोर्ट संघर्षों की जांच करें (डिफ़ॉल्ट: Vite पोर्ट 5173 उपयोग करता है) - पोर्ट संघर्ष जांचें (डिफ़ॉल्ट: Vite पोर्ट 5173 उपयोग करता है)
**API सर्वर शुरू नहीं होता**: **API सर्वर शुरू नहीं होता**:
- Node.js संस्करण न्यूनतम जांचें (node >=10) - Node.js संस्करण न्यूनतम आवश्यकताओं को पूरा करता है (node >=10)
- जांचें कि पोर्ट पहले से उपयोग में न हो - जांचें यदि पोर्ट पहले से उपयोग में है
- सभी निर्भरताएं `npm install` के साथ स्थापित हैं यह सुनिश्चित करें - सभी निर्भरताएँ `npm install` से स्थापित हों
**ब्राउज़र एक्सटेंशन लोड नहीं होता**: **ब्राउज़र एक्सटेंशन लोड नहीं होता**:
- सुनिश्चित करें कि manifest.json सही प्रारूप में है - manifest.json सही फॉर्मेट में है या नहीं जांचें
- ब्राउज़र कंसोल में त्रुटियाँ देखें - ब्राउज़र कंसोल में त्रुटियाँ देखें
- ब्राउज़र-विशिष्ट एक्सटेंशन इंस्टॉलेशन निर्देशों का पालन करें - ब्राउज़र-विशिष्ट एक्सटेंशन इंस्टॉलेशन निर्देशों का पालन करें
**Python चैट परियोजना समस्याएं**: **Python चैट परियोजना समस्याएँ**:
- OpenAI पैकेज स्थापित करें: `pip install openai` - OpenAI पैकेज इंस्टॉल करें: `pip install openai`
- जांचें कि GITHUB_TOKEN पर्यावरण चर सेट है - सुनिश्चित करें कि GITHUB_TOKEN पर्यावरण परिवर्तनशील सेट है
- GitHub Models एक्सेस अनुमतियाँ जांचें - GitHub मॉडल्स एक्सेस अनुमतियाँ जांचें
**Docsify दस्तावेज़ सेवा नहीं करता**: **Docsify प्रलेखन सर्व नहीं कर रहा**:
- docsify-cli वैश्विक रूप से स्थापित करें: `npm install -g docsify-cli` - docsify-cli ग्लोबली इंस्टॉल करें: `npm install -g docsify-cli`
- रिपॉजिटरी रूट निर्देशिका से चलाएं - रिपॉजिटरी रूट डायरेक्टरी से चलाएं
- जांचें कि `docs/_sidebar.md` मौजूद है - जांचें कि `docs/_sidebar.md` मौजूद है
### विकास वातावरण सुझाव ### विकास वातावरण सुझाव
- HTML परियोजनाओं के लिए VS Code में Live Server एक्सटेंशन का उपयोग करें - HTML परियोजनाओं के लिए VS Code में Live Server एक्सटेंशन का उपयोग करें
- सुसंगत स्वरूपण के लिए ESLint और Prettier एक्सटेंशन स्थापित करें - consistent फॉर्मेटिंग के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें
- JavaScript डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें - जावास्क्रिप्ट डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन स्थापित करें - Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करें
### प्रदर्शन विचार ### प्रदर्शन विचार
- अनुवादित फाइलों की संख्या अधिक (50+ भाषाएँ) होने के कारण पूर्ण क्लोन बड़े होते हैं - अनुवादित बड़ी संख्या वाली फाइलें (50+ भाषाएँ) क्लोन को बड़ा बनाती हैं
- केवल सामग्री पर काम करने के लिए शैलो क्लोन का उपयोग करें: `git clone --depth 1` - केवल सामग्री पर काम करते समय शैलो क्लोन का उपयोग करें: `git clone --depth 1`
- अंग्रेज़ी सामग्री पर काम करते समय अनुवादों को खोजों से बाहर रखें - अंग्रेज़ी सामग्री पर काम करते हुए अनुवादों को खोज से बाहर रखें
- पहले रन पर निर्माण प्रक्रियाएं धीमी हो सकती हैं (npm install, Vite निर्माण) - बिल्ड प्रक्रिया पहले रन पर धीमी हो सकती है (npm install, Vite build)
## सुरक्षा विचार ## सुरक्षा विचार
### पर्यावरण चर ### पर्यावरण परिवर्तनशील
- API कुंजियाँ कभी भी रिपॉजिटरी में कमिट न करें - API कुंजी कभी भंडार में प्रतिबद्ध न करें
- `.env` फ़ाइलों का उपयोग करें (जो `.gitignore` में शामिल हैं) - `.env` फाइलों का उपयोग करें (पहले से `.gitignore` में शामिल)
- परियोजना README में आवश्यक पर्यावरण वेरिएबल दस्तावेज़ित करें - परियोजना README में आवश्यक पर्यावरण चर दस्तावेज़ित करें
### Python परियोजनाएं ### Python परियोजनाएँ
- वर्चुअल पर्यावरण का उपयोग करें: `python -m venv venv` - वर्चुअल वातावरण का उपयोग करें: `python -m venv venv`
- निर्भरताओं को अपडेट रखें - निर्भरताओं को अपडेट रखें
- GitHub टोकन में न्यूनतम आवश्यक अनुमतियां होनी चाहिए - GitHub टोकन न्यूनतम आवश्यक अनुमतियों के साथ होने चाहिए
### GitHub Models एक्सेस ### GitHub मॉडल्स एक्सेस
- GitHub Models के लिए व्यक्तिगत एक्सेस टोकन (PAT) आवश्यक - GitHub मॉडल्स के लिए व्यक्तिगत एक्सेस टोकन (PAT) आवश्यक हैं
- टोकन को पर्यावरण चर के रूप में स्टोर करें - टोकन को पर्यावरण चर के रूप में संग्रहित करें
- टोकन या प्रमाणीकरण जानकारी कभी कमिट न करें - टोकन या प्रमाणपत्र कभी प्रतिबद्ध न करें
## अतिरिक्त नोट्स ## अतिरिक्त नोट्स
### लक्षित दर्शक ### लक्षित दर्शक
- वेब विकास के पूर्ण शुरुआती - वेब विकास के पूर्ण शुरुआती
- छात्र और स्व-शिक्षार्थी - छात्र और स्व-अध्येता
- शिक्षक जो कक्षाओं में पाठ्यक्रम का उपयोग करते हैं - शिक्षक जो कक्षा में पाठ्यक्रम का उपयोग करते हैं
- सामग्री पहुँच योग्यता और क्रमिक कौशल निर्माण के लिए डिज़ाइन की गई है - सामग्री पहुंच योग्य और कौशल विकास के लिए डिज़ाइन की गई है
### शैक्षिक दर्शन ### शैक्षिक दर्शन
- परियोजना-आधारित शिक्षण दृष्टिकोण - परियोजना-आधारित सीखने का दृष्टिकोण
- बार-बार ज्ञान जांच (क्विज़) - बार-बार ज्ञान जांच (क्विज़)
- व्यावहारिक कोडिंग अभ्यास - व्यावहारिक कोडिंग अभ्यास
- वास्तविक दुनिया के अनुप्रयोग उदाहरण - वास्तविक दुनिया के अनुप्रयोग उदाहरण
- फ्रेमवर्क से पहले मूल सिद्धांतों पर ध्यान केंद्रित - फ्रेमवर्क के पहले मूल बातें पर ध्यान केंद्रित
### रिपॉजिटरी देखरेख ### रिपॉजिटरी रखरखाव
- सक्रिय शिक्षार्थी और योगदानकर्ता समुदाय - सक्रिय शिक्षार्थी और योगदानकर्ता समुदाय
- डेपेंडेंसी और सामग्री का नियमित अपडेट - निर्भरताओं और सामग्री का नियमित अद्यतन
- मुद्दों और चर्चाओं की मॉनिटरिंग रख-रखाव टीम द्वारा - मुद्दों और चर्चाओं की निगरानी मेंटेनर्स द्वारा
- अनुवाद अपडेट GitHub Actions के द्वारा स्वचालित - अनुवाद अद्यतन GitHub Actions के माध्यम से स्वचालित
### संबंधित संसाधन ### संबंधित संसाधन
- [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) शिक्षार्थियों के लिए अनुशंसित - शिक्षार्थियों के लिए अनुशंसित [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त पाठ्यक्रम: जनरेटिव AI, डेटा साइंस, ML, IoT पाठ्यक्रम उपलब्ध - अतिरिक्त पाठ्यक्रम: Generative AI, Data Science, ML, IoT पाठ्यक्रम उपलब्ध
### विशिष्ट परियोजनाओं के साथ काम करना ### विशिष्ट परियोजनाओं के साथ काम करना
व्यक्तिगत परियोजनाओं पर विस्तृत निर्देशों के लिए, संबंधित README फाइलों को देखें: व्यक्तिगत परियोजनाओं के विस्तृत निर्देशों के लिए संबंधित README फ़ाइल देखें:
- `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन - `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन
- `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन - `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन
- `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास - `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास
- `6-space-game/README.md` - कैनवास आधारित गेम विकास - `6-space-game/README.md` - कैनवास-आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट असिस्टेंट परियोजना - `9-chat-project/README.md` - एआई चैट सहायक परियोजना
### मुनोरेपो संरचना ### मोनोरिपो संरचना
यह पारंपरिक मुनोरेपो नहीं है, लेकिन इस रिपॉजिटरी में कई स्वतंत्र परियोजनाएं हैं: यह पारंपरिक मोनोरिपो नहीं है, लेकिन यह भंडार कई स्वतंत्र परियोजनाएँ शामिल करता है:
- प्रत्येक पाठ स्वतंत्र है - प्रत्येक पाठ स्व-निहित है
- परियोजनाओं के बीच निर्भरता साझा नहीं होती - परियोजनाएँ निर्भरताएं साझा नहीं करतीं
- एक परियोजना पर काम करते हुए अन्य प्रभावित नहीं होते - व्यक्तिगत परियोजनाओं पर काम करें बिना दूसरों को प्रभावित किए
- पूरी पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें - पूर्ण पाठ्यक्रम अनुभव के लिए पूरा रिपॉजिटरी क्लोन करें
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान रखें कि स्वचालित अनुवादों में गलतियाँ या अस्पष्टताएँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

237
translations/hi/README.md
Unescape View File

@ -1,21 +1,38 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# शुरुआती लोगों के लिए वेब विकास - एक पाठ्यक्रम # शुरुआती लोगों के लिए वेब विकास - एक पाठ्यक्रम
Microsoft क्लाउड एडवोकेट्स द्वारा हमारे 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास के मूल बातें सीखें। 24 पाठों में से प्रत्येक JavaScript, CSS, और HTML को हाथों-हाथ प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशनों, और स्पेस गेम्स के माध्यम से गहराई से समझाता है। क्वीज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स में भाग लें। हमारी प्रभावी परियोजना-आधारित शिक्षा पद्धति के साथ अपनी कौशलों को बढ़ाएं और आपकी ज्ञान की स्मृति को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें! Microsoft Cloud Advocates द्वारा प्रस्तुत हमारे 12 सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास की मूल बातें सीखें। 24 पाठों में से प्रत्येक में तरैरियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे प्रायोगिक परियोजनाओं के माध्यम से JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं और व्यावहारिक असाइंमेंट्स के साथ जुड़ें। हमारे प्रभावी परियोजना-आधारित शिक्षण पद्धति के साथ अपने कौशल को निखारें और अपनी ज्ञान धारणा को बढ़ाएं। अपनी कोडिंग यात्रा आज ही शुरू करें!
Azure AI Foundry डिसकॉड समुदाय में शामिल हों Azure AI Foundry Discord समुदाय में शामिल हों
इन संसाधनों का उपयोग शुरू करने के लिए इन चरणों का पालन करें: [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
1. **रिपॉजिटरी को फ़ोर्क करें**: क्लिक करें [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **रिपॉजिटरी को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` इन संसाधनों का उपयोग शुरू करने के लिए ये कदम उठाएं:
1. **रिपॉजिटरी फोर्क करें**: क्लिक करें [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **रिपॉजिटरी क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord में शामिल हों और विशेषज्ञों तथा अन्य डेवलपर्स से मिलें**](https://discord.com/invite/ByRwuEEgH4) 3. [**Azure AI Foundry Discord में शामिल हों और विशेषज्ञों तथा अन्य डेवलपर्स से मिलें**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 बहुभाषी समर्थन ### 🌐 बहुभाषी समर्थन
#### GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अद्यतित) #### GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अपडेटेड)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](./README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **क्या आप स्थानीय रूप से क्लोन करना पसंद करते हैं?** > **स्थानीय रूप से क्लोन करना पसंद है?**
> >
> इस रिपॉजिटरी में 50+ भाषा अनुवाद शामिल हैं, जिससे डाउनलोड आकार काफी बढ़ जाता है। बिना अनुवाद के क्लोन करने के लिए, sparse checkout का प्रयोग करें: > यह रिपॉजिटरी 50+ भाषा अनुवाद शामिल करती है जो डाउनलोड आकार को काफी बढ़ा देती है। बिना अनुवाद के क्लोन करने के लिए स्पार्स चेकआउट का उपयोग करें:
> >
> **Bash / macOS / Linux:** > **Bash / macOS / Linux:**
> ```bash > ```bash
@ -31,168 +48,172 @@ Azure AI Foundry डिसकॉड समुदाय में शामिल
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > 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)**
#### 🧑‍🎓 _क्या आप एक छात्र हैं?_ [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[**छात्र हब पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) देखें जहाँ आपको शुरुआती संसाधन, छात्र पैक और मुक्त सर्टिफिकेट वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करें और समय-समय पर देखें क्योंकि हम मासिक रूप से सामग्री बदलते रहते हैं। #### 🧑‍🎓 _क्या आप छात्र हैं?_
### 📣 घोषणा - नए GitHub Copilot Agent मोड चुनौतियाँ पूरी करें! [**Student Hub पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं जहाँ आप शुरुआती संसाधन, छात्र पैक और मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके पा सकते हैं। यह पेज आपका पसंदीदा होना चाहिए और समय-समय पर जांचते रहना चाहिए क्योंकि हम मासिक रूप से कंटेंट अपडेट करते हैं।
नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" ढूंढें। यह GitHub Copilot और Agent मोड का उपयोग करके पूरी करने के लिए आपकी एक नई चुनौती है। यदि आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट उत्पन्न करने में सक्षम नहीं है, बल्कि यह फ़ाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ कर सकता है। ### 📣 घोषणा - नए GitHub Copilot एजेंट मोड चुनौतियाँ पूरी करें!
### 📣 घोषणा - _Generative AI का उपयोग करके निर्माण करने के लिए नया प्रोजेक्ट_ नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपकी नई चुनौती है जिसे आप GitHub Copilot और Agent मोड का उपयोग करके पूरा कर सकते हैं। अगर आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और बहुत कुछ कर सकता है।
### 📣 घोषणा - _Generative AI का उपयोग करके नया प्रोजेक्ट बनाएँ_
नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md) नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
### 📣 घोषणा - _Javascript के लिए Generative AI_ पर नया पाठ्यक्रम अभी जारी किया गया है ### 📣 घोषणा - _Generative AI के लिए नया पाठ्यक्रम_ JavaScript के लिए अभी जारी किया गया
हमारा नया Generative 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)!
![Background](../../translated_images/hi/background.148a8d43afde5730.webp) ![Background](../../translated_images/hi/background.148a8d43afde5730.webp)
- बुनियादी से RAG तक सब कुछ कवर करता पाठ। - बुनियादी से लेकर RAG तक सब कुछ शामिल पाठ।
- GenAI और हमारे सहायक ऐप का उपयोग कर ऐतिहासिक पात्रों के साथ बातचीत करें। - GenAI और हमारे साथी ऐप के साथ ऐतिहासिक पात्रों के साथ संवाद करें।
- मज़ेदार और आकर्षक कथा, आप समय यात्रा कर रहे होंगे! - मजेदार और आकर्षक कथा, आप समय यात्रा पर हैं!
![character](../../translated_images/hi/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/hi/character.5c0dd8e067ffd693.webp)
प्रत्येक पाठ में एक असाइनमेंट, ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों पर सीखने में मार्गदर्शन करती है: हर पाठ में एक असाइंमेंट, ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों को सीखने में मार्गदर्शन करेगी:
- प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग - प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग
- टेक्स्ट और इमेज एप जनरेशन - टेक्स्ट और छवि ऐप जनरेशन
- सर्च एप्लिकेशन - खोज ऐप्स
शुरू करने के लिए जाएं [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` 2. **रिपॉजिटरी क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### एक Codespace में पाठ्यक्रम चलाएँ #### Codespace में पाठ्यक्रम चलाना
आपकी बनाई गई इस रिपॉजिटरी की कॉपी में, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए काम करने के लिए एक नया Codespace बनाएगा। जिस कॉपी की आपने बनाई है, उसमें **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। इससे आपके काम के लिए नया Codespace बन जाएगा।
![Codespace](../../translated_images/hi/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/hi/createcodespace.0238bbf4d7a8d955.webp)
#### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाएँ #### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना
अपने कंप्यूटर पर स्थानीय रूप से इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट संपादक, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [Introduction to Programming Languages and Tools of the Trade](../../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) से डाउनलोड कर सकते हैं। हमारी सिफारिश है कि आप अपने संपादक के रूप में [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 कॉपी करके कर सकते हैं: 1. अपने कंप्यूटर पर अपने रिपॉजिटरी को क्लोन करें। आप इसे **Code** बटन पर क्लिक करके और URL कॉपी करके कर सकते हैं:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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 पेजों का पूर्वावलोकन करने के लिए > * [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/) - [पाठोपरांत क्विज़](https://ff-quizzes.netlify.app/web/)
> **क्विज़ के बारे में एक नोट**: सभी क्विज़ क्विज़-ऐप फ़ोल्डर में हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहां](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं, क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है या Azure पर परिनियोजित किया जा सकता है; `quiz-app` फ़ोल्डर में दिए निर्देशों का पालन करें। > **क्विज़ के बारे में नोट**: सभी क्विज़ 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 | | 01 | Getting Started | प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल तत्व और ऐसे सॉफ़्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके कार्यों में मदद करते हैं | [प्रोग्रामिंग भाषाओं और उपकरणों का परिचय](./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 | | 02 | Getting Started | GitHub की बुनियादी बातें, जिसमें टीम के साथ काम शामिल है | अपने प्रोजेक्ट में GitHub कैसे उपयोग करें, एक कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | शुरुआत करना | एक्सेबिलिटी | वेब एक्सेसिबिलिटी के मूल बातें सीखें | [एक्सेसिबिलिटी के मूल सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Getting Started | पहुंच योग्यता | वेब पहुंच योग्यता के मूल बातें सीखें | [पहुंच योग्यता के मूल तत्व](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS बेसिक्स | जावास्क्रिप्ट डेटा टाइप | जावास्क्रिप्ट डेटा टाइप के मूल बातें | [डेटा टाइप](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Basics | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों का परिचय | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS बेसिक्स | फंक्शन और मेथड्स | किसी एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन और मेथड्स के बारे में जानें | [फंक्शन और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher | | 05 | JS Basics | फ़ंक्शंस और मेथड्स | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शंस और मेथड्स के बारे में जानें | [फ़ंक्शंस और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher |
| 06 | JS बेसिक्स | JS के साथ निर्णय लेना | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में कंडीशन्स कैसे बनाएं सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Basics | JS के साथ निर्णय लेना | निर्णय लेने की विधियों का उपयोग करके अपने कोड में शर्तें कैसे बनाएं सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS बेसिक्स | एरे और लूप्स | जावास्क्रिप्ट में एरे और लूप्स का उपयोग करके डेटा के साथ काम करें | [एरे और लूप्स](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | JS Basics | ऐरे और लूप्स | 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 | | 08 | [Terrarium](./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 | | 09 | [Terrarium](./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 | | 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) | टाइपिंग गेम बनाएं | अपने जावास्क्रिप्ट ऐप का लॉजिक चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें | [इवेंट-संचालित प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./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 | | 12 | [Green Browser Extension](./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 | | 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 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन सीखें | [पृष्ठभूमि कार्य और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/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 | | 15 | [Space Game](./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 | | 16 | [Space Game](./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 | | 17 | [Space Game](./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 | | 18 | [Space Game](./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 | | 19 | [Space Game](./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 | | 20 | [Space Game](./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 | | 21 | [Banking App](./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 | | 22 | [Banking App](./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 | | 23 | [Banking App](./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 | | 24 | [Banking App](./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 | | 25 | [Browser/VScode Code](../../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 | | 26 | [AI Assistants](./9-chat-project/README.md) | AI के साथ काम करना | अपना स्वयं का AI सहायक कैसे बनाएं सीखें | [AI सहायक प्रोजेक्ट](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षा पद्धति ## 🏫 शिक्षणशास्त्र
हमारा पाठ्यक्रम दो मुख्य शैक्षिक सिद्धांतों के साथ डिज़ाइन किया गया है: हमारा पाठ्यक्रम दो मुख्य शिक्षण सिद्धांतों के साथ डिजाइन किया गया है:
* प्रोजेक्ट-आधारित सीखना * प्रोजेक्ट-आधारित शिक्षण
* बारम्बार क्विज़ * बार-बार क्विज़
यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल्स और तकनीकों को सिखाता है। छात्र टाइपिंग गेम, वर्चुअल टेरियम, इको-फ्रेंडली ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली के गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करेंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी। यह कार्यक्रम JavaScript, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्रों को टाइपिंग गेम, वर्चुअल टेरैरियम, पर्यावरण के अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली गेम, और व्यवसायों के लिए एक बैंकिंग ऐप बनाने के माध्यम से व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी।
> 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में Microsoft Learn पर ले सकते हैं! > 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठों को Microsoft Learn पर [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?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)" वीडियो ट्यूटोरियल संग्रह से एक वीडियो है, जिनके कुछ लेखक ने इस पाठ्यक्रम में योगदान दिया है। सुनिश्चित करके कि सामग्री परियोजनाओं के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बनती है और अवधारणाओं का प्रतिधारण बढ़ता है। हमने कई शुरुआती पाठ JavaScript बुनियादी बातें में लिखे हैं ताकि अवधारणाओं का परिचय दिया जा सके, जिनके साथ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह का एक वीडियो है, जिनमें से कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं।
इसके अतिरिक्त, कक्षा से पहले एक कम जोखिम वाला क्विज़ छात्र की सीखने की इच्छा सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ और अधिक पकड़ सुनिश्चित करता है। यह पाठ्यक्रम लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया है और संपूर्ण या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट छोटे से शुरू होते हैं और 12 सप्ताह के चक्र के अंत तक काफी जटिल हो जाते हैं। इसके अतिरिक्त, कक्षा से पहले एक कम-दांव वाला क्विज़ छात्र की सीखने की इच्छा को निर्धारित करता है, जबकि कक्षा के बाद दूसरा क्विज़ और अधिक अवधारणाओं को स्थायी बनाता है। यह पाठ्यक्रम लचीला और मजेदार होने के लिए डिजाइन किया गया है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। परियोजनाएँ छोटी शुरुआत से शुरू होकर 12-सप्ताह के चक्र के अंत तक अधिक जटिल होती जाती हैं।
जबकि हमने जावास्क्रिप्ट फ्रेमवर्क पेश करने से जानबूझकर बचा है ताकि एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद अगला अच्छा कदम 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.md) और [योगदान](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
सभी पाठों का एक पीडीएफ [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
## 🎒 अन्य पाठ्यक्रम ## 🎒 अन्य कोर्स
हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें: हमारी टीम अन्य कोर्स भी बनाती है! देखें:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -217,7 +238,7 @@ Azure AI Foundry डिसकॉड समुदाय में शामिल
--- ---
### मुख्य शिक्षण ### कोर सीखना
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -228,19 +249,19 @@ Azure AI Foundry डिसकॉड समुदाय में शामिल
--- ---
### कॉपिलट श्रृंखला ### Copilot श्रृंखला
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## सहायता प्राप्त करना ## मदद प्राप्त करना
यदि आप फंसे हुए हैं या AI ऐप बनाने के बारे में कोई प्रश्न हैं, तो MCP के बारे में चर्चा में अन्य सीखने वालों और अनुभवी डेवलपर्स से जुड़ें। यह एक सहायक समुदाय है जहाँ प्रश्नों का स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है। यदि आप फंस गए हैं या AI एप्लिकेशन बनाने के बारे में कोई प्रश्न हैं। MCP के बारे में चर्चा में अन्य सीखने वालों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहां प्रश्न स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है।
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
यदि आपके पास उत्पाद प्रतिक्रिया या निर्माण के दौरान त्रुटियाँ हैं तो यहाँ जाएँ: यदि आपके पास उत्पाद प्रतिक्रिया है या निर्माण के दौरान त्रुटियाँ हो रही हैं तो यहाँ जाएँ:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -252,5 +273,5 @@ Azure AI Foundry डिसकॉड समुदाय में शामिल
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**: **अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या असत्यताएँ हो सकती हैं। मूल दस्तावेज़ अपनी मातृभाषा में ही आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। यह दस्तावेज़ एआई अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/ja/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:10:31+00:00", "translation_date": "2026-04-06T18:03:22+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "ja" "language_code": "ja"
}, },
@ -516,8 +516,8 @@
"language_code": "ja" "language_code": "ja"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T14:29:38+00:00", "translation_date": "2026-04-06T17:57:44+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ja" "language_code": "ja"
}, },

348
translations/ja/AGENTS.md
Unescape View File

@ -2,46 +2,46 @@
## プロジェクト概要 ## プロジェクト概要
これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムは Microsoft Cloud Advocates によって開発された包括的な12週間のコースで、JavaScript、CSS、HTML を扱う24の実践的なレッスンを特徴としています。 これは初心者向けにウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって作成された包括的な12週間コースで、JavaScript、CSS、HTMLを扱う24の実践的なレッスンが含まれています。
### 主なコンポーネント ### 主な構成要素
- <strong>教育コンテンツ</strong>: プロジェクトベースのモジュールに構成された24の体系的なレッスン - <strong>教育コンテンツ</strong>: プロジェクトベースのモジュールに整理された24の構造化されたレッスン
- <strong>実践プロジェクト</strong>: テラリウム、タイピングゲーム、ブラウザー拡張機能、宇宙ゲーム、銀行アプリ、コードエディター、AIチャットアシスタント - <strong>実践的プロジェクト</strong>: テラリウム、タイピングゲーム、ブラウザー拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント
- <strong>インタラクティブクイズ</strong>: 各3問の48のクイズ（レッスン前後の評価） - <strong>インタラクティブクイズ</strong>: 各レッスン前後に3問ずつの48のクイズ
- <strong>多言語対応</strong>: GitHub Actions による50以上の言語の自動翻訳 - <strong>多言語対応</strong>: GitHub Actionsによる50以上の言語の自動翻訳対応
- <strong>技術スタック</strong>: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用） - <strong>技術スタック</strong>: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用）
### アーキテクチャ ### アーキテクチャ
- レッスンベースの構造をもつ教育リポジトリ - レッスンベース構造の教育リポジトリ
- 各レッスンフォルダーに README、コード例、解答例を含む - 各レッスンフォルダーにはREADME、コード例、ソリューションが含まれる
- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各種レッスンプロジェクト） - 独立したプロジェクトは個別のディレクトリに（quiz-app、各種レッスンプロジェクト）
- GitHub Actions（co-op-translator）を用いた翻訳システム - GitHub Actions（co-op-translator）を用いた翻訳システム
- Docsify でドキュメント配信および PDF での提供 - Docsifyで提供されるドキュメントおよびPDF形式での提供もあり
## セットアップコマンド ## セットアップコマンド
このリポジトリは主に教育コンテンツの参照用です。特定のプロジェクトに取り組む際は以下を参照してください。 このリポジトリは主に教育コンテンツの閲覧用です。特定のプロジェクトを扱う場合は以下を参照してください。
### メインリポジトリセットアップ ### メインリポジトリのセットアップ
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### クイズアプリセットアップ (Vue 3 + Vite) ### クイズアプリのセットアップ（Vue 3 + Vite）
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # 開発サーバーを起動 npm run dev # 開発サーバーを起動する
npm run build # 本番用にビルド npm run build # 本番用にビルドする
npm run lint # ESLintを実行 npm run lint # ESLintを実行する
``` ```
### 銀行プロジェクトAPI (Node.js + Express) ### バンクプロジェクトAPI（Node.js + Express）
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
@ -56,15 +56,15 @@ npm run format # Prettierでフォーマットする
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# ブラウザ固有の拡張機能読み込み手順に従ってください # ブラウザ固有の拡張機能の読み込み手順に従ってください
``` ```
### 宇宙ゲームプロジェクト ### スペースゲームプロジェクト
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# ブラウザでindex.htmlを開くか、Live Serverを使用してください # index.html をブラウザで開くか、Live Server を使用してください
``` ```
### チャットプロジェクト（Pythonバックエンド） ### チャットプロジェクト（Pythonバックエンド）
@ -72,7 +72,7 @@ npm install
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# GITHUB_TOKEN 環境変数を設定する # GITHUB_TOKEN環境変数を設定する
python api.py python api.py
``` ```
@ -80,117 +80,117 @@ python api.py
### コンテンツ寄稿者向け ### コンテンツ寄稿者向け
1. リポジトリを GitHub のアカウントに <strong>フォーク</strong> する 1. リポジトリをGitHubアカウントで<strong>フォーク</strong>する
2. フォークしたリポジトリをローカルに <strong>クローン</strong> する 2. フォークをローカルに<strong>クローン</strong>する
3. 変更用の <strong>新しいブランチ</strong> を作成する 3. 変更用に<strong>新しいブランチ</strong>を作成する
4. レッスンの内容やコード例を編集する 4. レッスンコンテンツやコード例を編集する
5. 関連プロジェクトディレクトリでコード変更をテストする 5. 関連プロジェクトディレクトリでコード変更をテストする
6. 貢献ガイドラインに従いプルリクエストを提出する 6. 貢献ガイドラインに沿ってプルリクエストを提出する
### 学習者向け ### 学習者向け
1. リポジトリをフォークまたはクローンする 1. リポジトリをフォークまたはクローンする
2. レッスンディレクトリを順番に進む 2. レッスンディレクトリを順に移動する
3. 各レッスンの README を読む 3. 各レッスンのREADMEを読む
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを受ける 4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを完了する
5. レッスンフォルダ内のコード例を実践する 5. レッスンフォルダーのコード例に取り組む
6. 課題やチャレンジを完了する 6. 課題とチャレンジを完了する
7. レッスン後クイズを受ける 7. レッスン後のクイズを受験する
### ライブ開発 ### ライブ開発
- <strong>ドキュメント</strong>: ルートで `docsify serve` を実行（ポート3000） - <strong>ドキュメント</strong>: ルートで `docsify serve` を実行（ポート3000）
- <strong>クイズアプリ</strong>: quiz-appディレクトリで `npm run dev` を実行 - <strong>クイズアプリ</strong>: quiz-appディレクトリで `npm run dev` 実行
- <strong>プロジェクト</strong>: VS Code Live Server 拡張機能を使用（HTMLプロジェクト用） - <strong>プロジェクト</strong>: HTMLプロジェクトはVS CodeのLive Server拡張を使用
- **APIプロジェクト**: 各APIディレクトリで `npm start` を実行 - **APIプロジェクト**: 該当APIディレクトリで `npm start` 実行
## テスト手順 ## テスト手順
### クイズアプリテスト ### クイズアプリのテスト
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # コードスタイルの問題をチェックする npm run lint # コードスタイルの問題をチェックする
npm run build # ビルドが成功することを確認する npm run build # ビルドが成功するか確認する
``` ```
### 銀行APIテスト ### バンクAPIのテスト
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # コードスタイルの問題を確認する npm run lint # コードスタイルの問題をチェックする
node server.js # エラーなくサーバーが起動するか検証する node server.js # サーバーがエラーなく起動することを確認する
``` ```
### 一般的なテスト方針 ### 一般的なテスト方針
- 包括的な自動テストはない教育リポジトリです - 本リポジトリは包括的な自動テストを含みません
- 手動テストは以下に着目: - 手動テストは以下に重点を置く：
- コード例がエラーなく実行できるか - コード例がエラーなく動作すること
- ドキュメント内のリンクが正しく動作するか - ドキュメント内リンクが正しく機能すること
- プロジェクトビルドが正常に完了するか - プロジェクトが正常にビルドできること
- 例がベストプラクティスに沿っているか - 例がベストプラクティスに従っていること
### 提出前チェック ### 提出前チェック
- package.json のあるディレクトリで `npm run lint` を実行 - package.jsonのあるディレクトリで `npm run lint` を実行
- Markdownリンクの有効性を検証 - マークダウンのリンクが有効か確認
- ブラウザまたは Node.js でコード例をテスト - ブラウザやNode.jsでコード例を検証
- 翻訳が正しい構造を保持していることを確認 - 翻訳が正しい構造を維持していることを確認
## コードスタイルガイドライン ## コードスタイルガイドライン
### JavaScript ### JavaScript
- 最新の ES6+ 構文を使用 - モダンなES6+構文を使用
- プロジェクトで提供される標準 ESLint 設定を遵守 - プロジェクト内の標準ESLint設定に従う
- 教育上わかりやすい変数名・関数名を使用 - 教育目的でわかりやすい変数・関数名を使用
- 概念説明のコメントを追加 - 学習者向けに概念を説明するコメントを追加
- Prettier でフォーマット（設定がある場合） - Prettierでフォーマット（設定されている場合）
### HTML/CSS ### HTML/CSS
- セマンティックなHTML5要素 - セマンティックなHTML5要素を使用
- レスポンシブデザインの原則 - レスポンシブデザインの原則を守る
- 明確なクラス命名規則 - 明確なクラス命名規則
- CSS技術についての説明コメント - CSS手法を説明するコメントを付加
### Python ### Python
- PEP 8 スタイルガイドに準拠 - PEP 8スタイルガイドに準拠
- 教育的にわかりやすいコード例 - わかりやすく教育的なコード例
- 学習支援のための型ヒントも活用 - 学習を助ける型ヒントを適宜使用
### Markdownドキュメント ### Markdownドキュメント
- 明確な見出し階層 - 明確な見出し階層
- 言語指定のコードブロック - 言語指定付きコードブロック
- 追加リソースへのリンク - 追加リソースへのリンク
- `images/` ディレクトリのスクリーンショット、画像 - `images/` ディレクトリ内のスクリーンショットや画像
- アクセシビリティのための代替テキスト - アクセシビリティ対応のための代替テキスト
### ファイル構成 ### ファイル構成
- レッスンは順番に番号付け（1-getting-started-lessons、2-js-basics 等） - レッスンは番号付きで順番に並ぶ（1-getting-started-lessons、2-js-basicsなど）
- 各プロジェクトに `solution/`、多くは `start/` または `your-work/` ディレクトリ - 各プロジェクトは `solution/` と、しばしば `start/` や `your-work/` ディレクトリを持つ
- 画像はレッスン固有の `images/` フォルダに格納 - 画像は各レッスン固有の `images/` フォルダーに保存
- 翻訳は `translations/{language-code}/` 構造 - 翻訳は `translations/{language-code}/` 構造で管理
## ビルドとデプロイ ## ビルドとデプロイ
### クイズアプリのデプロイ (Azure Static Web Apps) ### クイズアプリのデプロイ（Azure Static Web Apps）
quiz-app は Azure Static Web Apps 用に設定済み： quiz-appはAzure Static Web Apps用の設定済み：
```bash ```bash
cd quiz-app cd quiz-app
npm run build # dist/フォルダを作成します npm run build # dist/フォルダを作成する
# mainブランチへのプッシュ時にGitHub Actionsワークフローを通じてデプロイします # mainにプッシュされたときにGitHub Actionsワークフローを介してデプロイする
``` ```
Azure Static Web Apps の設定: Azure Static Web Apps構成:
- <strong>アプリの場所</strong>: `/quiz-app` - <strong>アプリロケーション</strong>: `/quiz-app`
- <strong>出力場所</strong>: `dist` - <strong>出力先</strong>: `dist`
- <strong>ワークフロー</strong>: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - <strong>ワークフロー</strong>: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### ドキュメントPDF生成 ### ドキュメントPDF生成
@ -203,76 +203,76 @@ npm run convert # docs から PDF を生成する
### Docsifyドキュメント ### Docsifyドキュメント
```bash ```bash
npm install -g docsify-cli # Docsify をグローバルにインストールする npm install -g docsify-cli # Docsifyをグローバルにインストールする
docsify serve # localhost:3000 でサーブする docsify serve # localhost:3000でサービスを開始する
``` ```
### プロジェクト別ビルド ### プロジェクトごとのビルド
各プロジェクトディレクトリに特有のビルドプロセスあり: 各プロジェクトディレクトリには独自のビルド処理がある場合がある：
- Vue プロジェクト: `npm run build` で本番バンドル作成 - Vueプロジェクト：`npm run build` で本番用バンドル生成
- 静的プロジェクト: ビルド不要、ファイルを直接配信 - 静的プロジェクト：ビルド不要でファイルを直接提供
## プルリクエストガイドライン ## プルリクエストガイドライン
### タイトル形式 ### タイトル形式
変更箇所をわかりやすく明示： 変更内容がわかりやすい明確なタイトルを使用:
- `[Quiz-app] レッスンX用の新しいクイズ追加` - `[Quiz-app] レッスンXの新しいクイズ追加`
- `[Lesson-3] テラリウムプロジェクトのタイプミス修正` - `[Lesson-3] テラリウムプロジェクトのタイプミス修正`
- `[Translation] レッスン5のスペイン語翻訳追加` - `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新` - `[Docs] セットアップ手順の更新`
### 必須チェック ### 必須チェック
PR提出前に実施： PR提出前に以下を実施：
1. <strong>コード品質</strong>: 1. <strong>コード品質</strong>:
- 関連プロジェクトで `npm run lint` を実行 - 該当プロジェクトディレクトリで `npm run lint` 実行
- 全ての警告・エラーを修正 - すべてのリンティングエラーと警告を修正
2. <strong>ビルド確認</strong>: 2. <strong>ビルド確認</strong>:
- 該当する場合 `npm run build` を実行 - 必要に応じて `npm run build` 実行
- ビルドエラーなしを確保 - ビルドエラーなしを確認
3. <strong>リンク検証</strong>: 3. <strong>リンク検証</strong>:
- 全Markdownリンクをテスト - すべてのマークダウンリンクをテスト
- 画像参照の動作確認 - 画像の参照が正しいことを確認
4. <strong>内容レビュー</strong>: 4. <strong>コンテンツレビュー</strong>:
- スペル・文法の校正 - スペルと文法の校正
- コード例の正確さと教育的妥当性 - コード例が正しく教育的であること確認
- 翻訳が原文の意味を維持しているか確認 - 翻訳が原文の意味を忠実に反映していることを検証
### 貢献条件 ### 貢献条件
- Microsoft CLA に同意（初PR時に自動チェック） - Microsoft CLAへの同意（初回PR時に自動チェック）
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) を遵守 - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)の遵守
- 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) 参照 - 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) を参照
- PR説明に関連issue番号を記載（該当時） - PR説明に課題番号記載（該当する場合）
### レビュー体制 ### レビュー過程
- PRはメンテナとコミュニティでレビュー - メンテナとコミュニティによるレビュー
- 教育的な明瞭さを優先 - 教育のわかりやすさを最優先
- コード例は最新のベストプラクティスに沿うこと - コード例は最新のベストプラクティスに合致させる
- 翻訳は正確性と文化的適合性を重視してレビュー - 翻訳は正確さと文化的適切さもチェック
## 翻訳システム ## 翻訳システム
### 自動翻訳 ### 自動翻訳
- GitHub Actions と co-op-translator ワークフローを使用 - GitHub Actionsのco-op-translatorワークフローを利用
- 50以上の言語へ自動翻訳 - 50以上の言語へ自動翻訳
- ソースファイルはメインディレクトリ内 - ソースファイルはメインディレクトリ
- 翻訳ファイルは `translations/{language-code}/` に保管 - 翻訳ファイルは `translations/{language-code}/` に格納
### 手動翻訳改善の追加 ### 手動翻訳改善の追加
1. `translations/{language-code}/`内のファイルを特定 1. `translations/{language-code}/` 内のファイルを見つける
2. 構造を崩さず改善を加える 2. 構造を維持しつつ改善を加える
3. コード例が動作し続けるように注意 3. コード例の動作が維持されていることを確認
4. ローカライズされたクイズ内容もテスト 4. ローカライズされたクイズ内容をテスト
### 翻訳メタデータ ### 翻訳メタデータ
@ -294,115 +294,115 @@ CO_OP_TRANSLATOR_METADATA:
### よくある問題 ### よくある問題
<strong>クイズアプリが起動しない</strong>: <strong>クイズアプリが起動しない</strong>:
- Node.js のバージョンを確認（v14以上推奨） - Node.jsのバージョンを確認（v14以上推奨）
- `node_modules` と `package-lock.json` を削除し `npm install` を再実行 - `node_modules` と `package-lock.json` を削除し、`npm install` を再実行
- ポート競合（デフォルト Vite ポート 5173）をチェック - ポート競合の確認（デフォルトはViteのポート5173）
**APIサーバーが起動しない**: **APIサーバーが起動しない**:
- Node.js バージョンは最低 node >=10 であることを確認 - Node.jsバージョンが最小要件(node >=10)を満たしているか
- ポートが既に使われていないかチェック - ポートが使用中でないか確認
- 依存関係は `npm install` 済みか確認 - すべての依存を `npm install` でインストール済みか
<strong>ブラウザー拡張機能が読み込まれない</strong>: <strong>ブラウザー拡張機能が読み込めない</strong>:
- manifest.json が正しくフォーマットされているか確認 - manifest.jsonの適切なフォーマットを確認
- ブラウザのコンソールでエラーを確認 - ブラウザコンソールのエラーを確認
- ブラウザ固有の拡張機能インストール手順に従う - ブラウザ固有のインストール手順に従う
**Pythonチャットプロジェクトの問題**: **Pythonチャットプロジェクトの問題**:
- OpenAI パッケージがインストールされていること: `pip install openai` - OpenAIパッケージのインストールを確認: `pip install openai`
- GITHUB_TOKEN 環境変数が設定済みか確認 - GITHUB_TOKEN環境変数が設定されていることを確認
- GitHub Models へのアクセス権限をチェック - GitHub Modelsのアクセス権を確認
**Docsify がドキュメントを配信しない**: **Docsifyがドキュメントを提供しない**:
- docsify-cli をグローバルにインストール: `npm install -g docsify-cli` - docsify-cliをグローバルにインストール: `npm install -g docsify-cli`
- リポジトリルートで起動 - リポジトリルートで実行
- `docs/_sidebar.md` が存在しているか確認 - `docs/_sidebar.md` が存在することを確認
### 開発環境のヒント ### 開発環境のヒント
- HTMLプロジェクトには VS Code の Live Server 拡張機能を使用 - HTMLプロジェクトはVS CodeのLive Server拡張を利用
- 一貫したフォーマットのため ESLint と Prettier 拡張をインストール - ESLintとPrettier拡張をインストールして一貫性あるフォーマット
- JavaScript のデバッグにはブラウザの DevTools を活用 - JavaScriptデバッグにはブラウザのDevToolsを使用
- Vueプロジェクトには Vue DevTools ブラウザ拡張をインストール - VueプロジェクトではVue DevToolsのブラウザ拡張をインストール
### パフォーマンス上の注意 ### パフォーマンス考慮事項
- 50以上の言語の大量翻訳ファイルによってフルクローンは大きくなる - 翻訳ファイルが50以上あるため、フルクローンは大容量
- コンテンツのみ作業時は浅いクローンで: `git clone --depth 1` - コンテンツ作業のみなら浅いクローンを推奨：`git clone --depth 1`
- 英語コンテンツ作業時は翻訳ファイルを検索外にすると高速化 - 英語コンテンツ作業時は検索から翻訳を除外すると効果的
- 初回のビルドプロセスは遅い場合あり（npm install、Viteビルド） - 最初のビルド（npm install、Viteビルド）は時間がかかる場合あり
## セキュリティ上の考慮点 ## セキュリティ考慮事項
### 環境変数 ### 環境変数
- APIキーは決してリポジトリにコミットしない - APIキーはリポジトリにコミットしない
- `.env` ファイルを使用（既に `.gitignore` に設定） - `.env` ファイルを利用（既に `.gitignore` で除外）
- 必要な環境変数はプロジェクトのREADMEに記載 - 必須環境変数をプロジェクトREADMEに記載
### Pythonプロジェクト ### Pythonプロジェクト
- 仮想環境を使用: `python -m venv venv` - 仮想環境を使用：`python -m venv venv`
- 依存関係は常に最新に保つ - 依存を最新に保つ
- GitHub トークンは最小限の権限を付与 - GitHubトークンは必要最小限の権限で管理
### GitHub Modelsアクセス ### GitHub Modelsアクセス
- GitHub Models のための個人アクセストークン（PAT）が必要 - GitHub Models利用には個人アクセストークン（PAT）が必要
- トークンは環境変数として管理 - トークンは環境変数として管理
- トークンや認証情報は絶対にコミットしない - トークンや認証情報を決してコミットしないこと
## その他の注意点 ## 追加情報
### 対象ユーザー ### 対象ユーザー
- ウェブ開発の完全初心者 - ウェブ開発の完全な初心者
- 学生や独学者 - 学生や独学者
- 教室でカリキュラムを使う教師 - 教室でカリキュラムを利用する教師
- アクセシビリティに配慮しスキルを段階的に積み上げられる内容 - アクセシブルで段階的なスキルアップを目指した内容
### 教育方針 ### 教育理念
- プロジェクトベースの学習アプローチ - プロジェクトベースの学習アプローチ
- 頻繁な理解度チェック（クイズ） - 頻繁な理解度チェック（クイズ）
- 実際に手を動かすコーディング演習 - 実践的なコード演習
- 実世界の応用例を示す - 実世界の応用例を提供
- フレームワークより基礎を重視 - フレームワークよりも基礎の重視
### リポジトリのメンテナンス ### リポジトリのメンテナンス
- 学習者や貢献者の活発なコミュニティ - 積極的な学習者・貢献者コミュニティ
- 依存関係とコンテンツの定期的な更新 - 依存関係やコンテンツの定期的な更新
- メンテナが課題や議論を監視 - メンテナによる課題管理と議論の監視
- GitHub Actions による翻訳更新の自動化 - GitHub Actionsによる翻訳の自動更新
### 関連リソース ### 関連リソース
- [Microsoft Learn モジュール](https://docs.microsoft.com/learn/) - [Microsoft Learnモジュール](https://docs.microsoft.com/learn/)
- [Student Hub リソース](https://docs.microsoft.com/learn/student-hub/) - [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/)
- 学習者に推奨される [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - 学習者向けに推奨される [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- ジェネレーティブ AI、データサイエンス、ML、IoT の追加コースも利用可能 - 追加コース：ジェネレーティブAI、データサイエンス、ML、IoTカリキュラムもあり
### 特定プロジェクトの利用 ### 特定プロジェクトの扱い
各プロジェクトの詳細は以下の README ファイルを参照： 各プロジェクトの詳細な手順は以下のREADMEを参照：
- `quiz-app/README.md` - Vue 3 クイズアプリケーション - `quiz-app/README.md` - Vue 3クイズアプリケーション
- `7-bank-project/README.md` - 認証付き銀行アプリ - `7-bank-project/README.md` - 認証付きバンキングアプリ
- `5-browser-extension/README.md` - ブラウザー拡張機能開発 - `5-browser-extension/README.md` - ブラウザー拡張機能開発
- `6-space-game/README.md` - Canvasベースのゲーム - `6-space-game/README.md` - Canvasベースのゲーム開発
- `9-chat-project/README.md` - AIチャットアシスタントプロジェクト - `9-chat-project/README.md` - AIチャットアシスタントプロジェクト
### モノレポ構造 ### モノレポ構成
伝統的なモノレポではありませんが、複数の独立プロジェクトを含むリポジトリです： 本リポジトリは従来のモノレポではありませんが、複数の独立プロジェクトを含みます：
- 各レッスンは独立型 - 各レッスンは自己完結型
- プロジェクト同士で依存性は共有しない - プロジェクト間で依存関係を共有しない
- 個別プロジェクトに集中可能 - 個別プロジェクトで独立して作業可能
- カリキュラム全体体験には全リポジトリのクローンが推奨される - 全カリキュラム体験にはリポジトリ全体をクローンしてください
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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) を使用して翻訳されています。正確性の向上に努めていますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご了承ください。原文の言語による文書が権威ある情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用により生じた誤解や解釈の相違について、当方は一切の責任を負いません。
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

213
translations/ja/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# はじめてのウェブ開発 - カリキュラム # Web Development for Beginners - カリキュラム
Microsoft Cloud Advocatesによる全12週間の包括的なコースでウェブ開発の基礎を学びましょう。24の各レッスンは、テラリウムやブラウザ拡張機能、宇宙ゲームといった実践的なプロジェクトを通じてJavaScript、CSS、HTMLを深く掘り下げます。クイズ、ディスカッション、実習課題に取り組みましょう。効果的なプロジェクトベースの教育法でスキルを向上させ、知識の定着を最大化します。今日からコーディングの旅を始めましょう！ Microsoft Cloud Advocates による12週間の総合的なコースでウェブ開発の基本を学びましょう。24回の各レッスンは、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的プロジェクトを通じてJavaScript、CSS、HTMLを深掘りします。クイズやディスカッション、実践課題に参加してください。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングを始めましょう！
Azure AI Foundry Discordコミュニティに参加しよう Azure AI Foundry Discord コミュニティに参加する
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
以下の手順でこれらのリソースの利用を始めましょう： これらのリソースを使い始めるには、以下の手順に従ってください:
1. **リポジトリをフォークする**：[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)をクリック 1. <strong>リポジトリをフォークする</strong>: クリック [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **リポジトリをクローンする**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. <strong>リポジトリをクローンする</strong>: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discordに参加し、専門家や開発者仲間と出会う**](https://discord.com/invite/ByRwuEEgH4) 3. [**Azure AI Foundry Discord に参加し、専門家や他の開発者と交流する**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多言語対応 ### 🌐 多言語サポート
#### GitHub Actionsでサポート（自動化＆常に最新） #### GitHub Action を通じてサポート（自動＆常に最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](./README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](./README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **ローカルでクローンしたいですか？** > **ローカルでクローンする方が良いですか？**
> >
> このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大幅に増加します。翻訳を含めずにクローンするには、スパースチェックアウトを使用してください： > このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大きくなります。翻訳なしでクローンしたい場合はスパースチェックアウトを使用してください:
> >
> **Bash / macOS / Linux:** > **Bash / macOS / Linux:**
> ```bash > ```bash
@ -41,180 +41,181 @@ Azure AI Foundry Discordコミュニティに参加しよう
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> >
> **CMD（Windows）:** > **CMD (Windows):**
> ```cmd > ```cmd
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ``` > ```
> >
> これにより、コースを完了するために必要なすべてがより高速なダウンロードで得られます。 > これにより、速いダウンロードでコースを完了するのに必要なものがすべて手に入ります。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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)をご覧ください**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 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) をご覧ください。
### 📣 お知らせ - JavaScriptの生成AIに関する新カリキュラムがリリースされました ### 📣 お知らせ - JavaScript用の生成AIに関する新カリキュラムがリリースされました
生成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) にアクセスして始めましょう！
![Background](../../translated_images/ja/background.148a8d43afde5730.webp) ![Background](../../translated_images/ja/background.148a8d43afde5730.webp)
- 基礎からRAGまでカバーするレッスン - 基礎からRAGまでを網羅するレッスン
- GenAIとコンパニオンアプリで歴史上の人物と対話可能 - GenAIと連動したコンパニオンアプリで歴史上の人物と対話
- 楽しく引き込まれるストーリー、タイムトラベル体験！ - 楽しく魅力的なストーリーで時空を超えて旅しよう！
![character](../../translated_images/ja/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/ja/character.5c0dd8e067ffd693.webp)
各レッスンには課題、理解度チェック、チャレンジが用意されています。学習トピック例： 各レッスンには課題、知識の確認、チャレンジがあり、以下のテーマを学べます:
- プロンプトとプロンプトエンジニアリング - プロンプトとプロンプトエンジニアリング
- テキストおよび画像アプリの生成 - テキスト＆画像アプリ生成
- 検索アプリ - 検索アプリ
開始はこちら [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)でフィードバックをお寄せください！ > <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)**、各レッスンは事前クイズから始め、講義資料の読解、様々なアクティビティの実施、終了後の確認用クイズへと進んでください。 <strong>[受講者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)</strong>は各レッスンで、事前クイズから始め、講義資料を読んで様々なアクティビティを完了し、事後クイズで理解度をチェックしてください。
学習経験を向上させるため、仲間とつながって一緒にプロジェクトに取り組みましょう！ディスカッションは[ディスカッションフォーラム](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. <strong>リポジトリをフォークする</strong>: ページ右上の「Fork」ボタンをクリック。
2. **リポジトリをクローンする**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. <strong>リポジトリをクローンする</strong>: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespaceでカリキュラムを実行する #### Codespace でカリキュラムを実行する
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択します。すると作業用の新しいCodespaceが作成されます。 作成したコピーのリポジトリで、**Code** ボタンをクリックし **Open with Codespaces** を選択します。これで作業用の Codespace が作成されます。
![Codespace](../../translated_images/ja/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/ja/createcodespace.0238bbf4d7a8d955.webp)
#### お使いのコンピューターでカリキュラムを実行する #### ローカルマシンでカリキュラムを実行する
カリキュラムをローカルで実行するには、テキストエディター、ブラウザー、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../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)からダウンロードできます。 推奨は [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)からダウンロードできます。
1. リポジトリをコンピューターにクローンします。これは **Code** ボタンをクリックしてURLをコピーすることで行えます： 1. リポジトリをコンピューターにクローンします。これは、**Code** ボタンをクリックしてURLをコピーすることで行えます:
[CodeSpace](./images/createcodespace.png) [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>` を置き換えて次のコマンドを実行します： 次に、[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>` に置き換えて、以下のコマンドを実行します:
```bash ```bash
git clone <your-repository-url> 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ページをプレビューするため > * [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/) - [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/)
> **クイズについての注意**：すべてのクイズはQuiz-appフォルダーに収められており、合計48の3問クイズがあります。これらは[こちら](https://ff-quizzes.netlify.app/web/)から利用可能で、クイズアプリはローカルで実行するかAzureにデプロイできます。`quiz-app`フォルダー内の指示に従ってください。 > <strong>クイズについての注意</strong>: クイズはすべて Quiz-app フォルダーに含まれており、全部で48問、3問ずつのクイズがあります。これらは[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、クイズアプリはローカルで実行することもAzureへデプロイすることもできます。`quiz-app`フォルダー内の指示に従ってください。
## 🗃️ レッスン一覧 ## 🗃️ レッスン一覧
| | プロジェクト名 | 学習内容 | 学習目標 | 関連レッスン | 著者 | | | プロジェクト名 | 学習する概念 | 学習目標 | 関連レッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | :-: | :--------------------------------------------------------: | :-----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | Getting Started | プログラミングの紹介と開発ツールの基礎 | 主要なプログラミング言語の基本的な基礎知識と、プロの開発者が仕事に使うソフトウェアについて学ぶ | [プログラミング言語と開発ツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 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 | | 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 | | 03 | Getting Started | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScriptのデータ型 | JavaScriptのデータ型の基本を学ぶ | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Basics | JavaScript のデータ型 | JavaScript のデータ型の基本 | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 関数とメソッド | アプリケーションのロジックの流れを管理する関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 05 | JS Basics | 関数とメソッド | アプリケーションのロジックを管理する関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JSでの条件分岐 | コード内で条件を作る決定手法について学ぶ | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Basics | JavaScriptでの条件分岐 | 条件分岐の作成方法を学ぶ | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 配列とループ | JavaScriptで配列やループを使ってデータを操作する方法 | [配列とループ](./2-js-basics/4-arrays-loops/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 | | 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 | | 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS実践 | オンラインテラリウムをスタイリングするCSS構築、レスポンシブページの基本を学ぶ | [CSS入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptのクロージャーとDOM操作 | ドラッグ＆ドロップインターフェースとして機能するテラリウムのJavaScriptを構築し、クロージャーとDOM操作に注力 | [クロージャーとDOM操作](./3-terrarium/3-intro-to-DOM-and-closures/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 | | 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 | | 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 | | 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 | | 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 | | 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への描画 | 画面に要素を描画するためのCanvas APIについて学ぶ | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するためのCanvas APIについて学ぶ | [Canvasへの描画](./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 | | 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 | | 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 | | 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 | | 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 | | 21 | [Banking App](./7-bank-project/solution/README.md) | Webアプリの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 | | 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 | | 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 | | 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 | | 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 | | 26 | [AI Assistants](./9-chat-project/README.md) | AIの活用 | 独自のAIアシスタントの作り方を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
## 🏫 教育方針 ## 🏫 教育方針
当カリキュラムは次の2つの主要な教育原則を基に設計されています： 私たちのカリキュラムは、以下の2つの主要な教育原理を念頭に設計されています:
* プロジェクトベースの学習 * プロジェクトベースの学習
* 頻繁なクイズ実施 * 頻繁なクイズ
プログラムは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の [Learn Path](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)」の映像も組み合わせています。本カリキュラムの著者の一部もこの動画シリーズに寄稿しています。
さらに、クラス前の低負荷クイズで学習者の学習意欲を高め、クラス後の2回目のクイズで理解の定着を促します。このカリキュラムは柔軟かつ楽しく受講でき、全体または一部を選んで学ぶことができます。プロジェクトは小さなものから始まり、12週間コースの終わりにかけて徐々に複雑になります。 さらに、授業前の簡単なクイズが学習意欲を高め、授業後のクイズが理解を深めます。このカリキュラムは柔軟で楽しく、全編または一部だけを受講できます。プロジェクトは小さなものから始まり、12週間の期間終了時には徐々に複雑になります。
フレームワーク導入をあえて避けているため、まずはウェブ開発者としての基本スキルを身につけることに集中できます。次のステップとしては別の動画シリーズ「[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)」で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` と入力します。ウェブサイトはローカルホストのポート3000番で提供されます：`localhost:3000`。
## 📘 PDF ## 📘 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -231,7 +232,7 @@ Azure AI Foundry Discordコミュニティに参加しよう
--- ---
### ジェネレーティブAIシリーズ ### 生成AIシリーズ
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -239,7 +240,7 @@ Azure AI Foundry Discordコミュニティに参加しよう
--- ---
### コア学習 ### コアラーニング
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -250,29 +251,29 @@ Azure AI Foundry Discordコミュニティに参加しよう
--- ---
### Copilotシリーズ ### コパイロットシリーズ
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## ヘルプを得るには ## ヘルプの受け方
AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する議論に参加して、仲間の学習者や経験豊富な開発者と交流しましょう。質問歓迎で知識を自由に共有するサポートコミュニティです。 AIアプリの構築で行き詰まったり質問があれば、MCPに関する議論に参加しましょう。同じ学習者や経験豊富な開発者と交流できる支援コミュニティで、質問は歓迎され、知識は自由に共有されています。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
製品のフィードバックや構築中のエラーについては、こちらをご覧ください： 製品のフィードバックや構築中のエラーについては次をご覧ください：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## ライセンス ## ライセンス
このリポジトリはMITライセンスの下でライセンスされています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。 このリポジトリはMITライセンスの下で提供されています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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) を使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な点が含まれる可能性があることをご了承ください。原文の言語での文書が権威ある情報源と見なされます。重要な情報に関しては、専門の人間による翻訳をお勧めします。この翻訳の利用により生じたいかなる誤解や解釈の相違についても、当方は責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

6
translations/ko/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:11:26+00:00", "translation_date": "2026-04-06T18:04:20+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "ko" "language_code": "ko"
}, },
@ -516,8 +516,8 @@
"language_code": "ko" "language_code": "ko"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T14:37:22+00:00", "translation_date": "2026-04-06T17:59:22+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "ko" "language_code": "ko"
}, },

308
translations/ko/AGENTS.md
Unescape View File

@ -2,56 +2,56 @@
## 프로젝트 개요 ## 프로젝트 개요
이 저장소는 초보자를 위한 웹 개발 기초 교육 커리큘럼 저장소입니다. 본 커리큘럼은 Microsoft Cloud Advocates가 개발한 12주 과정이며, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다. 이 저장소는 초보자를 위한 웹 개발 기초 교육 커리큘럼 저장소입니다. 이 커리큘럼은 Microsoft Cloud Advocates에서 개발한 12주간의 종합 과정으로, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다.
### 주요 구성 요소 ### 주요 구성 요소
- **교육 콘텐츠**: 프로젝트 기반 모듈로 구성된 24개의 체계적인 수업 - **교육 콘텐츠**: 프로젝트 기반 모듈로 구성된 24개의 체계적인 수업
- **실습 프로젝트**: 테라리움, 타이핑 게임, 브라우저 확장 프로그램, 우주 게임, 은행 앱, 코드 에디터, AI 채팅 어시스턴트 - **실습 프로젝트**: 테라리움, 타자 게임, 브라우저 확장, 우주 게임, 뱅킹 앱, 코드 편집기, AI 채팅 도우미
- **인터랙티브 퀴즈**: 수업 전후 평가용 3문항씩 48개의 퀴즈 - **인터랙티브 퀴즈**: 각 3문항씩 48개의 퀴즈 (수업 전/후 평가)
- **다국어 지원**: GitHub Actions를 통한 50개 이상의 언어 자동 번역 - **다국어 지원**: GitHub Actions를 통한 50개 이상의 언어 자동 번역
- **기술 스택**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI 프로젝트용) - **기술 스택**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI 프로젝트용)
### 아키텍처 ### 아키텍처
- 수업 기반 구조의 교육용 저장소 - 수업 기반 구조의 교육 저장소
- 각 수업 폴더는 README, 코드 예제, 솔루션 포함 - 각 수업 폴더에는 README, 코드 예제, 솔루션 포함
- 별도의 디렉터리에 독립 프로젝트(quiz-app 및 다양한 수업 프로젝트) - 독립 프로젝트는 별도 디렉토리 (quiz-app, 다양한 수업 프로젝트)
- GitHub Actions(co-op-translator)를 활용한 번역 시스템 - GitHub Actions(co-op-translator)를 이용한 번역 시스템
- Docsify를 사용한 문서 제공 및 PDF 형식으로 이용 가능 - Docsify를 통해 문서 제공 및 PDF로도 이용 가능
## 설치 명령어 ## 설정 명령어
이 저장소는 주로 교육 콘텐츠 소비용입니다. 특정 프로젝트 작업 시: 이 저장소는 주로 교육 콘텐츠 소비용입니다. 특정 프로젝트 작업 시:
### 메인 저장소 설치 ### 메인 저장소 설정
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### 퀴즈 앱 설치 (Vue 3 + Vite) ### 퀴즈 앱 설정 (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # 개발 서버 시작 npm run dev # 개발 서버 시작
npm run build # 프로덕션용 빌드 npm run build # 프로덕션 빌드
npm run lint # ESLint 실행 npm run lint # ESLint 실행
``` ```
### 은행 프로젝트 API (Node.js + Express) ### 뱅크 프로젝트 API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # API 서버 시작 npm start # API 서버 시작
npm run lint # ESLint 실행 npm run lint # ESLint 실행
npm run format # Prettier로 포맷하기 npm run format # Prettier로 포맷팅
``` ```
### 브라우저 확장 프로그램 프로젝트 ### 브라우저 확장 프로젝트
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
@ -80,29 +80,29 @@ python api.py
### 콘텐츠 기여자용 ### 콘텐츠 기여자용
1. 저장소를 GitHub 계정으로 <strong>포크</strong>합니다. 1. GitHub 계정에 저장소를 <strong>포크</strong>합니다
2. 포크한 저장소를 로컬에 <strong>클론</strong>합니다. 2. 포크한 저장소를 로컬에 <strong>클론</strong>합니다
3. 변경사항을 위한 <strong>새로운 브랜치</strong>를 만듭니다. 3. 변경사항을 위한 <strong>새 브랜치</strong>를 만듭니다
4. 수업 콘텐츠나 코드 예제를 수정합니다. 4. 수업 콘텐츠 또는 코드 예제를 수정합니다
5. 관련 프로젝트 디렉터리에서 코드 변경 사항을 테스트합니다. 5. 관련 프로젝트 디렉토리에서 코드 변경사항을 테스트합니다
6. 기여 가이드라인에 따라 풀 리퀘스트를 제출합니다. 6. 기여 가이드라인에 따라 풀 리퀘스트를 제출합니다
### 학습자용 ### 학습자용
1. 저장소를 포크하거나 클론합니다. 1. 저장소를 포크하거나 클론합니다
2. 수업 디렉터리를 순차적으로 탐색합니다. 2. 수업 디렉토리를 순차적으로 탐색합니다
3. 각 수업 README 파일을 읽습니다. 3. 각 수업의 README 파일을 읽습니다
4. https://ff-quizzes.netlify.app/web/ 에서 수업 전 퀴즈를 풉니다. 4. https://ff-quizzes.netlify.app/web/ 에서 수업 전 퀴즈를 완료합니다
5. 수업 폴더 내의 코드 예제를 진행합니다. 5. 수업 폴더 내 코드 예제를 따라 작업합니다
6. 과제와 챌린지를 완료합니다. 6. 과제와 도전 과제를 완료합니다
7. 수업 후 퀴즈를 풉니다. 7. 수업 후 퀴즈를 응시합니다
### 실시간 개발 ### 실시간 개발
- <strong>문서</strong>: 루트에서 `docsify serve` 명령 실행 (포트 3000) - <strong>문서</strong>: 루트에서 `docsify serve` 실행 (포트 3000)
- **퀴즈 앱**: 퀴즈 앱 디렉터리에서 `npm run dev` 실행 - **퀴즈 앱**: quiz-app 디렉토리에서 `npm run dev` 실행
- <strong>프로젝트들</strong>: HTML 프로젝트는 VS Code Live Server 확장 사용 - <strong>프로젝트</strong>: HTML 프로젝트는 VS Code Live Server 확장 사용
- **API 프로젝트**: 해당 API 디렉터리에서 `npm start` 실행 - **API 프로젝트**: 각 API 디렉토리에서 `npm start` 실행
## 테스트 지침 ## 테스트 지침
@ -114,78 +114,78 @@ npm run lint # 코드 스타일 문제 확인
npm run build # 빌드 성공 여부 확인 npm run build # 빌드 성공 여부 확인
``` ```
### 은행 API 테스트 ### 뱅크 API 테스트
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # 코드 스타일 문제를 확인합니다 npm run lint # 코드 스타일 문제를 확인하세요
node server.js # 서버가 오류 없이 시작되는지 확인합니다 node server.js # 서버가 오류 없이 시작하는지 확인하세요
``` ```
### 일반 테스트 방식 ### 일반 테스트 방법
- 이 저장소는 포괄적인 자동화 테스트 없이 교육용임 - 이 저장소는 종합 자동화 테스트가 없습니다
- 수동 테스트는 다음에 집중: - 수동 테스트는 다음을 중점으로 합니다:
- 코드 예제가 오류 없이 실행되는지 - 코드 예제가 오류 없이 실행되는지
- 문서 내 링크가 정상 작동하는지 - 문서 내 링크 작동 여부
- 프로젝트 빌드가 성공하는지 - 프로젝트 빌드가 성공적으로 완료되는지
- 예제가 최선의 관행을 따르는지 - 예제가 모범 사례를 준수하는지
### 제출 전 점검 ### 제출 전 확인사항
- package.json이 있는 디렉터리에서 `npm run lint` 실행 - package.json이 있는 디렉토리에서 `npm run lint` 실행
- 마크다운 링크의 유효성 확인 - 마크다운 링크가 유효한지 확인
- 브라우저 또는 Node.js에서 코드 예제 테스트 - 브라우저 또는 Node.js에서 코드 예제 테스트
- 번역본의 구조가 올바르게 유지되는지 확인 - 번역본이 올바른 구조를 유지하는지 확인
## 코드 스타일 가이드라인 ## 코드 스타일 가이드라인
### JavaScript ### JavaScript
- 최신 ES6+ 구문 사용 - 최신 ES6+ 문법 사용
- 프로젝트별 표준 ESLint 설정 준수 - 프로젝트 내 표준 ESLint 설정 준수
- 교육 목적에 맞는 의미 있는 변수 및 함수명 사용 - 교육 목적상 의미 있는 변수 및 함수명 사용
- 학습자를 위한 개념 설명용 주석 추가 - 학습자를 위한 개념 설명 주석 포함
- Prettier가 설정된 곳에서는 코드 포맷팅 적용 - Prettier로 포매팅(설정된 경우)
### HTML/CSS ### HTML/CSS
- 시맨틱 HTML5 요소 사용 - 의미론적 HTML5 요소 사용
- 반응형 디자인 원칙 준수 - 반응형 디자인 원칙 적용
- 명확한 클래스 명명 규칙 사용 - 명확한 클래스 네이밍 규칙
- 학습자를 위한 CSS 기법 설명 주석 포함 - 학습자 대상 CSS 기법 설명 주석 포함
### Python ### Python
- PEP 8 스타일 가이드 준수 - PEP 8 스타일 가이드 준수
- 명확하고 교육적인 코드 예제 제공 - 명확하고 교육적인 코드 예제 작성
- 학습에 도움이 되는 곳에 타입 힌트 사용 - 학습에 도움이 되는 경우 타입 힌트 사용
### 마크다운 문서 ### 마크다운 문서
- 명확한 제목 계층 구조 - 명확한 헤딩 계층 구조
- 언어 명시가 있는 코드 블록 - 언어 명시된 코드 블록
- 추가 자료 링크 포함 - 추가 리소스 링크 포함
- `images/` 폴더 내 스크린샷 및 이미지 - `images/` 폴더 내 스크린샷 및 이미지 포함
- 접근성 향상을 위한 이미지 대체 텍스트 - 접근성을 위한 이미지 대체 텍스트 제공
### 파일 구성 ### 파일 구성
- 수업은 순차적으로 번호 부여 (예: 1-getting-started-lessons, 2-js-basics 등) - 수업은 순차 번호 부여 (1-getting-started-lessons, 2-js-basics 등)
- 각 프로젝트는 `solution/`, 종종 `start/` 또는 `your-work/` 디렉터리 포함 - 각 프로젝트는 `solution/` 및 보통 `start/` 또는 `your-work/` 폴더 포함
- 수업별 `images/` 폴더에 이미지 저장 - 이미지들은 수업별 `images/` 폴더에 저장
- 번역본은 `translations/{language-code}/` 구조로 분류 - 번역은 `translations/{language-code}/` 구조로 관리
## 빌드 및 배포 ## 빌드 및 배포
### 퀴즈 앱 배포 (Azure Static Web Apps) ### 퀴즈 앱 배포 (Azure Static Web Apps)
퀴즈 앱은 Azure Static Web Apps용으로 구성되어 있습니다: quiz-app은 Azure Static Web Apps 배포 구성되어 있습니다:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # dist/ 폴더를 생성합니다 npm run build # dist/ 폴더를 생성합니다
# main 브랜치에 푸시될 때 GitHub Actions 워크플로를 통해 배포합니다 # main 브랜치에 푸시 시 GitHub Actions 워크플로를 통해 배포합니다
``` ```
Azure Static Web Apps 구성: Azure Static Web Apps 구성:
@ -203,59 +203,59 @@ npm run convert # docs에서 PDF 생성
### Docsify 문서 ### Docsify 문서
```bash ```bash
npm install -g docsify-cli # Docsify를 전역에 설치합니다 npm install -g docsify-cli # Docsify를 전역으로 설치합니다
docsify serve # localhost:3000에서 서비스합니다 docsify serve # localhost:3000에서 제공됩니다
``` ```
### 프로젝트별 빌드 ### 프로젝트별 빌드
각 프로젝트 디렉터리에 고유 빌드 프로세스가 있을 수 있음: 각 프로젝트 디렉터리는 자체 빌드 프로세스를 가질 수 있습니다:
- Vue 프로젝트: `npm run build`로 프로덕션 번들 생성 - Vue 프로젝트: `npm run build`로 프로덕션 번들 생성
- 정적 프로젝트: 빌드 단계 없이 파일 직접 제공 - 정적 프로젝트: 빌드 단계 없이 파일을 직접 서빙
## 풀 리퀘스트 가이드라인 ## 풀 리퀘스트 가이드라인
### 제목 형식 ### 제목 형식
변경 영역을 명확히 나타내는 설명적인 제목 사용: 변경 내용을 명확히 드러내는 제목 사용:
- `[Quiz-app] 수업 X용 신규 퀴즈 추가` - `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] 테라리움 프로젝트 오타 수정` - `[Lesson-3] Fix typo in terrarium project`
- `[Translation] 수업 5 스페인어 번역 추가` - `[Translation] Add Spanish translation for lesson 5`
- `[Docs] 설치 지침 업데이트` - `[Docs] Update setup instructions`
### 필수 점검 사항 ### 필수 체크 사항
PR 제출 전: PR 제출 전:
1. **코드 품질**: 1. **코드 품질**:
- 영향 받은 프로젝트 디렉터리에서 `npm run lint` 실행 - 영향받은 프로젝트 디렉토리에서 `npm run lint` 실행
- 모든 린트 오류 및 경고 수정 - 모든 린트 오류 및 경고 수정
2. **빌드 검증**: 2. **빌드 검증**:
- 적용 가능한 경우 `npm run build` 실행 - 해당 시 `npm run build` 실행
- 빌드 오류 없음 확인 - 빌드 에러 없음 확인
3. **링크 검증**: 3. **링크 검증**:
- 모든 마크다운 링크 테스트 - 모든 마크다운 링크 테스트
- 이미지 참조 작동 확인 - 이미지 참조 확인
4. **내용 검토**: 4. **콘텐츠 리뷰**:
- 맞춤법 및 문법 교정 - 맞춤법 및 문법 검토
- 코드 예제가 올바르고 교육적임 확인 - 코드 예제가 정확하고 교육적임 확인
- 번역본 원 의미 유지 점검 - 번역이 원문 의미를 유지하는지 검증
### 기여 요구사항 ### 기여 요건
- Microsoft CLA 동의 (첫 PR 시 자동 검사) - Microsoft CLA 동의 (첫 PR 제출 시 자동 확인)
- [Microsoft 오픈 소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수 - [Microsoft 오픈소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수
- 자세한 가이드는 [CONTRIBUTING.md](./CONTRIBUTING.md) 참조 - 자세한 가이드는 [CONTRIBUTING.md](./CONTRIBUTING.md)를 참조
- 관련 이슈 번호 PR 설명에 명시 - 이슈 번호 PR 설명에 명시(해당 시)
### 리뷰 절차 ### 리뷰 프로세스
- 유지 관리자 및 커뮤니티가 PR 검토 - PR은 유지보수자 및 커뮤니티에서 리뷰
- 교육적 명료성 우선 - 교육적 명확성 우선
- 코드 예제는 현행 최선의 관행 준수 - 코드 예제는 최신 모범 사례를 따름
- 번역은 정확성과 문화적 적합성 검토 - 번역은 정확성과 문화적 적합성 검토
## 번역 시스템 ## 번역 시스템
@ -263,20 +263,20 @@ PR 제출 전:
### 자동 번역 ### 자동 번역
- GitHub Actions의 co-op-translator 워크플로우 사용 - GitHub Actions의 co-op-translator 워크플로우 사용
- 50개 이상의 언어로 자동 번역 - 50개 이상 언어로 자동 번역
- 소스 파일은 메인 디렉터리에 위치 - 원본 파일은 메인 디렉터리에 위치
- 번역 파일은 `translations/{language-code}/` 에 저장 - 번역 파일은 `translations/{language-code}/`에 위치
### 수동 번역 개선 추가 ### 수동 번역 개선 추가
1. `translations/{language-code}/` 내 파일 위치 파악 1. `translations/{language-code}/`에서 파일 위치 찾기
2. 구조를 유지하며 개선 작업 수행 2. 구조를 유지하며 개선 작업 수행
3. 코드 예제가 정상적으로 작동하는지 확인 3. 코드 예제가 정상 작동하는지 확인
4. 현지화된 퀴즈 콘텐츠 테스트 4. 현지화된 퀴즈 콘텐츠 테스트
### 번역 메타데이터 ### 번역 메타데이터
번역된 파일에는 메타데이터 헤더 포함: 번역 파일에 메타데이터 헤더 포함:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA:
## 디버깅 및 문제 해결 ## 디버깅 및 문제 해결
### 흔한 문제 ### 일반 문제
**퀴즈 앱 실행 실패**: **퀴즈 앱이 시작되지 않을 때**:
- Node.js 버전 확인 (권장 v14 이상) - Node.js 버전 확인 (v14 이상 권장)
- `node_modules`와 `package-lock.json` 삭제 후 `npm install` 재실행 - `node_modules`와 `package-lock.json` 삭제 후 `npm install` 재실행
- 포트 충돌 확인 (기본: Vite 5173 포트 사용) - 포트 충돌 여부 확인 (기본 Vite 포트 5173)
**API 서버 시작 실패**: **API 서버가 시작되지 않을 때**:
- Node.js 최소 버전(node >=10) 확인 - Node.js 최소 버전(node >=10) 충족 확인
- 포트 사용 중 여부 확인 - 포트가 이미 사용 중인지 확인
- 모든 의존성 `npm install`로 설치 완료 확인 - `npm install`로 모든 의존성 설치 완료 여부 확인
**브라우저 확장 프로그램 로딩 실패**: **브라우저 확장 기능이 로드되지 않을 때**:
- manifest.json 형식 올바른지 검사 - manifest.json 형식 정상 여부 확인
- 브라우저 콘솔 에러 확인 - 브라우저 콘솔 오류 확인
- 브라우저별 확장 프로그램 설치 지침 준수 - 브라우저별 확장 기능 설치 지침 따르기
**Python 채팅 프로젝트 문제**: **Python 채팅 프로젝트 문제**:
- OpenAI 패키지 설치 여부 확인: `pip install openai` - OpenAI 패키지 설치: `pip install openai`
- GITHUB_TOKEN 환경 변수 설정 확인 - GITHUB_TOKEN 환경 변수 설정 확인
- GitHub Models 접근 권한 점검 - GitHub Models 접근 권한 확인
**Docsify 문서 제공 안 됨**: **Docsify가 문서를 서빙하지 않을 때**:
- docsify-cli 글로벌 설치: `npm install -g docsify-cli` - docsify-cli 전역 설치: `npm install -g docsify-cli`
- 저장소 루트에서 실행 - 저장소 루트에서 실행
- `docs/_sidebar.md` 존재 여부 확인 - `docs/_sidebar.md` 파일 존재 여부 확인
### 개발 환경 팁 ### 개발 환경 팁
- HTML 프로젝트는 VS Code Live Server 확장 사용 권장 - HTML 프로젝트는 VS Code Live Server 확장 사용
- ESLint 및 Prettier 확장 설치하여 꾸준한 코드 포맷 유지 - 일관된 포매팅을 위한 ESLint, Prettier 확장 설치
- 브라우저 개발자 도구를 통한 JavaScript 디버깅 - JavaScript 디버깅을 위해 브라우저 개발자 도구 사용
- Vue 프로젝트는 Vue DevTools 브라우저 확장 설치 - Vue 프로젝트는 Vue DevTools 브라우저 확장 설치
### 성능 고려 사항 ### 성능 고려사항
- 50개 이상의 언어 번역 파일 다수로 인해 전체 클론 시 용량 큼 - 번역 파일이 50개 이상 있어 전체 클론 시 용량 큼
- 콘텐츠 작업 시에는 `git clone --depth 1`를 사용한 얕은 클론 권장 - 콘텐츠 작업 시 얕은 클론 사용 권장: `git clone --depth 1`
- 영어 콘텐츠 작업 시 번역 파일 검색 제외 권장 - 영어 콘텐츠 작업 시 번역 제외 검색
- 빌드 프로세스는 초기 실행 시 (npm 설치, Vite 빌드) 다소 느릴 수 있음 - 첫 빌드 실행 시 (npm install, Vite 빌드) 지연 가능
## 보안 고려사항 ## 보안 고려사항
### 환경 변수 ### 환경 변수
- API 키는 절대 저장소에 커밋하지 말 것 - API 키는 절대 저장소에 커밋하지 말 것
- `.env` 파일 사용 (이미 `.gitignore`에 포함) - `.env` 파일 사용(이미 `.gitignore`에 포함)
- 프로젝트 README에 필요한 환경 변수 문서화 - 각 프로젝트 README에 필수 환경 변수 문서화
### Python 프로젝트 ### Python 프로젝트
- 가상 환경 사용 권장: `python -m venv venv` - 가상 환경 사용: `python -m venv venv`
- 의존성 최신 상태 유지 - 의존성은 최신 상태 유지
- GitHub 토큰의 최소 권한 부여 - GitHub 토큰은 최소 권한 설정
### GitHub Models 접근 ### GitHub Models 접근
- GitHub Models 사용 위해 개인 접근 토큰(PAT) 필수 - 개인 접근 토큰(PAT)이 필요
- 토큰은 환경 변수로 저장 - 토큰은 환경 변수로 관리
- 토큰 및 인증 정보 절대 커밋 금지 - 토큰이나 자격 증명 절대 커밋 금지
## 추가 참고사항 ## 추가 참고사항
### 대상 사용자 ### 대상
- 웹 개발 완전 초보자 - 웹 개발 완전 초보자
- 학생 및 독학자 - 학생 및 독학 학습자
- 교실에서 커리큘럼 활용하는 교사 - 교실에서 커리큘럼 사용하는 교사
- 접근성 및 점진적 실력 향상에 맞게 설계된 콘텐츠 - 접근성과 단계적 기술 향상을 목표로 한 콘텐츠
### 교육 철학 ### 교육 철학
- 프로젝트 기반 학습 방식 - 프로젝트 기반 학습 방식
- 빈번한 지식 점검(퀴즈) - 잦은 지식 확인(퀴즈)
- 실습 위주의 코딩 연습 - 실습 코딩 연습
- 실세계 적용 사례 제공 - 실생활 적용 사례
- 프레임워크보다 기초에 집중 - 프레임워크보다 기초에 집중
### 저장소 유지 관리 ### 저장소 유지 관리
- 활발한 학습자 및 기여자 커뮤니티 - 활동적인 학습자 및 기여자 커뮤니티
- 의존성 및 콘텐츠 지속적 업데이트 - 의존성과 콘텐츠의 정기적 업데이트
- 유지 관리자 모니터링 하 이슈 및 토론 관리 - 이슈 및 토론을 유지보수자가 모니터링
- GitHub Actions로 번역 자동화 - GitHub Actions를 통해 번역 자동 업데이트
### 관련 리소스 ### 관련 자료
- [Microsoft Learn 모듈](https://docs.microsoft.com/learn/) - [Microsoft Learn 모듈](https://docs.microsoft.com/learn/)
- [학생 허브 리소스](https://docs.microsoft.com/learn/student-hub/) - [학생 허브 리소스](https://docs.microsoft.com/learn/student-hub/)
- 학습자에게 권장되는 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - 학습자에게 권장하는 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 생성형 AI, 데이터 사이언스, ML, IoT 커리큘럼 등의 추가 과정 제공 - 추가 과정: 생성형 AI, 데이터 과학, ML, IoT 커리큘럼 제공
### 특정 프로젝트 작업 ### 개별 프로젝트 작업
개별 프로젝트 지침은 각 프로젝트 README 참고: 개별 프로젝트의 자세한 지침은 README 파일 참조:
- `quiz-app/README.md` - Vue 3 퀴즈 애플리케이션 - `quiz-app/README.md` - Vue 3 퀴즈 애플리케이션
- `7-bank-project/README.md` - 인증 포함 은행 애플리케이션 - `7-bank-project/README.md` - 인증 기능 있는 뱅킹 앱
- `5-browser-extension/README.md` - 브라우저 확장 개발 - `5-browser-extension/README.md` - 브라우저 확장 개발
- `6-space-game/README.md` - 캔버스 기반 게임 개발 - `6-space-game/README.md` - 캔버스 기반 게임 개발
- `9-chat-project/README.md` - AI 채팅 어시스턴트 프로젝트 - `9-chat-project/README.md` - AI 채팅 도우미 프로젝트
### 모노레포 구조 ### 모노레포 구조
전통적인 모노레포는 아니지만, 이 저장소는 여러 독립 프로젝트로 구성됨: 전통적인 모노레포는 아니지만 독립 프로젝트 다수 포함:
- 각 수업은 독립적 - 각 수업은 독립적
- 프로젝트 간 의존성 공유 없음 - 프로젝트 간 의존성 공유 없음
- 개별 프로젝트 작업 시 다른 프로젝트에 영향 없음 - 개별 프로젝트 작업 시 다른 프로젝트에 영향 없음
- 전체 커리큘럼 경험을 위해 전체 저장소 클론 권장 - 전체 커리큘럼 경험을 위해 전체 저장소 클론 가능
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있지만, 자동 번역에는 오류나 부정확한 내용이 포함될 수 있음을 유의하시기 바랍니다. 원본 문서는 해당 언어의 권위 있는 자료로 간주되어야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 책임을 지지 않습니다.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

195
translations/ko/README.md
Unescape View File

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 초보자를 위한 웹 개발 - 교육과정 # 초보자를 위한 웹 개발 - 커리큘럼
Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배우세요. 총 24개의 수업에서 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 탐구합니다. 퀴즈, 토론, 실습 과제에도 참여하세요. 효과적인 프로젝트 기반 교육법으로 실력을 향상시키고 지식 유지력을 최적화하세요. 오늘부터 코딩 여정을 시작하세요! Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS 및 HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제를 통해 참여하고 학습하세요. 효과적인 프로젝트 기반 교육법으로 기술을 향상시키고 지식 습득을 최적화하세요. 지금 코딩 여정을 시작하세요!
Azure AI Foundry Discord 커뮤니티에 참여하세요 Azure AI Foundry Discord 커뮤니티에 참여하세요
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
이 리소스를 사용하기 시작하려면 다음 단계를 따르세요: 이 리소스를 사용해 시작하려면 다음 단계를 따르세요:
1. **저장소 포크하기**: 클릭 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **저장소 포크하기**: 클릭 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord에 참여하여 전문가 및 동료 개발자를 만나세요**](https://discord.com/invite/ByRwuEEgH4) 3. [**Azure AI Foundry Discord에 가입하여 전문가 및 동료 개발자 만나기**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 다국어 지원 ### 🌐 다국어 지원
#### GitHub Action을 통한 지원 (자동화 및 항상 최신 상태 유지) #### GitHub Action을 통해 지원 (자동 및 항상 최신 상태 유지)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[아랍어](../ar/README.md) | [벵골어](../bn/README.md) | [불가리아어](../bg/README.md) | [버마어 (미얀마)](../my/README.md) | [중국어 (간체)](../zh-CN/README.md) | [중국어 (번체, 홍콩)](../zh-HK/README.md) | [중국어 (번체, 마카오)](../zh-MO/README.md) | [중국어 (번체, 대만)](../zh-TW/README.md) | [크로아티아어](../hr/README.md) | [체코어](../cs/README.md) | [덴마크어](../da/README.md) | [네덜란드어](../nl/README.md) | [에스토니아어](../et/README.md) | [핀란드어](../fi/README.md) | [프랑스어](../fr/README.md) | [독일어](../de/README.md) | [그리스어](../el/README.md) | [히브리어](../he/README.md) | [힌디어](../hi/README.md) | [헝가리어](../hu/README.md) | [인도네시아어](../id/README.md) | [이탈리아어](../it/README.md) | [일본어](../ja/README.md) | [칸나다어](../kn/README.md) | [한국어](./README.md) | [리투아니아어](../lt/README.md) | [말레이어](../ms/README.md) | [말라얄람어](../ml/README.md) | [마라티어](../mr/README.md) | [네팔어](../ne/README.md) | [나이지리아 피진어](../pcm/README.md) | [노르웨이어](../no/README.md) | [페르시아어 (파르시)](../fa/README.md) | [폴란드어](../pl/README.md) | [포르투갈어 (브라질)](../pt-BR/README.md) | [포르투갈어 (포르투갈)](../pt-PT/README.md) | [펀자브어 (구르무키)](../pa/README.md) | [루마니아어](../ro/README.md) | [러시아어](../ru/README.md) | [세르비아어 (키릴 문자)](../sr/README.md) | [슬로바키아어](../sk/README.md) | [슬로베니아어](../sl/README.md) | [스페인어](../es/README.md) | [스와힐리어](../sw/README.md) | [스웨덴어](../sv/README.md) | [타갈로그어 (필리피노)](../tl/README.md) | [타밀어](../ta/README.md) | [텔루구어](../te/README.md) | [태국어](../th/README.md) | [터키어](../tr/README.md) | [우크라이나어](../uk/README.md) | [우르두어](../ur/README.md) | [베트남어](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](./README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **로컬 클론을 선호하시나요?** > **로컬에서 클론하는 것을 선호하시나요?**
> >
> 본 저장소에는 50개 이상의 언어 번역이 포함되어 있어 다운로드 크기가 상당히 증가합니다. 번역 없이 클론하려면 스파스 체크아웃(sparse checkout)을 사용하세요: > 이 저장소는 50개 이상의 언어 번역본을 포함하고 있어서 다운로드 크기가 상당히 큽니다. 번역 없이 클론하려면 sparse checkout을 사용하세요:
> >
> **Bash / macOS / Linux:** > **Bash / macOS / Linux:**
> ```bash > ```bash
@ -48,166 +48,165 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ``` > ```
> >
> 이 방법으로 코스를 완료하는 데 필요한 모든 것을 훨씬 빠르게 다운로드할 수 있습니다. > 이렇게 하면 더 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것을 얻을 수 있습니다.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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)에서 확인하세요**
[![Visual Studio Code에서 열기](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 Assistant 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 [project](./9-chat-project/README.md) 새 AI 어시스턴트 프로젝트가 추가되었습니다. 확인해보세요 [프로젝트](./9-chat-project/README.md)
### 📣 공지 - _JavaScript를 위한 생성 AI 새 교육과정_ 출시 ### 📣 공지 - _JavaScript 생성 AI에 관한 새 커리큘럼_ 출시
새로운 생성 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)를 방문하세요!
![Background](../../translated_images/ko/background.148a8d43afde5730.webp) ![Background](../../translated_images/ko/background.148a8d43afde5730.webp)
- 기본부터 RAG까지 모두 다루는 수업. - 기초부터 RAG까지 모든 내용을 다루는 레슨
- GenAI 및 동반 앱을 이용해 역사적 인물들과 상호작용 가능. - GenAI와 동반 앱을 사용해 역사적 인물과 상호작용
- 재미있고 몰입감 있는 내러티브로 시간 여행 중! - 재미있고 흥미진진한 내러티브, 시간 여행도 하게 됩니다!
![character](../../translated_images/ko/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/ko/character.5c0dd8e067ffd693.webp)
각 수업에는 완료해야 할 과제, 지식 확인, 그리고 다음 주제를 학습하는 데 도움이 되는 챌린지가 포함되어 있습니다: 각 레슨에는 과제, 지식 점검, 그리고 다음과 같은 주제 학습을 안내하는 챌린지가 포함되어 있습니다:
- 프롬프트 작성 및 프롬프트 엔지니어링 - 프롬프트 작성 및 프롬프트 엔지니어링
- 텍스트 및 이미지 앱 생성 - 텍스트 및 이미지 앱 생성
- 검색 앱 - 검색 앱
시작하려면 [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)에서 여러분의 의견을 들려주세요! > <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. **저장소 포크하기**: 페이지 우측 상단의 "Fork" 버튼을 클릭하세요. 1. **저장소 포크하기**: 이 페이지 우측 상단의 "Fork" 버튼을 클릭하세요.
2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace에서 교육과정 실행하기 #### Codespace에서 커리큘럼 실행하기
생성한 저장소 복사본에서 **Code** 버튼을 클릭하고 **Open with Codespaces**를 선택하세요. 새 Codespace가 생성됩니다. 생성한 저장소 복사본에서 **Code** 버튼을 클릭한 후 <strong>Open with Codespaces</strong>를 선택하세요. 그러면 작업할 새로운 Codespace가 생성됩니다.
![Codespace](../../translated_images/ko/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/ko/createcodespace.0238bbf4d7a8d955.webp)
#### 컴퓨터에서 로컬로 교육과정 실행하기 #### 로컬 컴퓨터에서 커리큘럼 실행하기
컴퓨터에서 이 교육과정을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 수업인 [프로그래밍 언어 및 도구 소개](../../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) 다운로드할 수 있습니다. 추천 텍스트 편집기는 [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을 복사하여 할 수 있습니다: 1. 컴퓨터에 저장소를 복제하세요. **Code** 버튼을 클릭하고 URL을 복사하여 할 수 있습니다:
[CodeSpace](./images/createcodespace.png) [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>` 대신 사용하여 다음 명령어를 실행하세요:
```bash ```bash
git clone <your-repository-url> 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 페이지 미리보기용 > * [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/) - [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/)
> **퀴즈에 대한 안내**: 모든 퀴즈는 Quiz-app 폴더에 있으며, 총 48개의 퀴즈, 각 퀴즈는 3문제로 구성되어 있습니다. 퀴즈는 [여기](https://ff-quizzes.netlify.app/web/)에서 볼 수 있으며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요. > **퀴즈에 대한 참고:** 모든 퀴즈는 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 | | 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 | | 02 | 시작하기 | GitHub 기초, 팀과 협업하기 | 프로젝트에서 GitHub 사용법과 코드 기반에서 다른 사람과 협업하는 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 시작하기 | 접근성 | 웹 접근성 기본 학습 | [접근성 기초](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | 시작하기 | 접근성 | 웹 접근성의 기본을 배우기 | [접근성 기초](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 기본 | JavaScript 데이터 유형 | JavaScript 데이터 유형의 기본 | [데이터 유형](./2-js-basics/1-data-types/README.md) | Jasmine | | 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 | | 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 | | 06 | JS 기초 | JS로 의사결정 만들기 | 조건문을 만들어 코드에서 의사결정을 구현하는 방법 배우기 | [의사결정 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 다루기 | [배열과 반복문](./2-js-basics/4-arrays-loops/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 | | 08 | [테라리움](./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 | | 09 | [테라리움](./3-terrarium/solution/README.md) | 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 | | 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) | 타이핑 게임 만들기 | 키보드 이벤트를 사용해 JavaScript 앱 로직 제어하는 법 학습 | [이벤트 주도 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [타자 게임](./4-typing-game/solution/README.md) | 타자 게임 만들기 | 키보드 이벤트를 사용하여 자바스크립트 앱의 논리를 구동하는 방법 | [이벤트 기반 프로그래밍](./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 | | 12 | [그린 브라우저 확장](./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 | | 13 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | API 호출, 폼 만들기, 로컬 스토리지에 변수 저장 | 브라우저 확장의 자바스크립트 요소를 구축해 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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` 명령을 입력하면 됩니다. 웹사이트는 localhost의 3000 포트(`localhost:3000`)에서 서비스됩니다.
## 📘 PDF ## 📘 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)에서 확인할 수 있습니다.
@ -215,7 +214,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
## 🎒 다른 강의 ## 🎒 다른 강의
우리 팀은 다른 강의도 제공합니다! 확인해 보세요: 저희 팀은 다른 강의도 제작합니다! 확인해 보세요:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -251,7 +250,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
--- ---
### Copilot 시리즈 ### 코파일럿 시리즈
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
@ -259,11 +258,11 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요
## 도움받기 ## 도움받기
AI 앱 개발 중에 막히거나 질문이 있으면 MCP 관련 토론에 참여하세요. 질문을 환영하고 지식을 자유롭게 공유하는 지원 커뮤니티입니다. AI 앱 개발 중 막히거나 질문이 있으면 MCP에 관한 토론에 참여하세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원 커뮤니티입니다.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
제품 피드백이나 오류가 있으면 다음을 방문하세요: 제품 피드백이나 빌드 중 오류가 있으면 다음을 방문하세요:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -275,5 +274,5 @@ AI 앱 개발 중에 막히거나 질문이 있으면 MCP 관련 토론에 참
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의하시기 바랍니다. 원본 문서의 원어 버전이 가장 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 발생하는 오해나 오해석에 대해 당사는 책임을 지지 않습니다.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save