{"owner":"microsoft","repo":"Web-Dev-For-Beginners","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md"],"skills":{"AGENTS.md":"# AGENTS.md\n\n## Project Overview\n\nThis is an educational curriculum repository for teaching web development fundamentals to beginners. The curriculum is a comprehensive 12-week course developed by Microsoft Cloud Advocates, featuring 24 hands-on lessons covering JavaScript, CSS, and HTML.\n\n### Key Components\n\n- **Educational Content**: 24 structured lessons organized into project-based modules\n- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant\n- **Interactive Quizzes**: 48 quizzes with 3 questions each (pre/post-lesson assessments)\n- **Multi-language Support**: Automated translations for 50+ languages via GitHub Actions\n- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI projects)\n\n### Architecture\n\n- Educational repository with lesson-based structure\n- Each lesson folder contains README, code examples, and solutions\n- Standalone projects in separate directories (quiz-app, various lesson projects)\n- Translation system using GitHub Actions (co-op-translator)\n- Documentation served via Docsify and available as PDF\n\n## Setup Commands\n\nThis repository is primarily for educational content consumption. For working with specific projects:\n\n### Main Repository Setup\n\n```bash\ngit clone https://github.com/microsoft/Web-Dev-For-Beginners.git\ncd Web-Dev-For-Beginners\n```\n\n### Quiz App Setup (Vue 3 + Vite)\n\n```bash\ncd quiz-app\nnpm install\nnpm run dev        # Start development server\nnpm run build      # Build for production\nnpm run lint       # Run ESLint\n```\n\n### Bank Project API (Node.js + Express)\n\n```bash\ncd 7-bank-project/api\nnpm install\nnpm start          # Start API server\nnpm run lint       # Run ESLint\nnpm run format     # Format with Prettier\n```\n\n### Browser Extension Projects\n\n```bash\ncd 5-browser-extension/solution\nnpm install\n# Follow browser-specific extension loading instructions\n```\n\n### Space Game Projects\n\n```bash\ncd 6-space-game/solution\nnpm install\n# Open index.html in browser or use Live Server\n```\n\n### Chat Project (Python Backend)\n\n```bash\ncd 9-chat-project/solution/backend/python\npip install openai\n# Set GITHUB_TOKEN environment variable\npython api.py\n```\n\n## Development Workflow\n\n### For Content Contributors\n\n1. **Fork the repository** to your GitHub account\n2. **Clone your fork** locally\n3. **Create a new branch** for your changes\n4. Make changes to lesson content or code examples\n5. Test any code changes in relevant project directories\n6. Submit pull requests following contribution guidelines\n\n### For Learners\n\n1. Fork or clone the repository\n2. Navigate to lesson directories sequentially\n3. Read README files for each lesson\n4. Complete pre-lesson quizzes at https://ff-quizzes.netlify.app/web/\n5. Work through code examples in lesson folders\n6. Complete assignments and challenges\n7. Take post-lesson quizzes\n\n### Live Development\n\n- **Documentation**: Run `docsify serve` in root (port 3000)\n- **Quiz App**: Run `npm run dev` in quiz-app directory\n- **Projects**: Use VS Code Live Server extension for HTML projects\n- **API Projects**: Run `npm start` in respective API directories\n\n## Testing Instructions\n\n### Quiz App Testing\n\n```bash\ncd quiz-app\nnpm run lint       # Check for code style issues\nnpm run build      # Verify build succeeds\n```\n\n### Bank API Testing\n\n```bash\ncd 7-bank-project/api\nnpm run lint       # Check for code style issues\nnode server.js     # Verify server starts without errors\n```\n\n### General Testing Approach\n\n- This is an educational repository without comprehensive automated tests\n- Manual testing focuses on:\n  - Code examples run without errors\n  - Links in documentation work correctly\n  - Project builds complete successfully\n  - Examples follow best practices\n\n### Pre-submission Checks\n\n- Run `npm run lint` in directories with package.json\n- Verify markdown links are valid\n- Test code examples in browser or Node.js\n- Check that translations maintain proper structure\n\n## Code Style Guidelines\n\n### JavaScript\n\n- Use modern ES6+ syntax\n- Follow standard ESLint configurations provided in projects\n- Use meaningful variable and function names for educational clarity\n- Add comments explaining concepts for learners\n- Format using Prettier where configured\n\n### HTML/CSS\n\n- Semantic HTML5 elements\n- Responsive design principles\n- Clear class naming conventions\n- Comments explaining CSS techniques for learners\n\n### Python\n\n- PEP 8 style guidelines\n- Clear, educational code examples\n- Type hints where helpful for learning\n\n### Markdown Documentation\n\n- Clear heading hierarchy\n- Code blocks with language specification\n- Links to additional resources\n- Screenshots and images in `images/` directories\n- Alt text for images for accessibility\n\n### File Organization\n\n- Lessons numbered sequentially (1-getting-started-lessons, 2-js-basics, etc.)\n- Each project has `solution/` and often `start/` or `your-work/` directories\n- Images stored in lesson-specific `images/` folders\n- Translations in `translations/{language-code}/` structure\n\n## Build and Deployment\n\n### Quiz App Deployment (Azure Static Web Apps)\n\nThe quiz-app is configured for Azure Static Web Apps deployment:\n\n```bash\ncd quiz-app\nnpm run build      # Creates dist/ folder\n# Deploys via GitHub Actions workflow on push to main\n```\n\nAzure Static Web Apps configuration:\n- **App location**: `/quiz-app`\n- **Output location**: `dist`\n- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`\n\n### Documentation PDF Generation\n\n```bash\nnpm install                    # Install docsify-to-pdf\nnpm run convert               # Generate PDF from docs\n```\n\n### Docsify Documentation\n\n```bash\nnpm install -g docsify-cli    # Install Docsify globally\ndocsify serve                 # Serve on localhost:3000\n```\n\n### Project-specific Builds\n\nEach project directory may have its own build process:\n- Vue projects: `npm run build` creates production bundles\n- Static projects: No build step, serve files directly\n\n## Pull Request Guidelines\n\n### Title Format\n\nUse clear, descriptive titles indicating the area of change:\n- `[Quiz-app] Add new quiz for lesson X`\n- `[Lesson-3] Fix typo in terrarium project`\n- `[Translation] Add Spanish translation for lesson 5`\n- `[Docs] Update setup instructions`\n\n### Required Checks\n\nBefore submitting a PR:\n\n1. **Code Quality**:\n   - Run `npm run lint` in affected project directories\n   - Fix all linting errors and warnings\n\n2. **Build Verification**:\n   - Run `npm run build` if applicable\n   - Ensure no build errors\n\n3. **Link Validation**:\n   - Test all markdown links\n   - Verify image references work\n\n4. **Content Review**:\n   - Proofread for spelling and grammar\n   - Ensure code examples are correct and educational\n   - Verify translations maintain original meaning\n\n### Contribution Requirements\n\n- Agree to Microsoft CLA (automated check on first PR)\n- Follow the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines\n- Reference issue numbers in PR description if applicable\n\n### Review Process\n\n- PRs reviewed by maintainers and community\n- Educational clarity is prioritized\n- Code examples should follow current best practices\n- Translations reviewed for accuracy and cultural appropriateness\n\n## Translation System\n\n### Automated Translation\n\n- Uses GitHub Actions with co-op-translator workflow\n- Translates to 50+ languages automatically\n- Source files in main directories\n- Translated files in `translations/{language-code}/` directories\n\n### Adding Manual Translation Improvements\n\n1. Locate file in `translations/{language-code}/`\n2. Make improvements while preserving structure\n3. Ensure code examples remain functional\n4. Test any localized quiz content\n\n### Translation Metadata\n\nTranslated files include metadata header:\n```markdown\n<!--\nCO_OP_TRANSLATOR_METADATA:\n{\n  \"original_hash\": \"...\",\n  \"translation_date\": \"...\",\n  \"source_file\": \"...\",\n  \"language_code\": \"...\"\n}\n-->\n```\n\n## Debugging and Troubleshooting\n\n### Common Issues\n\n**Quiz app fails to start**:\n- Check Node.js version (v14+ recommended)\n- Delete `node_modules` and `package-lock.json`, run `npm install` again\n- Check for port conflicts (default: Vite uses port 5173)\n\n**API server won't start**:\n- Verify Node.js version meets minimum (node >=10)\n- Check if port is already in use\n- Ensure all dependencies installed with `npm install`\n\n**Browser extension won't load**:\n- Verify manifest.json is properly formatted\n- Check browser console for errors\n- Follow browser-specific extension installation instructions\n\n**Python chat project issues**:\n- Ensure OpenAI package installed: `pip install openai`\n- Verify GITHUB_TOKEN environment variable is set\n- Check GitHub Models access permissions\n\n**Docsify not serving docs**:\n- Install docsify-cli globally: `npm install -g docsify-cli`\n- Run from repository root directory\n- Check that `docs/_sidebar.md` exists\n\n### Development Environment Tips\n\n- Use VS Code with Live Server extension for HTML projects\n- Install ESLint and Prettier extensions for consistent formatting\n- Use browser DevTools for debugging JavaScript\n- For Vue projects, install Vue DevTools browser extension\n\n### Performance Considerations\n\n- Large number of translated files (50+ languages) means full clones are large\n- Use shallow clone if only working on content: `git clone --depth 1`\n- Exclude translations from searches when working on English content\n- Build processes may be slow on first run (npm install, Vite build)\n\n## Security Considerations\n\n### Environment Variables\n\n- API keys should never be committed to repository\n- Use `.env` files (already in `.gitignore`)\n- Document required environment variables in project READMEs\n\n### Python Projects\n\n- Use virtual environments: `python -m venv venv`\n- Keep dependencies updated\n- GitHub tokens should have minimal required permissions\n\n### GitHub Models Access\n\n- Personal Access Tokens (PAT) required for GitHub Models\n- Tokens should be stored as environment variables\n- Never commit tokens or credentials\n\n## Additional Notes\n\n### Target Audience\n\n- Complete beginners to web development\n- Students and self-learners\n- Teachers using the curriculum in classrooms\n- Content is designed for accessibility and gradual skill building\n\n### Educational Philosophy\n\n- Project-based learning approach\n- Frequent knowledge checks (quizzes)\n- Hands-on coding exercises\n- Real-world application examples\n- Focus on fundamentals before frameworks\n\n### Repository Maintenance\n\n- Active community of learners and contributors\n- Regular updates to dependencies and content\n- Issues and discussions monitored by maintainers\n- Translation updates automated via GitHub Actions\n\n### Related Resources\n\n- [Microsoft Learn modules](https://docs.microsoft.com/learn/)\n- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)\n- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners\n- Additional courses: Generative AI, Data Science, ML, IoT curricula available\n\n### Working with Specific Projects\n\nFor detailed instructions on individual projects, refer to the README files in:\n- `quiz-app/README.md` - Vue 3 quiz application\n- `7-bank-project/README.md` - Banking application with authentication\n- `5-browser-extension/README.md` - Browser extension development\n- `6-space-game/README.md` - Canvas-based game development\n- `9-chat-project/README.md` - AI chat assistant project\n\n### Monorepo Structure\n\nWhile not a traditional monorepo, this repository contains multiple independent projects:\n- Each lesson is self-contained\n- Projects don't share dependencies\n- Work on individual projects without affecting others\n- Clone entire repo for the full curriculum experience\n"},"files":{"AGENTS.md":"# AGENTS.md\n\n## Project Overview\n\nThis is an educational curriculum repository for teaching web development fundamentals to beginners. The curriculum is a comprehensive 12-week course developed by Microsoft Cloud Advocates, featuring 24 hands-on lessons covering JavaScript, CSS, and HTML.\n\n### Key Components\n\n- **Educational Content**: 24 structured lessons organized into project-based modules\n- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant\n- **Interactive Quizzes**: 48 quizzes with 3 questions each (pre/post-lesson assessments)\n- **Multi-language Support**: Automated translations for 50+ languages via GitHub Actions\n- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI projects)\n\n### Architecture\n\n- Educational repository with lesson-based structure\n- Each lesson folder contains README, code examples, and solutions\n- Standalone projects in separate directories (quiz-app, various lesson projects)\n- Translation system using GitHub Actions (co-op-translator)\n- Documentation served via Docsify and available as PDF\n\n## Setup Commands\n\nThis repository is primarily for educational content consumption. For working with specific projects:\n\n### Main Repository Setup\n\n```bash\ngit clone https://github.com/microsoft/Web-Dev-For-Beginners.git\ncd Web-Dev-For-Beginners\n```\n\n### Quiz App Setup (Vue 3 + Vite)\n\n```bash\ncd quiz-app\nnpm install\nnpm run dev        # Start development server\nnpm run build      # Build for production\nnpm run lint       # Run ESLint\n```\n\n### Bank Project API (Node.js + Express)\n\n```bash\ncd 7-bank-project/api\nnpm install\nnpm start          # Start API server\nnpm run lint       # Run ESLint\nnpm run format     # Format with Prettier\n```\n\n### Browser Extension Projects\n\n```bash\ncd 5-browser-extension/solution\nnpm install\n# Follow browser-specific extension loading instructions\n```\n\n### Space Game Projects\n\n```bash\ncd 6-space-game/solution\nnpm install\n# Open index.html in browser or use Live Server\n```\n\n### Chat Project (Python Backend)\n\n```bash\ncd 9-chat-project/solution/backend/python\npip install openai\n# Set GITHUB_TOKEN environment variable\npython api.py\n```\n\n## Development Workflow\n\n### For Content Contributors\n\n1. **Fork the repository** to your GitHub account\n2. **Clone your fork** locally\n3. **Create a new branch** for your changes\n4. Make changes to lesson content or code examples\n5. Test any code changes in relevant project directories\n6. Submit pull requests following contribution guidelines\n\n### For Learners\n\n1. Fork or clone the repository\n2. Navigate to lesson directories sequentially\n3. Read README files for each lesson\n4. Complete pre-lesson quizzes at https://ff-quizzes.netlify.app/web/\n5. Work through code examples in lesson folders\n6. Complete assignments and challenges\n7. Take post-lesson quizzes\n\n### Live Development\n\n- **Documentation**: Run `docsify serve` in root (port 3000)\n- **Quiz App**: Run `npm run dev` in quiz-app directory\n- **Projects**: Use VS Code Live Server extension for HTML projects\n- **API Projects**: Run `npm start` in respective API directories\n\n## Testing Instructions\n\n### Quiz App Testing\n\n```bash\ncd quiz-app\nnpm run lint       # Check for code style issues\nnpm run build      # Verify build succeeds\n```\n\n### Bank API Testing\n\n```bash\ncd 7-bank-project/api\nnpm run lint       # Check for code style issues\nnode server.js     # Verify server starts without errors\n```\n\n### General Testing Approach\n\n- This is an educational repository without comprehensive automated tests\n- Manual testing focuses on:\n  - Code examples run without errors\n  - Links in documentation work correctly\n  - Project builds complete successfully\n  - Examples follow best practices\n\n### Pre-submission Checks\n\n- Run `npm run lint` in directories with package.json\n- Verify markdown links are valid\n- Test code examples in browser or Node.js\n- Check that translations maintain proper structure\n\n## Code Style Guidelines\n\n### JavaScript\n\n- Use modern ES6+ syntax\n- Follow standard ESLint configurations provided in projects\n- Use meaningful variable and function names for educational clarity\n- Add comments explaining concepts for learners\n- Format using Prettier where configured\n\n### HTML/CSS\n\n- Semantic HTML5 elements\n- Responsive design principles\n- Clear class naming conventions\n- Comments explaining CSS techniques for learners\n\n### Python\n\n- PEP 8 style guidelines\n- Clear, educational code examples\n- Type hints where helpful for learning\n\n### Markdown Documentation\n\n- Clear heading hierarchy\n- Code blocks with language specification\n- Links to additional resources\n- Screenshots and images in `images/` directories\n- Alt text for images for accessibility\n\n### File Organization\n\n- Lessons numbered sequentially (1-getting-started-lessons, 2-js-basics, etc.)\n- Each project has `solution/` and often `start/` or `your-work/` directories\n- Images stored in lesson-specific `images/` folders\n- Translations in `translations/{language-code}/` structure\n\n## Build and Deployment\n\n### Quiz App Deployment (Azure Static Web Apps)\n\nThe quiz-app is configured for Azure Static Web Apps deployment:\n\n```bash\ncd quiz-app\nnpm run build      # Creates dist/ folder\n# Deploys via GitHub Actions workflow on push to main\n```\n\nAzure Static Web Apps configuration:\n- **App location**: `/quiz-app`\n- **Output location**: `dist`\n- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`\n\n### Documentation PDF Generation\n\n```bash\nnpm install                    # Install docsify-to-pdf\nnpm run convert               # Generate PDF from docs\n```\n\n### Docsify Documentation\n\n```bash\nnpm install -g docsify-cli    # Install Docsify globally\ndocsify serve                 # Serve on localhost:3000\n```\n\n### Project-specific Builds\n\nEach project directory may have its own build process:\n- Vue projects: `npm run build` creates production bundles\n- Static projects: No build step, serve files directly\n\n## Pull Request Guidelines\n\n### Title Format\n\nUse clear, descriptive titles indicating the area of change:\n- `[Quiz-app] Add new quiz for lesson X`\n- `[Lesson-3] Fix typo in terrarium project`\n- `[Translation] Add Spanish translation for lesson 5`\n- `[Docs] Update setup instructions`\n\n### Required Checks\n\nBefore submitting a PR:\n\n1. **Code Quality**:\n   - Run `npm run lint` in affected project directories\n   - Fix all linting errors and warnings\n\n2. **Build Verification**:\n   - Run `npm run build` if applicable\n   - Ensure no build errors\n\n3. **Link Validation**:\n   - Test all markdown links\n   - Verify image references work\n\n4. **Content Review**:\n   - Proofread for spelling and grammar\n   - Ensure code examples are correct and educational\n   - Verify translations maintain original meaning\n\n### Contribution Requirements\n\n- Agree to Microsoft CLA (automated check on first PR)\n- Follow the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines\n- Reference issue numbers in PR description if applicable\n\n### Review Process\n\n- PRs reviewed by maintainers and community\n- Educational clarity is prioritized\n- Code examples should follow current best practices\n- Translations reviewed for accuracy and cultural appropriateness\n\n## Translation System\n\n### Automated Translation\n\n- Uses GitHub Actions with co-op-translator workflow\n- Translates to 50+ languages automatically\n- Source files in main directories\n- Translated files in `translations/{language-code}/` directories\n\n### Adding Manual Translation Improvements\n\n1. Locate file in `translations/{language-code}/`\n2. Make improvements while preserving structure\n3. Ensure code examples remain functional\n4. Test any localized quiz content\n\n### Translation Metadata\n\nTranslated files include metadata header:\n```markdown\n<!--\nCO_OP_TRANSLATOR_METADATA:\n{\n  \"original_hash\": \"...\",\n  \"translation_date\": \"...\",\n  \"source_file\": \"...\",\n  \"language_code\": \"...\"\n}\n-->\n```\n\n## Debugging and Troubleshooting\n\n### Common Issues\n\n**Quiz app fails to start**:\n- Check Node.js version (v14+ recommended)\n- Delete `node_modules` and `package-lock.json`, run `npm install` again\n- Check for port conflicts (default: Vite uses port 5173)\n\n**API server won't start**:\n- Verify Node.js version meets minimum (node >=10)\n- Check if port is already in use\n- Ensure all dependencies installed with `npm install`\n\n**Browser extension won't load**:\n- Verify manifest.json is properly formatted\n- Check browser console for errors\n- Follow browser-specific extension installation instructions\n\n**Python chat project issues**:\n- Ensure OpenAI package installed: `pip install openai`\n- Verify GITHUB_TOKEN environment variable is set\n- Check GitHub Models access permissions\n\n**Docsify not serving docs**:\n- Install docsify-cli globally: `npm install -g docsify-cli`\n- Run from repository root directory\n- Check that `docs/_sidebar.md` exists\n\n### Development Environment Tips\n\n- Use VS Code with Live Server extension for HTML projects\n- Install ESLint and Prettier extensions for consistent formatting\n- Use browser DevTools for debugging JavaScript\n- For Vue projects, install Vue DevTools browser extension\n\n### Performance Considerations\n\n- Large number of translated files (50+ languages) means full clones are large\n- Use shallow clone if only working on content: `git clone --depth 1`\n- Exclude translations from searches when working on English content\n- Build processes may be slow on first run (npm install, Vite build)\n\n## Security Considerations\n\n### Environment Variables\n\n- API keys should never be committed to repository\n- Use `.env` files (already in `.gitignore`)\n- Document required environment variables in project READMEs\n\n### Python Projects\n\n- Use virtual environments: `python -m venv venv`\n- Keep dependencies updated\n- GitHub tokens should have minimal required permissions\n\n### GitHub Models Access\n\n- Personal Access Tokens (PAT) required for GitHub Models\n- Tokens should be stored as environment variables\n- Never commit tokens or credentials\n\n## Additional Notes\n\n### Target Audience\n\n- Complete beginners to web development\n- Students and self-learners\n- Teachers using the curriculum in classrooms\n- Content is designed for accessibility and gradual skill building\n\n### Educational Philosophy\n\n- Project-based learning approach\n- Frequent knowledge checks (quizzes)\n- Hands-on coding exercises\n- Real-world application examples\n- Focus on fundamentals before frameworks\n\n### Repository Maintenance\n\n- Active community of learners and contributors\n- Regular updates to dependencies and content\n- Issues and discussions monitored by maintainers\n- Translation updates automated via GitHub Actions\n\n### Related Resources\n\n- [Microsoft Learn modules](https://docs.microsoft.com/learn/)\n- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)\n- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners\n- Additional courses: Generative AI, Data Science, ML, IoT curricula available\n\n### Working with Specific Projects\n\nFor detailed instructions on individual projects, refer to the README files in:\n- `quiz-app/README.md` - Vue 3 quiz application\n- `7-bank-project/README.md` - Banking application with authentication\n- `5-browser-extension/README.md` - Browser extension development\n- `6-space-game/README.md` - Canvas-based game development\n- `9-chat-project/README.md` - AI chat assistant project\n\n### Monorepo Structure\n\nWhile not a traditional monorepo, this repository contains multiple independent projects:\n- Each lesson is self-contained\n- Projects don't share dependencies\n- Work on individual projects without affecting others\n- Clone entire repo for the full curriculum experience\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","content":"# AGENTS.md\n\n## Project Overview\n\nThis is an educational curriculum repository for teaching web development fundamentals to beginners. The curriculum is a comprehensive 12-week course developed by Microsoft Cloud Advocates, featuring 24 hands-on lessons covering JavaScript, CSS, and HTML.\n\n### Key Components\n\n- **Educational Content**: 24 structured lessons organized into project-based modules\n- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant\n- **Interactive Quizzes**: 48 quizzes with 3 questions each (pre/post-lesson assessments)\n- **Multi-language Support**: Automated translations for 50+ languages via GitHub Actions\n- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI projects)\n\n### Architecture\n\n- Educational repository with lesson-based structure\n- Each lesson folder contains README, code examples, and solutions\n- Standalone projects in separate directories (quiz-app, various lesson projects)\n- Translation system using GitHub Actions (co-op-translator)\n- Documentation served via Docsify and available as PDF\n\n## Setup Commands\n\nThis repository is primarily for educational content consumption. For working with specific projects:\n\n### Main Repository Setup\n\n```bash\ngit clone https://github.com/microsoft/Web-Dev-For-Beginners.git\ncd Web-Dev-For-Beginners\n```\n\n### Quiz App Setup (Vue 3 + Vite)\n\n```bash\ncd quiz-app\nnpm install\nnpm run dev        # Start development server\nnpm run build      # Build for production\nnpm run lint       # Run ESLint\n```\n\n### Bank Project API (Node.js + Express)\n\n```bash\ncd 7-bank-project/api\nnpm install\nnpm start          # Start API server\nnpm run lint       # Run ESLint\nnpm run format     # Format with Prettier\n```\n\n### Browser Extension Projects\n\n```bash\ncd 5-browser-extension/solution\nnpm install\n# Follow browser-specific extension loading instructions\n```\n\n### Space Game Projects\n\n```bash\ncd 6-space-game/solution\nnpm install\n# Open index.html in browser or use Live Server\n```\n\n### Chat Project (Python Backend)\n\n```bash\ncd 9-chat-project/solution/backend/python\npip install openai\n# Set GITHUB_TOKEN environment variable\npython api.py\n```\n\n## Development Workflow\n\n### For Content Contributors\n\n1. **Fork the repository** to your GitHub account\n2. **Clone your fork** locally\n3. **Create a new branch** for your changes\n4. Make changes to lesson content or code examples\n5. Test any code changes in relevant project directories\n6. Submit pull requests following contribution guidelines\n\n### For Learners\n\n1. Fork or clone the repository\n2. Navigate to lesson directories sequentially\n3. Read README files for each lesson\n4. Complete pre-lesson quizzes at https://ff-quizzes.netlify.app/web/\n5. Work through code examples in lesson folders\n6. Complete assignments and challenges\n7. Take post-lesson quizzes\n\n### Live Development\n\n- **Documentation**: Run `docsify serve` in root (port 3000)\n- **Quiz App**: Run `npm run dev` in quiz-app directory\n- **Projects**: Use VS Code Live Server extension for HTML projects\n- **API Projects**: Run `npm start` in respective API directories\n\n## Testing Instructions\n\n### Quiz App Testing\n\n```bash\ncd quiz-app\nnpm run lint       # Check for code style issues\nnpm run build      # Verify build succeeds\n```\n\n### Bank API Testing\n\n```bash\ncd 7-bank-project/api\nnpm run lint       # Check for code style issues\nnode server.js     # Verify server starts without errors\n```\n\n### General Testing Approach\n\n- This is an educational repository without comprehensive automated tests\n- Manual testing focuses on:\n  - Code examples run without errors\n  - Links in documentation work correctly\n  - Project builds complete successfully\n  - Examples follow best practices\n\n### Pre-submission Checks\n\n- Run `npm run lint` in directories with package.json\n- Verify markdown links are valid\n- Test code examples in browser or Node.js\n- Check that translations maintain proper structure\n\n## Code Style Guidelines\n\n### JavaScript\n\n- Use modern ES6+ syntax\n- Follow standard ESLint configurations provided in projects\n- Use meaningful variable and function names for educational clarity\n- Add comments explaining concepts for learners\n- Format using Prettier where configured\n\n### HTML/CSS\n\n- Semantic HTML5 elements\n- Responsive design principles\n- Clear class naming conventions\n- Comments explaining CSS techniques for learners\n\n### Python\n\n- PEP 8 style guidelines\n- Clear, educational code examples\n- Type hints where helpful for learning\n\n### Markdown Documentation\n\n- Clear heading hierarchy\n- Code blocks with language specification\n- Links to additional resources\n- Screenshots and images in `images/` directories\n- Alt text for images for accessibility\n\n### File Organization\n\n- Lessons numbered sequentially (1-getting-started-lessons, 2-js-basics, etc.)\n- Each project has `solution/` and often `start/` or `your-work/` directories\n- Images stored in lesson-specific `images/` folders\n- Translations in `translations/{language-code}/` structure\n\n## Build and Deployment\n\n### Quiz App Deployment (Azure Static Web Apps)\n\nThe quiz-app is configured for Azure Static Web Apps deployment:\n\n```bash\ncd quiz-app\nnpm run build      # Creates dist/ folder\n# Deploys via GitHub Actions workflow on push to main\n```\n\nAzure Static Web Apps configuration:\n- **App location**: `/quiz-app`\n- **Output location**: `dist`\n- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`\n\n### Documentation PDF Generation\n\n```bash\nnpm install                    # Install docsify-to-pdf\nnpm run convert               # Generate PDF from docs\n```\n\n### Docsify Documentation\n\n```bash\nnpm install -g docsify-cli    # Install Docsify globally\ndocsify serve                 # Serve on localhost:3000\n```\n\n### Project-specific Builds\n\nEach project directory may have its own build process:\n- Vue projects: `npm run build` creates production bundles\n- Static projects: No build step, serve files directly\n\n## Pull Request Guidelines\n\n### Title Format\n\nUse clear, descriptive titles indicating the area of change:\n- `[Quiz-app] Add new quiz for lesson X`\n- `[Lesson-3] Fix typo in terrarium project`\n- `[Translation] Add Spanish translation for lesson 5`\n- `[Docs] Update setup instructions`\n\n### Required Checks\n\nBefore submitting a PR:\n\n1. **Code Quality**:\n   - Run `npm run lint` in affected project directories\n   - Fix all linting errors and warnings\n\n2. **Build Verification**:\n   - Run `npm run build` if applicable\n   - Ensure no build errors\n\n3. **Link Validation**:\n   - Test all markdown links\n   - Verify image references work\n\n4. **Content Review**:\n   - Proofread for spelling and grammar\n   - Ensure code examples are correct and educational\n   - Verify translations maintain original meaning\n\n### Contribution Requirements\n\n- Agree to Microsoft CLA (automated check on first PR)\n- Follow the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines\n- Reference issue numbers in PR description if applicable\n\n### Review Process\n\n- PRs reviewed by maintainers and community\n- Educational clarity is prioritized\n- Code examples should follow current best practices\n- Translations reviewed for accuracy and cultural appropriateness\n\n## Translation System\n\n### Automated Translation\n\n- Uses GitHub Actions with co-op-translator workflow\n- Translates to 50+ languages automatically\n- Source files in main directories\n- Translated files in `translations/{language-code}/` directories\n\n### Adding Manual Translation Improvements\n\n1. Locate file in `translations/{language-code}/`\n2. Make improvements while preserving structure\n3. Ensure code examples remain functional\n4. Test any localized quiz content\n\n### Translation Metadata\n\nTranslated files include metadata header:\n```markdown\n<!--\nCO_OP_TRANSLATOR_METADATA:\n{\n  \"original_hash\": \"...\",\n  \"translation_date\": \"...\",\n  \"source_file\": \"...\",\n  \"language_code\": \"...\"\n}\n-->\n```\n\n## Debugging and Troubleshooting\n\n### Common Issues\n\n**Quiz app fails to start**:\n- Check Node.js version (v14+ recommended)\n- Delete `node_modules` and `package-lock.json`, run `npm install` again\n- Check for port conflicts (default: Vite uses port 5173)\n\n**API server won't start**:\n- Verify Node.js version meets minimum (node >=10)\n- Check if port is already in use\n- Ensure all dependencies installed with `npm install`\n\n**Browser extension won't load**:\n- Verify manifest.json is properly formatted\n- Check browser console for errors\n- Follow browser-specific extension installation instructions\n\n**Python chat project issues**:\n- Ensure OpenAI package installed: `pip install openai`\n- Verify GITHUB_TOKEN environment variable is set\n- Check GitHub Models access permissions\n\n**Docsify not serving docs**:\n- Install docsify-cli globally: `npm install -g docsify-cli`\n- Run from repository root directory\n- Check that `docs/_sidebar.md` exists\n\n### Development Environment Tips\n\n- Use VS Code with Live Server extension for HTML projects\n- Install ESLint and Prettier extensions for consistent formatting\n- Use browser DevTools for debugging JavaScript\n- For Vue projects, install Vue DevTools browser extension\n\n### Performance Considerations\n\n- Large number of translated files (50+ languages) means full clones are large\n- Use shallow clone if only working on content: `git clone --depth 1`\n- Exclude translations from searches when working on English content\n- Build processes may be slow on first run (npm install, Vite build)\n\n## Security Considerations\n\n### Environment Variables\n\n- API keys should never be committed to repository\n- Use `.env` files (already in `.gitignore`)\n- Document required environment variables in project READMEs\n\n### Python Projects\n\n- Use virtual environments: `python -m venv venv`\n- Keep dependencies updated\n- GitHub tokens should have minimal required permissions\n\n### GitHub Models Access\n\n- Personal Access Tokens (PAT) required for GitHub Models\n- Tokens should be stored as environment variables\n- Never commit tokens or credentials\n\n## Additional Notes\n\n### Target Audience\n\n- Complete beginners to web development\n- Students and self-learners\n- Teachers using the curriculum in classrooms\n- Content is designed for accessibility and gradual skill building\n\n### Educational Philosophy\n\n- Project-based learning approach\n- Frequent knowledge checks (quizzes)\n- Hands-on coding exercises\n- Real-world application examples\n- Focus on fundamentals before frameworks\n\n### Repository Maintenance\n\n- Active community of learners and contributors\n- Regular updates to dependencies and content\n- Issues and discussions monitored by maintainers\n- Translation updates automated via GitHub Actions\n\n### Related Resources\n\n- [Microsoft Learn modules](https://docs.microsoft.com/learn/)\n- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)\n- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners\n- Additional courses: Generative AI, Data Science, ML, IoT curricula available\n\n### Working with Specific Projects\n\nFor detailed instructions on individual projects, refer to the README files in:\n- `quiz-app/README.md` - Vue 3 quiz application\n- `7-bank-project/README.md` - Banking application with authentication\n- `5-browser-extension/README.md` - Browser extension development\n- `6-space-game/README.md` - Canvas-based game development\n- `9-chat-project/README.md` - AI chat assistant project\n\n### Monorepo Structure\n\nWhile not a traditional monorepo, this repository contains multiple independent projects:\n- Each lesson is self-contained\n- Projects don't share dependencies\n- Work on individual projects without affecting others\n- Clone entire repo for the full curriculum experience\n","category":"root","tokens":2962}]}