এটি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয় শেখানোর জন্য একটি শিক্ষামূলক কারিকুলাম রিপোজিটরি। কারিকুলামটি মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা তৈরি একটি ১২-সপ্তাহের কোর্স, যেখানে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে ২৪টি হাতে-কলমে শেখার পাঠ অন্তর্ভুক্ত রয়েছে।
এটি শিক্ষামূলক কারিকুলাম রিপোজিটরি যা ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শুরু থেকে শেখানোর জন্য তৈরি। কারিকুলামটি একটি ব্যাপক ১২ সপ্তাহের কোর্স, যা Microsoft Cloud Advocates দ্বারা উন্নয়ন করা হয়েছে, এতে JavaScript, CSS, এবং HTML বিষয়ক ২৪টি হাতে-কলমে শেখার পাঠ অন্তর্ভুক্ত।
- `9-chat-project/README.md` - AI চ্যাট অ্যাসিস্ট্যান্ট প্রকল্প
- `9-chat-project/README.md` - AI চ্যাট সহকারী প্রকল্প
### Monorepo কাঠামো
### মনোরিপো কাঠামো
যদিও এটি একটি ঐতিহ্যবাহী Monorepo নয়, এই রিপোজিটরিতে একাধিক স্বতন্ত্র প্রকল্প রয়েছে:
- প্রতিটি পাঠ স্বতন্ত্র
- প্রকল্পগুলো ডিপেনডেন্সি শেয়ার করে না
- স্বতন্ত্র প্রকল্পে কাজ করুন অন্যগুলো প্রভাবিত না করে
- সম্পূর্ণ কারিকুলাম অভিজ্ঞতার জন্য পুরো রিপোজিটরি ক্লোন করুন
যদিও এটি একটি প্রচলিত মনোরিপো নয়, এই রিপোজিটরিতে একাধিক স্বতন্ত্র প্রকল্প আছে:
- প্রতিটি পাঠ নিজস্ব সম্পূর্ণ
- প্রকল্পগুলো ডিপেন্ডেন্সি শেয়ার করে না
- একাধিক প্রকল্প একই সাথে প্রভাবিত না করে কাজ করা যায়
- পুরো কারিকুলামের জন্য রিপো সম্পূর্ণ ক্লোন করুন
---
<!-- 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) ব্যবহার করে অনূদিত হয়েছে। আমরা যথাসাধ্য সঠিকতা বজায় রাখতে চেষ্টা করলেও, স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল নথি তার নিজস্ব ভাষায়ই প্রামাণিক উৎস হিসেবে বিবেচিত হওয়া উচিত। জরুরি বা গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদের ব্যবহারে সৃষ্ট কোন ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।
মাইক্রোসফট ক্লাউড অ্যাড্ভোকেটদের ১২-সপ্তাহের ব্যাপক কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি শিখুন। ২৪টির প্রতিটি পাঠে টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেমের মতো হাতে-কলমে প্রকল্পের মাধ্যমে জাভাস্ক্রিপ্ট, CSS এবং HTML গভীরভাবে অনুসন্ধান করা হয়। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের সঙ্গে যুক্ত থাকুন। আমাদের কার্যকর প্রকল্প-ভিত্তিক শিক্ষাদানের মাধ্যমে আপনার দক্ষতাগুলি উন্নত করুন এবং জ্ঞানের ধারণ ক্ষমতা অপ্টিমাইজ করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা প্রণীত ১২-সপ্তাহের সমগ্র কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, CSS, এবং HTML হাতেকলমে প্রকল্প যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশান এবং স্পেস গেমের মাধ্যমে বিস্তারিত আলোচনা করা হয়েছে। কুইজ, আলোচনা এবং ব্যবহারিক নিয়োগ সংযুক্ত রয়েছে। আমাদের কার্যকর প্রকল্পভিত্তিক শেখার পদ্ধতির মাধ্যমে আপনার দক্ষতা বৃদ্ধি করুন এবং জ্ঞান ধারণ ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> এটি আপনাকে কোর্স সম্পন্ন করার জন্য প্রয়োজনীয় সবকিছু দ্রুত ডাউনলোড করার সুযোগ দেয়।
> এটি আপনাকে কোর্স সম্পন্ন করার জন্য যা প্রয়োজন তা দ্রুত ডাউনলোড সহ দেবে।
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**যদি আপনি অতিরিক্ত অনুবাদের ভাষাগুলি চান, তাহলে সেগুলি এখানে তালিকাভুক্ত আছে [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**আপনি যদি অতিরিক্ত ভাষার সমর্থন চান তবে সেগুলি [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) তালিকাভুক্ত।**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _আপনি কি একজন ছাত্র?_
[**স্টুডেন্ট হাব পেজ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করুন যেখানে আপনি শুরুদের জন্য সম্পদ, স্টুডেন্ট প্যাক এবং এমনকি একটি ফ্রি সার্টিফিকেট ভাউচারের পথ খুঁজে পাবেন। এটি এমন একটি পৃষ্ঠাগুলো যার বুকমার্ক রাখতে এবং মাঝে মাঝে চেক করতে চান কারণ আমরা প্রতি মাসে বিষয়বস্তু পরিবর্তন করি।
[**Student Hub পেইজে যান**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) যেখানে আপনি নবীনদের জন্য সম্পদ, শিক্ষার্থী প্যাক এবং এমনকি একটি ফ্রি সার্টিফিকেট ভাউচারের উপায় পাবেন। এটি এমন একটি পৃষ্ঠা যা আপনি বুকমার্ক করে মাঝে মাঝে দেখতে পারেন কারণ আমরা প্রতি মাসে সামগ্রী পরিবর্তন করি।
### 📣 ঘোষণা - নতুন গিটহাব কপিলট এজেন্ট মোড চ্যালেঞ্জগুলি সম্পন্ন করার জন্য!
### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জগুলি সম্পন্ন করার জন্য!
নতুন চ্যালেঞ্জ যোগ করা হয়েছে, বেশিরভাগ অধ্যায়ে "GitHub Copilot Agent Challenge 🚀" খুঁজুন। এটি গিটহাব কপিলট এবং এজেন্ট মোড ব্যবহার করে আপনার সম্পন্ন করার জন্য একটি নতুন চ্যালেঞ্জ। যদি আপনি আগে কখনও এজেন্ট মোড ব্যবহার না করে থাকেন, এটি শুধুমাত্র টেক্সট তৈরি করে না বরং ফাইল তৈরি ও সম্পাদনা করতে, কমান্ড চালাতে এবং আরও অনেক কিছু করতে সক্ষম।
নতুন চ্যালেঞ্জ যুক্ত হয়েছে, বেশিরভাগ অধ্যায়ে "GitHub Copilot Agent Challenge 🚀" দেখুন। এটি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করার জন্য একটি নতুন চ্যালেঞ্জ। আপনি যদি আগে Agent মোড ব্যবহার না করে থাকেন, এটি শুধুমাত্র টেক্সট তৈরি করে না, ফাইল তৈরি ও সম্পাদনা, কমান্ড চালাতে এবং আরও অনেক কাজ করতে সক্ষম।
### 📣 ঘোষণা - _জেনারেটিভ এআই ব্যবহার করে নতুন প্রজেক্ট_
### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রকল্প তৈরি_
নতুন এআই অ্যাসিস্ট্যান্ট প্রকল্প যুক্ত হয়েছে, এটি দেখুন [project](./9-chat-project/README.md)
নতুন AI Assistant প্রকল্প যুক্ত হয়েছে, এটি দেখুন [প্রকল্প](./9-chat-project/README.md)
### 📣 ঘোষণা - _জেনারেটিভ এআই এর জন্য নতুন পাঠ্যক্রম_ জাভাস্ক্রিপ্টের জন্য সম্প্রতি প্রকাশিত হয়েছে
### 📣 ঘোষণা - _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) !
প্রতিটি পাঠে একটি অ্যাসাইনমেন্ট সম্পন্ন করতে হবে, একটি জ্ঞান পরীক্ষা এবং একটি চ্যালেঞ্জ যা আপনাকে নিম্নলিখিত বিষয় শিখতে সাহায্য করবে:
প্রতিটি পাঠে একটি অ্যাসাইনমেন্ট, একটি জ্ঞান যাচাই এবং একটি চ্যালেঞ্জ অন্তর্ভুক্ত রয়েছে যা আপনাকে শেখার বিষয়গুলিতে গাইড করবে যেমন:
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
- টেক্সট এবং ইমেজ অ্যাপ তৈরি
- সার্চ অ্যাপ
- টেক্সট এবং ইমেজ অ্যাপ জেনারেশন
- সার্চ অ্যাপস
শুরু করতে [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) এ অতিরিক্ত অধ্যয়ন সামগ্রী অন্বেষণ করতে।
### 📋 আপনার পরিবেশ সেটআপ করা
### 📋 আপনার পরিবেশ সেটআপ করা
এই পাঠ্যক্রমের একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি কোর্সটি চালাতে পারেন একটি [কোডস্পেসে](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" বোতামে ক্লিক করুন।
আপনি যে রিপোজিটোরিটির কপি তৈরি করেছেন, সেখানে **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনাকে কাজ করার জন্য একটি নতুন কোডস্পেস তৈরি করবে।
আপনি যে রিপোজিটরির কপি তৈরি করেছেন সেখানে **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজের জন্য একটি নতুন Codespace তৈরি করবে।
আপনার কম্পিউটারে লোকালি পাঠ্যক্রম চালাতে, আপনার একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন। আমাদের প্রথম পাঠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে প্রতিটি সরঞ্জামের বিভিন্ন অপশন সম্পর্কে পথ দেখাবে যেন আপনি নিজের জন্য সেরা নির্বাচন করতে পারেন।
এই পাঠ্যক্রম আপনার কম্পিউটারে চালাতে, আপনার দরকার একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা ও সরঞ্জাম পরিচিতি](../../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>
```
২. Visual Studio Code-এ ফোল্ডারটি খুলুন। আপনি **File** > **Open Folder** ক্লিক করে এবং আপনি যেই ফোল্ডার ক্লোন করেছেন তা নির্বাচন করে এটি করতে পারেন।
2. Visual Studio Code এ ফোল্ডারটি খুলুন। আপনি এটি করতে পারেন **File** > **Open Folder** ক্লিক করে এবং আপনি যেই ফোল্ডারটি ক্লোন করেছেন সেটি নির্বাচন করে।
> সুপারিশকৃত 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/)। কুইজ অ্যাপটি লোকালভাবে চালানো যায় অথবা Azure-তে ডিপ্লয় করা যায়; `quiz-app` ফোল্ডারের নির্দেশিকাগুলি অনুসরণ করুন।
> **কুইজ সম্পর্কিত একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারে রয়েছে, মোট ৪৮টি কুইজ প্রতিটিতে তিনটি প্রশ্ন। সেগুলি পাওয়া যাবে [এখানে](https://ff-quizzes.netlify.app/web/), কুইজ অ্যাপটি স্থানীয়ভাবে চালানো যায় অথবা Azure এ ডিপ্লয় করা যায়; এর জন্য `quiz-app` ফোল্ডারে নির্দেশিকা অনুসরণ করুন।
## 🗃️ পাঠসমূহ
| | প্রকল্পের নাম | শেখানো বিষয়সমূহ | শেখার উদ্দেশ্য | সংযুক্ত পাঠ | লেখক |
| ০১ | Getting Started | প্রোগ্রামিং পরিচিতি এবং যন্ত্রপাতির পরিচিতি | প্রোগ্রামিং ভাষাগুলির প্রাথমিক বিবরণ এবং পেশাদার ডেভেলপারদের কাজ সাপোর্টকারী সফটওয়্যার সম্বন্ধে শেখা | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| ০২ | Getting Started | GitHub এর মৌলিক, দলের সাথে কাজ করার ধাপ | আপনার প্রকল্পে GitHub কিভাবে ব্যবহার করবেন, কোডবেসে অন্যদের সাথে কিভাবে সহযোগিতা করবেন | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| ০৩ | Getting Started | অ্যাক্সেসিবিলিটি | ওয়েব অ্যাক্সেসিবিলিটির মৌলিক বিষয়গুলো শেখা | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| ০৪ | JS Basics | JavaScript ডেটা টাইপ | JavaScript এর ডেটা টাইপের প্রাথমিক জ্ঞান | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| ০৫ | JS Basics | ফাংশন এবং মেথড | অ্যাপ্লিকেশনের লজিক প্রবাহ নিয়ন্ত্রণের জন্য ফাংশন এবং মেথড সম্পর্কে শেখা | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| ০৬ | JS Basics | JS দিয়ে সিদ্ধান্ত নেওয়া | কোডে শর্ত তৈরি করার জন্য সিদ্ধান্ত গ্রহণ পদ্ধতি শেখা | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| ০৭ | JS Basics | অ্যারে এবং লুপ | JavaScript-এ অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করা | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| ০৮ | [Terrarium](./3-terrarium/solution/README.md) | HTML অনুশীলন | একটি অনলাইন টেরারিয়াম তৈরির জন্য HTML নির্মাণ, মূলত লেআউট নির্মাণে ফোকাস | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| ০৯ | [Terrarium](./3-terrarium/solution/README.md) | CSS অনুশীলন | পরিষ্কার এবং রেসপন্সিভ পেজ তৈরির জন্য CSS নির্মাণের মৌলিক বিষয় শেখা | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| ১০ | [Terrarium](./3-terrarium/solution/README.md) | JavaScript ক্লোজার, DOM নিয়ন্ত্রণ | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস বানাতে JavaScript নির্মাণ, ক্লোজার এবং DOM নিয়ন্ত্রণে ফোকাস | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| ১১ | [Typing Game](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি | কী বোর্ড ইভেন্ট ব্যবহার করে JavaScript অ্যাপ এর লজিক চালানো শেখা | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| ১২ | [Green Browser Extension](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কিভাবে কাজ করে, ইতিহাস এবং ব্রাউজার এক্সটেনশন এর প্রথম উপাদানগুলি তৈরি শেখা | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| ১৩ | [Green Browser Extension](./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 |
| ১৪ | [Green Browser Extension](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরমেন্স | এক্সটেনশনের আইকন পরিচালনার জন্য ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার, ওয়েব পারফরমেন্স এবং অপ্টিমাইজেশন শেখা | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| ১৫ | [Space Game](./6-space-game/solution/README.md) | JavaScript দিয়ে উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন ব্যবহার করে ইনহেরিটেন্স এবং Pub/Sub প্যাটার্ন শেখা, গেম নির্মাণের প্রস্তুতি | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| ১৬ | [Space Game](./6-space-game/solution/README.md) | ক্যানভাসে ড্রয়িং | স্ক্রীনে ড্রয়িং করার জন্য Canvas API শেখা | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| ১৭ | [Space Game](./6-space-game/solution/README.md) | স্ক্রীনে উপাদান সরানো | কিভাবে উপাদান কার্টেসিয়ান কোঅর্ডিনেটস এবং Canvas API ব্যবহার করে গতিশীল হয় তা খুঁজে বের করা | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| ১৮ | [Space Game](./6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কী প্রেস ব্যবহার করে উপাদানগুলোর সংঘর্ষ ঘটানো এবং পারস্পরিক প্রতিক্রিয়া দেখা, পারফরম্যান্স রক্ষা করার জন্য কুলডাউন ফাংশন যুক্ত করা | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| ১৯ | [Space Game](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা ও পারফরমেন্সের ভিত্তিতে গাণিতিক হিসাব করা | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| ২০ | [Space Game](./6-space-game/solution/README.md) | গেম শেষ করা ও পুনরায় চালু করা | গেম শেষ ও পুনরায় শুরু করার পদ্ধতি শেখা, একসেট পরিষ্কারকরণ ও ভেরিয়েবল রিসেট করা | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| ২১ | [Banking App](./7-bank-project/solution/README.md) | ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুটিং | মাল্টিপেজ ওয়েবসাইটের কাঠামো তৈরির জন্য রুটিং ও HTML টেমপ্লেট ব্যবহারের পদ্ধতি শেখা | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| ২২ | [Banking App](./7-bank-project/solution/README.md) | লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি | ফর্ম তৈরি এবং ভ্যালিডেশন পদ্ধতি শেখা | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| ২৩ | [Banking App](./7-bank-project/solution/README.md) | ডেটা আহরণ ও ব্যবহার পদ্ধতি | অ্যাপ থেকে কিভাবে ডেটা আসছে ও যাচ্ছে, এটি কিভাবে আহরণ, সংরক্ষণ এবং অপসারণ করা হয় তা শেখা | [Data](./7-bank-project/3-data/README.md) | Yohan |
| ২৪ | [Banking App](./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 Assistants](./9-chat-project/README.md) | AI-এর সাথে কাজ করা | নিজের AI সহকারী তৈরি করা শেখা | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 শিক্ষণ পদ্ধতি
আমাদের পাঠ্যক্রম দুটি মূল শিক্ষণ নীতির উপর ভিত্তি করে ডিজাইন করা হয়েছে:
* প্রকল্প-ভিত্তিক শেখা
* ঘন ঘন কুইজ
এই প্রোগ্রাম JavaScript, HTML, এবং CSS এর ভিত্তি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুলস ও কৌশল। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, ইকো-ফ্রেন্ডলি ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার ধাঁচের গেম এবং ব্যবসায়িকদের জন্য ব্যাংকিং অ্যাপ নির্মাণ করে হাতে-কলমে অভিজ্ঞতা অর্জন করবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্টের শক্তিশালী ধারণা অর্জন করবে।
> 🎓 আপনি মাইক্রোসফট লার্নে এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে নিতে পারেন!
প্রকল্পসমূহের সাথে সামঞ্জস্য রেখে বিষয়বস্তু নিশ্চিত করার মাধ্যমে ছাত্রদের জন্য শেখার প্রক্রিয়া আরও আকর্ষণীয় হয় এবং ধারণাগুলো দীর্ঘস্থায়ী হয়। আমরা JavaScript মৌলিক বিষয়গুলো উপস্থাপনের জন্য কয়েকটি প্রারম্ভিক পাঠ এবং Microsoft এর "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহ থেকে একটি ভিডিও সংযুক্ত করেছি, যাদের কয়েকজন লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
এছাড়াও, একটি ক্লাসের আগে একটি কম চাপের কুইজ শিক্ষার্থীর মনোভাব তৈরি করে শিক্ষার উদ্দেশ্যে মনোনিবেশ করতে সাহায্য করে এবং ক্লাসের পরে দ্বিতীয় কুইজ বিষয়বস্তু সংরক্ষণ নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার করে ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিক অংশ হিসেবে নেওয়া যেতে পারে। প্রকল্পগুলো ছোট থেকে শুরু করে ১২ সপ্তাহের শেষে ক্রমশ জটিল হয়ে ওঠে।
আমরা উদ্দেশ্যগতভাবে JavaScript ফ্রেমওয়ার্কগুলো অন্তর্ভুক্ত করা থেকে বিরত থেকেছি যাতে প্রাথমিক দক্ষতাগুলো অর্জন করা যায়, যা ওয়েব ডেভেলপার হিসেবে ফ্রেমওয়ার্ক গ্রহণের পূর্বে প্রয়োজনীয়। এই পাঠ্যক্রম সম্পন্ন করার জন্য পরবর্তী ভালো পদক্ষেপ হতে পারে 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) নির্দেশিকা দেখুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়াকে স্বাগত জানাই!
| | প্রকল্পের নাম | শেখানো বিষয়সমূহ | শেখার উদ্দেশ্য | সংশ্লিষ্ট পাঠ | লেখক |
| 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 Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS বেসিকস | ফাংশন এবং মেথডসমূহ | একটি অ্যাপ্লিকেশনের লজিক ফ্লো পরিচালনার জন্য ফাংশন এবং মেথড সম্পর্কে শেখা | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine এবং Christopher |
| 06 | JS বেসিকস | JS দিয়ে সিদ্ধান্ত নেওয়া | কিভাবে আপনার কোডে শর্ত তৈরি করবেন সিদ্ধান্ত গ্রহণ পদ্ধতি ব্যবহার করে শেখা | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS বেসিকস | অ্যারে এবং লুপ | JavaScript এ অ্যারে এবং লুপ ব্যবহার করে ডেটার সাথে কাজ করা | [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 তৈরি, CSS এর মৌলিক বিষয় এবং পেজ রেসপনসিভ করা শেখা | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [টেরারিয়াম](./3-terrarium/solution/README.md) | JavaScript ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করানোর জন্য JavaScript নির্মাণ, ক্লোজার এবং DOM ম্যানিপুলেশনে গুরুত্ব দেওয়া | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [টাইপিং গেম](./4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি | কিবোর্ড ইভেন্ট ব্যবহার করে কিভাবে আপনার JavaScript অ্যাপের লজিক চালানো হয় শিখুন | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের সাথে কাজ | ব্রাউজার কিভাবে কাজ করে, তার ইতিহাস এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদান তৈরি করা শেখা | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ফর্ম তৈরি, API কল এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ | API কল করার জন্য আপনার ব্রাউজার এক্সটেনশনের JavaScript উপাদান তৈরি করুন, স্থানীয় স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরমেন্স | এক্সটেনশনের আইকন পরিচালনার জন্য ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফরমেন্স এবং কিছু অপ্টিমাইজেশন সম্পর্কে শেখা | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [স্পেস গেম](./6-space-game/solution/README.md) | JavaScript দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন উভয় ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন শেখা, একটি গেম নির্মাণের জন্য প্রস্তুতি | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে ড্রয়িং | স্ক্রীনে এলিমেন্ট আঁকার জন্য ব্যবহৃত Canvas API সম্পর্কে শেখা | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রীনের চারপাশে এলিমেন্ট সরানো | কিভাবে কার্তেসিয়ান কোঅর্ডিনেট এবং Canvas API ব্যবহার করে এলিমেন্টগুলোকে মুভ করানো যায় শেখা | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ শনাক্তকরণ | কীপ্রেস ব্যবহার করে এলিমেন্টগুলোকে সংঘর্ষ করানো এবং একে অপরের প্রতি প্রতিক্রিয়া দেখানো; গেমের পারফরমেন্স নিশ্চিত করতে কুলডাউন ফাংশন ব্যবহার করা | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের পরিস্থিতি ও পারফরমেন্সের ওপর ভিত্তি করে গণিতের হিসাব-নিকাশ করা | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু করা | গেম শেষ করা এবং পুনরায় শুরু করার বিষয়ে শেখা, সম্পদ পরিষ্কার করা এবং ভেরিয়েবলের মান রিসেট করা | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ওয়েব অ্যাপে HTML টেমপ্লেট এবং রাউটসমূহ | মাল্টিপেজ ওয়েবসাইট আর্কিটেকচারের স্ক্যাফোল্ড তৈরি করা শিখুন রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি | ফর্ম তৈরি এবং যাচাইকরণ পদ্ধতি সম্পর্কে শেখা | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহারের পদ্ধতি | আপনার অ্যাপের ভিতরে ও বাইরে ডেটার প্রবাহ, কিভাবে তা সংগ্রহ, সংরক্ষণ এবং মুছে ফেলা যায় শিখুন | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্ট ধারণা | আপনার অ্যাপ কিভাবে অবস্থা ধরে রাখে এবং প্রোগ্রাম্যাটিকভাবে তা কিভাবে পরিচালনা করবেন শেখা | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ব্রাউজার/VScode কোড](../../8-code-editor) | VScode এর সাথে কাজ করা | কোড এডিটর ব্যবহার শিখুন | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI সহকারী](./9-chat-project/README.md) | AI এর সাথে কাজ করা | নিজের AI সহকারী তৈরি শেখা | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 শিক্ষণশাস্ত্র
আমাদের পাঠ্যক্রম দুইটি মূল শিক্ষণ নীতির ভিত্তিতে ডিজাইন করা হয়েছে:
* প্রকল্প-ভিত্তিক শিক্ষা
* ঘন ঘন কুইজ পরীক্ষা
এই প্রোগ্রামটি JavaScript, HTML এবং CSS এর মৌলিক বিষয় শেখায়, পাশাপাশি বর্তমান ওয়েব ডেভেলপাররা যেসব সরঞ্জাম ও প্রযুক্তি ব্যবহার করে তা শেখায়। ছাত্ররা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস ইনভেডার ধরণের গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্তিশালী ধারণা লাভ করবে।
> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ Microsoft Learn এ একটি [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে নিতে পারেন!
বিষয়বস্তু প্রকল্পের সাথে সামঞ্জস্যপূর্ণ করার মাধ্যমে, শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় হয় এবং ধারণাগুলোর স্মরণীয়তা বৃদ্ধি পায়। আমরা JavaScript বেসিকসের কয়েকটি প্রাথমিক পাঠও লিখেছি ধারণাগুলো পরিচয় করানোর জন্য, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহ থেকে একটি ভিডিওসহ, যাদের মধ্যে কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন।
তদুপরি, একটি ক্লাসের আগে হালকা স্তরের কুইজ শিক্ষার্থীর শেখার প্রতিশ্রুতি স্থাপন করে, এবং ক্লাসের পর একটি দ্বিতীয় কুইজ আরও স্মরণীয়তা নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার করার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ অথবা আংশিক অংশগ্রহণ করা যায়। প্রকল্পগুলো ছোট থেকে শুরু করে ১২ সপ্তাহের চক্র শেষে ক্রমশ জটিল হয়ে ওঠে।
যেহেতু আমরা সচেতনভাবে JavaScript ফ্রেমওয়ার্ক পরিচিতি এড়িয়েছি যাতে ওয়েব ডেভেলপার হিসেবে মৌলিক দক্ষতা অর্জনে মনোযোগ দিতে পারি ফ্রেমওয়ার্ক গৃহীত করার আগে, তাই এই পাঠ্যক্রম শেষ করার পর পরবর্তী ভালো পদক্ষেপ হতে পারে 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.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
সমস্ত পাঠের একটি পিডিএফ [এখানে](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)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -245,21 +251,21 @@
## সাহায্য নেওয়া
যদি আপনি আটকে যান অথবা AI অ্যাপ তৈরি সম্পর্কে আপনার কোনো প্রশ্ন থাকে, তবে MCP নিয়ে আলাপ-আলোচনায় অংশ নিতে সহপাঠী শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সাথে যোগ দিন। এটি একটি সহায়ক কমিউনিটি যেখানে প্রশ্ন করা স্বাগত এবং জ্ঞান বিনামূল্যে শেয়ার করা হয়।
যদি আপনি আটকে যান বা AI অ্যাপ নির্মাণ সম্পর্কে কোনো প্রশ্ন থাকে। MCP নিয়ে আলোচনা করতে সহশিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সাথে যোগ দিন। এটি একটি সহায়ক সম্প্রদায় যেখানে প্রশ্ন歓迎 এবং জ্ঞান বিনামূল্যে ভাগ করা হয়।
এই রিপোজিটরিটি 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) ব্যবহার করে অনূদিত হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে कृপয়া মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা ভুল থাকতে পারে। মূল নথিটি তার নিজ ভাষায় সর্বাধিক গ্রহণযোগ্য উৎস হিসেবে বিবেচিত হওয়া উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ পরামর্শ দেওয়া হয়। এই অনুবাদের ব্যবহার থেকে উদ্ভূত কোনও ভুল বোঝাবুঝি বা ভ্রান্তির জন্য আমরা দায়ী নই।
**এই রেপোজিটরিটি ওয়েব ডেভেলপমেন্ট মৌলিক বিষয় শেখার জন্য একটি রোডম্যাপ প্রদান করে, যার কেন্দ্রীয় বিষয় JavaScript, HTML, এবং CSS। কারিকুলামটি নমনীয় এবং পুরোপুরি বা আংশিক নেওয়া যেতে পারে, ১২ সপ্তাহ জুড়ে মোট ২৪টি পাঠ দেওয়া হয়েছে।**
## প্রধান মাইলস্টোনসমূহ
* **১-৩ সপ্তাহ:**
* প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি
* GitHub এর মৌলিক বিষয়সমূহ
* অ্যাক্সেসেবিলিটি
* JS মৌলিক বিষয়: ডেটা টাইপ, ফাংশন এবং মেথডস
* JS দিয়ে সিদ্ধান্ত গ্রহণ
* **৪-৬ সপ্তাহ:**
* অ্যারে এবং লুপ
* Terrarium: HTML অনুশীলন
* CSS অনুশীলন
* JavaScript ক্লোজারস
* DOM ম্যানিপুলেশন
* **৭-৯ সপ্তাহ:**
* Typing Game: ইভেন্ট-চালিত প্রোগ্রামিং
* Green Browser Extension: ব্রাউজার নিয়ে কাজ
* একটি ফর্ম তৈরি করা, API কল করা এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ
* ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেসসমূহ
* ওয়েব পারফরম্যান্স
* **১০-১২ সপ্তাহ:**
* Space Game: JavaScript দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট
* ক্যানভাসে ড্রয়িং
* স্ক্রীনে উপাদানগুলো সরানো
* সংঘর্ষ সনাক্তকরণ
* স্কোর রাখা, গেম শেষ করা এবং পুনরায় শুরু করা
* Banking App: HTML টেম্পলেট এবং রাউটস একটি ওয়েব অ্যাপে
* লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি
* ডেটা সংগ্রহ এবং ব্যবহার পদ্ধতিসমূহ
* স্টেট ম্যানেজমেন্টের ধারণাসমূহ
## শেখার ফলাফল
**এই রোডম্যাপ সম্পন্ন করার মাধ্যমে, ছাত্ররা হ্যান্ডস-অন অভিজ্ঞতা অর্জন করবে টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম, এবং ব্যবসায়িক ব্যবহারের জন্য একটি ব্যাংকিং অ্যাপ তৈরি করতে। তারা শক্তিশালী ওয়েব ডেভেলপমেন্ট মৌলিক ধারণা অর্জন করবে।**
## অতিরিক্ত সম্পদ
* এই রেপোজিটরিতে আরও শেখার জন্য অনেক রিসোর্স রয়েছে, যার মধ্যে রয়েছে টিউটোরিয়াল, কোড উদাহরণ এবং চ্যালেঞ্জ।
* Microsoft Learn প্ল্যাটফর্মটি বিভিন্ন ওয়েব ডেভেলপমেন্ট কোর্স এবং শেখার পথ সরবরাহ করে।
* Stack Overflow এবং MDN Web Docs-এর মতো অনলাইন কমিউনিটিগুলো ওয়েব ডেভেলপারদের জন্য মূল্যবান সহায়তা এবং রিসোর্স প্রদান করে।
**আশা করি এই রোডম্যাপটি আপনার ওয়েব ডেভেলপমেন্ট যাত্রায় সাহায্য করবে!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**অস্বীকৃতি**:
এই দলিলটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবুও স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসামঞ্জস্যতা থাকতে পারে। মূল ভাষায় থাকা মূল দলিলটিকেই কর্তৃত্বপূর্ণ উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদের পরামর্শ দেওয়া হয়। এই অনুবাদের ব্যবহার থেকে উদ্ভূত যে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।
यह शुरुआती लोगों को वेब विकास की मूलभूत बातें सिखाने के लिए एक शैक्षिक पाठ्यक्रम रिपॉजिटरी है। पाठ्यक्रम माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा विकसित 12-सप्ताह का व्यापक कोर्स है, जिसमें जावास्क्रिप्ट, CSS और HTML को कवर करने वाले 24 प्रैक्टिकल पाठ शामिल हैं।
यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने हेतु एक शैक्षिक पाठ्यक्रम रिपॉज़िटरी है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन पाठ शामिल हैं।
### मुख्य घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **प्रैक्टिकल प्रोजेक्ट्स**: टेरारियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट
- **इंटरएक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (पाठ से पहले/बाद के आकलन)
- **बहुभाषा समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं में स्वचालित अनुवाद
- सीखने वालों के लिए अनुशंसित [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त पाठ्यक्रम: जनरेटिव AI, डेटा साइंस, एमएल, IoT पाठ्यक्रम उपलब्ध
### विशिष्ट प्रोजेक्ट्स के साथ काम करना
### विशिष्ट परियोजनाओं के साथ काम करना
व्यक्तिगत प्रोजेक्ट्स पर विस्तृत निर्देशों के लिए, README फ़ाइलों को देखें:
व्यक्तिगत परियोजनाओं के विस्तृत निर्देश के लिए, निम्न README फ़ाइल देखें:
- `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन
- `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन
- `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास
- `6-space-game/README.md` - कैनवास-आधारित गेम विकास
- `6-space-game/README.md` - कन्वास आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट असिस्टेंट प्रोजेक्ट
### मोनोरिपो संरचना
### मोनोरिपॉ संरचना
हालांकि यह पारंपरिक मोनोरिपो नहीं है, यह रिपॉजिटरी कई स्वतंत्र प्रोजेक्ट्स को समाहित करती है:
- प्रत्येक पाठ आत्मनिर्भर है
- प्रोजेक्ट्स डिपेंडेंसी साझा नहीं करते हैं
- व्यक्तिगत प्रोजेक्ट्स पर काम करें बिना दूसरों को प्रभावित किए
- पूरे पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें
हालांकि यह पारंपरिक मोनोरिपॉ नहीं है, इस रिपॉज़िटरी में कई स्वतंत्र परियोजनाएं हैं:
- प्रत्येक पाठ स्वायत्त है
- परियोजनाएं निर्भरताएँ साझा नहीं करतीं
- व्यक्तिगत परियोजनाओं पर बिना दूसरों को प्रभावित किए काम करें
- पूर्ण पाठ्यक्रम अनुभव के लिए पूरे रिपॉज़िटरी को क्लोन करें
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। हम सटीकता के लिए प्रयासरत हैं, लेकिन कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
# शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम
Microsoft Cloud Advocates द्वारा प्रदान किए गए हमारे 12-सप्ताह के समग्र पाठ्यक्रम के साथ वेब विकास की मूल बातें सीखें। 24 पाठों में से प्रत्येक JavaScript, CSS, और HTML को टेरारियम, ब्राउज़र एक्सटेंशन्स, और स्पेस गेम जैसी प्रायोगिक परियोजनाओं के माध्यम से गहराई से समझाता है। क्विज़, चर्चा, और व्यावहारिक असाइनमेंट में भाग लें। हमारे प्रभावी परियोजना-आधारित शिक्षण पद्धति के साथ अपनी कौशल को बढ़ाएं और ज्ञान धारण करने को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!
माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा हमारे 12 सप्ताह के व्यापक कोर्स के साथ वेब डेवलपमेंट के मूल सिद्धांत सीखें। 24 पाठों में से प्रत्येक में टेरारियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे हैंड्स-ऑन प्रोजेक्ट्स के जरिए JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स के साथ जुड़ें। अपनी कौशल को बढ़ाएं और हमारे प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने ज्ञान को यादगार बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें!
Azure AI Foundry Discord समुदाय में शामिल हों
@ -21,186 +21,187 @@ Azure AI Foundry Discord समुदाय में शामिल हों
इन संसाधनों का उपयोग शुरू करने के लिए इन चरणों का पालन करें:
1. **रिपॉजिटरी को फोर्क करें**: क्लिक करें [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> यह आपको तेज़ डाउनलोड के साथ कोर्स पूरा करने के लिए आवश्यक सभी चीज़ें देता है।
> यह आपको कोर्स पूरा करने के लिए आवश्यक सभी चीज़ें तेज डाउनलोड के साथ देता है।
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**यदि आप अतिरिक्त अनुवाद भाषाओं का समर्थन चाहते हैं तो वे [यहां](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) सूचीबद्ध हैं**
**यदि आप अतिरिक्त भाषाओं के अनुवाद चाहते हैं तो वे [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) सूचीबद्ध हैं**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _क्या आप छात्र हैं?_
[**Student Hub पेज**](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 एजेंट मोड चुनौतियां पूरी करें!
### 📣 घोषणा - नई GitHub Copilot एजेंट मोड चुनौतियाँ पूरी करें!
नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपके लिए GitHub Copilot और एजेंट मोड का उपयोग करके पूरी की जाने वाली एक नई चुनौती है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है, तो यह सिर्फ टेक्स्ट जनरेट करने में सक्षम नहीं है बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और अधिक कर सकता है।
नई चुनौती जोड़ी गई है, ज्यादातर अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपके लिए GitHub Copilot और एजेंट मोड का उपयोग करके पूरी करने के लिए नई चुनौती है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ।
### 📣 घोषणा - _नई जनरेटिव AI परियोजना बनाएं_
### 📣 घोषणा - _जनरेटिव AI का उपयोग करते हुए नया प्रोजेक्ट बनाएं_
नई AI सहायक परियोजना अभी जोड़ी गई है, इसे देखें [project](./9-chat-project/README.md)
नया AI असिस्टेंट प्रोजेक्ट हाल ही में जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md)
### 📣 घोषणा - _JavaScript के लिए नई जनरेटिव AI पाठ्यक्रम_ अभी जारी हुई है
### 📣 घोषणा - _JavaScript के लिए जनरेटिव AI पर नया पाठ्यक्रम_ अभी जारी हुआ है
हमारा नया जनरेटिव 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)!
प्रत्येक पाठ में एक असाइनमेंट, ज्ञान जांच और एक चुनौती होती है जो आपको निम्न विषयों को सीखने में मार्गदर्शन करेगी:
प्रत्येक पाठ में एक असाइनमेंट, एक ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों पर मार्गदर्शन करती है:
- प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग
- टेक्स्ट और इमेज ऐप जनरेशन
- टेक्स्ट और इमेज ऐप निर्माण
- खोज ऐप्स
शुरू करने के लिए जाएं: [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) में सुनना चाहेंगे!
## 🌱 शुरूआत
**[शिक्षार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठ के लिए, एक पूर्व व्याख्यान क्विज़ से शुरू करें और व्याख्यान सामग्री पढ़ें, विभिन्न गतिविधियां पूरी करें और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ की जांच करें।
> **शिक्षकगण**, हमने [कुछ सुझाव](for-teachers.md) शामिल किए हैं कि इस पाठ्यक्रम का उपयोग कैसे करें। हम आपकी प्रतिक्रिया के लिए उत्सुक हैं [हमारे चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) में!
अपने सीखने के अनुभव को बढ़ाने के लिए, परियोजनाओं पर मिलकर काम करने के लिए अपने सहपाठियों से जुड़ें! चर्चाओं को हमारे [चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में प्रोत्साहित किया जाता है जहां हमारे मध्यस्थों की टीम आपके सवालों के जवाब देने के लिए उपलब्ध रहेगी।
**[शिक्षार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, हर पाठ के लिए, एक प्री-लेक्चर क्विज़ के साथ शुरू करें और फिर व्याख्यान सामग्री पढ़ें, विभिन्न गतिविधियाँ पूरी करें और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ जांचें।
अपनी शिक्षा को आगे बढ़ाने के लिए, हम [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) में अतिरिक्त अध्ययन सामग्री की खोज करने की जोरदार सलाह देते हैं।
अपना अधिगम अनुभव बेहतर बनाने के लिए, अपने साथियों के साथ जुड़ें और प्रोजेक्ट्स पर मिलकर काम करें! चर्चाएँ हमारे [चर्चा मंच](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) का पता लगाने की सिफारिश करते हैं।
इस पाठ्यक्रम के लिए एक विकसित वातावरण तैयार है! जैसे ही आप शुरू करते हैं, आप इस पाठ्यक्रम को [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" बटन पर क्लिक करें।
1. **रिपॉजिटरी को फोर्क करें**: इस पेज के टॉप-राइट कोने में "Fork" बटन पर क्लिक करें।
आपकी बनाई गई इस रिपॉजिटरी की कॉपी में,**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) का उपयोग करें, जिसमें एक अंतर्निहित [टर्मिनल](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) का उपयोग करें, जो एक अंतर्निर्मित [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)।
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/)
> **क्विज के बारे में एक नोट**: सभी क्विज़ क्विज-ऐप फ़ोल्डर में रखे गए हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं; क्विज ऐप को स्थानीय रूप से चलाया जा सकता है या Azure पर डिप्लॉय किया जा सकता है; निर्देशों का पालन करें जो `quiz-app` फ़ोल्डर में हैं।
> **क्विज़ के बारे में एक नोट**: सभी क्विज़ Quiz-app फोल्डर में रखे गए हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं, क्विज़ ऐप को लोकली चला सकते हैं या Azure पर तैनात कर सकते हैं; `quiz-app` फ़ोल्डर में निर्देशों का पालन करें।
## 🗃️ पाठ
| | परियोजना का नाम | सिखाए गए अवधरणाएँ | सीखने के उद्देश्य | संबंधित पाठ | लेखक |
| 01 | Getting Started | प्रोग्रामिंग और टूल्स का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल और उन सॉफ्टवेयर के बारे में सीखें जो पेशेवर डेवलपर्स को उनके काम में मदद करते हैं | [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub के मूल, टीम के साथ कार्य करना | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | पहुँच (Accessibility) | वेब पहुँच के मूल बातों को सीखें | [पहुँच बुनियादी सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों के मूल बातें | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | फ़ंक्शन और मेथड | एप्लिकेशन की लॉजिक फ़्लो को प्रबंधित करने के लिए फ़ंक्शन और मेथड के बारे में जानें | [फ़ंक्शन और मेथड](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JS के साथ निर्णय लेना | अपने कोड में निर्णय लेने की विधियों का उपयोग कर कंडीशंस बनाना सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays और Loops | JavaScript में डेटा के साथ Arrays और Loops के साथ काम करें | [Arrays और Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML का अभ्यास | ऑनलाइन टेरैरियम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें | [HTML परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS का अभ्यास | ऑनलाइन टेरैरियम को शैली देने के लिए CSS बनाएं, CSS के मूल बातें सहित पेज को रेस्पॉन्सिव बनाने पर ध्यान दें | [CSS परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोज़र, DOM हेरफेर | टेरैरियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में कार्य करने के लिए JavaScript बनाएं, क्लोज़र और DOM हेरफेर पर केंद्रित | [JavaScript क्लोज़र, DOM हेरफेर](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | एक टाइपिंग गेम बनाएं | अपनी JavaScript ऐप की लॉजिक चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें | [इवेंट-ड्रिवन प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़र के साथ काम करना | ब्राउज़र्स कैसे काम करते हैं, उनका इतिहास, और एक ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफ़ोल्ड करना सीखें | [ब्राउज़र्स के बारे में](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल्स स्टोर करना | अपने ब्राउजर एक्सटेंशन के JavaScript तत्व बनाएं जो लोकल स्टोरेज में स्टोर किए गए वेरिएबल्स का उपयोग करते हुए API कॉल करें | [APIs, फ़ॉर्म और लोकल स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउज़र में बैकग्राउंड प्रक्रियाएँ, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की बैकग्राउंड प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन सीखें | [बैकग्राउंड टास्क और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript के साथ और उन्नत गेम विकास | क्लासेस और कंपोज़िशन दोनों का उपयोग करके इनहेरिटेंस और Pub/Sub पैटर्न के बारे में जानें, एक गेम बनाने की तैयारी करें | [उन्नत गेम विकास का परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | कैनवास पर चित्र बनाना | कैनवास API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को चित्रित करने के लिए किया जाता है | [कैनवास पर चित्र बनाना](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को घुमाना | खोजें कि तत्व कैसे कार्टेसियन निर्देशांकों और कैनवास API का उपयोग करके गति प्राप्त कर सकते हैं | [तत्वों को घुमाना](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | टक्कर पहचान | तत्वों को टकराने और एक-दूसरे के प्रति प्रतिक्रिया देने के लिए कीप्रेस का उपयोग करें और गेम के प्रदर्शन को सुनिश्चित करने के लिए ठंडावस्था फ़ंक्शन दें | [टक्कर पहचान](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | स्कोर रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें | [स्कोर रखना](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | गेम को समाप्त करना और पुनः शुरू करना | गेम को समाप्त करने और पुनः शुरू करने के बारे में जानें, जिसमें संपत्तियों को साफ करना और चर मानों को रीसेट करना शामिल है | [अंत की स्थिति](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | वेब ऐप में HTML टेम्पलेट्स और रूट्स | रूटिंग और HTML टेम्पलेट्स का उपयोग करके मल्टीपेज वेबसाइट के संरचना का मूल रुप बनाना सीखें | [HTML टेम्पलेट्स और रूट्स](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | लॉगिन और पंजीकरण फॉर्म बनाना | फॉर्म बनाने और वैलिडेशन रूटीन को संभालने के बारे में जानें | [फ़ॉर्म](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | डेटा प्राप्त करने और उपयोग करने के तरीके | आपकी ऐप में डेटा कैसे आता है और जाता है, इसे कैसे प्राप्त किया जाए, संग्रहीत किया जाए, और निपटाया जाए | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | स्टेट मैनेजमेंट के सिद्धांत | अपनी ऐप में स्टेट कैसे रहता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित किया जाए सीखें | [स्टेट मैनेजमेंट](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode के साथ काम करना | कोड एडिटर का उपयोग कैसे करें सीखें| [VScode Code Editor का उपयोग](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI के साथ काम करना | अपना खुद का AI सहायक कैसे बनाएं सीखें | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
| | प्रोजेक्ट का नाम | सिखाए गए विषय | सीखने के उद्देश्य | लिंक किया गया पाठ | लेखक |
| 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 बुनियादी बातें | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों का मूल ज्ञान | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS बुनियादी बातें | फ़ंक्शन और मेथड्स | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शन और मेथड्स के बारे में सीखें | [फ़ंक्शन और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher |
| 06 | JS बुनियादी बातें | JS के साथ निर्णय लेना | निर्णय-लेने के तरीके उपयोग करके अपने कोड में शर्तें बनाना सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS बुनियादी बातें | एरे और लूप | JavaScript में डेटा के साथ काम करने के लिए एरे और लूप का उपयोग करें | [एरे और लूप](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML का अभ्यास | एक ऑनलाइन टेरारीयम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें | [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS का अभ्यास | ऑनलाइन टेरारीयम को स्टाइल करने के लिए CSS बनाएं, CSS के मूल सिद्धांतों के साथ पेज को प्रतिक्रियाशील बनाएं | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोज़र, DOM मैनिपुलेशन | टेरारीयम को ड्रैग/ड्रॉप इंटरफेस के रूप में कार्य करने के लिए JavaScript बनाएं, क्लोज़र और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | [JavaScript क्लोज़र, DOM मैनिपुलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [टाइपिंग गेम](./4-typing-game/solution/README.md) | टाइपिंग गेम बनाना | अपने JavaScript ऐप की लॉजिक चलाने के लिए कीबोर्ड ईवेंट का उपयोग करना सीखें | [ईवेंट-ड्रिवन प्रोग्रामिंग](./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 कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं, स्थानीय स्टोरेज में रखें गए वेरिएबल्स का उपयोग करें | [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) | JavaScript के साथ अधिक उन्नत गेम विकास | क्लासेज और कम्पोजीशन दोनों का उपयोग करके इनहेरिटेंस और Pub/Sub पैटर्न सीखें, गेम बनाने की तैयारी में | [उन्नत गेम विकास का परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [स्पेस गेम](./6-space-game/solution/README.md) | कैनवास पर ड्राइंग | स्क्रीन पर तत्वों को ड्रॉ करने के लिए उपयोग की जाने वाली Canvas API के बारे में जानें | [कैनवास पर ड्राइंग](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [स्पेस गेम](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को स्थानांतरित करना | समझें कि कैसे तत्व कार्टेशियन निर्देशांकों और Canvas 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 | [Browser/VScode Code](../../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 |
## 🏫 शिक्षाशास्त्र
हमारा पाठ्यक्रम दो प्रमुख शिक्षाशास्त्रीय सिद्धांतों के साथ डिज़ाइन किया गया है:
* परियोजना-आधारित सीखना
* बार-बार क्विज़
हमारा पाठ्यक्रम दो महत्वपूर्ण शिक्षाशास्त्रीय सिद्धांतों के साथ डिज़ाइन किया गया है:
* प्रोजेक्ट-आधारित सीखना
* नियमित क्विज़
यह कार्यक्रम JavaScript, HTML, और CSS की मूल बातें सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को। छात्रों को टाइपिंग गेम, वर्चुअल टेरैरियम, पर्यावरण के अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-शैली के गेम, और व्यापारों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ हो जाएगी।
कार्यक्रम JavaScript, HTML, और CSS के मूलभूत सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्र व्यापक अनुभव प्राप्त करने के लिए टाइपिंग गेम, वर्चुअल टेरारीयम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इन्वे़डर-शैली का गेम, और व्यवसायों के लिए बैंकिंग ऐप बना पाएंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त होगी।
> 🎓 आप Microsoft Learn पर इस पाठ्यक्रम के पहले कुछ पाठ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं!
> 🎓 आप माइक्रोसॉफ्ट लर्न पर इस पाठ्यक्रम की पहली कुछ कक्षाएँ [Lear Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं!
यह सुनिश्चित करते हुए कि सामग्री परियोजनाओं के अनुरूप है, प्रक्रिया छात्रों के लिए अधिक रोचक हो जाती है और अवधारणाओं को बनाए रखने में वृद्धि होती है। हमने JavaScript के मूल सिद्धांतों वाले कई प्रारंभिक पाठ भी लिखे हैं, जिनमें "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह से एक वीडियो जोड़ा है, जिनके कुछ लेखक इस पाठ्यक्रम में योगदानकर्ता हैं।
यह सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के अनुरूप हो, प्रक्रिया छात्रों के लिए अधिक आकर्षक हो जाती है और अवधारणाओं को बनाए रखने में सहायता मिलती है। हमने कई शुरुआती पाठ JavaScript के मूल सिद्धांतों पर भी लिखे हैं ताकि अवधारणाओं का परिचय हो सके, ये "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह का एक वीडियो के साथ जोड़ा गया है, जिनके कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं।
इसके अलावा, कक्षा से पहले एक कम-जमीनी क्विज़ छात्र की विषय सीखने की मंशा निर्धारित करता है, जबकि कक्षा के बाद एक दूसरा क्विज़ अवधारणाओं को और मजबूत करता है। यह पाठ्यक्रम लचीला और मजेदार बनने के लिए डिज़ाइन किया गया है जिसे पूरे या किसी हिस्से में लिया जा सकता है। परियोजनाएँ शुरू में छोटी होती हैं और 12 सप्ताह के चक्र के अंत तक बढ़ती जटिलता की होती हैं।
अतिरिक्त रूप से, कक्षा से पहले एक कम दबाव वाला क्विज़ छात्र की सीखने की मंशा को सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ आगे की अवधारण सुनिश्चित करता है। यह पाठ्यक्रम लचीला और मजेदार बनाने के लिए डिज़ाइन किया गया है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट्स छोटे से शुरू होकर 12-सप्ताह की अवधि के अंत तक धीरे-धीरे जटिल हो जाते हैं।
जबकि हमने जावास्क्रिप्ट फ्रेमवर्क पेश करने से जानबूझकर बचा है ताकि वेब डेवलपर के रूप में आवश्यक मूल कौशलों पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने का अगला अच्छा कदम Node.js के बारे में सीखना होगा, जो वीडियो संग्रह "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" के माध्यम से है।
जबकि हमने जानबूझकर JavaScript फ्रेमवर्क्स का परिचय नहीं दिया है ताकि एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशलों पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के लिए अगला अच्छा कदम 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` टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: `localhost:3000`।
आप यह दस्तावेज़ [Docsify](https://docsify.js.org/#/) का उपयोग करके ऑफ़लाइन चला सकते हैं। इस रिपॉजिटरी को फॉर्क करें, अपनी स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), फिर इस रिपॉजिटरी के रूट फोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट के पोर्ट 3000 पर सर्व होगी: `localhost:3000`।
## 📘 पीडीएफ
सभी पाठों का पीडीएफ [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) मिला जा सकता है।
सभी पाठों का PDF [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
## 🎒 अन्य पाठ्यक्रम
@ -210,7 +211,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -248,21 +249,21 @@ Azure AI Foundry Discord समुदाय में शामिल हों
## मदद प्राप्त करना
यदि आप फंस जाते हैं या AI ऐप बनाने के बारे में कोई सवाल है, तो MCP के बारे में चर्चा में साथी शिक्षार्थियों और अनुभवी डेवलपर्स के साथ जुड़ें। यह एक सहायक समुदाय है जहाँ प्रश्नों का स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है।
यदि आप फंस जाते हैं या AI ऐप्स बनाने के बारे में कोई प्रश्न है। MCP के बारे में चर्चा में अन्य शिक्षार्थियों और अनुभवी डेवलपर्स से जुड़ें। यह एक सहायक समुदाय है जहां प्रश्न स्वागत है और ज्ञान मुफ्त में साझा किया जाता है।
यह रिपॉजिटरी MIT लाइसेंस के अंतर्गत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें।
यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें।
---
<!-- 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) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
# Microsoft के Web-Dev-For-Beginners रिपॉजिटरी के लिए रोडमैप
**यह रिपॉजिटरी जावास्क्रिप्ट, HTML, और CSS पर केंद्रित वेब डेवलपमेंट के मूलभूत ज्ञान सीखने के लिए एक रोडमैप प्रदान करती है। पाठ्यक्रम लचीला है और पूरे या आंशिक रूप से लिया जा सकता है, जिसमें 12 सप्ताहों में 24 पाठों का वितरण है।**
## मुख्य मील के पत्थर
* **सप्ताह 1-3:**
* प्रोग्रामिंग भाषाओं और औजारों का परिचय
* GitHub के मूल बातें
* पहुंच योग्यता (Accessibility)
* JS के मूल: डाटा प्रकार, फ़ंक्शन और मेथड्स
* JS के साथ निर्णय लेना
* **सप्ताह 4-6:**
* एरे और लूप्स
* Terrarium: HTML का अभ्यास
* CSS का अभ्यास
* जावास्क्रिप्ट क्लोज़र्स
* DOM मनिपुलेशन
* **सप्ताह 7-9:**
* टाइपिंग गेम: इवेंट-ड्रिवन प्रोग्रामिंग
* Green Browser Extension: ब्राउज़र के साथ काम करना
* फॉर्म बनाना, API कॉल करना और स्थानीय संग्रहण में वेरिएबल्स स्टोर करना
* ब्राउज़र में बैकग्राउंड प्रोसेसेस
* वेब प्रदर्शन
* **सप्ताह 10-12:**
* स्पेस गेम: जावास्क्रिप्ट के साथ अधिक उन्नत गेम विकास
* कैनवास पर ड्रॉइंग
* स्क्रीन पर तत्वों को स्थानांतरित करना
* टक्करा पहचान (Collision detection)
* स्कोर रखना, गेम समाप्त करना और पुनः शुरू करना
* बैंकिंग ऐप: वेब ऐप में HTML टेम्पलेट्स और रूट्स
* लॉगिन और रजिस्ट्रेशन फॉर्म बनाना
* डेटा प्राप्त करने और उपयोग करने के तरीके
* स्टेट मैनेजमेंट की अवधारणाएँ
## सीखने के परिणाम
**इस रोडमैप को पूरा करके, छात्र एक टाइपिंग गेम, वर्चुअल टेरियम, पर्यावरण-हितैषी ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-शैली के गेम, और व्यावसायिक बैंकिंग ऐप बनाने का व्यावहारिक अनुभव प्राप्त करेंगे। वे वेब विकास की मूलभूत अवधारणाओं की मजबूत समझ भी विकसित करेंगे।**
## अतिरिक्त संसाधन
* यह रिपॉजिटरी आगे की सीख के लिए ट्यूटोरियल, कोड उदाहरण और चुनौतियों सहित संसाधनों का खजाना प्रदान करती है।
* Microsoft Learn प्लेटफ़ॉर्म विभिन्न वेब डेवलपमेंट पाठ्यक्रमों और सीखने के पथों की पेशकश करता है।
* ऑनलाइन समुदाय जैसे Stack Overflow और MDN Web Docs वेब डेवलपर्स के लिए मूल्यवान सहायता और संसाधन प्रदान करते हैं।
**मुझे उम्मीद है यह रोडमैप आपकी वेब विकास यात्रा में मदद करेगा!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। हम सटीकता के लिए प्रयासरत हैं, लेकिन कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियां या असंगतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
- 학습자를 위한 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 추천
- 추가 과정: 생성형 AI, 데이터 과학, ML, IoT 커리큘럼 제공
- 학습자를 위한 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 권장
- 추가 코스: 생성형 AI, 데이터 과학, 머신러닝, IoT 커리큘럼 제공
### 특정 프로젝트 작업
### 개별 프로젝트 작업 방법
개별 프로젝트에 대한 자세한 지침은 다음 README 파일 참조:
개별 프로젝트에 대한 자세한 지침은 다음 README 참조:
- `quiz-app/README.md` - Vue 3 퀴즈 애플리케이션
- `7-bank-project/README.md` - 인증 기능이 포함된 은행 애플리케이션
- `5-browser-extension/README.md` - 브라우저 확장 프로그램 개발
- `7-bank-project/README.md` - 인증 기능 있는 뱅킹 애플리케이션
- `5-browser-extension/README.md` - 브라우저 확장 개발
- `6-space-game/README.md` - 캔버스 기반 게임 개발
- `9-chat-project/README.md` - AI 채팅 어시스턴트 프로젝트
- `9-chat-project/README.md` - AI 채팅 도우미 프로젝트
### 모노레포 구조
전통적인 모노레포는 아니지만, 이 저장소는 여러 독립적인 프로젝트를 포함:
- 각 레슨은 독립적임
- 프로젝트는 종속성을 공유하지 않음
- 개별 프로젝트 작업은 다른 프로젝트에 영향을 주지 않음
- 전체 커리큘럼 경험을 위해 저장소 전체 클론 가능
전통적인 모노레포는 아니지만, 이 저장소는 다수 독립 프로젝트 포함:
- 각 수업은 독립적으로 구성됨
- 프로젝트 간 의존성 공유 없음
- 개별 프로젝트 작업 시 다른 프로젝트에 영향 없음
- 전체 커리큘럼 경험을 위해 저장소 전체 클론 권장
---
<!-- 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)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확성이 포함될 수 있음을 양지하시기 바랍니다. 원본 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
Microsoft Cloud Advocates가 제공하는 12주 종합 과정으로 웹 개발의 기본을 배우세요. 24개의 각 수업은 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 심도 있게 다룹니다. 퀴즈, 토론 및 실용적인 과제에 참여하세요. 효과적인 프로젝트 기반 교수법으로 기술을 향상시키고 지식 습득을 최적화하세요. 오늘 바로 코딩 여정을 시작하세요!
Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정을 통해 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장 기능, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제에 참여하세요. 효과적인 프로젝트 기반 교수법으로 실력을 향상시키고 지식 습득을 최적화할 수 있습니다. 지금 바로 코딩 여정을 시작하세요!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 이렇게 하면 과정 완료에 필요한 모든 것을 훨씬 빠른 다운로드로 받을 수 있습니다.
> 이렇게 하면 훨씬 빠른 다운로드로 코스 완료에 필요한 모든 것을 얻을 수 있습니다.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**추가 번역 지원을 원하시면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 지원하는 언어 목록을 확인하세요**
**추가 지원 언어를 원하시면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 확인하세요**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _학생이신가요?_
[**학생 허브 페이지**](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 에이전트 모드 챌린지!
대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"라는 새 챌린지가 추가되었습니다. GitHub Copilot과 Agent 모드를 사용해서 완료해야 하는 새로운 도전 과제입니다. Agent 모드를 사용해본 적이 없다면, 이 모드는 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령어 실행 등도 할 수 있습니다.
새로운 챌린지가 업데이트 되어 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 확인하세요. 이 챌린지는 GitHub Copilot과 에이전트 모드를 사용해 완료할 수 있습니다. 에이전트 모드를 처음 사용하신다면, 텍스트 생성뿐 아니라 파일 생성, 편집, 명령 실행 등도 할 수 있습니다.
### 📣 공지 - _생성형 AI를 활용해 만들 신규 프로젝트_
### 📣 안내 - _생성 AI를 활용한 새로운 프로젝트_
새로운 AI 어시스턴트 프로젝트가 추가되었습니다. 자세한 내용은 [프로젝트](./9-chat-project/README.md)를 확인하세요.
새로운 AI 어시스턴트 프로젝트가 추가되었습니다, [프로젝트 확인](./9-chat-project/README.md)
> **강사 분들**, 이 커리큘럼을 사용하는 방법에 대해 몇 가지 제안을 [포함했습니다](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-getting-started-lessons/1-intro-to-programming-languages)에서는 각 도구에 대해 다양한 옵션을 안내하여 적합한 도구를 선택할 수 있습니다.
커리큘럼을 로컬에서 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 레슨 [프로그래밍 언어와 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서는 각각의 도구 옵션을 안내해 드립니다.
우리의 추천은 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)를 에디터로 사용하는 것입니다. Visual Studio Code에는 내장 [터미널](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) 내에서 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, 방금 복사한 URL로 `<your-repository-url>`을 대체하여 다음 명령어를 실행하세요:
그런 다음, [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)을 열고, `<your-repository-url>`을 방금 복사한 URL로 대체하여 다음 명령을 실행하세요:
```bash
git clone <your-repository-url>
```
2. 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/)
> **퀴즈에 관한 참고 사항**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈가 각 3문항씩 있습니다. 퀴즈는 [여기](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 기본 | JavaScript 데이터 타입 | JavaScript 데이터 타입 기본 학습 | [데이터 타입](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기본 | 함수와 메서드 | 애플리케이션의 논리 흐름 관리를 위한 함수 및 메서드 학습 | [함수와 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기본 | JS로 조건 만들기 | 조건문을 사용하여 코드 내 조건을 만드는 방법 학습 | [조건 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 다루기 | [배열과 반복문](./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) | JavaScript 클로저, DOM 조작 | 드래그 앤 드롭 인터페이스 작동을 위한 JavaScript 구축, 클로저와 DOM 조작 중심 | [JavaScript 클로저 및 DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타자 게임](./4-typing-game/solution/README.md) | 타자 게임 만들기 | 키보드 이벤트를 사용하여 JavaScript 앱의 로직을 구동하는 방법 학습 | [이벤트 기반 프로그래밍](./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 호출을 위한 브라우저 확장 JavaScript 요소 구축, 로컬 스토리지 변수 사용 | [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) | JavaScript를 활용한 고급 게임 개발 | 상속(클래스 및 합성), 퍼블리시/서브스크라이브 패턴 학습, 게임 구축 준비 | [고급 게임 개발 소개](./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) | Visual Studio Code 사용법 | 코드 편집기 사용 방법 학습 | [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 |
- [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/)
> **퀴즈 관련 참고:** 모든 퀴즈는 Quiz-app 폴더에 들어 있으며, 각각 세 문제로 이루어진 총 48개의 퀴즈가 있습니다. [여기](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 기본 | JavaScript 데이터 타입 | JavaScript 데이터 타입의 기초 | [데이터 타입](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기본 | 함수 및 메서드 | 애플리케이션의 로직 흐름 관리를 위한 함수와 메서드 학습 | [함수 및 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기본 | JavaScript로 의사결정 하기 | 의사결정 방법을 사용하여 코드에 조건 만들기 학습 | [의사결정 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 작업 | [배열과 반복문](./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) | JavaScript 클로저, DOM 조작 | 테라리움을 드래그/드롭 인터페이스로 작동하게 만드는 JavaScript 작성, 클로저와 DOM 조작에 중점 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 활용하여 JavaScript 앱의 로직 구동 방법 학습 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 브라우저 작업 이해 | 브라우저 작동 원리, 역사 및 브라우저 확장 기능의 초기 구성 요소 설계 법 학습 | [브라우저에 대해](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | API 호출, 폼 구축 및 로컬 스토리지 변수 저장 | API를 호출하는 브라우저 확장 기능의 JavaScript 요소 빌드, 로컬 스토리지에 저장된 변수 사용 | [API, 폼, 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스, 웹 성능 | 브라우저 백그라운드 프로세스로 확장 아이콘 관리; 웹 성능 및 최적화 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [스페이스 게임](./6-space-game/solution/README.md) | 고급 게임 개발: 클래스, 구성, Pub/Sub 패턴 | 클래스와 구성, 퍼블리시/서브스크라이브 패턴을 통한 상속 개념 학습, 게임 만들기 준비 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [스페이스 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 화면에 요소를 그리기 위한 Canvas API 학습 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [스페이스 게임](./6-space-game/solution/README.md) | 화면 요소 이동시키기 | Cartesian 좌표와 Canvas 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 | [Browser/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 |
## 🏫 교육 철학
본 커리큘럼은 두 가지 핵심 교육 원칙을 바탕으로 설계되었습니다:
* 프로젝트 기반 학습
* 빈번한 퀴즈
우리 교육과정은 두 가지 핵심 교육 원칙을 기반으로 설계되었습니다:
* 프로젝트 기반 학습
* 자주 퀴즈 진행
프로그램은 JavaScript, HTML, CSS의 기초뿐 아니라 오늘날 웹 개발자가 사용하는 최신 도구와 기법을 가르칩니다. 학생들은 타자 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 은행 앱 구축을 통해 실습 경험을 쌓게 됩니다. 시리즈가 끝날 즈음, 학생들은 웹 개발에 대한 탄탄한 이해를 갖출 것입니다.
이 프로그램은 JavaScript, HTML, CSS의 기본 원리와 현대 웹 개발자가 사용하는 최신 도구 및 기법을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 기능, 스페이스 인베이더 스타일 게임, 그리고 비즈니스용 뱅킹 앱을 직접 만들어 보며 실무 경험을 쌓을 기회를 가집니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 가지게 됩니다.
> 🎓 이 커리큘럼의 첫 몇 강의를 Microsoft Learn의 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)으로도 수강할 수 있습니다!
> 🎓 이 교육과정의 처음 몇 개 수업은 Microsoft Learn의 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다!
프로젝트에 내용이 맞춰지도록 하여 학생의 참여도를 높이고 개념의 기억을 강화합니다. 또한 JavaScript 기본에 대한 여러 스타터 강의와 함께, 이 커리큘럼에 기여한 몇몇 저자의 영상 모음 “[초보자를 위한 JavaScript 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 동영상 강의를 마련하였습니다.
콘텐츠가 프로젝트와 일치하여 학생들이 과정에 더 몰입할 수 있으며 개념 유지력이 향상됩니다. JavaScript 기초 개념을 소개하는 여러 기초 수업과, 이 과정에 기여한 저자들이 참여한 "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"의 비디오도 함께 제공합니다.
추가로, 수업 전의 저강도 퀴즈는 학생이 학습 주제에 집중하는 데 도움을 주며, 수업 후 퀴즈는 추가 학습 기억을 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되어 전체 또는 일부만 수강할 수 있습니다. 프로젝트들은 작게 시작해 12주 과정 종료 시점에 점점 복잡해집니다.
또한, 수업 전에 간단한 퀴즈를 통해 학생이 주제 학습의 의지를 다지도록 하고, 수업 후 두 번째 퀴즈로 추가 학습 효과를 보장합니다. 이 교육과정은 융통성 있고 재미있도록 설계되었으며 전체 또는 일부만 수강할 수 있습니다. 프로젝트들은 작게 시작하여 12주 과정 마지막에는 점점 복잡해집니다.
JavaScript 프레임워크 대신 웹 개발자로서 필요한 기본 기술에 집중하도록 의도적으로 피하고 있지만, 이 커리큘럼을 완료한 후 좋은 다음 단계는 또 다른 동영상 모음인 “[초보자를 위한 Node.js 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”를 배우는 것입니다.
기본 웹 개발 기술에 집중하기 위해 JavaScript 프레임워크 도입은 의도적으로 피했지만, 이 교육과정을 완료한 뒤 다음 단계로 "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"의 동영상을 통해 Node.js를 학습하는 것을 권장합니다.
> 우리의 [행동강령](CODE_OF_CONDUCT.md)과 [기여 가이드](CONTRIBUTING.md)를 방문해 주세요. 여러분의 건설적인 피드백을 환영합니다!
> 우리의 [행동 강령](CODE_OF_CONDUCT.md) 및 [기여 가이드라인](CONTRIBUTING.md)을 참고하세요. 건설적인 피드백을 환영합니다!
## 🧭 오프라인 접근
[Docsify](https://docsify.js.org/#/)를 사용해 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 컴퓨터에 [Docsify를 설치](https://docsify.js.org/#/quickstart)한 뒤, 저장소 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 로컬호스트의 3000번 포트(`localhost:3000`)에서 서비스됩니다.
[Docsify](https://docsify.js.org/#/)를 이용해 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 머신에 [Docsify 설치](https://docsify.js.org/#/quickstart) 후, 이 저장소 루트 폴더에서 `docsify serve` 명령을 실행하세요. 웹사이트는 로컬호스트 3000번 포트에서 제공됩니다: `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)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -223,7 +224,7 @@ JavaScript 프레임워크 대신 웹 개발자로서 필요한 기본 기술에
---
### 생성 AI 시리즈
### 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)
@ -231,7 +232,7 @@ JavaScript 프레임워크 대신 웹 개발자로서 필요한 기본 기술에
---
### 핵심 학습
### 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)
@ -242,7 +243,7 @@ JavaScript 프레임워크 대신 웹 개발자로서 필요한 기본 기술에
---
### 코파일럿 시리즈
### 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)
이 저장소는 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)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확한 부분이 포함될 수 있음을 유의하시기 바랍니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 당사가 책임지지 않습니다.
**이 리포지토리는 JavaScript, HTML 및 CSS에 중점을 둔 웹 개발 기초 학습 로드맵을 제공합니다. 커리큘럼은 유연하며 전체 또는 일부를 수강할 수 있으며, 12주에 걸쳐 24개의 수업으로 구성되어 있습니다.**
## 주요 이정표
* **1~3주차:**
* 프로그래밍 언어 및 도구 소개
* GitHub 기초
* 접근성
* JS 기초: 데이터 타입, 함수 및 메서드
* JS로 의사 결정하기
* **4~6주차:**
* 배열과 반복문
* 테라리움: HTML 실습
* CSS 실습
* JavaScript 클로저
* DOM 조작
* **7~9주차:**
* 타이핑 게임: 이벤트 기반 프로그래밍
* 친환경 브라우저 확장 기능: 브라우저 작업
* 폼 작성, API 호출 및 로컬 스토리지에 변수 저장
* 브라우저 백그라운드 프로세스
* 웹 성능
* **10~12주차:**
* 우주 게임: JavaScript로 더 고급 게임 개발
* 캔버스에 그리기
* 화면 요소 이동
* 충돌 감지
* 점수 유지, 게임 종료 및 재시작
* 뱅킹 앱: 웹 앱에서 HTML 템플릿과 라우트
* 로그인 및 회원가입 폼 구축
* 데이터 가져오기 및 활용 방법
* 상태 관리 개념
## 학습 성과
**이 로드맵을 완료하면, 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 기능, 우주 침략자 스타일 게임, 비즈니스용 뱅킹 앱을 직접 만들어 보는 경험을 얻게 됩니다. 또한 웹 개발 기초에 대한 탄탄한 이해를 발전시킬 수 있습니다.**
## 추가 자료
* 이 리포지토리는 튜토리얼, 코드 예제, 챌린지를 포함한 풍부한 추가 학습 자료를 제공합니다.
* Microsoft Learn 플랫폼은 다양한 웹 개발 과정과 학습 경로를 제공합니다.
* Stack Overflow와 MDN Web Docs 같은 온라인 커뮤니티는 웹 개발자들에게 유용한 지원과 자료를 제공합니다.
**이 로드맵이 웹 개발 여정에 도움이 되길 바랍니다!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 유의해 주시기 바랍니다. 원문은 해당 언어의 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
localizeflow[bot]
2 days ago