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

pull/1774/head
localizeflow[bot] 6 months ago
parent 2b12341c09
commit 736718c09f

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T14:49:03+00:00", "translation_date": "2026-03-27T19:09:13+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "hi" "language_code": "hi"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:52:45+00:00", "translation_date": "2026-03-27T19:12:37+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "hi" "language_code": "hi"
}, },

@ -1,28 +1,28 @@
# AGENTS.md # AGENTS.md
## प्रोजेक्ट अवलोकन ## परियोजना अवलोकन
यह शुरुआती लोगों को वेब विकास के मूल सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित 12 सप्ताह का एक व्यापक कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन लेसन शामिल हैं। यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार (रिपॉजिटरी) है। यह पाठ्यक्रम माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करते हुए 24 व्यावहारिक पाठ शामिल हैं।
### मुख्य घटक ### मुख्य घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित लेसन - **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **व्यावहारिक परियोजनाएं**: टेरारियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और AI चैट सहायक - **व्यावहारिक परियोजनाएं**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट
- **इंटरैक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (प्री/पोस्ट-लेसन मूल्यांकन) - **इंटरैक्टिव क्विज़**: प्रत्येक में 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 के रूप में भी उपलब्ध
## सेटअप कमांड्स ## सेटअप कमांड
यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री की खपत के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए: यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री के उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
### मुख्य रिपॉजिटरी सेटअप ### मुख्य रिपॉजिटरी सेटअप
@ -36,19 +36,19 @@ cd Web-Dev-For-Beginners
```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 # एपीआई सर्वर शुरू करें npm start # एपीआई सर्वर शुरू करें
npm run lint # ESLint चलाएँ npm run lint # ESLint चलाएं
npm run format # Prettier के साथ फ़ॉर्मेट करें npm run format # Prettier के साथ फॉर्मेट करें
``` ```
### ब्राउज़र एक्सटेंशन परियोजनाएं ### ब्राउज़र एक्सटेंशन परियोजनाएं
@ -64,10 +64,10 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# ब्राउज़र में index.html खोलें या Live Server का उपयोग करें # ब्राउज़र में index.html खोलें या लाइव सर्वर का उपयोग करें
``` ```
### चैट प्रोजेक्ट (Python Backend) ### चैट परियोजना (Python बैकएंड)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -80,22 +80,22 @@ 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. पोस्ट-पाठ क्विज़ लें
### लाइव विकास ### लाइव विकास
@ -110,173 +110,173 @@ 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)
quizz-app 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 कॉन्फ़िगरेशन:
- **एप स्थान**: `/quiz-app` - **ऐप स्थान**: `/quiz-app`
- **आउटपुट स्थान**: `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] लेसन 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 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 विवरण में समस्या नंबर का संदर्भ दें यदि लागू हो
### समीक्षा प्रक्रिया ### समीक्षा प्रक्रिया
- PR को रखरखावकर्ताओं और समुदाय द्वारा समीक्षा किया जाता है - PRs रख-रखावकर्ताओं और समुदाय द्वारा समीक्षा की जाती हैं
- शैक्षिक स्पष्टता को प्राथमिकता दी जाती है - शैक्षिक स्पष्टता को प्राथमिकता दी जाती है
- कोड उदाहरण वर्तमान सर्वोत्तम प्रथाओं का पालन करें - कोड उदाहरणों को वर्तमान सर्वोत्तम प्रथाओं का पालन करना चाहिए
- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा की जाती है - अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किए जाते हैं
## अनुवाद प्रणाली ## अनुवाद प्रणाली
### स्वचालित अनुवाद ### स्वचालित अनुवाद
- co-op-translator वर्कफ़्लो के साथ GitHub Actions का उपयोग करता है - 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 एक्सटेंशन स्थापित करें
- जावास्क्रिप्ट डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें - JavaScript डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करें - Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन स्थापित करें
### प्रदर्शन विचार ### प्रदर्शन विचार
- बड़ी संख्या में अनुवादित फाइलें (50+ भाषाएँ) होने से पूर्ण क्लोन बड़े होते हैं - अनुवादित फाइलों की संख्या अधिक (50+ भाषाएँ) होने के कारण पूर्ण क्लोन बड़े होते हैं
- केवल सामग्री पर काम करने पर shallow clone का उपयोग करें: `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 के लिए Personal Access Tokens (PAT) आवश्यक - GitHub Models के लिए व्यक्तिगत एक्सेस टोकन (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 पाठ्यक्रम उपलब्ध - अतिरिक्त पाठ्यक्रम: जनरेटिव 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) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानवीय अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या मिसइंटरप्रिटेशन के लिए हम जिम्मेदार नहीं हैं। यह दस्तावेज़ [Co-op Translator](https://github.com/Azure/co-op-translator) एआई अनुवाद सेवा का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वत: अनुवादों में त्रुटियां या गलतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T14:34:54+00:00", "translation_date": "2026-03-27T19:00:53+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "ja" "language_code": "ja"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:50:22+00:00", "translation_date": "2026-03-27T19:10:31+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "ja" "language_code": "ja"
}, },

@ -2,56 +2,56 @@
## プロジェクト概要 ## プロジェクト概要
これは初心者向けのWeb開発の基礎を教えるための教育カリキュラムリポジトリです。このカリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間コースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンを含みます。 これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムは Microsoft Cloud Advocates によって開発された包括的な12週間のコースで、JavaScript、CSS、HTML を扱う24の実践的なレッスンを特徴としています。
### 主な構成要素 ### 主なコンポーネント
- **教育コンテンツ**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン - <strong>教育コンテンツ</strong>: プロジェクトベースのモジュールに構成された24の体系的なレッスン
- **実践プロジェクト**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント - <strong>実践プロジェクト</strong>: テラリウム、タイピングゲーム、ブラウザー拡張機能、宇宙ゲーム、銀行アプリ、コードエディター、AIチャットアシスタント
- **インタラクティブクイズ**: 各3問の48のクイズ(レッスン前後の評価用) - <strong>インタラクティブクイズ</strong>: 各3問の48のクイズ(レッスン前後の評価)
- **多言語サポート**: GitHub Actionsを使用した50以上の言語への自動翻訳 - <strong>多言語対応</strong>: GitHub Actions による50以上の言語の自動翻訳
- **技術スタック**: 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
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
@ -59,12 +59,12 @@ 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バックエンド)
@ -80,33 +80,33 @@ python api.py
### コンテンツ寄稿者向け ### コンテンツ寄稿者向け
1. リポジトリをGitHubアカウントに**フォーク**する 1. リポジトリを GitHub のアカウントに <strong>フォーク</strong> する
2. フォークをローカルに**クローン**する 2. フォークしたリポジトリをローカルに <strong>クローン</strong> する
3. 変更用に**新しいブランチ**を作成する 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. レッスン後クイズを受ける
### ライブ開発 ### ライブ開発
- **ドキュメント**: ルートディレクトリで `docsify serve` を実行(ポート3000) - <strong>ドキュメント</strong>: ルートで `docsify serve` を実行(ポート3000)
- **クイズアプリ**: quiz-appディレクトリで `npm run dev` を実行 - <strong>クイズアプリ</strong>: quiz-appディレクトリで `npm run dev` を実行
- **プロジェクト**: HTMLプロジェクトにはVS Code Live Server拡張を使用 - <strong>プロジェクト</strong>: VS Code Live Server 拡張機能を使用(HTMLプロジェクト用)
- **APIプロジェクト**: 各APIディレクトリで `npm start` を実行 - **APIプロジェクト**: 各APIディレクトリで `npm start` を実行
## テスト手順 ## テスト手順
### クイズアプリのテスト ### クイズアプリテスト
```bash ```bash
cd quiz-app cd quiz-app
@ -114,84 +114,84 @@ 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/` ディレクトリのスクリーンショット、画像
- アクセシビリティのための画像の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)
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 の設定:
- **App location**: `/quiz-app` - <strong>アプリの場所</strong>: `/quiz-app`
- **Output location**: `dist` - <strong>出力場所</strong>: `dist`
- **Workflow**: `.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] Terrariumプロジェクトのタイプミス修正` - `[Lesson-3] テラリウムプロジェクトのタイプミス修正`
- `[Translation] レッスン5のスペイン語翻訳追加` - `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新` - `[Docs] セットアップ手順更新`
### 必須チェック ### 必須チェック
PR提出前に: PR提出前に実施:
1. **コード品質**: 1. <strong>コード品質</strong>:
- 該当プロジェクトディレクトリで`npm run lint`実行 - 関連プロジェクトで `npm run lint` を実行
- すべての警告・エラーを修正 - 全ての警告・エラーを修正
2. **ビルド検証**: 2. <strong>ビルド確認</strong>:
- 適用可能なら`npm run build`を実行 - 該当する場合 `npm run build` を実行
- ビルドエラーなしを確認 - ビルドエラーなしを確保
3. **リンク検証**: 3. <strong>リンク検証</strong>:
- 全マークダウンリンクをテスト - 全Markdownリンクをテスト
- 画像参照が正しいか確認 - 画像参照の動作確認
4. **内容レビュー**: 4. <strong>内容レビュー</strong>:
- スペルや文法の校正 - スペル・文法の校正
- コード例が正しく教育的であることの確認 - コード例の正確さと教育的妥当性
- 翻訳が原文の意味を維持しているかチェック - 翻訳が原文の意味を維持しているか確認
### コントリビューション要件 ### 貢献条件
- Microsoft CLAに同意(初回PRで自動チェック) - Microsoft CLA に同意(初PR時に自動チェック)
- [Microsoft OSS行動規範](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説明に関連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. ローカライズされたクイズ内容もテスト
### 翻訳メタデータ ### 翻訳メタデータ
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### よくある問題 ### よくある問題
**クイズアプリが起動しない場合**: <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>:
- 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)が必要
- トークンは環境変数として管理 - トークンは環境変数として管理
- トークンや資格情報を絶対にコミットしない - トークンや認証情報は絶対にコミットしない
## 追加ノート ## その他の注意点
### 対象ユーザー ### 対象ユーザー
- Web開発の完全な初心者 - ウェブ開発の完全初心者
- 学生や独学者 - 学生や独学者
- 教室でカリキュラムを使う教師 - 教室でカリキュラムを使う教師
- アクセシビリティと段階的スキル構築を重視したコンテンツ - アクセシビリティに配慮しスキルを段階的に積み上げられる内容
### 教育哲学 ### 教育方針
- プロジェクトベースの学習アプローチ - プロジェクトベースの学習アプローチ
- 頻繁な知識チェック(クイズ) - 頻繁な理解度チェック(クイズ)
- ハンズオンコーディング演習 - 実際に手を動かすコーディング演習
- 実世界の応用例 - 実世界の応用例を示す
- フレームワーク以前の基礎重視 - フレームワークより基礎を重視
### リポジトリ運用 ### リポジトリのメンテナンス
- 活発な学習者とコントリビューターコミュニティ - 学習者や貢献者の活発なコミュニティ
- 依存関係とコンテンツの定期的な更新 - 依存関係とコンテンツの定期的な更新
- イシュー・ディスカッションはメンテナが監視 - メンテナが課題や議論を監視
- 翻訳更新は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、データサイエンス、機械学習、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 -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T14:41:27+00:00", "translation_date": "2026-03-27T19:04:26+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "ko" "language_code": "ko"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:51:32+00:00", "translation_date": "2026-03-27T19:11:26+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "ko" "language_code": "ko"
}, },

