[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# নতুনদের জন্য ওয়েব ডেভেলপমেন্ট - একটি পাঠ্যক্রম
মাইক্রোসফট-এর এযুর ক্লাউড অ্যাডভোকেটরা জাভাস্ক্রিপ্ট, সিএসেস এবং এইছটিএমেল বেসিক সম্পর্কে ১২-সপ্তাহ, ২৪-পাঠ্য পাঠ্যক্রম অফার করতে পেরে খুশি। প্রতিটি পাঠে প্রাক- এবং পাঠ-পরবর্তী কুইজ, পাঠটি সম্পূর্ণ করার জন্য লিখিত নির্দেশাবলী, একটি সমাধান, একটি অ্যাসাইনমেন্ট এবং আরও অনেক কিছু অন্তর্ভুক্ত থাকে। আমাদের প্রকল্প-ভিত্তিক শিক্ষাবিদ্যা আপনাকে নির্মাণের সময় শেখার অনুমতি দেয়, নতুন দক্ষতার 'লাঠি' করার একটি প্রমাণিত উপায়।
> **শিক্ষকরা**, এই পাঠ্যক্রমটি কীভাবে ব্যবহার করা যায় সে সম্পর্কে আমরা [কিছু পরামর্শ অন্তর্ভুক্ত করেছি](for-teachers.md)। আমরা আপনার প্রতিক্রিয়া পছন্দ করব [আমাদের আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **ছাত্ররা**, এই পাঠ্যক্রমটি নিজে ব্যবহার করার জন্য, পুরো রেপোকে কাঁটাচামচ করুন এবং নিজে থেকেই অনুশীলনগুলি সম্পূর্ণ করুন, একটি প্রি-লেকচার কুইজ দিয়ে শুরু করুন, তারপর লেকচারটি পড়ুন এবং বাকি কার্যক্রমগুলি সম্পূর্ণ করুন। সমাধান কোড অনুলিপি করার পরিবর্তে পাঠগুলি বোঝার মাধ্যমে প্রকল্পগুলি তৈরি করার চেষ্টা করুন; তবে কোডটি প্রতিটি প্রকল্প-ভিত্তিক পাঠের /সমাধান ফোল্ডারে উপলব্ধ। আরেকটি ধারণা হবে বন্ধুদের সাথে একটি স্টাডি গ্রুপ গঠন করা এবং একসাথে বিষয়বস্তুর মধ্য দিয়ে যাওয়া। আরও অধ্যয়নের জন্য, আমরা [মাইক্রোসফট শিক্ষা](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) এবং নীচে উল্লিখিত ভিডিওগুলি দেখার পরামর্শ দিই৷
> 🎥 প্রকল্পটি এবং যারা এটি তৈরি করেছেন তাদের সম্পর্কে একটি ভিডিওর জন্য উপরের ছবিতে ক্লিক করুন!
## শিক্ষাবিদ্যা
এই পাঠ্যক্রমটি তৈরি করার সময় আমরা দুটি শিক্ষাগত নীতি বেছে নিয়েছি: এটি নিশ্চিত করা যে এটি প্রকল্প-ভিত্তিক এবং এতে ঘন ঘন কুইজ অন্তর্ভুক্ত রয়েছে। এই সিরিজের শেষ নাগাদ, শিক্ষার্থীরা একটি টাইপিং গেম, একটি ভার্চুয়াল টেরারিয়াম, একটি 'গ্রিন' ব্রাউজার এক্সটেনশন, একটি 'স্পেস ইনভেডার' টাইপ গেম এবং একটি ব্যবসায়িক-টাইপ ব্যাঙ্কিং অ্যাপ তৈরি করবে এবং জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি শিখবে। , এইছটিএমেল, এবং সিএসেস সহ আজকের ওয়েব ডেভেলপারের আধুনিক টুলচেন।
> 🎓 আপনি মাইক্রোসফট শিক্ষা এ [শিক্ষা পথ](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) হিসেবে এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ নিতে পারেন!
বিষয়বস্তুটি প্রকল্পের সাথে সারিবদ্ধ হয়েছে তা নিশ্চিত করার মাধ্যমে, প্রক্রিয়াটিকে শিক্ষার্থীদের জন্য আরও আকর্ষক করে তোলা হয় এবং ধারণার ধারণকে বর্ধিত করা হবে। আমরা ধারণাগুলি প্রবর্তন করার জন্য জাভাস্ক্রিপ্ট বেসিকগুলিতে বেশ কয়েকটি স্টার্টার পাঠও লিখেছি, যা "[বিগিনার্স সিরিজ থেকে: জাভাস্ক্রিপ্ট](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id) থেকে ভিডিওর সাথে যুক্ত করেছি ভিডিও টিউটোরিয়ালের সংগ্রহ, যার কিছু লেখক এই পাঠ্যক্রমটিতে অবদান রেখেছেন।
উপরন্তু, একটি ক্লাসের আগে একটি লো-স্টেক কুইজ একটি বিষয় শেখার প্রতি শিক্ষার্থীর অভিপ্রায় নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণ নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হওয়ার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট শুরু হয় এবং 12 সপ্তাহের চক্রের শেষে ক্রমবর্ধমান জটিল হয়ে ওঠে।
যদিও আমরা উদ্দেশ্যপ্রণোদিতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক প্রবর্তন করা এড়িয়ে গেছি যাতে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলিতে মনোনিবেশ করা যায়, এই পাঠ্যক্রমটি সম্পূর্ণ করার একটি ভাল পরবর্তী পদক্ষেপটি ভিডিওগুলির আরেকটি সংগ্রহের মাধ্যমে নোড যেএস সম্পর্কে শেখা হবে: "[শিককারী এর জন্য সিরিজ: নোড যেএস](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)"।
> আমাদের [আচরণবিধি](CODE_OF_CONDUCT.md), [অবদান করা](CONTRIBUTING.md), এবং [অনুবাদ](TRANSLATIONS.md) নির্দেশিকা খুঁজুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়া স্বাগত জানাই!
## প্রতিটি পাঠ অন্তর্ভুক্ত:
- ঐচ্ছিক স্কেচনোট
- ঐচ্ছিক সম্পূরক ভিডিও
- প্রাক-পাঠ ওয়ার্মআপ কুইজ
- লিখিত পাঠ
- প্রকল্প-ভিত্তিক পাঠের জন্য, প্রকল্পটি কীভাবে তৈরি করতে হয় তার ধাপে ধাপে নির্দেশিকা
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ রয়েছে [এই অ্যাপে](https://wonderful-flower-063e19f0f.1.azurestaticapps.net/), প্রতিটিতে তিনটি প্রশ্নের মোট 48টি কুইজ রয়েছে। এগুলি পাঠের মধ্যে থেকে লিঙ্ক করা হয়েছে তবে কুইজ অ্যাপটি স্থানীয়ভাবে চালানো যেতে পারে; `কুইজ-অ্যাপ` ফোল্ডারে নির্দেশনা অনুসরণ করুন। সেগুলো ধীরে ধীরে স্থানীয়করণ করা হচ্ছে।
| ০১ | শুরু হচ্ছে | ট্রেডের প্রোগ্রামিং এবং টুলের ভূমিক | বেশিরভাগ প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং পেশাদার ডেভেলপারদের তাদের কাজ করতে সাহায্য করে এমন সফ্টওয়্যার সম্পর্কে প্রাথমিক ভিত্তি জানুন | [প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং ট্রেডের টুলের ভূমিকা](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | জেসমিন |
| ০২ | শুরু হচ্ছে | গিটহাব এর মৌলিক বিষয়, একটি দলের সাথে কাজ করা অন্তর্ভুক্ত | কীভাবে আপনার প্রকল্পে গিটহাব ব্যবহার করবেন, কীভাবে কোড বেসে অন্যদের সাথে সহযোগিতা করবেন | [গিটহাবের ভূমিকা](/1-getting-started-lessons/2-github-basics/README.md) | ফ্লোর |
| ০৩ | শুরু হচ্ছে | অ্যাক্সেসযোগ্যতা | ওয়েব অ্যাক্সেসিবিলিটির মূল বিষয়গুলো জানুন | [অ্যাক্সেসিবিলিটি ফান্ডামেন্টালস](/1-getting-started-lessons/3-accessibility/README.md) | ক্রিসটফার |
| ০৪ | জেএস বেসিক | জাভাস্ক্রিপ্ট ডেটা প্রকার | জাভাস্ক্রিপ্ট ডেটা টাইপের মৌলিক বিষয় | [তথ্যের ধরণ](/2-js-basics/1-data-types/README.md) | জেসমিন |
| ০৫ | জেএস বেসিক | ফাংশন এবং পদ্ধতি | একটি অ্যাপ্লিকেশনের যুক্তি প্রবাহ পরিচালনা করার ফাংশন এবং পদ্ধতি সম্পর্কে জানুন | [ফাংশন এবং পদ্ধতি](/2-js-basics/2-functions-methods/README.md) | জেসমিন এবন ক্রিসটফার |
| ০৬ | জেএস বেসিক | জেএসের সাথে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে কীভাবে আপনার কোডে শর্ত তৈরি করতে হয় তা শিখুন | [তৈরি সিদ্ধান্ত](/2-js-basics/3-making-decisions/README.md) | জেসমিন |
| ০৭ | জেএস বেসিক | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](/2-js-basics/4-arrays-loops/README.md) | জেসমিন |
| ০৮ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে এইচটিএমএল | একটি লেআউট তৈরিতে ফোকাস করে একটি অনলাইন টেরারিয়াম তৈরি করতে এইছটিএমেল তৈরি করুন | [এইছটিএমেল এর ভূমিকা](/3-terrarium/1-intro-to-html/README.md) | জেন |
| ০৯ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে সিএসএস | অনলাইন টেরারিয়াম স্টাইল করার জন্য সিএসেস তৈরি করুন, পৃষ্ঠাটিকে প্রতিক্রিয়াশীল করা সহ সিএসেস এর মৌলিক বিষয়গুলিতে ফোকাস করুন | [সিএসেস এর ভূমিকা](/3-terrarium/2-intro-to-css/README.md) | জেন |
| ১০ | [টেরারিয়াম](/3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন | ক্লোজার এবং ডম ম্যানিপুলেশনের উপর ফোকাস করে টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কাজ করতে জাভাস্ক্রিপ্ট তৈরি করুন | [জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | জেন |
| ১১ | [টাইপিং খেলা](/4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি করুন | আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালাতে কীবোর্ড ইভেন্টগুলি কীভাবে ব্যবহার করবেন তা শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](/4-typing-game/typing-game/README.md) | ক্রিসটফার |
| ১২ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ করা | ব্রাউজারগুলি কীভাবে কাজ করে, তাদের ইতিহাস এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি কীভাবে ভারা হয় তা জানুন | [ব্রাউজার সম্পর্কে](/5-browser-extension/1-about-browsers/README.md) | জেন |
| ১৩ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি এপিয়াই কল করা এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | স্থানীয় স্টোরেজে সঞ্চিত ভেরিয়েবল ব্যবহার করে একটি এপিয়াই কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদানগুলি তৈরি করুন | [এপিয়াই, ফর্ম, এবং স্থানীয় সঞ্চয়স্থান](/5-browser-extension/2-forms-browsers-local-storage/README.md) | জেন |
| ১৪ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজারে ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের পটভূমি প্রক্রিয়াগুলি ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশান সম্পর্কে জানুন | [পটভূমি কাজ এবং কর্মক্ষমতা](/5-browser-extension/3-background-tasks-and-performance/README.md) | জেন |
| ১৫ | [স্পেস গেম](/6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট সহ আরও উন্নত গেম ডেভেলপমেন্ট | একটি গেম তৈরির প্রস্তুতির জন্য ক্লাস এবং কম্পোজিশন এবং পাব/সাব প্যাটার্ন উভয় ব্যবহার করে উত্তরাধিকার সম্পর্কে জানুন | [অ্যাডভান্সড গেম ডেভেলপমেন্টের ভূমিকা](/6-space-game/1-introduction/README.md) | ক্রিস |
| ১৬ | [স্পেস গেম](/6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস এপিয়াই সম্পর্কে জানুন, একটি স্ক্রিনে উপাদানগুলি আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](/6-space-game/2-drawing-to-canvas/README.md) | ক্রিস |
| ১৭ | [স্পেস গেম](/6-space-game/solution/README.md) | স্ক্রিনের চারপাশে উপাদান চলন্ত | কার্টেসিয়ান স্থানাঙ্ক এবং ক্যানভাস এপিয়াই ব্যবহার করে উপাদানগুলি কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [চলন্ত উপাদান চারপাশে](/6-space-game/3-moving-elements-around/README.md) | ক্রিস |
| ১৮ | [স্পেস গেম](/6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে সংঘর্ষ এবং একে অপরের সাথে প্রতিক্রিয়া তৈরি করুন এবং গেমের কার্যক্ষমতা নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](/6-space-game/4-collision-detection/README.md) | ক্রিস |
| ১৯ | [স্পেস গেম](/6-space-game/solution/README.md) | স্কোর রাখা | গেমের স্থিতি এবং পারফরম্যান্সের উপর ভিত্তি করে গণিত গণনা করুন | [স্কোর রাখা](/6-space-game/5-keeping-score/README.md) | ক্রিস |
| ২০ | [স্পেস গেম](/6-space-game/solution/README.md) | খেলা শেষ এবং পুনরায় আরম্ভ | সম্পদ পরিষ্কার করা এবং পরিবর্তনশীল মান পুনরায় সেট করা সহ গেমটি শেষ এবং পুনরায় চালু করার বিষয়ে জানুন | [শেষ অবস্থা](/6-space-game/6-end-condition/README.md) | ক্রিস |
| ২১ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং এইচটিএমএল টেমপ্লেট ব্যবহার করে মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচারের স্ক্যাফোল্ড তৈরি করতে শিখুন | [এইচটিএমএল টেমপ্লেট এবং রুট](/7-bank-project/1-template-route/README.md) | য়োহান |
| ২২ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | বিল্ডিং ফর্ম এবং হস্তান্তর বৈধতা রুটিন সম্পর্কে জানুন | [ফর্ম](/7-bank-project/2-forms/README.md) | য়োহান |
| ২৩ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | ডেটা আনা এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের মধ্যে কীভাবে ডেটা প্রবাহিত হয়, কীভাবে এটি আনতে হয়, সংরক্ষণ করতে হয় এবং এটি নিষ্পত্তি করতে হয় | [ডেটা](/7-bank-project/3-data/README.md) | য়োহান |
| ২৪ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | রাষ্ট্র পরিচালনার ধারণা | আপনার অ্যাপ কীভাবে স্থিতি বজায় রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে হয় তা জানুন | [রাজ্য ব্যবস্থাপনা](/7-bank-project/4-state-management/README.md) | য়োহান |
আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশন অফলাইনে চালাতে পারেন। এই রেপো ফোর্ক করুন, আপনার স্থানীয় মেশিনে [Docsify](https://docsify.js.org/#/quickstart) ইনস্টল করুন এবং তারপর এই রেপোর রুট ফোল্ডারে, `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে 3000 পোর্টে পরিবেশন করা হবে: `localhost:3000`।
## পিডিএফ
সমস্ত পাঠের একটি PDF পাওয়া যাবে [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
