# AGENTS.md ## प्रकल्पाचा आढावा हे नवशिक्यांना वेब विकासाच्या मूलभूत गोष्टी शिकवण्यासाठी शैक्षणिक अभ्यासक्रमाचे रिपॉझिटरी आहे. हा अभ्यासक्रम Microsoft Cloud Advocates द्वारे विकसित केलेला 12 आठवड्यांचा व्यापक कोर्स आहे, ज्यामध्ये JavaScript, CSS आणि HTML कव्हर करणारे 24 प्रॅक्टिकल धडे आहेत. ### मुख्य घटक - **शैक्षणिक सामग्री**: प्रकल्प-आधारित मॉड्यूलमध्ये आयोजित केलेले 24 संरचित धडे - **प्रॅक्टिकल प्रकल्प**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, आणि AI Chat Assistant - **इंटरॅक्टिव्ह क्विझेस**: प्रत्येक धड्याच्या आधी/नंतर 3 प्रश्नांसह 48 क्विझेस - **बहुभाषिक समर्थन**: GitHub Actions द्वारे 50+ भाषांसाठी स्वयंचलित अनुवाद - **तंत्रज्ञान**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI प्रकल्पांसाठी) ### आर्किटेक्चर - धड्यांवर आधारित संरचनेसह शैक्षणिक रिपॉझिटरी - प्रत्येक धड्याच्या फोल्डरमध्ये README, कोड उदाहरणे आणि सोल्यूशन्स असतात - स्वतंत्र प्रकल्प वेगळ्या डिरेक्टरीमध्ये (quiz-app, विविध धडे प्रकल्प) - GitHub Actions (co-op-translator) वापरून अनुवाद प्रणाली - Docsify द्वारे सेवा दिलेली दस्तऐवज आणि PDF स्वरूपात उपलब्ध ## सेटअप कमांड्स हा रिपॉझिटरी मुख्यतः शैक्षणिक सामग्रीच्या वापरासाठी आहे. विशिष्ट प्रकल्पांसोबत काम करण्यासाठी: ### मुख्य रिपॉझिटरी सेटअप ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` ### क्विझ अॅप सेटअप (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Start development server npm run build # Build for production npm run lint # Run ESLint ``` ### बँक प्रकल्प API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Start API server npm run lint # Run ESLint npm run format # Format with Prettier ``` ### ब्राउझर एक्सटेंशन प्रकल्प ```bash cd 5-browser-extension/solution npm install # Follow browser-specific extension loading instructions ``` ### स्पेस गेम प्रकल्प ```bash cd 6-space-game/solution npm install # Open index.html in browser or use Live Server ``` ### चॅट प्रकल्प (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai # Set GITHUB_TOKEN environment variable python api.py ``` ## विकास कार्यप्रवाह ### सामग्री योगदानकर्त्यांसाठी 1. **रिपॉझिटरीला फोर्क करा** तुमच्या GitHub खात्यावर 2. **तुमचा फोर्क स्थानिक स्तरावर क्लोन करा** 3. **तुमच्या बदलांसाठी नवीन शाखा तयार करा** 4. धड्याच्या सामग्रीत किंवा कोड उदाहरणांमध्ये बदल करा 5. संबंधित प्रकल्प डिरेक्टरीमध्ये कोड बदलांची चाचणी करा 6. योगदान मार्गदर्शकांचे अनुसरण करून पुल विनंत्या सबमिट करा ### शिकणाऱ्यांसाठी 1. रिपॉझिटरी फोर्क किंवा क्लोन करा 2. क्रमाने धड्यांच्या डिरेक्टरीमध्ये जा 3. प्रत्येक धड्याच्या README फायली वाचा 4. https://ff-quizzes.netlify.app/web/ येथे प्री-लेसन क्विझेस पूर्ण करा 5. धड्यांच्या फोल्डरमधील कोड उदाहरणांवर काम करा 6. असाइनमेंट्स आणि आव्हाने पूर्ण करा 7. पोस्ट-लेसन क्विझेस घ्या ### लाइव्ह विकास - **दस्तऐवज**: रूटमध्ये `docsify serve` चालवा (पोर्ट 3000) - **क्विझ अॅप**: quiz-app डिरेक्टरीमध्ये `npm run dev` चालवा - **प्रकल्प**: HTML प्रकल्पांसाठी VS Code Live Server एक्सटेंशन वापरा - **API प्रकल्प**: संबंधित API डिरेक्टरीमध्ये `npm start` चालवा ## चाचणी सूचना ### क्विझ अॅप चाचणी ```bash cd quiz-app npm run lint # Check for code style issues npm run build # Verify build succeeds ``` ### बँक API चाचणी ```bash cd 7-bank-project/api npm run lint # Check for code style issues node server.js # Verify server starts without errors ``` ### सामान्य चाचणी दृष्टिकोन - हे शैक्षणिक रिपॉझिटरी आहे ज्यामध्ये व्यापक स्वयंचलित चाचण्या नाहीत - मॅन्युअल चाचणीवर लक्ष केंद्रित: - कोड उदाहरणे त्रुटीशिवाय चालतात - दस्तऐवजातील दुवे योग्य प्रकारे कार्य करतात - प्रकल्प यशस्वीरित्या तयार होतात - उदाहरणे सर्वोत्तम पद्धतींचे अनुसरण करतात ### सबमिशनपूर्व तपासणी - `npm run lint` संबंधित डिरेक्टरीमध्ये चालवा - Markdown दुवे वैध आहेत याची खात्री करा - ब्राउझर किंवा Node.js मध्ये कोड उदाहरणांची चाचणी करा - अनुवाद योग्य संरचनेत आहेत याची खात्री करा ## कोड शैली मार्गदर्शक ### JavaScript - आधुनिक ES6+ सिंटॅक्स वापरा - प्रकल्पांमध्ये प्रदान केलेल्या मानक ESLint कॉन्फिगरेशनचे अनुसरण करा - शैक्षणिक स्पष्टतेसाठी अर्थपूर्ण व्हेरिएबल आणि फंक्शन नावे वापरा - शिकणाऱ्यांसाठी संकल्पना स्पष्ट करणारे टिप्पण्या जोडा - Prettier वापरून स्वरूपित करा (जिथे कॉन्फिगर केले आहे) ### HTML/CSS - सेमॅंटिक HTML5 घटक - प्रतिसादक्षम डिझाइन तत्त्वे - स्पष्ट वर्ग नामकरण पद्धती - शिकणाऱ्यांसाठी CSS तंत्र स्पष्ट करणाऱ्या टिप्पण्या ### Python - PEP 8 शैली मार्गदर्शक - स्पष्ट, शैक्षणिक कोड उदाहरणे - शिकण्यासाठी उपयुक्त ठिकाणी प्रकार संकेत ### Markdown दस्तऐवज - स्पष्ट शीर्षक श्रेणी - भाषा निर्दिष्टीसह कोड ब्लॉक्स - अतिरिक्त संसाधनांसाठी दुवे - `images/` डिरेक्टरीमध्ये स्क्रीनशॉट आणि प्रतिमा - अॅक्सेसिबिलिटीसाठी प्रतिमांसाठी Alt टेक्स्ट ### फाइल संघटन - धडे क्रमांकानुसार क्रमांकित (1-getting-started-lessons, 2-js-basics, इ.) - प्रत्येक प्रकल्पामध्ये `solution/` आणि अनेकदा `start/` किंवा `your-work/` डिरेक्टरी असते - धड्याच्या विशिष्ट `images/` फोल्डरमध्ये प्रतिमा संग्रहित - `translations/{language-code}/` संरचनेत अनुवाद ## बिल्ड आणि डिप्लॉयमेंट ### क्विझ अॅप डिप्लॉयमेंट (Azure Static Web Apps) क्विझ-अॅप Azure Static Web Apps डिप्लॉयमेंटसाठी कॉन्फिगर केले आहे: ```bash cd quiz-app npm run build # Creates dist/ folder # Deploys via GitHub Actions workflow on push to main ``` Azure Static Web Apps कॉन्फिगरेशन: - **अॅप स्थान**: `/quiz-app` - **आउटपुट स्थान**: `dist` - **वर्कफ्लो**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### दस्तऐवज PDF निर्मिती ```bash npm install # Install docsify-to-pdf npm run convert # Generate PDF from docs ``` ### Docsify दस्तऐवज ```bash npm install -g docsify-cli # Install Docsify globally docsify serve # Serve on localhost:3000 ``` ### प्रकल्प-विशिष्ट बिल्ड्स प्रत्येक प्रकल्प डिरेक्टरीमध्ये स्वतःचा बिल्ड प्रक्रिया असू शकते: - Vue प्रकल्प: `npm run build` उत्पादन बंडल तयार करते - स्थिर प्रकल्प: कोणतेही बिल्ड चरण नाही, फाइल्स थेट सर्व्ह करा ## पुल विनंती मार्गदर्शक ### शीर्षक स्वरूप बदलाच्या क्षेत्राचे संकेत देणारे स्पष्ट, वर्णनात्मक शीर्षक वापरा: - `[Quiz-app] Add new quiz for lesson X` - `[Lesson-3] Fix typo in terrarium project` - `[Translation] Add Spanish translation for lesson 5` - `[Docs] Update setup instructions` ### आवश्यक तपासणी PR सबमिट करण्यापूर्वी: 1. **कोड गुणवत्ता**: - प्रभावित प्रकल्प डिरेक्टरीमध्ये `npm run lint` चालवा - सर्व लिंटिंग त्रुटी आणि चेतावणी दुरुस्त करा 2. **बिल्ड सत्यापन**: - लागू असल्यास `npm run build` चालवा - कोणत्याही बिल्ड त्रुटी नसल्याची खात्री करा 3. **दुवा सत्यापन**: - सर्व Markdown दुव्यांची चाचणी करा - प्रतिमा संदर्भ कार्य करतात याची खात्री करा 4. **सामग्री पुनरावलोकन**: - स्पेलिंग आणि व्याकरणासाठी प्रूफरीड करा - कोड उदाहरणे योग्य आणि शैक्षणिक आहेत याची खात्री करा - अनुवाद मूळ अर्थ टिकवून ठेवतात याची खात्री करा ### योगदान आवश्यकता - Microsoft CLA सहमत (पहिल्या PR वर स्वयंचलित तपासणी) - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) चे अनुसरण करा - तपशीलवार मार्गदर्शकांसाठी [CONTRIBUTING.md](./CONTRIBUTING.md) पहा - लागू असल्यास PR वर्णनात समस्या क्रमांक संदर्भित करा ### पुनरावलोकन प्रक्रिया - PRs मेंटेनर्स आणि समुदायाद्वारे पुनरावलोकन केले जातात - शैक्षणिक स्पष्टतेला प्राधान्य दिले जाते - कोड उदाहरणे वर्तमान सर्वोत्तम पद्धतींचे अनुसरण करणे आवश्यक आहे - अनुवाद अचूकता आणि सांस्कृतिक उपयुक्ततेसाठी पुनरावलोकन केले जातात ## अनुवाद प्रणाली ### स्वयंचलित अनुवाद - GitHub Actions सह co-op-translator वर्कफ्लो वापरते - स्वयंचलितपणे 50+ भाषांमध्ये अनुवादित करते - मुख्य डिरेक्टरीमधील स्रोत फाइल्स - `translations/{language-code}/` डिरेक्टरीमध्ये अनुवादित फाइल्स ### मॅन्युअल अनुवाद सुधारणा जोडणे 1. `translations/{language-code}/` मध्ये फाइल शोधा 2. संरचना टिकवून सुधारणा करा 3. कोड उदाहरणे कार्यक्षम राहतात याची खात्री करा 4. कोणत्याही स्थानिक क्विझ सामग्रीची चाचणी करा ### अनुवाद मेटाडेटा अनुवादित फाइल्समध्ये मेटाडेटा हेडर समाविष्ट आहे: ```markdown ``` ## डीबगिंग आणि समस्या निवारण ### सामान्य समस्या **क्विझ अॅप सुरू होत नाही**: - Node.js आवृत्ती तपासा (v14+ शिफारस केलेली) - `node_modules` आणि `package-lock.json` हटवा, पुन्हा `npm install` चालवा - पोर्ट संघर्ष तपासा (डीफॉल्ट: Vite पोर्ट 5173 वापरतो) **API सर्व्हर सुरू होत नाही**: - Node.js आवृत्ती किमान आवश्यकता पूर्ण करते याची खात्री करा (node >=10) - पोर्ट आधीच वापरला जात आहे का ते तपासा - `npm install` सह सर्व अवलंबित्व स्थापित आहेत याची खात्री करा **ब्राउझर एक्सटेंशन लोड होत नाही**: - manifest.json योग्य प्रकारे स्वरूपित आहे याची खात्री करा - ब्राउझर कन्सोलमध्ये त्रुटी तपासा - ब्राउझर-विशिष्ट एक्सटेंशन इंस्टॉलेशन सूचना अनुसरण करा **Python चॅट प्रकल्प समस्या**: - OpenAI पॅकेज स्थापित आहे याची खात्री करा: `pip install openai` - GITHUB_TOKEN पर्यावरणीय व्हेरिएबल सेट आहे याची खात्री करा - GitHub Models प्रवेश परवानग्या तपासा **Docsify दस्तऐवज सेवा देत नाही**: - docsify-cli जागतिक स्तरावर स्थापित करा: `npm install -g docsify-cli` - रिपॉझिटरी रूट डिरेक्टरीमधून चालवा - `docs/_sidebar.md` अस्तित्वात आहे याची खात्री करा ### विकास वातावरण टिप्स - HTML प्रकल्पांसाठी VS Code Live Server एक्सटेंशन वापरा - सुसंगत स्वरूपनासाठी ESLint आणि Prettier एक्सटेंशन स्थापित करा - JavaScript डीबगिंगसाठी ब्राउझर DevTools वापरा - Vue प्रकल्पांसाठी, Vue DevTools ब्राउझर एक्सटेंशन स्थापित करा ### कार्यक्षमता विचार - अनुवादित फाइल्सची मोठी संख्या (50+ भाषा) म्हणजे पूर्ण क्लोन्स मोठे असतात - फक्त सामग्रीवर काम करत असल्यास शॅलो क्लोन वापरा: `git clone --depth 1` - इंग्रजी सामग्रीवर काम करताना अनुवाद शोधांमधून वगळा - प्रथम रनवर बिल्ड प्रक्रिया मंद असू शकते (npm install, Vite build) ## सुरक्षा विचार ### पर्यावरणीय व्हेरिएबल्स - API की कधीही रिपॉझिटरीमध्ये कमिट करू नये - `.env` फाइल्स वापरा (आधीच `.gitignore` मध्ये) - प्रकल्प README मध्ये आवश्यक पर्यावरणीय व्हेरिएबल्स दस्तऐवज करा ### Python प्रकल्प - वर्च्युअल वातावरण वापरा: `python -m venv venv` - अवलंबित्व अद्ययावत ठेवा - GitHub टोकन्समध्ये किमान आवश्यक परवानग्या असाव्यात ### GitHub Models प्रवेश - GitHub Models साठी वैयक्तिक प्रवेश टोकन्स (PAT) आवश्यक - टोकन्स पर्यावरणीय व्हेरिएबल्स म्हणून संग्रहित केले पाहिजेत - टोकन्स किंवा क्रेडेन्शियल्स कधीही कमिट करू नका ## अतिरिक्त टीप ### लक्ष्य प्रेक्षक - वेब विकासासाठी पूर्ण नवशिके - विद्यार्थी आणि स्व-अभ्यासक - वर्गात अभ्यासक्रम वापरणारे शिक्षक - सामग्री अॅक्सेसिबिलिटी आणि कौशल्य हळूहळू विकसित करण्यासाठी डिझाइन केलेली आहे ### शैक्षणिक तत्त्वज्ञान - प्रकल्प-आधारित शिक्षण दृष्टिकोन - वारंवार ज्ञान तपासणी (क्विझेस) - हाताळण्यायोग्य कोडिंग सराव - वास्तविक-जगातील अनुप्रयोग उदाहरणे - फ्रेमवर्क्सच्या आधी मूलभूत गोष्टींवर लक्ष केंद्रित ### रिपॉझिटरी देखभाल - शिकणाऱ्यांचा आणि योगदानकर्त्यांचा सक्रिय समुदाय - अवलंबित्व आणि सामग्रीसाठी नियमित अद्यतने - मेंटेनर्सद्वारे समस्या आणि चर्चा मॉनिटर केल्या जातात - GitHub Actions द्वारे स्वयंचलित अनुवाद अद्यतने ### संबंधित संसाधने - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - शिकणाऱ्यांसाठी [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) शिफारस केली जाते - अतिरिक्त कोर्सेस: जनरेटिव्ह AI, डेटा सायन्स, ML, IoT अभ्यासक्रम उपलब्ध ### विशिष्ट प्रकल्पांसोबत काम करणे स्वतंत्र प्रकल्पांवरील तपशीलवार सूचनांसाठी, खालील README फाइल्सचा संदर्भ घ्या: - `quiz-app/README.md` - Vue 3 क्विझ अॅप्लिकेशन - `7-bank-project/README.md` - प्रमाणीकरणासह बँकिंग अॅप्लिकेशन - `5-browser-extension/README.md` - ब्राउझर एक्सटेंशन विकास - `6-space-game/README.md` - कॅनव्हास-आधारित गेम विकास - `9-chat-project/README.md` - AI चॅट असिस्टंट प्रकल्प ### मोनोरिपो संरचना पारंपरिक मोनोरिपो नसले तरी, या रिपॉझिटरीमध्ये अनेक स्वतंत्र प्रकल्प आहेत: - प्रत्येक धडा स्वतंत्र आहे - प्रकल्प अवलंबित्व सामायिक करत नाहीत - इतरांवर परिणाम न करता स्वतंत्र प्रकल्पांवर काम करा - संपूर्ण अभ्यासक्रम अनुभवासाठी संपूर्ण रिपॉझिटरी क्लोन करा --- **अस्वीकरण**: हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.