@ -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
@ -64,7 +64,7 @@ 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 백엔드)
@ -80,28 +80,28 @@ python api.py
### 콘텐츠 기여자용 ### 콘텐츠 기여자용
1. **저장소를 포크**하여 자신의 GitHub 계정으로 복사 1. 저장소를 GitHub 계정으로 <strong>포크</strong>합니다.
2. **포크한 저장소를 로컬에 클론** 2. 포크한 저장소를 로컬에 <strong>클론</strong>합니다.
3. **변경 사항 작업용 브랜치 생성** 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. 수업 후 퀴즈를 풉니다.
### 실시간 개발 ### 실시간 개발
- **문서**: 루트에서 `docsify serve` 실행 (포트 3000) - <strong>문서</strong>: 루트에서 `docsify serve` 명령 실행 (포트 3000)
- **퀴즈 앱**: quiz-app 디렉터리에서 `npm run dev` 실행 - **퀴즈 앱**: 퀴즈 앱 디렉터리에서 `npm run dev` 실행
- **프로젝트**: HTML 프로젝트는 VS Code Live Server 확장 사용 - <strong>프로젝트들</strong>: HTML 프로젝트는 VS Code Live Server 확장 사용
- **API 프로젝트**: 해당 API 디렉터리에서 `npm start` 실행 - **API 프로젝트**: 해당 API 디렉터리에서 `npm start` 실행
## 테스트 지침 ## 테스트 지침
@ -110,88 +110,88 @@ 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 스타일 가이드 준수
- 명확하고 교육적인 코드 예제 - 명확하고 교육적인 코드 예제 제공
- 학습에 도움이 되는 타입 힌트 추가 - 학습에 도움이 되는 곳에 타입 힌트 사용
### 마크다운 문서화 ### 마크다운 문서
- 명확한 제목 계층 구조 - 명확한 제목 계층 구조
- 언어 지정 코드 블록 - 언어 명시가 있는 코드 블록
- 추가 자료 링크 제공 - 추가 자료 링크 포함
- `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 배포용으로 설정됨: 퀴즈 앱은 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 구성:
- **앱 위치**: `/quiz-app` - **앱 위치**: `/quiz-app`
- **출력 위치**: `dist` - **출력 위치**: `dist`
- **워크플로우**: `.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,24 +203,24 @@ 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] 설치 지침 업데이트`
### 필수 점검 사항 ### 필수 점검 사항
@ -228,55 +228,55 @@ docsify serve # localhost:3000에서 서비스합니다
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 검토
- 교육적 명확성 우선시 - 교육적 명료성 우선
- 코드 예제는 최신 베스트 프랙티스 준수 필요 - 코드 예제는 현행 최선의 관행 준수
- 번역은 정확성과 문화적 적합성 검토 - 번역은 정확성과 문화적 적합성 검토
## 번역 시스템 ## 번역 시스템
### 자동 번역 ### 자동 번역
- co-op-translator 워크플로우가 포함된 GitHub Actions 사용 - 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:
@ -294,115 +294,115 @@ 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 install, Vite 빌드) 속도 느릴 수 있음 - 빌드 프로세스는 초기 실행 시 (npm 설치, 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 접근
- 개인 액세스 토큰(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/) - [학생 허브 리소스](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 -->
Loading…
Cancel
Save