25 KiB
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 स्वरूपात उपलब्ध
सेटअप कमांड्स
हा रिपॉझिटरी मुख्यतः शैक्षणिक सामग्रीच्या वापरासाठी आहे. विशिष्ट प्रकल्पांसोबत काम करण्यासाठी:
मुख्य रिपॉझिटरी सेटअप
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
क्विझ अॅप सेटअप (Vue 3 + Vite)
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)
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
ब्राउझर एक्सटेंशन प्रकल्प
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
स्पेस गेम प्रकल्प
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
चॅट प्रकल्प (Python Backend)
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
python api.py
विकास कार्यप्रवाह
सामग्री योगदानकर्त्यांसाठी
- रिपॉझिटरीला फोर्क करा तुमच्या GitHub खात्यावर
- तुमचा फोर्क स्थानिक स्तरावर क्लोन करा
- तुमच्या बदलांसाठी नवीन शाखा तयार करा
- धड्याच्या सामग्रीत किंवा कोड उदाहरणांमध्ये बदल करा
- संबंधित प्रकल्प डिरेक्टरीमध्ये कोड बदलांची चाचणी करा
- योगदान मार्गदर्शकांचे अनुसरण करून पुल विनंत्या सबमिट करा
शिकणाऱ्यांसाठी
- रिपॉझिटरी फोर्क किंवा क्लोन करा
- क्रमाने धड्यांच्या डिरेक्टरीमध्ये जा
- प्रत्येक धड्याच्या README फायली वाचा
- https://ff-quizzes.netlify.app/web/ येथे प्री-लेसन क्विझेस पूर्ण करा
- धड्यांच्या फोल्डरमधील कोड उदाहरणांवर काम करा
- असाइनमेंट्स आणि आव्हाने पूर्ण करा
- पोस्ट-लेसन क्विझेस घ्या
लाइव्ह विकास
- दस्तऐवज: रूटमध्ये
docsify serveचालवा (पोर्ट 3000) - क्विझ अॅप: quiz-app डिरेक्टरीमध्ये
npm run devचालवा - प्रकल्प: HTML प्रकल्पांसाठी VS Code Live Server एक्सटेंशन वापरा
- API प्रकल्प: संबंधित API डिरेक्टरीमध्ये
npm startचालवा
चाचणी सूचना
क्विझ अॅप चाचणी
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
बँक API चाचणी
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 डिप्लॉयमेंटसाठी कॉन्फिगर केले आहे:
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 निर्मिती
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
Docsify दस्तऐवज
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 सबमिट करण्यापूर्वी:
-
कोड गुणवत्ता:
- प्रभावित प्रकल्प डिरेक्टरीमध्ये
npm run lintचालवा - सर्व लिंटिंग त्रुटी आणि चेतावणी दुरुस्त करा
- प्रभावित प्रकल्प डिरेक्टरीमध्ये
-
बिल्ड सत्यापन:
- लागू असल्यास
npm run buildचालवा - कोणत्याही बिल्ड त्रुटी नसल्याची खात्री करा
- लागू असल्यास
-
दुवा सत्यापन:
- सर्व Markdown दुव्यांची चाचणी करा
- प्रतिमा संदर्भ कार्य करतात याची खात्री करा
-
सामग्री पुनरावलोकन:
- स्पेलिंग आणि व्याकरणासाठी प्रूफरीड करा
- कोड उदाहरणे योग्य आणि शैक्षणिक आहेत याची खात्री करा
- अनुवाद मूळ अर्थ टिकवून ठेवतात याची खात्री करा
योगदान आवश्यकता
- Microsoft CLA सहमत (पहिल्या PR वर स्वयंचलित तपासणी)
- Microsoft Open Source Code of Conduct चे अनुसरण करा
- तपशीलवार मार्गदर्शकांसाठी CONTRIBUTING.md पहा
- लागू असल्यास PR वर्णनात समस्या क्रमांक संदर्भित करा
पुनरावलोकन प्रक्रिया
- PRs मेंटेनर्स आणि समुदायाद्वारे पुनरावलोकन केले जातात
- शैक्षणिक स्पष्टतेला प्राधान्य दिले जाते
- कोड उदाहरणे वर्तमान सर्वोत्तम पद्धतींचे अनुसरण करणे आवश्यक आहे
- अनुवाद अचूकता आणि सांस्कृतिक उपयुक्ततेसाठी पुनरावलोकन केले जातात
अनुवाद प्रणाली
स्वयंचलित अनुवाद
- GitHub Actions सह co-op-translator वर्कफ्लो वापरते
- स्वयंचलितपणे 50+ भाषांमध्ये अनुवादित करते
- मुख्य डिरेक्टरीमधील स्रोत फाइल्स
translations/{language-code}/डिरेक्टरीमध्ये अनुवादित फाइल्स
मॅन्युअल अनुवाद सुधारणा जोडणे
translations/{language-code}/मध्ये फाइल शोधा- संरचना टिकवून सुधारणा करा
- कोड उदाहरणे कार्यक्षम राहतात याची खात्री करा
- कोणत्याही स्थानिक क्विझ सामग्रीची चाचणी करा
अनुवाद मेटाडेटा
अनुवादित फाइल्समध्ये मेटाडेटा हेडर समाविष्ट आहे:
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "...",
"translation_date": "...",
"source_file": "...",
"language_code": "..."
}
-->
डीबगिंग आणि समस्या निवारण
सामान्य समस्या
क्विझ अॅप सुरू होत नाही:
- 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
- Student Hub resources
- शिकणाऱ्यांसाठी 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 वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.