localizeflow[bot]
4 weeks ago
parent
31af3d9a27
commit
b6a3a08b9a
@ -1,43 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
||||
"translation_date": "2025-08-25T21:04:20+00:00",
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-06T17:20:36+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
# আমার টেরারিয়াম: HTML, CSS এবং DOM ম্যানিপুলেশন শিখতে একটি প্রকল্প 🌵🌱
|
||||
## আপনার টেরারিয়াম মোতায়েন করুন
|
||||
|
||||
একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারবেন, সেটিকে স্টাইল করতে পারবেন এবং এমনকি আপনার পছন্দমতো একাধিক ইন্টারঅ্যাকশন যোগ করতে পারবেন।
|
||||
আপনি **Azure Static Web Apps** ব্যবহার করে আপনার টেরারিয়াম ওয়েবে মোতায়েন বা প্রকাশ করতে পারেন।
|
||||
|
||||
|
||||
1. এই রিপোটি ফর্ক করুন
|
||||
|
||||
# পাঠসমূহ
|
||||
2. এই বোতামে চাপুন 👇
|
||||
|
||||
1. [HTML পরিচিতি](./1-intro-to-html/README.md)
|
||||
2. [CSS পরিচিতি](./2-intro-to-css/README.md)
|
||||
3. [DOM এবং JS ক্লোজারস পরিচিতি](./3-intro-to-DOM-and-closures/README.md)
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
## কৃতজ্ঞতা
|
||||
3. আপনার অ্যাপ তৈরি করার জন্য সেটআপ উইজার্ড অনুসরণ করুন।
|
||||
- **App root** সেট করুন `/solution` অথবা আপনার কোডবেসের রুটে।
|
||||
- এই অ্যাপে কোনো API নেই, তাই API কনফিগারেশন এড়িয়ে যেতে পারেন।
|
||||
- একটি `.github` ফোল্ডার স্বয়ংক্রিয়ভাবে তৈরি হবে যা Azure Static Web Apps কে আপনার অ্যাপ নির্মাণ ও প্রকাশ করতে সাহায্য করবে।
|
||||
|
||||
♥️ দিয়ে লিখেছেন [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
CSS ব্যবহার করে তৈরি টেরারিয়ামটি অনুপ্রাণিত হয়েছে Jakub Mandra-এর গ্লাস জার [কোডপেন](https://codepen.io/Rotarepmi/pen/rjpNZY) থেকে।
|
||||
|
||||
এই শিল্পকর্মটি [Jen Looper](http://jenlooper.com)-এর হাতে আঁকা, Procreate-এর সাহায্যে।
|
||||
|
||||
## আপনার টেরারিয়াম প্রকাশ করুন
|
||||
|
||||
আপনার টেরারিয়াম ওয়েবে প্রকাশ করতে Azure Static Web Apps ব্যবহার করতে পারেন।
|
||||
|
||||
1. এই রিপোজিটরিটি ফর্ক করুন
|
||||
|
||||
2. এই বোতামটি চাপুন
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. উইজার্ডটি অনুসরণ করে আপনার অ্যাপ তৈরি করুন। নিশ্চিত করুন যে আপনি অ্যাপ রুটটি `/solution` বা আপনার কোডবেসের রুটে সেট করেছেন। এই অ্যাপে কোনো API নেই, তাই সেটি যোগ করার দরকার নেই। একটি গিটহাব ফোল্ডার আপনার ফর্ক করা রিপোজিটরিতে তৈরি হবে, যা Azure Static Web Apps-এর বিল্ড সার্ভিসকে সাহায্য করবে আপনার অ্যাপটি তৈরি এবং একটি নতুন URL-এ প্রকাশ করতে।
|
||||
---
|
||||
|
||||
<!-- 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 -->
|
||||
@ -1,261 +1,257 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
|
||||
"translation_date": "2025-11-25T17:22:33+00:00",
|
||||
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
|
||||
"translation_date": "2026-01-06T17:19:00+00:00",
|
||||
"source_file": "README.md",
|
||||
"language_code": "bn"
|
||||
}
|
||||
-->
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
# ওয়েব ডেভেলপমেন্ট ফর বেগিনার্স - একটি পাঠক্রম
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা পরিচালিত আমাদের ১২ সপ্তাহের বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি শিখুন। ২৪টি পাঠের প্রতিটি অংশে কাজের প্রকল্প যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেমসের মাধ্যমে জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল অন্তর্ভুক্ত রয়েছে। কুইজ, আলোচনা এবং ব্যবহারিক কাজের মাধ্যমে নিজেকে যুক্ত করুন। কার্যকর প্রকল্প-ভিত্তিক শিক্ষণ পদ্ধতির সাহায্যে আপনার দক্ষতা উন্নত করুন এবং জ্ঞানের ধারাবাহিকতা বাড়ান। আজই আপনার কোডিং যাত্রা শুরু করুন!
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
# ওয়েব ডেভেলপমেন্ট ফর বিগিনার্স - একটি কারিকুলাম
|
||||
|
||||
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের ১২ সপ্তাহের বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে কাজ করা প্রকল্পের মাধ্যমে শেখানো হয়, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের মাধ্যমে অংশগ্রহণ করুন। আমাদের কার্যকর প্রকল্প-ভিত্তিক শিক্ষাদানের মাধ্যমে আপনার দক্ষতা বৃদ্ধি করুন এবং জ্ঞান ধরে রাখার ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
|
||||
|
||||
আজুর এআই ফাউন্ড্রি ডিসকর্ড কমিউনিটিতে যোগ দিন
|
||||
Azure AI Foundry Discord কমিউনিটিতে যোগ দিন
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
এই রিসোর্সগুলো ব্যবহার শুরু করতে নিচের ধাপগুলো অনুসরণ করুন:
|
||||
1. **রিপোজিটরি ফর্ক করুন**: ক্লিক করুন [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**আজুর এআই ফাউন্ড্রি ডিসকর্ডে যোগ দিন এবং বিশেষজ্ঞ ও অন্যান্য ডেভেলপারদের সাথে পরিচিত হন**](https://discord.com/invite/ByRwuEEgH4)
|
||||
নিম্নলিখিত ধাপগুলি অনুসরণ করে এই সম্পদগুলি ব্যবহার শুরু করুন:
|
||||
1. **রিপোজিটোরি ফর্ক করুন**: ক্লিক করুন [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
||||
2. **রিপোজিটোরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
3. [**Azure AI Foundry Discord এ যোগ দিন এবং বিশেষজ্ঞ ও অন্যান্য ডেভেলপারদের সাথে যোগাযোগ করুন**](https://discord.com/invite/ByRwuEEgH4)
|
||||
|
||||
### 🌐 বহু-ভাষার সমর্থন
|
||||
### 🌐 বহুভাষিক সহায়তা
|
||||
|
||||
#### GitHub Action এর মাধ্যমে সমর্থিত (স্বয়ংক্রিয় এবং সর্বদা আপডেটেড)
|
||||
#### GitHub Action দ্বারা সমর্থিত (স্বয়ংক্রিয় এবং সর্বদা আপ-টু-ডেট)
|
||||
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
|
||||
[Arabic](../ar/README.md) | [Bengali](./README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
|
||||
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
|
||||
> **স্থানীয়ভাবে ক্লোন করতে চান?**
|
||||
|
||||
**যদি আপনি অতিরিক্ত ভাষার অনুবাদ চান, সমর্থিত ভাষার তালিকা [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) দেওয়া আছে।**
|
||||
> এই রিপোজিটরিতে ৫০+ ভাষার অনুবাদ রয়েছে যা ডাউনলোড আকার উল্লেখযোগ্য মাত্রায় বৃদ্ধি করে। অনুবাদ ছাড়া ক্লোন করতে, sparse checkout ব্যবহার করুন:
|
||||
> ```bash
|
||||
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
> cd Web-Dev-For-Beginners
|
||||
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
|
||||
> ```
|
||||
|
||||
> এটি আপনাকে কোর্স সম্পন্ন করার জন্য সবকিছু দ্রুত ডাউনলোড করার সুবিধা দেবে।
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
**আরও অনুবাদ ভাষা সমর্থন করতে চান? সেগুলি [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) তালিকাভুক্ত।**
|
||||
|
||||
#### 🧑🎓 _আপনি কি একজন শিক্ষার্থী?_
|
||||
#### 🧑🎓 _আপনি কি একজন ছাত্র?_
|
||||
|
||||
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করুন যেখানে আপনি শিক্ষার্থীদের জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি বিনামূল্যে সার্টিফিকেট ভাউচার পাওয়ার উপায় খুঁজে পাবেন। এটি এমন একটি পৃষ্ঠা যা আপনি বুকমার্ক করতে পারেন এবং মাসিকভাবে নতুন কন্টেন্টের জন্য চেক করতে পারেন।
|
||||
[**স্টুডেন্ট হাব পেজে**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) যান যেখানে আপনি শুরু করার জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি ফ্রি সার্টিফিকেট ভাউচারের সুযোগ পাবেন। এটি সেই পাতা যা আপনি বুকমার্ক করে মাঝে মাঝে দেখতে চাইবেন কারণ আমরা প্রতি মাসে বিষয়বস্তু পরিবর্তন করি।
|
||||
|
||||
### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জ সম্পন্ন করুন!
|
||||
### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জ সম্পন্ন করার জন্য!
|
||||
|
||||
নতুন চ্যালেঞ্জ যোগ করা হয়েছে, "GitHub Copilot Agent Challenge 🚀" খুঁজুন বেশিরভাগ অধ্যায়ে। এটি একটি নতুন চ্যালেঞ্জ যা আপনি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করতে পারেন। যদি আপনি আগে Agent মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করাই নয়, ফাইল তৈরি ও সম্পাদনা, কমান্ড চালানো এবং আরও অনেক কিছু করতে সক্ষম।
|
||||
নতুন চ্যালেঞ্জ যুক্ত হয়েছে, বেশিরভাগ অধ্যায়ে "GitHub Copilot Agent Challenge 🚀" অনুসন্ধান করুন। এটি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করার জন্য আপনার একটি নতুন চ্যালেঞ্জ। যদি আগে কখনো Agent মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করেনা, এমনকি ফাইল তৈরি ও সম্পাদনা, কমান্ড চালানো ইত্যাদিও করতে পারে।
|
||||
|
||||
### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রকল্প তৈরি করুন_
|
||||
### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রজেক্ট তৈরি করুন_
|
||||
|
||||
নতুন AI Assistant প্রকল্প যোগ করা হয়েছে, এটি দেখুন [project](./09-chat-project/README.md)
|
||||
নতুন AI Assistant প্রজেক্ট যুক্ত হয়েছে, দেখুন [প্রকল্প](./9-chat-project/README.md)
|
||||
|
||||
### 📣 ঘোষণা - _Generative AI এর জন্য নতুন কারিকুলাম_ জাভাস্ক্রিপ্টে প্রকাশিত হয়েছে
|
||||
### 📣 ঘোষণা - _Generative AI এর জন্য নতুন পাঠক্রম_ সম্প্রতি প্রকাশিত
|
||||
|
||||
আমাদের নতুন Generative AI কারিকুলাম মিস করবেন না!
|
||||
আমাদের নতুন Generative AI পাঠক্রম মিস করবেন না!
|
||||
|
||||
শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন!
|
||||
শুরু করতে ভিজিট করুন [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
|
||||
|
||||
|
||||
|
||||
|
||||
- বেসিক থেকে RAG পর্যন্ত সবকিছু নিয়ে পাঠ।
|
||||
- GenAI এবং আমাদের সঙ্গী অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রের সাথে যোগাযোগ করুন।
|
||||
- মজাদার এবং আকর্ষণীয় গল্প, আপনি সময় ভ্রমণ করবেন!
|
||||
- বেসিক থেকে শুরু করে RAG পর্যন্ত সবকিছু শেখানো হয়।
|
||||
- GenAI এবং আমাদের কম্প্যানিয়ন অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রদের সাথে ইন্টারঅ্যাক্ট করুন।
|
||||
- মজাদার এবং আকর্ষণীয় কাহিনি, আপনাকে সময়ে ভ্রমণ করানো হবে!
|
||||
|
||||
|
||||
|
||||
|
||||
প্রতিটি পাঠে একটি অ্যাসাইনমেন্ট, একটি জ্ঞান যাচাই এবং একটি চ্যালেঞ্জ অন্তর্ভুক্ত থাকে যা আপনাকে শেখার বিষয়গুলোতে গাইড করবে:
|
||||
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
|
||||
প্রতিটি পাঠে একটি কাজ, জ্ঞানের পরীক্ষা এবং একটি চ্যালেঞ্জ থাকে, যা আপনাকে নিম্নলিখিত বিষয় শিখতে সাহায্য করবে:
|
||||
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
|
||||
- টেক্সট এবং ইমেজ অ্যাপ জেনারেশন
|
||||
- সার্চ অ্যাপস
|
||||
|
||||
শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন!
|
||||
|
||||
|
||||
শুরু করতে ভিজিট করুন [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
|
||||
|
||||
## 🌱 শুরু করা
|
||||
|
||||
> **শিক্ষকগণ**, আমরা [কিছু পরামর্শ](for-teachers.md) অন্তর্ভুক্ত করেছি এই কারিকুলাম কীভাবে ব্যবহার করবেন। আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) আপনার মতামত জানাতে ভালো লাগবে!
|
||||
> **শিক্ষকবৃন্দ**, আমরা এই পাঠক্রমটি কীভাবে ব্যবহার করবেন তার জন্য কিছু পরামর্শ [এখানে](for-teachers.md) দিয়েছি। আপনার মতামত আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) দিতে দয়া করে ভুলবেন না!
|
||||
|
||||
**[শিক্ষার্থীরা](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, প্রি-লেকচার কুইজ দিয়ে শুরু করুন এবং লেকচার মেটেরিয়াল পড়ুন, বিভিন্ন কার্যক্রম সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজ দিয়ে আপনার জ্ঞান যাচাই করুন।
|
||||
**[শিক্ষার্থীগণ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, একটি প্রাক-লেকচার কুইজ থেকে শুরু করুন এবং তারপর লেকচার পঠন, বিভিন্ন কার্যাবলী সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজ দিয়ে আপনার বুঝ বজায় আছে কিনা পরীক্ষা করুন।
|
||||
|
||||
আপনার শেখার অভিজ্ঞতা উন্নত করতে, আপনার সহপাঠীদের সাথে প্রকল্পগুলোতে কাজ করুন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনা উৎসাহিত করা হয় যেখানে আমাদের মডারেটর টিম আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে।
|
||||
আপনার শেখার অভিজ্ঞতাকে উন্নত করতে, আপনার সহপাঠীদের সাথে প্রকল্পে কাজ করতে সংযুক্ত হোন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনাগুলো উৎসাহিত করা হয় যেখানে আমাদের মোডারেটর দল আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে।
|
||||
|
||||
আপনার শিক্ষা আরও এগিয়ে নিতে, আমরা [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করার জন্য অত্যন্ত সুপারিশ করি যেখানে অতিরিক্ত শিক্ষার উপকরণ পাওয়া যাবে।
|
||||
আপনার শিক্ষাকে আরও সমৃদ্ধ করার জন্য, আমরা অতিরিক্ত পাঠ্যবস্তু পাওয়ার জন্য [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) অন্বেষণ করার পরামর্শ দিই।
|
||||
|
||||
### 📋 আপনার পরিবেশ সেট আপ করা
|
||||
### 📋 পরিবেশ সেট আপ করা
|
||||
|
||||
এই কারিকুলামের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, কোনো ইনস্টল প্রয়োজন নেই পরিবেশ_) বা আপনার কম্পিউটারে লোকালভাবে একটি টেক্সট এডিটর যেমন [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করতে পারেন।
|
||||
এই পাঠক্রমের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি এই পাঠক্রমটি চালাতে পারেন একটি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, ইনস্টলেশনের প্রয়োজন নেই এমন পরিবেশ_) অথবা স্থানীয়ভাবে আপনার কম্পিউটারে [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) মত একটি টেক্সট এডিটর ব্যবহার করে।
|
||||
|
||||
#### আপনার রিপোজিটরি তৈরি করুন
|
||||
আপনার কাজ সহজে সংরক্ষণ করার জন্য, আপনার নিজস্ব এই রিপোজিটরির একটি কপি তৈরি করার সুপারিশ করা হয়। আপনি পৃষ্ঠার শীর্ষে **Use this template** বোতামে ক্লিক করে এটি করতে পারেন। এটি আপনার GitHub অ্যাকাউন্টে কারিকুলামের একটি কপি সহ একটি নতুন রিপোজিটরি তৈরি করবে।
|
||||
#### আপনার রিপোজিটোরি তৈরি করুন
|
||||
আপনার কাজ সঞ্চয় সহজ করতে, এই রিপোজিটোরির একটি নিজস্ব কপি তৈরি করা সুপারিশ করা হয়। এটি করতে আপনি পাতার উপরের দিকে **Use this template** বোতামে ক্লিক করতে পারেন। এটি আপনার GitHub একাউন্টে পাঠক্রমের একটি কপি সহ একটি নতুন রিপোজিটোরি তৈরি করবে।
|
||||
|
||||
নিচের ধাপগুলো অনুসরণ করুন:
|
||||
1. **রিপোজিটরি ফর্ক করুন**: এই পৃষ্ঠার উপরের ডানদিকে "Fork" বোতামে ক্লিক করুন।
|
||||
2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
নিম্ন ধাপগুলো অনুসরণ করুন:
|
||||
1. **রিপোজিটোরি ফর্ক করুন**: এই পৃষ্ঠার ডানদিকে উপরের কোণে "Fork" বোতামে ক্লিক করুন।
|
||||
2. **রিপোজিটোরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
||||
|
||||
#### Codespace-এ কারিকুলাম চালানো
|
||||
#### Codespace এ পাঠক্রম চালানো
|
||||
|
||||
আপনার তৈরি করা এই রিপোজিটরির কপিতে, **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজ করার জন্য একটি নতুন Codespace তৈরি করবে।
|
||||
আপনি যে কপি তৈরি করেছেন সেখানে **Code** বোতামে ক্লিক করে **Open with Codespaces** নির্বাচন করুন। এটি আপনার জন্য একটি নতুন Codespace তৈরি করবে যেখানে আপনি কাজ করবেন।
|
||||
|
||||
|
||||
|
||||
|
||||
#### আপনার কম্পিউটারে লোকালভাবে কারিকুলাম চালানো
|
||||
#### আপনার কম্পিউটারে লোকালি পাঠক্রম চালানো
|
||||
|
||||
আপনার কম্পিউটারে এই কারিকুলাম চালানোর জন্য, একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন হবে। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা এবং টুলস অফ দ্য ট্রেডের পরিচিতি](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে এই টুলগুলোর বিভিন্ন বিকল্পের মাধ্যমে গাইড করবে যাতে আপনি আপনার জন্য সেরা বিকল্পটি বেছে নিতে পারেন।
|
||||
এই পাঠক্রমটি লোকালি চালানোর জন্য আপনার টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন হবে। আমাদের প্রথম পাঠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে বিভিন্ন টুল নির্বাচন করতে সহায়তা করবে যা আপনার জন্য সেরা কাজ করবে।
|
||||
|
||||
আমাদের সুপারিশ হলো [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করা, যা একটি বিল্ট-ইন [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) সহ আসে। আপনি [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এখান থেকে ডাউনলোড করতে পারেন।
|
||||
আমরা সুপারিশ করি [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করতে, যা একটি অন্তর্নির্মিত [টার্মিনাল](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) রয়েছে। আপনি Visual Studio Code [এখানে থেকে ডাউনলোড করতে পারেন](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)।
|
||||
|
||||
1. আপনার রিপোজিটরি আপনার কম্পিউটারে ক্লোন করুন। আপনি **Code** বোতামে ক্লিক করে URL কপি করে এটি করতে পারেন:
|
||||
1. আপনার রিপোজিটোরি আপনার কম্পিউটারে ক্লোন করুন। এটি করতে **Code** বোতামে ক্লিক করে URL কপি করুন:
|
||||
|
||||
[CodeSpace](./images/createcodespace.png)
|
||||
|
||||
তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)-এর মধ্যে [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, যেখানে `<your-repository-url>` আপনার কপি করা URL দিয়ে প্রতিস্থাপন করুন:
|
||||
তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এর মধ্যে [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, `<your-repository-url>` এর জায়গায় আপনি যা URL কপি করেছেন তা বসান:
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
```
|
||||
|
||||
2. Visual Studio Code-এ ফোল্ডারটি খুলুন। আপনি **File** > **Open Folder**-এ ক্লিক করে এবং ক্লোন করা ফোল্ডারটি নির্বাচন করে এটি করতে পারেন।
|
||||
2. Visual Studio Code-এ ফোল্ডারটি খুলুন। এটি করার জন্য, **File** > **Open Folder** ক্লিক করুন এবং আপনি যে ফোল্ডারটি ক্লোন করেছেন তা নির্বাচন করুন।
|
||||
|
||||
|
||||
> সুপারিশকৃত Visual Studio Code এক্সটেনশন:
|
||||
> সুপারিশকৃত Visual Studio Code এক্সটেনশনসমূহ:
|
||||
>
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-এর মধ্যে HTML পৃষ্ঠাগুলো প্রিভিউ করার জন্য
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - কোড দ্রুত লিখতে সাহায্য করে
|
||||
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-এর মধ্যে HTML পেজ প্রিভিউ করার জন্য
|
||||
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - দ্রুত কোড লেখাতে সাহায্যের জন্য
|
||||
|
||||
## 📂 প্রতিটি পাঠে অন্তর্ভুক্ত:
|
||||
## 📂 প্রতিটি পাঠের মধ্যে রয়েছে:
|
||||
|
||||
- ঐচ্ছিক স্কেচনোট
|
||||
- ঐচ্ছিক সম্পূরক ভিডিও
|
||||
- প্রাক-পাঠ উষ্ণতা কুইজ
|
||||
- লিখিত পাঠ
|
||||
- প্রকল্প-ভিত্তিক পাঠের জন্য, প্রকল্প তৈরি করার ধাপে ধাপে নির্দেশিকা
|
||||
- ঐচ্ছিক অতিরিক্ত ভিডিও
|
||||
- পাঠের আগের ওয়ার্মআপ কুইজ
|
||||
- লিখিত লেশন
|
||||
- প্রজেক্ট ভিত্তিক লেশনের জন্য প্রজেক্ট তৈরির ধাপে ধাপে নির্দেশিকা
|
||||
- জ্ঞান যাচাই
|
||||
- একটি চ্যালেঞ্জ
|
||||
- সম্পূরক পাঠ্য
|
||||
- অতিরিক্ত পড়াশোনা
|
||||
- অ্যাসাইনমেন্ট
|
||||
- [পোস্ট-পাঠ কুইজ](https://ff-quizzes.netlify.app/web/)
|
||||
- [পোস্ট-লেশন কুইজ](https://ff-quizzes.netlify.app/web/)
|
||||
|
||||
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারে অন্তর্ভুক্ত, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো [এখানে](https://ff-quizzes.netlify.app/web/) পাওয়া যাবে। Quiz-app লোকালভাবে চালানো বা Azure-এ ডিপ্লয় করা যেতে পারে; `quiz-app` ফোল্ডারের নির্দেশনা অনুসরণ করুন।
|
||||
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারের মধ্যে রয়েছে, মোট ৪৮টি কুইজ যেগুলোর প্রতিটিতে তিনটি প্রশ্ন আছে। এগুলো উপলব্ধ [এখানে](https://ff-quizzes.netlify.app/web/); কুইজ অ্যাপটি লোকালি চালানো যায় অথবা Azure এ প্রকাশ করা যায়; বিস্তারিত নির্দেশনা `quiz-app` ফোল্ডারে রয়েছে।
|
||||
|
||||
## 🗃️ পাঠসমূহ
|
||||
## 🗃️ লেশনসমূহ
|
||||
|
||||
| | প্রকল্পের নাম | শেখানো ধারণা | শেখার উদ্দেশ্য | লিঙ্কযুক্ত পাঠ | লেখক |
|
||||
| | প্রকল্পের নাম | শিক্ষিত ধারণাসমূহ | শেখার উদ্দেশ্য | যুক্ত লশন | লেখক |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | শুরু করা | প্রোগ্রামিং এবং টুলসের পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার মৌলিক ভিত্তি এবং পেশাদার ডেভেলপারদের কাজের জন্য সহায়ক সফটওয়্যার সম্পর্কে জানুন | [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | শুরু করা | GitHub-এর মৌলিক বিষয়, দল নিয়ে কাজ করা | আপনার প্রকল্পে GitHub কীভাবে ব্যবহার করবেন, কোড বেসে অন্যদের সাথে সহযোগিতা করবেন | [GitHub-এর পরিচিতি](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | শুরু করা | অ্যাক্সেসিবিলিটি | ওয়েব অ্যাক্সেসিবিলিটির মৌলিক বিষয়গুলি শিখুন | [অ্যাক্সেসিবিলিটির মৌলিক বিষয়](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS মৌলিক বিষয় | জাভাস্ক্রিপ্ট ডেটা টাইপ | জাভাস্ক্রিপ্ট ডেটা টাইপের মৌলিক বিষয়গুলি | [ডেটা টাইপ](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS মৌলিক বিষয় | ফাংশন এবং মেথড | অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনা করতে ফাংশন এবং মেথড সম্পর্কে জানুন | [ফাংশন এবং মেথড](./2-js-basics/2-functions-methods/README.md) | Jasmine এবং Christopher |
|
||||
| 06 | JS মৌলিক বিষয় | জাভাস্ক্রিপ্ট দিয়ে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে আপনার কোডে শর্ত তৈরি করতে শিখুন | [সিদ্ধান্ত নেওয়া](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS মৌলিক বিষয় | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [টেরারিয়াম](./3-terrarium/solution/README.md) | HTML অনুশীলনে | একটি অনলাইন টেরারিয়াম তৈরি করতে HTML তৈরি করুন, লেআউট তৈরি করার উপর ফোকাস | [HTML-এর পরিচিতি](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | CSS অনুশীলনে | অনলাইন টেরারিয়াম স্টাইল করতে CSS তৈরি করুন, CSS-এর মৌলিক বিষয়গুলির উপর ফোকাস সহ পৃষ্ঠাকে রেসপন্সিভ করুন | [CSS-এর পরিচিতি](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [টেরারিয়াম](./3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে একটি ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কার্যকর করতে জাভাস্ক্রিপ্ট তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর ফোকাস | [জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [টাইপিং গেম](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি করুন | কীবোর্ড ইভেন্ট ব্যবহার করে আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানোর পদ্ধতি শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কীভাবে কাজ করে, তাদের ইতিহাস এবং একটি ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি তৈরি করার পদ্ধতি শিখুন | [ব্রাউজার সম্পর্কে](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি API কল করা এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে একটি API কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদান তৈরি করুন | [API, ফর্ম এবং লোকাল স্টোরেজ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশন সম্পর্কে জানুন | [ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [স্পেস গেম](./6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে জানুন, একটি গেম তৈরি করার প্রস্তুতি হিসাবে | [উন্নত গেম ডেভেলপমেন্টের পরিচিতি](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস API সম্পর্কে জানুন, যা স্ক্রিনে উপাদান আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রিনে উপাদান সরানো | কার্টেসিয়ান কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে উপাদান কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [উপাদান সরানো](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে একে অপরের সাথে সংঘর্ষ করতে এবং প্রতিক্রিয়া জানাতে তৈরি করুন এবং গেমের পারফরম্যান্স নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করুন | [স্কোর রাখা](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু করা | গেম শেষ করা এবং পুনরায় শুরু করার পদ্ধতি শিখুন, যার মধ্যে অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান পুনরায় সেট করা অন্তর্ভুক্ত | [শেষ করার শর্ত](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে একটি মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচার তৈরি করার কাঠামো তৈরি করার পদ্ধতি শিখুন | [HTML টেমপ্লেট এবং রুট](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | ফর্ম তৈরি এবং ভ্যালিডেশন রুটিন পরিচালনা সম্পর্কে জানুন | [ফর্ম](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহারের পদ্ধতি | আপনার অ্যাপে ডেটা কীভাবে প্রবাহিত হয়, কীভাবে এটি সংগ্রহ করবেন, সংরক্ষণ করবেন এবং নিষ্পত্তি করবেন | [ডেটা](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্টের ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করবেন তা শিখুন | [স্টেট ম্যানেজমেন্ট](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| 25 | [ব্রাউজার/VScode কোড](../../8-code-editor) | VScode নিয়ে কাজ | কোড এডিটর ব্যবহার করা শিখুন| [VScode কোড এডিটর ব্যবহার করুন](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| 26 | [AI অ্যাসিস্ট্যান্ট](./9-chat-project/README.md) | AI নিয়ে কাজ | নিজের AI অ্যাসিস্ট্যান্ট তৈরি করা শিখুন | [AI অ্যাসিস্ট্যান্ট প্রকল্প](./9-chat-project/README.md) | Chris |
|
||||
|
||||
## 🏫 শিক্ষাদান পদ্ধতি
|
||||
|
||||
আমাদের পাঠ্যক্রম দুটি মূল শিক্ষাদান নীতির উপর ভিত্তি করে তৈরি:
|
||||
* প্রকল্প-ভিত্তিক শিক্ষা
|
||||
| 01 | শুরু করা হচ্ছে | প্রোগ্রামিং এবং পেশাগত সরঞ্জাম পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার প্রাথমিক ভিত্তি এবং পেশাদার ডেভেলপারদের কাজে সাহায্যকারী সফটওয়্যার সম্বন্ধে শেখা | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | শুরু করা হচ্ছে | গিটহাবের বুনিয়াদি, দলের সাথে কাজ করার উপর | আপনার প্রকল্পে গিটহাব ব্যবহার করা এবং অন্যদের সাথে কোড বেসে সহযোগিতা করা শেখা | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | শুরু করা হচ্ছে | অঙ্গ পরিপAccessibility | ওয়েব অ্যাক্সেসিবিলিটির মূল বিষয়গুলি শেখা | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | জেএস বেসিকস | JavaScript ডেটা টাইপস | জাভাস্ক্রিপ্ট ডেটা টাইপের মূল বিষয়গুলি | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | জেএস বেসিকস | ফাংশনস এবং মেথডস | একটি অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনার জন্য ফাংশন এবং মেথড সম্বন্ধে শেখা | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | জেএস বেসিকস | জেএস দিয়ে সিদ্ধান্ত নেওয়া | আপনার কোডে শর্ত তৈরি করার জন্য সিদ্ধান্ত গ্রহণ পদ্ধতি শেখা | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | জেএস বেসিকস | অ্যারে এবং লুপস | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটার সঙ্গে কাজ করা | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [টেরারিয়াম](./3-terrarium/solution/README.md) | বাস্তবে HTML | একটি অনলাইন টেরারিয়াম তৈরির জন্য HTML তৈরি করুন, লেআউট তৈরির উপর গুরুত্ব দিয়ে | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | বাস্তবে CSS | অনলাইন টেরারিয়ামের স্টাইল করার জন্য CSS তৈরি করুন, পেজকে রেস্পন্সিভ করার বুনিয়াদি সহ | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| ১০ | [টেরারিয়াম](./3-terrarium/solution/README.md) | JavaScript ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করানোর জন্য JavaScript তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর গুরুত্ব দিন | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| ১১ | [টাইপিং গেম](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি করা | কীবোর্ড ইভেন্ট ব্যবহার করে জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানো শেখা | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
|
||||
| ১২ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কীভাবে কাজ করে, এর ইতিহাস, এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি স্ক্যাফল্ড করা শেখা | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| ১৩ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি, API কল এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ | ব্রাউজার এক্সটেনশনের JavaScript উপাদান তৈরি করুন, লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে API কল করার জন্য | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| ১৪ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনার জন্য ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফর্মেন্স ও কিছু অপটিমাইজেশন সম্পর্কে জানুন | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| ১৫ | [স্পেস গেম](./6-space-game/solution/README.md) | আরো উন্নত গেম ডেভেলপমেন্ট জাভাস্ক্রিপ্ট দিয়ে | ক্লাস এবং কম্পোজিশন দিয়ে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে শেখা, গেম তৈরি করার প্রস্তুতিতে | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
|
||||
| ১৬ | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে আঁকা | স্ক্রিনে উপাদান আঁকার জন্য ক্যানভাস API সম্বন্ধে শেখা | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| ১৭ | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রিনের চারপাশে উপাদান সরানো | কিভাবে উপাদানগুলো Cartesian কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে গতি পায় তা আবিষ্কার করুন | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| ১৮ | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ শনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলোকে একে অপরের সঙ্গে সংঘর্ষ করানো এবং পারফরম্যান্স নিশ্চিত করার জন্য কুলডাউন ফাংশন প্রদান করুন | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| ১৯ | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করা | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| ২০ | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু | গেম শেষে এবং পুনরায় শুরু করার পদ্ধতি শেখা, অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান রিসেট করা | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
|
||||
| ২১ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | HTML টেমপ্লেট এবং ওয়েব অ্যাপে রুটিং | মাল্টিপেজ ওয়েবসাইট আর্কিটেকচারের স্ক্যাফল্ড তৈরি করা শেখা রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| ২২ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি | ফর্ম তৈরি করা এবং ভ্যালিডেশন রুটিন হ্যান্ডেল করা শেখা | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
|
||||
| ২৩ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের ডেটা প্রবাহ, কিভাবে ফেচ, সংরক্ষণ এবং অপসারণ করতে হয় শেখা | [Data](./7-bank-project/3-data/README.md) | Yohan |
|
||||
| ২৪ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্ট ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং কীভাবে প্রোগ্রাম্যাটিক্যালি তা পরিচালনা করতে হয় শেখা | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
|
||||
| ২৫ | [Browser/VScode Code](../../8-code-editor) | VScode এর সাথে কাজ করা | কোড এডিটর ব্যবহার শেখা| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
|
||||
| ২৬ | [AI সহযোগী](./9-chat-project/README.md) | AI এর সাথে কাজ করা | নিজস্ব AI সহকারী তৈরি শেখা | [AI Assistant project](./9-chat-project/README.md) | Chris |
|
||||
|
||||
## 🏫 শিক্ষা ব্যবস্থা
|
||||
|
||||
আমাদের পাঠ্যক্রম দুইটি মূল শিক্ষামূলক নীতির উপর ভিত্তি করে তৈরি:
|
||||
* প্রজেক্ট-ভিত্তিক শিক্ষা
|
||||
* ঘন ঘন কুইজ
|
||||
|
||||
এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS-এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুল এবং কৌশলগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্তিশালী ধারণা অর্জন করবে।
|
||||
প্রোগ্রামটি JavaScript, HTML, এবং CSS এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি বর্তমান ওয়েব ডেভেলপারদের দ্বারা ব্যবহৃত সর্বশেষ সরঞ্জাম এবং প্রযুক্তিগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-শৈলী গেম এবং ব্যবসায়ের জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে কলমে অভিজ্ঞতা অর্জন করবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্টের একটি দৃঢ় ধারণা অর্জন করবে।
|
||||
|
||||
> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে Microsoft Learn-এ নিতে পারেন!
|
||||
> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি লেশন Microsoft Learn-এ [শিখন পথ](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসাবে নিতে পারেন!
|
||||
|
||||
প্রকল্পের সাথে সামঞ্জস্য রেখে বিষয়বস্তু নিশ্চিত করার মাধ্যমে শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় করা হয়েছে এবং ধারণার ধারণক্ষমতা বৃদ্ধি পাবে। আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি পরিচিত করার জন্য কয়েকটি স্টার্টার পাঠ লিখেছি, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
|
||||
বিষয়বস্তুকে প্রজেক্টের সাথে মিলিয়ে শিক্ষার্থীদের জন্য এই প্রক্রিয়াটি আরও আকর্ষণীয় ও ধারণার ধারণক্ষমতা বৃদ্ধি করে। আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি পরিচিত করার জন্য কয়েকটি স্টার্টার লেশন লিখেছি, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সিরিজের ভিডিওতে সাথে সংযুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
|
||||
|
||||
এছাড়াও, একটি ক্লাসের আগে একটি কম ঝুঁকির কুইজ শিক্ষার্থীর একটি বিষয় শেখার উদ্দেশ্য নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণক্ষমতা নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হতে ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট থেকে শুরু হয় এবং ১২-সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে।
|
||||
এছাড়া, ক্লাসের আগে একটি হালকা কুইজ শিক্ষার্থীদের শেখার মনোভাব গড়ে তোলে, এবং ক্লাসের পরে দ্বিতীয় কুইজ আরো ধরে রাখার নিশ্চয়তা দেয়। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হওয়ার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিক গ্রহণ করা যেতে পারে। প্রজেক্টগুলো ছোট থেকে শুরু হয়ে ১২-সপ্তাহের চক্রের শেষে ক্রমবর্ধমান জটিল হয়ে ওঠে।
|
||||
|
||||
যদিও আমরা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি পরিচয় করানোর বিষয়টি এড়িয়ে গেছি, ওয়েব ডেভেলপার হিসাবে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে প্রয়োজনীয় মৌলিক দক্ষতার উপর মনোযোগ কেন্দ্রীভূত করতে, এই পাঠ্যক্রমটি সম্পন্ন করার একটি ভাল পরবর্তী পদক্ষেপ হবে Node.js সম্পর্কে শেখা, একটি ভিডিও সংগ্রহের মাধ্যমে: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
|
||||
আমরা সচেতনভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক পরিচয় করানো এড়িয়ে গেছি যাতে একজন ওয়েব ডেভেলপার হওয়ার জন্য প্রাথমিক দক্ষতায় মনোযোগ দেয়া যায়, এবং এই পাঠ্যক্রম সম্পূর্ণ করার পর পরবর্তী ভালো ধাপ হবে Node.js শেখা যা আরেকটি ভিডিও সিরিজ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" দ্বারা করা যেতে পারে।
|
||||
|
||||
> আমাদের [Code of Conduct](CODE_OF_CONDUCT.md) এবং [Contributing](CONTRIBUTING.md) নির্দেশিকা দেখুন। আমরা আপনার গঠনমূলক মতামতকে স্বাগত জানাই!
|
||||
> আমাদের [আচার-আচরণ সংক্রান্ত নির্দেশিকা](CODE_OF_CONDUCT.md) এবং [অবদান সংক্রান্ত নির্দেশিকা](CONTRIBUTING.md) ভিজিট করুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়াকে স্বাগত জানাই!
|
||||
|
||||
|
||||
## 🧭 অফলাইন অ্যাক্সেস
|
||||
## 🧭 অফলাইনে প্রবেশাধিকার
|
||||
|
||||
আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশনটি অফলাইনে চালাতে পারেন। এই রিপোটি ফর্ক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), এবং তারপর এই রিপোর রুট ফোল্ডারে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০-এ পরিবেশন করা হবে: `localhost:3000`।
|
||||
[Docsify](https://docsify.js.org/#/) ব্যবহার করে আপনি এই ডকুমেন্টেশন অফলাইনে চালাতে পারেন। এই রিপোটি ফরক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), তারপর এই রিপোর মূল ফোল্ডারে গিয়ে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০ এ সার্ভ হবে: `localhost:3000`।
|
||||
|
||||
## 📘 PDF
|
||||
|
||||
সমস্ত পাঠের একটি PDF [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে।
|
||||
সমস্ত লেশনের একটি PDF [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে।
|
||||
|
||||
|
||||
## 🎒 অন্যান্য কোর্স
|
||||
## 🎒 অন্যান্য কোর্সসমূহ
|
||||
আমাদের দল অন্যান্য কোর্সও তৈরি করে! দেখুন:
|
||||
|
||||
আমাদের দল অন্যান্য কোর্স তৈরি করে! দেখুন:
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
|
||||
### LangChain
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### জেনারেটিভ এআই সিরিজ
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Generative AI Series
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### মূল শিক্ষামূলক কোর্স
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Core Learning
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Copilot Series
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
|
||||
|
||||
### কোপাইলট সিরিজ
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
## সাহায্য নেওয়া
|
||||
|
||||
## সাহায্য পাওয়া
|
||||
যদি আপনি আটকে যান বা AI অ্যাপ্লিকেশন তৈরি করার বিষয়ে কোনও প্রশ্ন থাকে, তাহলে MCP সম্পর্কিত আলোচনায় অন্যান্য শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সঙ্গে যোগ দিন। এটি একটি সহায়ক সম্প্রদায় যেখানে প্রশ্নের স্বাগত এবং জ্ঞান বিনামূল্যে ভাগ করা হয়।
|
||||
|
||||
যদি আপনি আটকে যান বা এআই অ্যাপ তৈরি করার বিষয়ে কোনো প্রশ্ন থাকে, এমসিপি নিয়ে আলোচনা করতে অন্যান্য শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সাথে যোগ দিন। এটি একটি সহায়ক কমিউনিটি যেখানে প্রশ্ন করা স্বাগত এবং জ্ঞান বিনামূল্যে ভাগ করা হয়।
|
||||
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
[](https://discord.gg/nTYy5BXMWG)
|
||||
|
||||
যদি কোনো পণ্য সম্পর্কিত মতামত বা ত্রুটি থাকে, তাহলে এখানে যান:
|
||||
আপনার যদি প্রোডাক্ট ফিডব্যাক বা কোনও ত্রুটি থেকে থাকে, তাহলে যান:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
[](https://aka.ms/foundry/forum)
|
||||
|
||||
## লাইসেন্স
|
||||
## লাইসেন্স
|
||||
|
||||
এই রিপোজিটরি MIT লাইসেন্সের অধীনে লাইসেন্সকৃত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন।
|
||||
এই রিপোজিটরিটি MIT লাইসেন্সের অধীনে লাইসেন্সভুক্ত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন।
|
||||
|
||||
---
|
||||
|
||||
<!-- 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 -->
|
||||
@ -1,31 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
|
||||
"translation_date": "2025-10-03T09:10:49+00:00",
|
||||
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
||||
"translation_date": "2026-01-06T17:15:50+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "hi"
|
||||
}
|
||||
-->
|
||||
# असाइनमेंट: आधुनिक वेब विकास उपकरणों की खोज
|
||||
|
||||
## निर्देश
|
||||
|
||||
वेब डेवलपर के लिए कई उपकरण उपलब्ध हैं, जो [MDN दस्तावेज़ में क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पर सूचीबद्ध हैं। **तीन उपकरण** चुनें जो **इस पाठ में शामिल नहीं हैं** (पाठ सामग्री या विशिष्ट उपकरणों को छोड़कर), और समझाएं कि **क्यों** एक वेब डेवलपर प्रत्येक उपकरण का उपयोग करेगा। प्रत्येक श्रेणी के लिए एक उपकरण खोजें। प्रत्येक के लिए, इसके आधिकारिक दस्तावेज़ का लिंक साझा करें (MDN पर उपयोग किए गए उदाहरण का नहीं)।
|
||||
वेब विकास इकोसिस्टम में सैकड़ों विशिष्ट उपकरण होते हैं जो डेवलपर्स को एप्लिकेशन को प्रभावी ढंग से बनाने, परीक्षण करने, और बनाए रखने में मदद करते हैं। आपका कार्य उन उपकरणों का अध्ययन और समझ करना है जो इस पाठ में कवर किए गए उपकरणों के पूरक हैं।
|
||||
|
||||
**आपका मिशन:** ऐसे **तीन उपकरणों** का चयन करें जो **इस पाठ में कवर नहीं किए गए हैं** (पहले से सूचीबद्ध कोड संपादक, ब्राउज़र या कमांड लाइन उपकरण चुनने से बचें)। उन उपकरणों पर ध्यान दें जो आधुनिक वेब विकास वर्कफ़्लो में विशिष्ट समस्याओं को हल करते हैं।
|
||||
|
||||
**प्रत्येक उपकरण के लिए, प्रदान करें:**
|
||||
|
||||
1. **उपकरण का नाम और श्रेणी** (जैसे "Figma - डिज़ाइन टूल" या "Jest - परीक्षण फ़्रेमवर्क")
|
||||
2. **उद्देश्य और लाभ** - 2-3 वाक्यों में समझाएँ कि एक वेब डेवलपर इस उपकरण का उपयोग क्यों करेगा और यह कौन सी समस्याएँ हल करता है
|
||||
3. **आधिकारिक दस्तावेज़ीकरण लिंक** - उपकरण के आधिकारिक दस्तावेज़ीकरण या वेबसाइट का लिंक प्रदान करें (केवल ट्यूटोरियल साइट्स नहीं)
|
||||
4. **वास्तविक दुनिया का संदर्भ** - उल्लेख करें कि यह उपकरण पेशेवर विकास वर्कफ़्लो में कैसे फिट बैठता है
|
||||
|
||||
## सुझाए गए उपकरण श्रेणियाँ
|
||||
|
||||
इन श्रेणियों से उपकरणों को एक्सप्लोर करने पर विचार करें:
|
||||
|
||||
| श्रेणी | उदाहरण | वे क्या करते हैं |
|
||||
|----------|----------|--------------|
|
||||
| **बिल्ड टूल्स** | Vite, Webpack, Parcel, esbuild | तेज विकास सर्वर के साथ उत्पादन के लिए कोड को बंडल और अनुकूलित करें |
|
||||
| **परीक्षण फ़्रेमवर्क्स** | Vitest, Jest, Cypress, Playwright | सुनिश्चित करें कि कोड सही काम करता है और परिनियोजन से पहले बग पकड़ें |
|
||||
| **डिज़ाइन टूल्स** | Figma, Adobe XD, Penpot | सहकारी रूप से मॉकअप, प्रोटोटाइप और डिज़ाइन सिस्टम बनाएं |
|
||||
| **परिनियोजन प्लेटफ़ॉर्म** | Netlify, Vercel, Cloudflare Pages | स्वचालित CI/CD के साथ वेबसाइटों की होस्टिंग और वितरण करें |
|
||||
| **संस्करण नियंत्रण** | GitHub, GitLab, Bitbucket | कोड परिवर्तनों, सहयोग और प्रोजेक्ट वर्कफ़्लो का प्रबंधन करें |
|
||||
| **CSS फ़्रेमवर्क्स** | Tailwind CSS, Bootstrap, Bulma | पूर्व-निर्मित घटक पुस्तकालयों के साथ स्टाइलिंग को तेजी से करें |
|
||||
| **पैकेज मैनेजर** | npm, pnpm, Yarn | कोड लाइब्रेरी और निर्भरताओं को इंस्टॉल और प्रबंधित करें |
|
||||
| **सुलभता उपकरण** | axe-core, Lighthouse, Pa11y | समावेशी डिज़ाइन और WCAG अनुपालन के लिए परीक्षण करें |
|
||||
| **API विकास** | Postman, Insomnia, Thunder Client | विकास के दौरान API का परीक्षण और दस्तावेज़ीकरण करें |
|
||||
|
||||
## प्रारूप आवश्यकताएँ
|
||||
|
||||
**प्रत्येक उपकरण के लिए:**
|
||||
```
|
||||
### [Tool Name] - [Category]
|
||||
|
||||
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
||||
|
||||
**Documentation:** [Official website/documentation link]
|
||||
|
||||
**Workflow Integration:** [1 sentence about how it fits into development process]
|
||||
```
|
||||
|
||||
## गुणवत्ता दिशानिर्देश
|
||||
|
||||
**प्रारूप:**
|
||||
- उपकरण का नाम
|
||||
- वेब डेवलपर इसका उपयोग क्यों करेगा (2-3 वाक्य)
|
||||
- दस्तावेज़ का लिंक
|
||||
- **वर्तमान उपकरण चुनें**: ऐसे उपकरण चुनें जो सक्रिय रूप से बनाए रखे जाते हैं और 2025 में व्यापक रूप से इस्तेमाल किए जाते हैं
|
||||
- **मूल्य पर ध्यान दें**: केवल उपकरण क्या करता है यह न बताएं, बल्कि इसके विशिष्ट लाभ समझाएं
|
||||
- **पेशेवर संदर्भ**: उन उपकरणों पर विचार करें जिनका उपयोग विकास टीम करती है, केवल व्यक्तिगत हॉबीइस्ट द्वारा नहीं
|
||||
- **विविध चयन**: पारिस्थितिकी तंत्र की व्यापकता दिखाने के लिए विभिन्न श्रेणियों से उपकरण चुनें
|
||||
- **आधुनिक प्रासंगिकता**: उन उपकरणों को प्राथमिकता दें जो वर्तमान वेब विकास रुझानों और सर्वोत्तम प्रथाओं के अनुरूप हों
|
||||
|
||||
**लंबाई:**
|
||||
- प्रत्येक व्याख्या 2-3 वाक्य की होनी चाहिए।
|
||||
## मानदंड
|
||||
|
||||
## मूल्यांकन मानदंड
|
||||
| उत्कृष्ट | अच्छा | सुधार की जरूरत |
|
||||
|-----------|------|-------------------|
|
||||
| **स्पष्ट रूप से बताया कि डेवलपर्स प्रत्येक उपकरण का उपयोग क्यों करते हैं और यह किन समस्याओं को हल करता है** | **बताया कि उपकरण क्या करता है लेकिन उसके मूल्य के संदर्भ में कुछ विवरण छूट गए** | **केवल उपकरणों की सूची दी लेकिन उनके उद्देश्य या लाभ नहीं बताए** |
|
||||
| **सभी उपकरणों के आधिकारिक दस्तावेज़ीकरण लिंक दिए** | **प्राय: आधिकारिक लिंक दिए, 1-2 ट्यूटोरियल साइट्स शामिल कीं** | **मुख्य रूप से ट्यूटोरियल साइट्स पर निर्भर रहे, आधिकारिक दस्तावेज़ के बजाय** |
|
||||
| **विभिन्न श्रेणियों से वर्तमान पेशेवर उपकरण चुने** | **अच्छे उपकरण चुने पर श्रेणियों की विविधता कम थी** | **पुराने उपकरण चुने या केवल एक श्रेणी से** |
|
||||
| **यह दिखाया कि उपकरण विकास वर्कफ़्लो में कैसे फिट होते हैं** | **पेशेवर संदर्भ का कुछ समझ दिखाई** | **केवल उपकरण फीचर्स पर ध्यान दिया, वर्कफ़्लो संदर्भ नहीं दिया** |
|
||||
|
||||
उत्कृष्ट | पर्याप्त | सुधार की आवश्यकता
|
||||
--- | --- | -- |
|
||||
समझाया कि वेब डेवलपर उपकरण का उपयोग क्यों करेगा | समझाया कि डेवलपर उपकरण का उपयोग कैसे करेगा, लेकिन क्यों नहीं | उल्लेख नहीं किया कि डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा |
|
||||
> 💡 **अनुसंधान सुझाव**: वेब डेवलपर्स के लिए जॉब पोस्टिंग देखें, लोकप्रिय डेवलपर सर्वेक्षण जांचें, या GitHub पर सफल ओपन-सोर्स प्रोजेक्ट्स की निर्भरताओं का पता लगाएं!
|
||||
|
||||
---
|
||||
|
||||
<!-- 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 -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,28 +1,261 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a258597a194e77d4fd469b3cd976b29e",
|
||||
"translation_date": "2025-08-24T12:57:28+00:00",
|
||||
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
||||
"translation_date": "2026-01-06T17:11:08+00:00",
|
||||
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
||||
"language_code": "hi"
|
||||
}
|
||||
-->
|
||||
# एक असुलभ साइट का विश्लेषण करें
|
||||
# व्यापक वेबसाइट पहुँच परीक्षण
|
||||
|
||||
## निर्देश
|
||||
|
||||
ऐसी वेबसाइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है और उसकी सुलभता को सुधारने के लिए एक कार्य योजना बनाएं।
|
||||
आपका पहला कार्य होगा इस साइट की पहचान करना, बिना किसी विश्लेषणात्मक उपकरण का उपयोग किए यह बताना कि यह साइट किस प्रकार असुलभ है, और फिर इसे Lighthouse विश्लेषण में जमा करना।
|
||||
इस विश्लेषण के परिणामों का एक पीडीएफ कैप्चर करें और एक विस्तृत योजना तैयार करें जिसमें कम से कम दस बिंदु हों, जो यह दिखाएं कि साइट को कैसे सुधारा जा सकता है।
|
||||
इस असाइनमेंट में, आप एक वास्तविक वेबसाइट का पेशेवर स्तर का एक्सेसिबिलिटी ऑडिट करेंगे, जिसमें आपने सीखे हुए सिद्धांतों और तकनीकों को लागू करेंगे। यह व्यावहारिक अनुभव आपकी पहुँच बाधाओं और समाधानों की समझ को गहरा करेगा।
|
||||
|
||||
## साइट सुलभता का परीक्षण करने के लिए तालिका
|
||||
ऐसी वेबसाइट चुनें जिसमें पहुँच संबंधी समस्याएं प्रतीत होती हों—यह पहले से पूर्ण साइट का विश्लेषण करने की तुलना में अधिक सीखने के अवसर देता है। अच्छे उम्मीदवारों में पुरानी वेबसाइटें, जटिल वेब अनुप्रयोग, या मल्टीमीडिया सामग्री वाली साइटें शामिल हैं।
|
||||
|
||||
| मानदंड | उत्कृष्ट | पर्याप्त | सुधार की आवश्यकता |
|
||||
|--------|----------|----------|--------------------|
|
||||
| | आवश्यकताओं का <10% गायब | आवश्यकताओं का 20% गायब | आवश्यकताओं का 50% गायब |
|
||||
### चरण 1: रणनीतिक मैनुअल मूल्यांकन
|
||||
|
||||
----
|
||||
छात्र रिपोर्ट: इसमें यह शामिल होगा कि साइट कितनी असुलभ है, Lighthouse रिपोर्ट का पीडीएफ, सुधार के लिए दस बिंदुओं की सूची, और उन्हें सुधारने के तरीके के विवरण
|
||||
स्वचालित उपकरणों का उपयोग करने से पहले, एक व्यापक मैनुअल आकलन करें। यह मानव-केंद्रित दृष्टिकोण अक्सर उन मुद्दों को उजागर करता है जिन्हें उपकरण नजरअंदाज कर देते हैं और आपको वास्तविक उपयोगकर्ता अनुभव समझने में मदद करता है।
|
||||
|
||||
**🔍 आवश्यक मूल्यांकन मानदंड:**
|
||||
|
||||
**नेविगेशन और संरचना:**
|
||||
- क्या आप केवल कीबोर्ड (Tab, Shift+Tab, Enter, Space, Arrow keys) का उपयोग करके पूरे साइट पर नेविगेट कर सकते हैं?
|
||||
- क्या सभी इंटरैक्टिव तत्वों पर फोकस संकेत स्पष्ट रूप से दिखाई देते हैं?
|
||||
- क्या शीर्षक संरचना (H1-H6) तार्किक सामग्री रूपरेखा बनाती है?
|
||||
- क्या मुख्य सामग्री पर कूदने के लिए स्किप लिंक मौजूद हैं?
|
||||
|
||||
**दृश्य पहुंच:**
|
||||
- क्या पूरे साइट में पर्याप्त रंग कॉन्ट्रास्ट है (सामान्य टेक्स्ट के लिए न्यूनतम 4.5:1)?
|
||||
- क्या साइट केवल रंग पर निर्भर करती है महत्वपूर्ण जानकारी देने के लिए?
|
||||
- क्या सभी छवियों में उपयुक्त वैकल्पिक पाठ (alt text) है?
|
||||
- क्या लेआउट 200% ज़ूम किए जाने पर भी कार्यात्मक रहता है?
|
||||
|
||||
**सामग्री और संचार:**
|
||||
- क्या कोई "यहाँ क्लिक करें" या अस्पष्ट लिंक टेक्स्ट हैं?
|
||||
- क्या आप बिना दृश्य संकेतों के सामग्री और कार्यक्षमता को समझ सकते हैं?
|
||||
- क्या फ़ॉर्म फ़ील्ड उचित रूप से लेबल और समूहीकृत हैं?
|
||||
- क्या त्रुटि संदेश स्पष्ट और सहायक हैं?
|
||||
|
||||
**इंटरैक्टिव तत्व:**
|
||||
- क्या सभी बटन और फ़ॉर्म नियंत्रण केवल कीबोर्ड से काम करते हैं?
|
||||
- क्या गतिशील सामग्री में बदलाव स्क्रीन रीडर को सूचित किए जाते हैं?
|
||||
- क्या मोडल डायलॉग और जटिल विजेट उचित पहुँच पैटर्न का पालन करते हैं?
|
||||
|
||||
📝 **अपनी खोजों का दस्तावेजीकरण करें** विशिष्ट उदाहरणों, स्क्रीनशॉट और पृष्ठ URL के साथ। मुद्दों और अच्छा प्रदर्शन दोनों को नोट करें।
|
||||
|
||||
### चरण 2: व्यापक स्वचालित परीक्षण
|
||||
|
||||
अब उद्योग-मानक पहुंच परीक्षण उपकरणों का उपयोग करके अपने मैनुअल निष्कर्षों की पुष्टि और विस्तार करें। प्रत्येक उपकरण की ताकत अलग होती है, इसलिए कई उपकरणों का उपयोग आपको पूर्ण कवरेज प्रदान करता है।
|
||||
|
||||
**🛠️ आवश्यक परीक्षण उपकरण:**
|
||||
|
||||
1. **Lighthouse पहुंच ऑडिट** (Chrome/Edge DevTools में अंतर्निहित)
|
||||
- कई पृष्ठों पर ऑडिट चलाएं
|
||||
- विशिष्ट मापदंड और सिफारिशों पर ध्यान दें
|
||||
- अपनी पहुँच स्कोर और विशिष्ट उल्लंघनों को नोट करें
|
||||
|
||||
2. **axe DevTools** (ब्राउज़र एक्सटेंशन - उद्योग मानक)
|
||||
- Lighthouse की तुलना में अधिक विस्तृत समस्या पहचान
|
||||
- फिक्स के लिए विशिष्ट कोड उदाहरण प्रदान करता है
|
||||
- WCAG 2.1 मानदंड के विरुद्ध परीक्षण करता है
|
||||
|
||||
3. **WAVE वेब एक्सेसिबिलिटी इवैलुएटर** (ब्राउज़र एक्सटेंशन)
|
||||
- पहुँच सुविधाओं का दृश्य प्रतिनिधित्व
|
||||
- त्रुटियों और सकारात्मक विशेषताओं दोनों को रेखांकित करता है
|
||||
- पृष्ठ संरचना को समझने के लिए उत्कृष्ट
|
||||
|
||||
4. **रंग कॉन्ट्रास्ट विश्लेषक**
|
||||
- WebAIM Contrast Checker विशिष्ट रंग जोड़ों के लिए
|
||||
- पृष्ठ-व्यापी विश्लेषण के लिए ब्राउज़र एक्सटेंशन्स
|
||||
- WCAG AA और AAA मानकों के विरुद्ध परीक्षण
|
||||
|
||||
**🎧 असली सहायक प्रौद्योगिकी परीक्षण:**
|
||||
- **स्क्रीन रीडर परीक्षण**: NVDA (Windows), VoiceOver (Mac), या TalkBack (Android) का उपयोग करें
|
||||
- **कीबोर्ड-ओनली नेविगेशन**: अपने माउस को अनप्लग करें और पूरी साइट का नेविगेशन करें
|
||||
- **ज़ूम परीक्षण**: कार्यक्षमता को 200% और 400% ज़ूम स्तर पर जाँचें
|
||||
- **वॉइस कंट्रोल परीक्षण**: यदि उपलब्ध हो, तो वॉइस नेविगेशन उपकरण आज़माएं
|
||||
|
||||
**📊 अपने परिणामों का आयोजन करें** एक मास्टर स्प्रेडशीट बनाकर:
|
||||
- समस्या विवरण और स्थान
|
||||
- गंभीरता स्तर (महत्वपूर्ण/उच्च/मध्यम/निम्न)
|
||||
- उल्लंघित WCAG सफलता मानदंड
|
||||
- समस्या पता लगाने वाला उपकरण
|
||||
- स्क्रीनशॉट और प्रमाण
|
||||
|
||||
### चरण 3: व्यापक निष्कर्ष दस्तावेजीकरण
|
||||
|
||||
एक पेशेवर एक्सेसिबिलिटी ऑडिट रिपोर्ट तैयार करें जो तकनीकी मुद्दों और उनके मानवीय प्रभाव दोनों की आपकी समझ को दर्शाता हो।
|
||||
|
||||
**📋 आवश्यक रिपोर्ट अनुभाग:**
|
||||
|
||||
1. **कार्यकारी सारांश** (1 पृष्ठ)
|
||||
- वेबसाइट URL और संक्षिप्त विवरण
|
||||
- समग्र एक्सेसिबिलिटी परिपक्वता स्तर
|
||||
- शीर्ष 3 सबसे महत्वपूर्ण मुद्दे
|
||||
- विकलांग उपयोगकर्ताओं पर अनुमानित प्रभाव
|
||||
|
||||
2. **पद्धति** (½ पृष्ठ)
|
||||
- परीक्षण दृष्टिकोण और उपयोग किए गए उपकरण
|
||||
- मूल्यांकन किए गए पृष्ठ और डिवाइस/ब्राउज़र संयोजन
|
||||
- मूल्यांकन किए गए मानक (WCAG 2.1 AA)
|
||||
|
||||
3. **विस्तृत निष्कर्ष** (2-3 पृष्ठ)
|
||||
- WCAG सिद्धांत (Perceivable, Operable, Understandable, Robust) के अनुसार वर्गीकृत मुद्दे
|
||||
- स्क्रीनशॉट और विशिष्ट उदाहरण शामिल करें
|
||||
- पाए गए सकारात्मक एक्सेसिबिलिटी फीचर्स का उल्लेख करें
|
||||
- स्वचालित उपकरणों के परिणामों के साथ क्रॉस-रेफरेंस करें
|
||||
|
||||
4. **उपयोगकर्ता प्रभाव मूल्यांकन** (1 पृष्ठ)
|
||||
- पहचाने गए मुद्दे विभिन्न अशक्तताओं वाले उपयोगकर्ताओं को कैसे प्रभावित करते हैं
|
||||
- वास्तविक उपयोगकर्ता अनुभव का वर्णन करने वाले परिदृश्य
|
||||
- व्यवसाय प्रभाव (कानूनी जोखिम, SEO, उपयोगकर्ता आधार विस्तार)
|
||||
|
||||
**📸 साक्ष्य संग्रह:**
|
||||
- एक्सेसिबिलिटी उल्लंघनों के स्क्रीनशॉट
|
||||
- समस्या-संपन्न उपयोगकर्ता प्रवाह के स्क्रीन रिकॉर्डिंग
|
||||
- उपकरण रिपोर्ट (PDF के रूप में सहेजें)
|
||||
- मुद्दों को दर्शाने वाले कोड उदाहरण
|
||||
|
||||
### चरण 4: पेशेवर सुधार योजना
|
||||
|
||||
एक रणनीतिक, प्राथमिकता-आधारित योजना विकसित करें एक्सेसिबिलिटी मुद्दों को ठीक करने के लिए। यह दिखाता है कि आप एक पेशेवर वेब डेवलपर की तरह सोचते हैं जो वास्तविक व्यावसायिक प्रतिबंधों को संबोधित करता है।
|
||||
|
||||
**🎯 विस्तृत सुधार सिफारिशें बनाएं (न्यूनतम 10 मुद्दे):**
|
||||
|
||||
**प्रत्येक पहचाने गए मुद्दे के लिए प्रदान करें:**
|
||||
|
||||
- **मुद्दा विवरण**: स्पष्ट व्याख्या कि क्या गलत है और यह क्यों समस्या है
|
||||
- **WCAG संदर्भ**: उल्लंघित विशिष्ट सफलता मानदंड (जैसे "2.4.4 लिंक उद्देश्य (संदर्भ में) - स्तर A")
|
||||
- **उपयोगकर्ता प्रभाव**: यह विभिन्न विकलांगताओं वाले लोगों को कैसे प्रभावित करता है
|
||||
- **समाधान**: विशिष्ट कोड परिवर्तन, डिज़ाइन संशोधन, या प्रक्रिया सुधार
|
||||
- **प्राथमिकता स्तर**: महत्वपूर्ण (मूल उपयोग को अवरुद्ध करता है) / उच्च (महत्वपूर्ण बाधा) / मध्यम (उपयोग की समस्या) / निम्न (सुधार)
|
||||
- **कार्यान्वयन प्रयास**: समय/जटिलता का अनुमान (शीघ्र समाधान / मध्यम प्रयास / बड़ा पुनर्गठन)
|
||||
- **परीक्षण सत्यापन**: कैसे सत्यापित करें कि सुधार काम करता है
|
||||
|
||||
**सुधार उदाहरण प्रविष्टि:**
|
||||
|
||||
```
|
||||
Issue: Generic "Read more" link text appears 8 times on homepage
|
||||
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
||||
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
||||
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
||||
Priority: High (major navigation barrier)
|
||||
Effort: Low (30 minutes to update content)
|
||||
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
||||
```
|
||||
|
||||
**📈 रणनीतिक कार्यान्वयन चरण:**
|
||||
|
||||
- **चरण 1 (0-2 सप्ताह)**: बुनियादी कार्यक्षमता अवरुद्ध करने वाले महत्वपूर्ण मुद्दे
|
||||
- **चरण 2 (1-2 महीने)**: बेहतर उपयोगकर्ता अनुभव के लिए उच्च प्राथमिकता के सुधार
|
||||
- **चरण 3 (3-6 महीने)**: मध्यम प्राथमिकता के सुधार और प्रक्रिया सुधार
|
||||
- **चरण 4 (लगातार)**: सतत निगरानी और सुधार
|
||||
|
||||
## मूल्यांकन मापदंड
|
||||
|
||||
आपके एक्सेसिबिलिटी ऑडिट का आकलन तकनीकी सटीकता और व्यावसायिक प्रस्तुति दोनों पर किया जाएगा:
|
||||
|
||||
| मानदंड | उत्कृष्ट (90-100%) | अच्छा (80-89%) | संतोषजनक (70-79%) | सुधार की आवश्यकता (<70%) |
|
||||
|----------|-------------------|---------------|---------------------|------------------------|
|
||||
| **मैनुअल परीक्षण गहराई** | सभी POUR सिद्धांतों को विस्तार से कवर करते हुए व्यापक आकलन, विस्तृत अवलोकन और उपयोगकर्ता परिदृश्य | अधिकांश पहुंच क्षेत्रों को अच्छी तरह से कवर करना, स्पष्ट निष्कर्ष और कुछ उपयोगकर्ता प्रभाव विश्लेषण | प्रमुख क्षेत्रों को कवर करने वाला बुनियादी आकलन, उपयुक्त अवलोकन | सीमित परीक्षण, सतही अवलोकन और न्यूनतम उपयोगकर्ता प्रभाव विचार |
|
||||
| **उपकरण उपयोग और विश्लेषण** | सभी आवश्यक उपकरणों का प्रभावी उपयोग, निष्कर्षों का क्रॉस-रेफरेंसिंग, स्पष्ट साक्ष्य और उपकरण सीमाओं का विश्लेषण | अधिकांश उपकरणों का उपयोग, अच्छी दस्तावेजीकरण, कुछ क्रॉस-रेफरेंसिंग और उपयुक्त साक्ष्य | आवश्यक उपकरणों का उपयोग, बुनियादी दस्तावेजीकरण और कुछ साक्ष्य | न्यूनतम उपकरण उपयोग, खराब दस्तावेजीकरण या साक्ष्य की कमी |
|
||||
| **मुद्दा पहचान और वर्गीकरण** | WCAG सिद्धांतों के अनुसार 15+ विशिष्ट मुद्दे, गंभीरता के अनुसार सटीक वर्गीकरण, गहरी समझ का प्रदर्शन | अधिकांश WCAG सिद्धांतों में 10-14 मुद्दे, अच्छा वर्गीकरण और ठोस समझ | 7-9 मुद्दे, उचित WCAG कवरेज और बुनियादी वर्गीकरण | 7 से कम मुद्दे, सीमित आकार या खराब वर्गीकरण |
|
||||
| **समाधान की गुणवत्ता और व्यवहार्यता** | 10+ विस्तृत, कार्यात्मक समाधान, सटीक WCAG संदर्भ, यथार्थवादी कार्यान्वयन समय और सत्यापन विधियां | 8-9 अच्छी तरह विकसित समाधान, अधिकांश संदर्भ सटीक, अच्छा कार्यान्वयन विवरण | 6-7 बुनियादी समाधान, कुछ विवरण के साथ और सामान्यतः यथार्थवादी | 6 से कम समाधान या अपर्याप्त विवरण, अवास्तविक कार्यान्वयन |
|
||||
| **पेशेवर संचार** | रिपोर्ट उत्कृष्ट रूप से व्यवस्थित, स्पष्ट लेखन, कार्यकारी सारांश शामिल, उपयुक्त तकनीकी भाषा, और व्यावसायिक दस्तावेज़ मानकों का पालन | अच्छी तरह से व्यवस्थित, अच्छी लेखन गुणवत्ता, अधिकांश आवश्यक अनुभाग शामिल, उपयुक्त स्वर | उपयुक्त रूप से व्यवस्थित, स्वीकार्य लेखन, बुनियादी आवश्यक अनुभाग शामिल | खराब संगठन, अस्पष्ट लेखन, या आवश्यक अनुभागों की कमी |
|
||||
| **वास्तविक दुनिया में अनुप्रयोग** | व्यवसायिक प्रभाव, कानूनी विचार, उपयोगकर्ता विविधता और व्यावहारिक कार्यान्वयन चुनौतियों की समझ | व्यावहारिक अनुप्रयोगों की अच्छी समझ, कुछ व्यवसाय संदर्भ | वास्तविक दुनिया अनुप्रयोगों की बुनियादी समझ | व्यावहारिक अनुप्रयोगों से सीमित संबंध |
|
||||
|
||||
## उन्नत चैलेंज विकल्प
|
||||
|
||||
**🚀 अतिरिक्त चुनौती के लिए छात्रों के लिए:**
|
||||
|
||||
- **तुलनात्मक विश्लेषण**: 2-3 प्रतिस्पर्धी वेबसाइटों का ऑडिट करें और उनकी पहुंच परिपक्वता की तुलना करें
|
||||
- **मोबाइल पहुंच पर ध्यान**: Android TalkBack या iOS VoiceOver का उपयोग करके मोबाइल-विशिष्ट पहुंच मुद्दों में गहराई से जाएं
|
||||
- **अंतरराष्ट्रीय दृष्टिकोण**: विभिन्न देशों के एक्सेसिबिलिटी मानकों (EN 301 549, सेक्शन 508, ADA) का शोध और उपयोग करें
|
||||
- **एक्सेसिबिलिटी कथन समीक्षा**: आपकी खोजों के खिलाफ वेबसाइट के मौजूदा एक्सेसिबिलिटी कथन का मूल्यांकन करें (यदि कोई हो)
|
||||
|
||||
## सबमिट करने योग्य दस्तावेज़
|
||||
|
||||
एक व्यापक एक्सेसिबिलिटी ऑडिट रिपोर्ट प्रस्तुत करें जो पेशेवर-स्तर के विश्लेषण और व्यावहारिक कार्यान्वयन योजना को प्रदर्शित करती हो:
|
||||
|
||||
**📄 अंतिम रिपोर्ट आवश्यकताएँ:**
|
||||
|
||||
1. **कार्यकारी सारांश** (1 पृष्ठ)
|
||||
- वेबसाइट अवलोकन और एक्सेसिबिलिटी परिपक्वता मूल्यांकन
|
||||
- मुख्य निष्कर्ष संक्षेप और व्यवसाय प्रभाव
|
||||
- अनुशंसित प्राथमिकता क्रियाएं
|
||||
|
||||
2. **पद्धति और दायरा** (1 पृष्ठ)
|
||||
- परीक्षण दृष्टिकोण, उपयोग किए गए उपकरण, और मूल्यांकन मानदंड
|
||||
- मूल्यांकन किए गए पृष्ठ/खंड और कोई सीमाएं
|
||||
- मानक अनुपालन ढांचा (WCAG 2.1 AA)
|
||||
|
||||
3. **विस्तृत निष्कर्ष रिपोर्ट** (3-4 पृष्ठ)
|
||||
- मैनुअल परीक्षण अवलोकन सहित उपयोगकर्ता परिदृश्य
|
||||
- स्वचालित उपकरण परिणामों के साथ क्रॉस-रेफरेंसिंग
|
||||
- WCAG सिद्धांतों के अनुसार व्यवस्थित मुद्दे sाक्ष्यों के साथ
|
||||
- पहचानी गई सकारात्मक पहुंच विशेषताएँ
|
||||
|
||||
4. **रणनीतिक सुधार योजना** (3-4 पृष्ठ)
|
||||
- प्राथमिकता-आधारित सुधार सिफारिशें (कम से कम 10)
|
||||
- कार्यान्वयन समयसारिणी और प्रयास के अनुमान
|
||||
- सफलता मीट्रिक और सत्यापन विधियां
|
||||
- दीर्घकालिक एक्सेसिबिलिटी रखरखाव रणनीति
|
||||
|
||||
5. **सहायक साक्ष्य** (परिशिष्ट)
|
||||
- एक्सेसिबिलिटी उल्लंघनों और परीक्षण उपकरणों के स्क्रीनशॉट
|
||||
- कोड उदाहरण जो मुद्दों और समाधानों को दर्शाते हैं
|
||||
- उपकरण रिपोर्ट और ऑडिट सारांश
|
||||
- स्क्रीन रीडर परीक्षण नोट्स या रिकॉर्डिंग
|
||||
|
||||
**📊 प्रारूप आवश्यकताएँ:**
|
||||
- **दस्तावेज़ प्रारूप**: PDF (पेशेवर प्रस्तुति)
|
||||
- **शब्द गणना**: 2,500-3,500 शब्द (परिशिष्ट और स्क्रीनशॉट को छोड़कर)
|
||||
- **दृश्य तत्व**: पूरे दस्तावेज़ में स्क्रीनशॉट, चार्ट, और उदाहरण शामिल करें
|
||||
- **उद्धरण**: WCAG दिशानिर्देशों और एक्सेसिबिलिटी संसाधनों का उचित संदर्भ दें
|
||||
|
||||
**💡 उत्कृष्टता के लिए प्रो टिप्स:**
|
||||
- पेशेवर रिपोर्ट प्रारूपण का उपयोग करें, निरंतर शीर्षक और शेलींग के साथ
|
||||
- सहज नेविगेशन के लिए तालिका सम्मिलित करें
|
||||
- तकनीकी सटीकता और स्पष्ट, व्यवसाय-उपयुक्त भाषा में संतुलन बनाएं
|
||||
- तकनीकी क्रियान्वयन और उपयोगकर्ता प्रभाव दोनों की समझ प्रदर्शित करें
|
||||
|
||||
## सीखने के परिणाम
|
||||
|
||||
इस व्यापक एक्सेसिबिलिटी ऑडिट को पूरा करने के बाद, आप आवश्यक पेशेवर कौशल विकसित कर चुके होंगे:
|
||||
|
||||
**🎯 तकनीकी दक्षताएँ:**
|
||||
- **एक्सेसिबिलिटी परीक्षण में महारत**: उद्योग-मानक मैनुअल और स्वचालित परीक्षण विधियों में निपुणता
|
||||
- **WCAG अनुप्रयोग**: वास्तविक-विश्व परिदृश्यों पर वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस को लागू करने का व्यावहारिक अनुभव
|
||||
- **सहायक प्रौद्योगिकी समझ**: स्क्रीन रीडर और कीबोर्ड नेविगेशन के साथ व्यावहारिक अनुभव
|
||||
- **समस्या-समाधान मैपिंग**: एक्सेसिबिलिटी बाधाओं की पहचान और विशिष्ट, कार्यात्मक सुधार रणनीतियों का विकास करने में सक्षम
|
||||
|
||||
**💼 पेशेवर कौशल:**
|
||||
- **तकनीकी संचार**: विविध हितधारकों के लिए पेशेवर एक्सेसिबिलिटी रिपोर्ट लिखने का अनुभव
|
||||
- **रणनीतिक योजना बनाना**: उपयोगकर्ता प्रभाव और कार्यान्वयन व्यवहार्यता के आधार पर एक्सेसिबिलिटी सुधारों को प्राथमिकता देने की क्षमता
|
||||
- **गुणवत्ता आश्वासन**: विकास जीवनचक्र के हिस्से के रूप में एक्सेसिबिलिटी परीक्षण की समझ
|
||||
- **जोखिम मूल्यांकन**: एक्सेसिबिलिटी अनुपालन के कानूनी, व्यवसायिक, और नैतिक प्रभावों के प्रति समझ
|
||||
|
||||
**🌍 समावेशी डिज़ाइन मानसिकता:**
|
||||
- **उपयोगकर्ता सहानुभूति**: विविध उपयोगकर्ता आवश्यकताओं और सहायक तकनीकों से संबंधित गहन समझ
|
||||
- **सार्वभौमिक डिज़ाइन सिद्धांत**: यह मान्यता कि पहुँच योग्य डिज़ाइन सभी उपयोगकर्ताओं के लिए लाभकारी है, केवल विकलांगों के लिए नहीं
|
||||
- **निरंतर सुधार**: ongoing एक्सेसिबिलिटी आकलन और सुधार के लिए रूपरेखा
|
||||
- **अधिवक्ता कौशल**: भविष्य की परियोजनाओं और टीमों में एक्सेसिबिलिटी सर्वोत्तम प्रथाओं को बढ़ावा देने का आत्मविश्वास
|
||||
|
||||
**🚀 करियर तैयारी:**
|
||||
यह असाइनमेंट वास्तविक दुनिया की एक्सेसिबिलिटी परामर्श परियोजनाओं का प्रतिबिंब है, जो आपको पोर्टफोलियो-योग्य अनुभव प्रदान करता है जो दिखाता है:
|
||||
- व्यवस्थित समस्या-समाधान दृष्टिकोण
|
||||
- तकनीकी विवरण और व्यवसाय प्रभाव दोनों पर ध्यान
|
||||
- जटिल तकनीकी अवधारणाओं का स्पष्ट संचार
|
||||
- वेब विकास में कानूनी और नैतिक जिम्मेदारियों की समझ
|
||||
|
||||
पूरा होने पर, आप किसी भी वेब विकास भूमिका में एक्सेसिबिलिटी पहलों में सार्थक योगदान देने और अपने करियर के दौरान समावेशी डिज़ाइन प्रथाओं के लिए वकालत करने के लिए तैयार होंगे।
|
||||
|
||||
---
|
||||
|
||||
<!-- 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 -->
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue