Merge pull request #1480 from microsoft/update-translations

🌐 Update translations via Co-op Translator
pull/1481/head
Lee Stott 1 week ago committed by GitHub
commit 37b46ddaba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-25T20:46:25+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T02:42:55+00:00",
"source_file": "README.md",
"language_code": "bn"
}
@ -21,136 +21,135 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# ওয়েব ডেভেলপমেন্ট শেখার জন্য একটি কোর্স - শিক্ষার্থীদের জন্য
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের ১২-সপ্তাহের এই কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল শেখানো হয়েছে হাতে-কলমে প্রকল্পের মাধ্যমে, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের মাধ্যমে আপনার দক্ষতা বাড়ান এবং জ্ঞান ধরে রাখার ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন!
এই রিসোর্সগুলো ব্যবহার শুরু করতে নিচের ধাপগুলো অনুসরণ করুন:
1. **রিপোজিটরি ফর্ক করুন**: ক্লিক করুন [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord-এ যোগ দিন এবং বিশেষজ্ঞ ও অন্যান্য ডেভেলপারদের সাথে পরিচিত হন**](https://discord.com/invite/ByRwuEEgH4)
# ওয়েব ডেভেলপমেন্ট শেখার জন্য একটি কোর্স - শিক্ষার্থীদের জন্য
মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের ১২ সপ্তাহের এই কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি লেসনে JavaScript, CSS এবং HTML নিয়ে কাজ করুন হাতে-কলমে প্রজেক্টের মাধ্যমে, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং প্র্যাকটিক্যাল অ্যাসাইনমেন্টের মাধ্যমে দক্ষতা বৃদ্ধি করুন। প্রজেক্ট-ভিত্তিক শিক্ষার মাধ্যমে আপনার জ্ঞানকে আরও কার্যকরভাবে ধরে রাখুন। আজই কোডিং শেখা শুরু করুন!
#### 🧑‍🎓 _আপনি কি একজন শিক্ষার্থী?_
[**স্টুডেন্ট হাব পেজ**](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) ভিজিট করুন যেখানে আপনি পাবেন শিক্ষার্থীদের জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি বিনামূল্যে সার্টিফিকেট ভাউচার পাওয়ার উপায়। এই পেজটি বুকমার্ক করুন এবং মাসিকভাবে নতুন কন্টেন্টের জন্য চেক করুন।
### 📣 ঘোষণা - জেনারেটিভ এআই-এর জন্য নতুন কোর্স প্রকাশিত হয়েছে
### 📣 ঘোষণা - _নতুন কোর্স_ জেনারেটিভ AI এবং JavaScript নিয়ে প্রকাশিত হয়েছে
আমাদের নতুন জেনারেটিভ এআই কোর্স মিস করবেন না!
আমাদের নতুন জেনারেটিভ 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)!
<div>
<img src="./images/background.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.bn.png)
- বেসিক থেকে শুরু করে RAG পর্যন্ত সবকিছু কভার করা হয়েছে
- জেনএআই এবং আমাদের সঙ্গী অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রের সাথে ইন্টারঅ্যাক্ট করুন।
- মজাদার এবং আকর্ষণীয় গল্প, আপনি সময় ভ্রমণ করবেন!
- বেসিক থেকে RAG পর্যন্ত লেসন।
- জেনারেটিভ AI এবং আমাদের সঙ্গী অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রের সাথে ইন্টারঅ্যাক্ট করুন।
- মজার এবং আকর্ষণীয় গল্প, আপনি সময় ভ্রমণ করবেন!
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.bn.png)
প্রতিটি পাঠে রয়েছে:
- একটি অ্যাসাইনমেন্ট
- একটি জ্ঞান যাচাই
- একটি চ্যালেঞ্জ
যা আপনাকে শেখাবে:
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
প্রতিটি লেসনে রয়েছে:
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
- টেক্সট এবং ইমেজ অ্যাপ তৈরি
- সার্চ অ্যাপ
[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) যেখানে আমাদের মডারেটর টিম আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে।
আপনার শিক্ষা আরও এগিয়ে নিতে, আমরা [মাইক্রোসফট লার্ন](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/) চালাতে পারেন (_একটি ব্রাউজার-ভিত্তিক, ইনস্টলেশনের প্রয়োজন নেই_), অথবা আপনার কম্পিউটারে [ভিজ্যুয়াল স্টুডিও কোড](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** বোতামে ক্লিক করুন। এটি আপনার গিটহাব অ্যাকাউন্টে কোর্সের একটি নতুন কপি তৈরি করবে।
আপনার কাজ সহজে সংরক্ষণ করতে, আপনার নিজস্ব কপি তৈরি করার পরামর্শ দেওয়া হয়। এটি করতে পেজের উপরে **Use this template** বাটনে ক্লিক করুন। এটি আপনার GitHub অ্যাকাউন্টে একটি নতুন রিপোজিটরি তৈরি করবে।
এই ধাপগুলো অনুসরণ করুন:
1. **রিপোজিটরি ফর্ক করুন**: পেজের উপরের ডানদিকে "Fork" বোতামে ক্লিক করুন।
ধাপগুলো অনুসরণ করুন:
1. **রিপোজিটরি ফর্ক করুন**: এই পেজের উপরের ডানদিকে থাকা "Fork" বাটনে ক্লিক করুন।
2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### কোডস্পেসে কোর্স চালান
#### Codespace-এ কোর্স চালানো
আপনার তৈরি করা রিপোজিটরিতে, **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজের জন্য একটি নতুন কোডস্পেস তৈরি করবে।
আপনার তৈরি করা রিপোজিটরিতে **Code** বাটনে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজের জন্য একটি নতুন Codespace তৈরি করবে।
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
[!Codespace](./images/createcodespace.png)
#### আপনার কম্পিউটারে স্থানীয়ভাবে কোর্স চালান
#### আপনার কম্পিউটারে লোকালি কোর্স চালানো
আপনার কম্পিউটারে কোর্স চালাতে, একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে এই টুলগুলোর বিভিন্ন বিকল্পের সাথে পরিচয় করিয়ে দেবে।
আপনার কম্পিউটারে কোর্স চালানোর জন্য, একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন। আমাদের প্রথম লেসন, [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে বিভিন্ন টুলের অপশন দেখাবে যা আপনার জন্য সবচেয়ে ভালো কাজ করবে।
আমাদের সুপারিশ হলো [ভিজ্যুয়াল স্টুডিও কোড](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করা, যা একটি বিল্ট-ইন [টার্মিনাল](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) সহ আসে। আপনি [এখানে](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 কপি করুন:
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
তারপর, [ভিজ্যুয়াল স্টুডিও কোড](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 বসান:
তারপর, [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. ভিজ্যুয়াল স্টুডিও কোডে ফোল্ডারটি খুলুন। এটি করতে, **File** > **Open Folder** এ ক্লিক করুন এবং ক্লোন করা ফোল্ডারটি নির্বাচন করুন।
2. Visual Studio Code-এ ফোল্ডারটি খুলুন। এটি করতে **File** > **Open Folder**-এ ক্লিক করুন এবং ক্লোন করা ফোল্ডারটি নির্বাচন করুন।
> ভিজ্যুয়াল স্টুডিও কোডের জন্য সুপারিশকৃত এক্সটেনশন:
> Visual Studio Code-এর জন্য সুপারিশকৃত এক্সটেনশন:
>
> * [লাইভ সার্ভার](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - ভিজ্যুয়াল স্টুডিও কোডে এইচটিএমএল পেজ প্রিভিউ করার জন্য
> * [কোপাইলট](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) - HTML পেজগুলো Visual Studio Code-এর মধ্যে প্রিভিউ করার জন্য
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - কোড দ্রুত লেখার জন্য সাহায্য করতে
## 📂 প্রতিটি পাঠে রয়েছে:
## 📂 প্রতিটি লেসনে রয়েছে:
- ঐচ্ছিক স্কেচনোট
- ঐচ্ছিক সম্পূরক ভিডিও
- প্রাক-পাঠ উষ্ণতা কুইজ
- লিখিত পাঠ
- প্রকল্প-ভিত্তিক পাঠের জন্য, প্রকল্প তৈরির ধাপে ধাপে নির্দেশিকা
- প্রি-লেসন ওয়ার্মআপ কুইজ
- লিখিত লেসন
- প্রজেক্ট-ভিত্তিক লেসনের জন্য, প্রজেক্ট তৈরি করার ধাপে ধাপে গাইড
- জ্ঞান যাচাই
- একটি চ্যালেঞ্জ
- সম্পূরক পড়াশোনা
- সম্পূরক পাশোনা
- অ্যাসাইনমেন্ট
- পোস্ট-পাঠ কুইজ
- [পোস্ট-লেসন কুইজ](https://ff-quizzes.netlify.app/)
> **কুইজ সম্পর্কে একটি নোট**: সব কুইজ `Quiz-app` ফোল্ডারে রয়েছে, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো পাঠের মধ্যে লিঙ্ক করা হয়েছে এবং কুইজ অ্যাপটি স্থানীয়ভাবে চালানো বা আজুরে ডিপ্লয় করা যেতে পারে; `quiz-app` ফোল্ডারের নির্দেশিকা অনুসরণ করুন। এগুলো ধীরে ধীরে স্থানীয় ভাষায় অনুবাদ করা হচ্ছে
> **কুইজ সম্পর্কে একটি নোট**: সব কুইজ `Quiz-app` ফোল্ডারে রেছে, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো [এখানে](https://ff-quizzes.netlify.app/) পাওয়া যাবে। কুইজ অ্যাপ লোকালি চালানো বা Azure-এ ডিপ্লয় করা যাবে; `quiz-app` ফোল্ডারে নির্দেশনা অনুসরণ করুন
## 🗃️ পাঠসমূহ
## 🗃️ লেসনসমূহ
| | প্রকল্পের নাম | শেখানো ধারণা | শেখার উদ্দেশ্য | লিঙ্ক করা পাঠ | লেখক |
| | প্রজেক্টের নাম | শেখানো ধারণা | শেখার লক্ষ্য | লিঙ্কযুক্ত লেসন | লেখক |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | শুরু করা যাক | প্রোগ্রামিং এবং টুলসের পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার মৌলিক বিষয় এবং পেশাদার ডেভেলপারদের কাজে সহায়ক সফটওয়্যার সম্পর্কে জানুন | [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | জেসমিন |
| 02 | শুরু করা যাক | গিটহাবের বেসিক, টিমের সাথে কাজ করা | আপনার প্রকল্পে গিটহাব ব্যবহার করা, কোড বেসে অন্যদের সাথে সহযোগিতা করা | [গিটহাবের পরিচিতি](/1-getting-started-lessons/2-github-basics/README.md) | ফ্লোর |
| 03 | শুরু করা যাক | অ্যাক্সেসিবিলিটি | ওয়েব অ্যাক্সেসিবিলিটির মৌলিক বিষয়গুলো শিখুন | [অ্যাক্সেসিবিলিটির মৌলিক বিষয়](/1-getting-started-lessons/3-accessibility/README.md) | ক্রিস্টোফার |
| 04 | জেএস বেসিক | জাভাস্ক্রিপ্ট ডেটা টাইপ | জাভাস্ক্রিপ্ট ডেটা টাইপের মৌলিক বিষয়গুলো শিখুন | [ডেটা টাইপ](/2-js-basics/1-data-types/README.md) | জেসমিন |
| 05 | জেএস বেসিক | ফাংশন এবং মেথড | অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনার জন্য ফাংশন এবং মেথড সম্পর্কে জানুন | [ফাংশন এবং মেথড](/2-js-basics/2-functions-methods/README.md) | জেসমিন এবং ক্রিস্টোফার |
| 06 | জেএস বেসিক | জেএস দিয়ে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে আপনার কোডে শর্ত তৈরি করা শিখুন | [সিদ্ধান্ত নেওয়া](/2-js-basics/3-making-decisions/README.md) | জেসমিন |
| 07 | জেএস বেসিক | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](/2-js-basics/4-arrays-loops/README.md) | জেসমিন |
| 08 | [টেরারিয়াম](/3-terrarium/solution/README.md) | এইচটিএমএল অনুশীলন | একটি অনলাইন টেরারিয়াম তৈরি করতে এইচটিএমএল ব্যবহার করুন, লেআউট তৈরিতে মনোযোগ দিন | [এইচটিএমএলের পরিচিতি](/3-terrarium/1-intro-to-html/README.md) | জেন |
| 09 | [টেরারিয়াম](/3-terrarium/solution/README.md) | সিএসএস অনুশীলন | অনলাইন টেরারিয়াম স্টাইল করতে সিএসএস ব্যবহার করুন, সিএসএসের মৌলিক বিষয় এবং পেজ রেসপন্সিভ করার উপর ফোকাস করুন | [সিএসএসের পরিচিতি](/3-terrarium/2-intro-to-css/README.md) | জেন |
| 10 | [টেরারিয়াম](/3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজার, ডিওএম ম্যানিপুলেশন | টেরারিয়ামকে একটি ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করাতে জাভাস্ক্রিপ্ট ব্যবহার করুন, ক্লোজার এবং ডিওএম ম্যানিপুলেশনের উপর ফোকাস করুন | [জাভাস্ক্রিপ্ট ক্লোজার, ডিওএম ম্যানিপুলেশন](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | জেন |
| 11 | [টাইপিং গেম](/4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি করুন | কী-বোর্ড ইভেন্ট ব্যবহার করে আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানোর পদ্ধতি শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](/4-typing-game/typing-game/README.md) | ক্রিস্টোফার |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ করা | ব্রাউজার কীভাবে কাজ করে, তাদের ইতিহাস এবং একটি ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি কীভাবে তৈরি করবেন তা শিখুন | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ফর্ম তৈরি করা, একটি API কল করা এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | স্থানীয় স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে একটি API কল করার জন্য আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদানগুলি তৈরি করুন | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস এবং ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশন সম্পর্কে জানুন | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে জানুন, একটি গেম তৈরি করার প্রস্তুতি হিসেবে | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস API সম্পর্কে জানুন, যা স্ক্রিনে উপাদান আঁকতে ব্যবহৃত হয় | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | স্ক্রিনে উপাদান সরানো | কার্টেসিয়ান কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে উপাদানগুলিকে কীভাবে গতি দেওয়া যায় তা আবিষ্কার করুন | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কী প্রেস ব্যবহার করে উপাদানগুলিকে একে অপরের সাথে সংঘর্ষ করান এবং প্রতিক্রিয়া দিন এবং গেমের পারফরম্যান্স নিশ্চিত করতে কুলডাউন ফাংশন প্রদান করুন | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করুন | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু করা | গেম শেষ করা এবং পুনরায় শুরু করা সম্পর্কে জানুন, যার মধ্যে অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান রিসেট করা অন্তর্ভুক্ত | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে একটি মাল্টিপেজ ওয়েবসাইটের কাঠামো তৈরি করা শিখুন | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি কর | ফর্ম তৈরি এবং ভ্যালিডেশন রুটিন পরিচালনা সম্পর্কে জানুন | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | ডেটা আনা এবং ব্যবহারের পদ্ধতি | আপনার অ্যাপে ডেটা কীভাবে প্রবাহিত হয়, কীভাবে এটি আনা, সংরক্ষণ এবং নিষ্পত্তি করা হয় তা শিখুন | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্টের ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং এটি প্রোগ্রাম্যাটিকভাবে কীভাবে পরিচালনা করবেন তা শিখুন | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| 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 | [টেরারিয়াম](./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 | [Terrarium](./3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজারস, DOM ম্যানিপুলেশন | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করার জন্য জাভাস্ক্রিপ্ট তৈরি করুন, ক্লোজারস এবং DOM ম্যানিপুলেশনের উপর ফোকাস করে | [জাভাস্ক্রিপ্ট ক্লোজারস, DOM ম্যানিপুলেশন](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি করুন | কী-বোর্ড ইভেন্ট ব্যবহার করে কীভাবে আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানো যায় তা শিখুন | [ইভেন্ট-ড্রিভেন প্রোগ্রামিং](./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 কল করে | [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 | [Space Game](./6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন উভয় ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে জানুন, একটি গেম তৈরি করার প্রস্তুতি হিসেবে | [উন্নত গেম ডেভেলপমেন্টের পরিচিতি](./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 |
## 🏫 শিক্ষাদান পদ্ধতি
@ -159,22 +158,22 @@ CO_OP_TRANSLATOR_METADATA:
* প্রকল্প-ভিত্তিক শিক্ষা
* ঘন ঘন কুইজ
এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS-এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ সরঞ্জাম এবং কৌশলগুলি। শিক্ষার্থীরা একটি টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশ-বান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্ত ভিত্তি অর্জন করবে।
এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুল এবং কৌশলগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশ-বান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্ত ভিত্তি অর্জন করবে।
> 🎓 আপনি এই কারিকুলামের প্রথম কয়েকটি পাঠ [Microsoft Learn](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)-এ একটি [Learn Path]-এ নিতে পারেন!
> 🎓 আপনি এই কারিকুলামের প্রথম কয়েকটি পাঠ [Microsoft Learn](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) এ একটি [Learn Path] হিসেবে নিতে পারেন!
প্রকল্পগুলির সাথে সামঞ্জস্য রেখে বিষয়বস্তু নিশ্চিত করার মাধ্যমে, শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় হয়ে ওঠে এবং ধারণাগুলির ধারণক্ষমতা বৃদ্ধি পায়। আমরা জাভাস্ক্রিপ্ট বেসিকের বেশ কয়েকটি স্টার্টার পাঠও লিখেছি ধারণাগুলি পরিচয় করানোর জন্য, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই কারিকুলামে অবদান রেখেছেন।
প্রকল্পগুলির সাথে সামঞ্জস্য রেখে বিষয়বস্তু তৈরি করার মাধ্যমে শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় হয়ে ওঠে এবং ধারণাগুলির ধারণক্ষমতা বৃদ্ধি পায়। আমরা জাভাস্ক্রিপ্ট বেসিকের উপর বেশ কয়েকটি স্টার্টার লেসনও লিখেছি যা ধারণাগুলি পরিচয় করিয়ে দেয়, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই কারিকুলামে অবদান রেখেছেন।
এছাড়াও, একটি ক্লাসের আগে একটি কম ঝুঁকিপূর্ণ কুইজ শিক্ষার্থীর মনোযোগ একটি বিষয় শেখার দিকে সেট করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণক্ষমতা নিশ্চিত করে। এই কারিকুলামটি নমনীয় এবং মজাদার হতে ডিজাইন করা হয়েছে এবং এটি সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট থেকে শুরু হয় এবং ১২-সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে।
এছাড়াও, একটি ক্লাসের আগে একটি কম ঝুঁকিপূর্ণ কুইজ শিক্ষার্থীর মনোযোগ একটি বিষয় শেখার দিকে স্থাপন করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণক্ষমতা নিশ্চিত করে। এই কারিকুলামটি নমনীয় এবং মজাদার হতে ডিজাইন করা হয়েছে এবং এটি সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট থেকে শুরু হয় এবং ১২-সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে।
যদিও আমরা ইচ্ছাকৃতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি পরিচয় করানো এড়িয়ে গেছি, একটি ফ্রেমওয়ার্ক গ্রহণের আগে একজন ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলিতে মনোনিবেশ করার জন্য, এই কারিকুলামটি সম্পন্ন করার একটি ভাল পরবর্তী পদক্ষেপ হবে আরেকটি ভিডিও সংগ্রহের মাধ্যমে Node.js সম্পর্কে শেখা: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
আমরা ইচ্ছাকৃতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি পরিচয় করানো এড়িয়ে গেছি যাতে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে একজন ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলির উপর মনোযোগ কেন্দ্রীভূত করা যায়। এই কারিকুলামটি সম্পন্ন করার একটি ভাল পরবর্তী পদক্ষেপ হবে আরেকটি ভিডিও সংগ্রহের মাধ্যমে Node.js সম্পর্কে শেখা: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
> আমাদের [Code of Conduct](CODE_OF_CONDUCT.md) এবং [Contributing](CONTRIBUTING.md) নির্দেশিকা দেখুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়া স্বাগত জানাই!
## 🧭 অফলাইন অ্যাক্সেস
আপনি [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`
## 📘 পিডিএফ
@ -204,5 +203,7 @@ CO_OP_TRANSLATOR_METADATA:
এই রিপোজিটরি MIT লাইসেন্সের অধীনে লাইসেন্সকৃত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন।
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:43:28+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T02:45:13+00:00",
"source_file": "README.md",
"language_code": "mo"
}
@ -30,31 +30,27 @@ CO_OP_TRANSLATOR_METADATA:
# 初學者的網頁開發課程 - 一套完整的課程
透過 Microsoft Cloud Advocates 提供的 12 週全面課程,學習網頁開發的基礎知識。每個 24 節課程都透過實作項目(如生態瓶、瀏覽器擴展和太空遊戲)深入探討 JavaScript、CSS 和 HTML。參與測驗、討論和實際作業提升技能並加強知識記憶。立即開始您的程式設計旅程吧!
透過 Microsoft Cloud Advocates 提供的 12 週完整課程學習網頁開發的基礎知識。24 節課程涵蓋 JavaScript、CSS 和 HTML並通過實作專案如生態瓶、瀏覽器擴展和太空遊戲來學習。參與測驗、討論和實際作業提升技能並加深知識記憶。立即開始你的程式設計旅程吧!
#### 🧑‍🎓 _是學生嗎_
#### 🧑‍🎓 _是學生嗎_
造訪 [**學生中心頁面**](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)你可以找到初學者資源、學生套件,甚至有機會獲得免費證書兌換券。這是你想要收藏並定期查看的頁面,因為我們每月都會更新內容。
### 📣 公告 - _課程_ 關於 JavaScript 的生成式 AI 已經發布
### 📣 公告 - _新課程_ 關於 JavaScript 的生成式 AI 已經發布
不要錯過我們的生成式 AI 課程!
不要錯過我們的全新生成式 AI 課程!
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習!
<div>
<img src="./images/background.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.mo.png)
- 課程涵蓋從基礎到 RAG 的所有內容。
- 使用生成式 AI 和我們的伴侶應用程式與歷史人物互動。
- 有趣且引人入勝的敘事,將進行時光旅行!
- 使用 GenAI 和我們的配套應用程式與歷史人物互動。
- 有趣且引人入勝的敘事,將進行時光旅行!
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.mo.png)
每節課都包含作業、知識檢查和挑戰,幫助您學習以下主題:
每節課包含一個作業、一個知識檢查和一個挑戰,幫助你學習以下主題:
- 提示設計與提示工程
- 文本與圖像應用程式生成
- 搜索應用程式
@ -63,20 +59,20 @@ CO_OP_TRANSLATOR_METADATA:
## 🌱 開始使用
> **教師們**,我們已[提供一些建議](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) 的文本編輯器。
#### 創建您的倉庫
為了方便保存您的工作,建議您創建此倉庫的副本。您可以點擊頁面頂部的 **使用此模板** 按鈕,這將在您的 GitHub 帳戶中創建一個包含課程副本的新倉庫。
#### 建立你的倉庫
為了方便保存你的工作,建議你建立這個倉庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕,這將在你的 GitHub 帳戶中創建一個包含課程副本的新倉庫。
按照以下步驟:
1. **分叉此倉庫**:點擊頁面右上角的 "Fork" 按鈕。
@ -84,124 +80,124 @@ CO_OP_TRANSLATOR_METADATA:
#### 在 Codespace 中運行課程
創建的倉庫副本中,點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您創建一個新的 Codespace 以供使用
創建的倉庫副本中,點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以便進行工作
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
[!Codespace](../..)./images/createcodespace.png)
#### 在本地電腦上運行課程
要在本地電腦上運行此課程,您需要一個文本編輯器、瀏覽器和命令行工具。我們的第一節課 [程式語言與工具介紹](../../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) 作為編輯器,它還內建了 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。
我們推薦使用 [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)。可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。
1. 將倉庫克隆到您的電腦。您可以點擊 **Code** 按鈕並複製 URL
1. 將倉庫克隆到你的電腦。你可以點擊 **Code** 按鈕並複製 URL
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
[!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) 中運行以下命令,將 `<your-repository-url>` 替換為剛複製的 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 中打開文件夾。您可以點擊 **文件** > **打開文件夾**,然後選擇您剛克隆的文件夾。
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) - 幫助更快地編寫程式碼
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助更快地編寫程式碼
## 📂 每節課包含:
- 可選的手繪筆記
- 可選的補充視頻
- 可選的補充影片
- 課前熱身測驗
- 書面課程
- 對於基於項目的課程,提供逐步指南以完成項目
- 專案型課程的分步指南
- 知識檢查
- 挑戰
- 補充閱讀
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/)
> **關於測驗的說明**:所有測驗都包含在 Quiz-app 文件夾中,共有 48 個測驗,每個測驗包含三個問題。它們可在[這裡](https://ff-quizzes.netlify.app/)找到,測驗應用程式可以在本地運行或部署到 Azure請按照 `quiz-app` 文件夾中的指示操作
> **關於測驗的說明**:所有測驗都包含在 Quiz-app 文件夾中,共有 48 個測驗,每個測驗包含三個問題。測驗可在 [這裡](https://ff-quizzes.netlify.app/) 使用,測驗應用程式可以在本地運行或部署到 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 和 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 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包DOM 操作 | 建立 JavaScript 使生態瓶具備拖放介面的功能,重點在於閉包與 DOM 操作 | [JavaScript 閉包DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| | 專案名稱 | 教學概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 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 | [生態瓶](./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 | [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 | [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 | [Space Game](./6-space-game/solution/README.md) | 更進階的 JavaScript 遊戲開發 | 學習使用類別與組合的繼承,以及發布/訂閱模式,為建立遊戲做準備 | [進階遊戲開發介紹](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | 繪製到 Canvas | 學習使用 Canvas API將元素繪製到螢幕上 | [繪製到 Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 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 | [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 | [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) | 繪製到畫布 | 學習如何使用 Canvas API 在螢幕上繪製元素 | [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 在螢幕上移動元素 | 探索如何使用笛卡爾座標與 Canvas 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 |
| 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 |
| 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 |
## 🏫 教學理念
## 🏫 教學
我們的課程設計基於兩個關鍵教學原則:
我們的課程設計基於兩個關鍵教學原則:
* 專案導向學習
* 頻繁的小測驗
這個課程教授 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 會是下一個不錯的進階步驟。你可以參考另一系列視頻:"[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
我們有意避免引入 JavaScript 框架,以便專注於成為網頁開發者所需的基本技能,完成本課程後,下一步可以學習 Node.js透過另一系列視頻 "[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 進一步提升
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎的建設性反饋!
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎的建設性反饋!
## 🧭 離線存取
## 🧭 離線訪問
你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此存儲庫,在本地機器上[安裝 Docsify](https://docsify.js.org/#/quickstart),然後在此存儲庫的根目錄中輸入 `docsify serve`。網站將在本地的 3000 埠上運行`localhost:3000`。
您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文檔。Fork 此 repo並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart),然後在此 repo 的根目錄中輸入 `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) 找到。
## 🎒 其他課程
我們的團隊還製作了其他課程!查看:
我們的團隊還製作了其他課程!查看以下內容
- [生成式 AI 初學者課程](https://aka.ms/genai-beginners)
- [生成式 AI 初學者課程 .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [使用 JavaScript 的生成式 AI](https://github.com/microsoft/generative-ai-with-javascript)
- [使用 Java 的生成式 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI 初學者課程](https://aka.ms/ai-beginners)
- [資料科學初學者課程](https://aka.ms/datascience-beginners)
- [數據科學初學者課程](https://aka.ms/datascience-beginners)
- [機器學習初學者課程](https://aka.ms/ml-beginners)
- [網路安全初學者課程](https://github.com/microsoft/Security-101)
- [網頁開發初學者課程](https://aka.ms/webdev-beginners)
- [物聯網初學者課程](https://aka.ms/iot-beginners)
- [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners)
- [精通 GitHub Copilot 的代理性使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [精通 GitHub Copilot 的智能應用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [精通 GitHub Copilot 的 C#/.NET 開發者課程](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [選擇的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
- [選擇的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
## 授權
@ -210,4 +206,4 @@ CO_OP_TRANSLATOR_METADATA:
---
**免責聲明**
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊,建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:39:56+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T02:44:15+00:00",
"source_file": "README.md",
"language_code": "ru"
}
@ -26,33 +26,29 @@ CO_OP_TRANSLATOR_METADATA:
Следуйте этим шагам, чтобы начать использовать эти ресурсы:
1. **Сделайте форк репозитория**: Нажмите [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Присоединяйтесь к Azure AI Foundry Discord, чтобы встретиться с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
3. [**Присоединяйтесь к Discord Azure AI Foundry и познакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
# Веб-разработка для начинающих — учебный курс
Изучите основы веб-разработки с помощью нашего 12-недельного курса от Microsoft Cloud Advocates. Каждое из 24 занятий охватывает JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Развивайте свои навыки и улучшайте усвоение знаний с помощью нашей эффективной проектной методики. Начните свой путь в программировании уже сегодня!
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузеров и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Развивайте свои навыки и улучшайте усвоение знаний благодаря нашей эффективной проектной методике. Начните свой путь в программировании уже сегодня!
#### 🧑‍🎓 _Вы студент?_
Посетите [**страницу 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), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент.
### 📣 Объявление _Новый учебный курс_ по генеративному ИИ для JavaScript уже доступен
### 📣 Объявление - _Новый учебный курс_ по генеративному ИИ для JavaScript уже доступен
Не пропустите наш новый курс по генеративному ИИ!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
<div>
<img src="./images/background.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ru.png)
- Уроки, охватывающие все от основ до RAG.
- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего приложения-компаньона.
- Увлекательный и захватывающий сюжет, вы будете путешествовать во времени!
- Увлекательный и интересный сюжет, вы будете путешествовать во времени!
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ru.png)
Каждый урок включает задание, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как:
- Создание запросов и инженерия запросов
@ -63,61 +59,61 @@ CO_OP_TRANSLATOR_METADATA:
## 🌱 Начало работы
> **Учителя**, мы [добавили несколько рекомендаций](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) для получения дополнительных учебных материалов.
### 📋 Настройка вашей среды
Этот курс уже включает готовую среду разработки! Вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), либо локально на вашем компьютере с использованием текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Этот учебный курс уже готов к разработке! Вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), или локально на вашем компьютере с использованием текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Создайте свой репозиторий
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией курса.
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебного курса.
Следуйте этим шагам:
1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
2. **Клонируйте репозиторий**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Запуск курса в Codespace
#### Запуск учебного курса в Codespace
В вашей копии этого репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
<img src="./images/createcodespace.png" alt="Создание Codespace" style="width:270px;"/>
[!Codespace](../..)./images/createcodespace.png)
#### Запуск курса локально на вашем компьютере
#### Запуск учебного курса локально на вашем компьютере
Чтобы запустить курс локально, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../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) в качестве редактора, который также включает встроенный [Терминал](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:
<img src="./images/createcodespace.png" alt="Скопируйте URL вашего репозитория" style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Затем откройте [Терминал](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) и выполните следующую команду, заменив `<your-repository-url>` на скопированный вами URL:
Затем откройте [Терминал](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) и выполните следующую команду, заменив `<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:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) для предварительного просмотра HTML-страниц прямо в Visual Studio Code
> * [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) - для предварительного просмотра HTML-страниц в Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для ускорения написания кода
## 📂 Каждый урок включает:
- опциональный скетчноут
- опциональное дополнительное видео
- необязательный скетчноут
- необязательное дополнительное видео
- предварительную викторину
- письменный урок
- для проектных уроков пошаговые инструкции по созданию проекта
- для проектных уроков, пошаговые инструкции по созданию проекта
- проверку знаний
- вызов
- дополнительное чтение
@ -128,30 +124,30 @@ CO_OP_TRANSLATOR_METADATA:
## 🗃️ Уроки
| | Название проекта | Изучаемые концепции | Учебные цели | Ссылка на урок | Автор |
| :-: | :----------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 |
| | Название проекта | Изучаемые концепции | Цели обучения | Ссылка на урок | Автор |
| :-: | :----------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 |
| 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 | [Террариум](./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 |
| 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 | [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, используя переменные, сохраненные в локальном хранилище | [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 |
| 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) | Рисование на Canvas | Узнайте об API Canvas, который используется для рисования элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Рисование на Canvas | Узнайте об API Canvas, используемом для рисования элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться, используя декартовы координаты и API Canvas | [Перемещение элементов](./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 |
| 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 |
| 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 |
@ -160,19 +156,19 @@ CO_OP_TRANSLATOR_METADATA:
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
* обучение на основе проектов
* частые викторины
* частые тесты
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Студенты получат возможность развить практические навыки, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, используемым современными веб-разработчиками. Студенты получат возможность развить практические навыки, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы в формате [Учебного пути](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) на Microsoft Learn!
Обеспечивая соответствие контента проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько вводных уроков по основам 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 через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Руководством по внесению изменений](CONTRIBUTING.md). Мы будем рады вашим конструктивным отзывам!
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Руководством по внесению вклада](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
## 🧭 Оффлайн-доступ
@ -186,7 +182,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь с:
Наша команда создает и другие курсы! Ознакомьтесь с ними:
- [Генеративный ИИ для начинающих](https://aka.ms/genai-beginners)
- [Генеративный ИИ для начинающих .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -197,7 +193,7 @@ PDF со всеми уроками можно найти [здесь](https://mi
- [Машинное обучение для начинающих](https://aka.ms/ml-beginners)
- [Кибербезопасность для начинающих](https://github.com/microsoft/Security-101)
- [Веб-разработка для начинающих](https://aka.ms/webdev-beginners)
- [IoT для начинающих](https://aka.ms/iot-beginners)
- [Интернет вещей для начинающих](https://aka.ms/iot-beginners)
- [Разработка XR для начинающих](https://github.com/microsoft/xr-development-for-beginners)
- [Освоение GitHub Copilot для агентного использования](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Освоение GitHub Copilot для разработчиков C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
@ -210,4 +206,4 @@ PDF со всеми уроками можно найти [здесь](https://mi
---
**Отказ от ответственности**:
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Loading…
Cancel
Save