# AGENTS.md ## প্রকল্পের সংক্ষিপ্ত বিবরণ এটি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয় শেখানোর জন্য একটি শিক্ষামূলক কারিকুলাম রিপোজিটরি। কারিকুলামটি মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা তৈরি একটি ১২-সপ্তাহের কোর্স, যেখানে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে ২৪টি হাতে-কলমে শেখার পাঠ অন্তর্ভুক্ত রয়েছে। ### প্রধান উপাদানসমূহ - **শিক্ষামূলক বিষয়বস্তু**: প্রকল্পভিত্তিক মডিউলে সংগঠিত ২৪টি কাঠামোগত পাঠ - **প্রায়োগিক প্রকল্পসমূহ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, এবং AI Chat Assistant - **ইন্টারঅ্যাকটিভ কুইজ**: ৪৮টি কুইজ, প্রতিটিতে ৩টি প্রশ্ন (পাঠের আগে/পরে মূল্যায়ন) - **বহুভাষা সমর্থন**: GitHub Actions এর মাধ্যমে ৫০+ ভাষায় স্বয়ংক্রিয় অনুবাদ - **প্রযুক্তি**: 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` চালান (পোর্ট ৩০০০) - **কুইজ অ্যাপ**: 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` চালান প্যাকেজ.json থাকা ডিরেক্টরিতে - নিশ্চিত করুন যে মার্কডাউন লিঙ্কগুলো বৈধ - ব্রাউজার বা Node.js এ কোড উদাহরণ পরীক্ষা করুন - নিশ্চিত করুন যে অনুবাদ সঠিক কাঠামো বজায় রেখেছে ## কোড স্টাইল নির্দেশিকা ### জাভাস্ক্রিপ্ট - আধুনিক ES6+ সিনট্যাক্স ব্যবহার করুন - প্রকল্পে প্রদত্ত স্ট্যান্ডার্ড ESLint কনফিগারেশন অনুসরণ করুন - শিক্ষামূলক স্পষ্টতার জন্য অর্থবহ ভেরিয়েবল এবং ফাংশন নাম ব্যবহার করুন - শিক্ষার্থীদের জন্য ধারণা ব্যাখ্যা করতে মন্তব্য যোগ করুন - যেখানে কনফিগার করা আছে, Prettier ব্যবহার করে ফরম্যাট করুন ### HTML/CSS - সেমান্টিক HTML5 এলিমেন্ট - রেসপন্সিভ ডিজাইন নীতিমালা - স্পষ্ট ক্লাস নামকরণ কনভেনশন - শিক্ষার্থীদের জন্য CSS কৌশল ব্যাখ্যা করতে মন্তব্য যোগ করুন ### পাইথন - PEP 8 স্টাইল নির্দেশিকা - স্পষ্ট, শিক্ষামূলক কোড উদাহরণ - শিক্ষার জন্য সহায়ক টাইপ হিন্ট যোগ করুন ### মার্কডাউন ডকুমেন্টেশন - স্পষ্ট শিরোনাম শ্রেণিবিন্যাস - ভাষা নির্দিষ্টকরণ সহ কোড ব্লক - অতিরিক্ত সম্পদের লিঙ্ক - `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. **লিঙ্ক যাচাইকরণ**: - সমস্ত মার্কডাউন লিঙ্ক পরীক্ষা করুন - নিশ্চিত করুন যে ছবির রেফারেন্স কাজ করছে 4. **বিষয়বস্তু পর্যালোচনা**: - বানান এবং ব্যাকরণ যাচাই করুন - নিশ্চিত করুন যে কোড উদাহরণ সঠিক এবং শিক্ষামূলক - নিশ্চিত করুন যে অনুবাদ মূল অর্থ বজায় রেখেছে ### অবদান প্রয়োজনীয়তা - Microsoft CLA-তে সম্মতি দিন (প্রথম PR-এ স্বয়ংক্রিয় চেক) - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) অনুসরণ করুন - বিস্তারিত নির্দেশিকার জন্য [CONTRIBUTING.md](./CONTRIBUTING.md) দেখুন - প্রযোজ্য হলে PR বিবরণে ইস্যু নম্বর উল্লেখ করুন ### পর্যালোচনা প্রক্রিয়া - PR গুলো রক্ষণাবেক্ষণকারী এবং সম্প্রদায় দ্বারা পর্যালোচনা করা হয় - শিক্ষামূলক স্পষ্টতাকে অগ্রাধিকার দেওয়া হয় - কোড উদাহরণগুলো বর্তমান সেরা অনুশীলন অনুসরণ করা উচিত - অনুবাদগুলো সঠিকতা এবং সাংস্কৃতিক উপযুক্ততার জন্য পর্যালোচনা করা হয় ## অনুবাদ ব্যবস্থা ### স্বয়ংক্রিয় অনুবাদ - co-op-translator ওয়ার্কফ্লো সহ GitHub Actions ব্যবহার করে - স্বয়ংক্রিয়ভাবে ৫০+ ভাষায় অনুবাদ করে - মূল ফাইলগুলো প্রধান ডিরেক্টরিতে - অনুবাদকৃত ফাইলগুলো `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 সঠিকভাবে ফরম্যাট করা আছে - ব্রাউজার কনসোলে ত্রুটি পরীক্ষা করুন - ব্রাউজার-নির্দিষ্ট এক্সটেনশন ইনস্টল নির্দেশিকা অনুসরণ করুন **পাইথন চ্যাট প্রকল্প সমস্যা**: - নিশ্চিত করুন 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 এক্সটেনশন ইনস্টল করুন - জাভাস্ক্রিপ্ট ডিবাগিংয়ের জন্য ব্রাউজার DevTools ব্যবহার করুন - Vue প্রকল্পের জন্য Vue DevTools ব্রাউজার এক্সটেনশন ইনস্টল করুন ### কর্মক্ষমতা বিবেচনা - অনুবাদকৃত ফাইলের বড় সংখ্যা (৫০+ ভাষা) মানে সম্পূর্ণ ক্লোন বড় হয় - শুধুমাত্র বিষয়বস্তু নিয়ে কাজ করলে শ্যালো ক্লোন ব্যবহার করুন: `git clone --depth 1` - ইংরেজি বিষয়বস্তু নিয়ে কাজ করার সময় অনুবাদগুলো অনুসন্ধান থেকে বাদ দিন - প্রথম রান (npm install, Vite build) এ বিল্ড প্রক্রিয়া ধীর হতে পারে ## নিরাপত্তা বিবেচনা ### পরিবেশ ভেরিয়েবল - API কী কখনোই রিপোজিটরিতে কমিট করা উচিত নয় - `.env` ফাইল ব্যবহার করুন (ইতিমধ্যে `.gitignore` এ অন্তর্ভুক্ত) - প্রকল্প README-তে প্রয়োজনীয় পরিবেশ ভেরিয়েবল ডকুমেন্ট করুন ### পাইথন প্রকল্প - ভার্চুয়াল পরিবেশ ব্যবহার করুন: `python -m venv venv` - ডিপেনডেন্সি আপডেট রাখুন - GitHub টোকেনের ন্যূনতম প্রয়োজনীয় অনুমতি থাকা উচিত ### GitHub Models অ্যাক্সেস - GitHub Models এর জন্য Personal Access Tokens (PAT) প্রয়োজন - টোকেনগুলো পরিবেশ ভেরিয়েবল হিসেবে সংরক্ষণ করা উচিত - কখনোই টোকেন বা ক্রেডেনশিয়াল কমিট করবেন না ## অতিরিক্ত নোট ### লক্ষ্য শ্রোতা - ওয়েব ডেভেলপমেন্টে সম্পূর্ণ নতুন - শিক্ষার্থী এবং স্ব-শিক্ষার্থী - শিক্ষক যারা শ্রেণীকক্ষে কারিকুলাম ব্যবহার করছেন - বিষয়বস্তু অ্যাক্সেসিবিলিটি এবং ধাপে ধাপে দক্ষতা বৃদ্ধির জন্য ডিজাইন করা হয়েছে ### শিক্ষামূলক দর্শন - প্রকল্পভিত্তিক শেখার পদ্ধতি - ঘন ঘন জ্ঞান যাচাই (কুইজ) - হাতে-কলমে কোডিং অনুশীলন - বাস্তব জীবনের প্রয়োগ উদাহরণ - ফ্রেমওয়ার্কের আগে মৌলিক বিষয়গুলোর উপর জোর ### রিপোজিটরি রক্ষণাবেক্ষণ - শিক্ষার্থী এবং অবদানকারীদের সক্রিয় সম্প্রদায় - ডিপেনডেন্সি এবং বিষয়বস্তুতে নিয়মিত আপডেট - রক্ষণাবেক্ষণকারী দ্বারা ইস্যু এবং আলোচনা পর্যবেক্ষণ - GitHub Actions এর মাধ্যমে অনুবাদ আপডেট স্বয়ংক্রিয় ### সম্পর্কিত সম্পদ - [Microsoft Learn মডিউল](https://docs.microsoft.com/learn/) - [Student Hub সম্পদ](https://docs.microsoft.com/learn/student-hub/) - শিক্ষার্থীদের জন্য [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) সুপারিশকৃত - অতিরিক্ত কোর্স: Generative AI, Data Science, 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 চ্যাট অ্যাসিস্ট্যান্ট প্রকল্প ### Monorepo কাঠামো যদিও এটি একটি ঐতিহ্যবাহী Monorepo নয়, এই রিপোজিটরিতে একাধিক স্বতন্ত্র প্রকল্প রয়েছে: - প্রতিটি পাঠ স্বতন্ত্র - প্রকল্পগুলো ডিপেনডেন্সি শেয়ার করে না - স্বতন্ত্র প্রকল্পে কাজ করুন অন্যগুলো প্রভাবিত না করে - সম্পূর্ণ কারিকুলাম অভিজ্ঞতার জন্য পুরো রিপোজিটরি ক্লোন করুন --- **অস্বীকৃতি**: এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।