msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #1489 from microsoft/update-translations

Browse Source 
🌐 Update translations via Co-op Translator
pull/1490/head
Lee Stott 4 weeks ago committed by GitHub
parent 15392c4ff3 47f41d99a0
commit 036be9a55b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 235 additions and 238 deletions
Show Stats Download Patch File Download Diff File

88
translations/ja/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5e6642396cc39faad64b67c6cd9af37b",
"translation_date": "2025-08-28T00:45:54+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T10:47:41+00:00",
"source_file": "README.md",
"language_code": "ja"
}
@ -30,7 +30,7 @@ CO_OP_TRANSLATOR_METADATA:
# 初心者向けウェブ開発 - カリキュラム
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を促進します。今すぐコーディングの旅を始めましょう！
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を最大化します。今日からコーディングの旅を始めましょう！
#### 🧑‍🎓 _学生の方へ_
@ -42,17 +42,13 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
[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.ja.png)
- 基礎からRAGまでを網羅したレッスン
- GenAIとコンパニオンアプリを使って歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベル体験
- 楽しく魅力的なストーリーでタイムトラベル体験！
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ja.png)
各レッスンには以下が含まれます:
- 課題
@ -70,11 +66,11 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
> **教師の方へ**: このカリキュラムの使用方法について[いくつかの提案](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)で追加の学習資料を探索することを強くお勧めします。
### 📋 環境のセットアップ
@ -91,17 +87,17 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
作成したリポジトリのコピーで、**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](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)からダウンロードできます。
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)を開き、コピーしたURLを `<your-repository-url>` に置き換えて以下のコマンドを実行してください:
@ -113,8 +109,8 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
> 推奨される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) - HTMLページをVisual Studio Code内でプレビューするため
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書く速度を向上させるため
## 📂 各レッスンには以下が含まれます:
@ -129,36 +125,36 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
- 課題
- [レッスン後のクイズ](https://ff-quizzes.netlify.app/)
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダに含まれており、合計48個のクイズが各3問ずつあります。[こちら](https://ff-quizzes.netlify.app/)で利用可能です。クイズアプリはローカルで実行するか、Azureにデプロイすることができます。`quiz-app` フォルダ内の指示に従ってください。
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダに含まれており、合計48個のクイズが各3問ずつあります。[こちら](https://ff-quizzes.netlify.app/)で利用可能です。クイズアプリはローカルで実行するか、Azureにデプロイできます。`quiz-app`フォルダ内の指示に従ってください。
## 🗃️ レッスン
| | プロジェクト名 | 教えられる概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 始め方 | プログラミングとツールの基本 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶ | [プログラミング言語とツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 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 |
| 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 | [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の呼び出し、ローカルストレージへの変数保存 | ローカルストレージに保存された変数を使用して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 |
| 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の呼び出し、ローカルストレージへの変数保存 | ローカルストレージに保存された変数を使用して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 | [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) | 画面上の要素を移動させる | カートesian座標と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 |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するために使用されるCanvas APIについて学びます | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 画面上の要素の移動 | 要素がカートesian座標と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 |
| 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 |
| 24 | [Banking App](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法とそれをプログラム的に管理する方法を学びます | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 教育方針
@ -167,31 +163,31 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
* プロジェクトベースの学習
* 頻繁なクイズ
このプログラムでは、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の基本を紹介するいくつかのスターターレッスンを作成し、"[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)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの著者の一部は、このカリキュラムに貢献しています。
さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定するのに役立ち、授業後の2回目のクイズは概念のさらなる定着を確保します。このカリキュラムは柔軟で楽しいものになるよう設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりには徐々に複雑になっていきます。
さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらに定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりまでに徐々に複雑になります。
私たちは、JavaScriptフレームワークを導入することを意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中しています。このカリキュラムを修了した後の次のステップとして、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.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)からダウンロードできます。
## 🎒 その他のコース
私たちのチームは他にもコースを制作しています！以下をご覧ください：
私たちのチームは他にもコースを提供しています！以下をご覧ください：
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -215,4 +211,4 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
---
**免責事項**:
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確さが含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は一切の責任を負いません。
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用に起因する誤解や誤認について、当方は一切の責任を負いません。

218
translations/my/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-27T21:55:02+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T10:50:31+00:00",
"source_file": "README.md",
"language_code": "my"
}
@ -21,160 +21,158 @@ 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)
Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုအခြေခံများကို သင်ယူပါ။ ၂၄ သင်ခန်းစာတစ်ခုစီတွင် JavaScript, CSS နှင့် HTML ကို terrariums, browser extensions, space games စသည့် လက်တွေ့လုပ်ငန်းများမှတစ်ဆင့် လေ့လာနိုင်ပါသည်။ စစ်ဆေးမေးခွန်းများ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ဆင်နွှဲပါ။ လေ့လာမှုကို ပိုမိုထိရောက်စေရန် ပရောဂျက်အခြေပြု သင်ကြားမှုနည်းလမ်းများကို အသုံးပြုပါ။ ယနေ့မှစတင်ပြီး သင်၏ coding ခရီးကို စတင်လိုက်ပါ!
#### 🧑‍🎓 _ကျောင်းသားလား?_
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ သွားပါ။ အခြေခံသင်ရိုးများ၊ ကျောင်းသားအထုပ်များနှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို Bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများ ပြောင်းလဲသည့်အခါ ပြန်လည်စစ်ဆေးပါ။
### 📣 ကြေညာချက် - _Generative AI သင်ရိုးသစ်_ JavaScript အတွက် မကြာသေးမီက ထုတ်ပြန်ခဲ့သည်
ဤအရင်းအမြစ်များကို စတင်အသုံးပြုရန် အောက်ပါအဆင့်များကို လိုက်နာပါ-
1. **Repository ကို Fork လုပ်ပါ**: [![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. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord ကို Join လုပ်ပြီး ကျွမ်းကျင်သူများနှင့် Developer များနှင့်တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4)
Generative AI သင်ရိုးသစ်ကို လက်မလွှတ်ပါနှင့်!
# စတင်သူများအတွက် Web Development - သင်ရိုး
Microsoft Cloud Advocates မှ 12 ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် Web Development အခြေခံများကို သင်ယူပါ။ JavaScript, CSS, HTML တို့ကို terrariums, browser extensions, space games စသည့် လက်တွေ့လုပ်ငန်းများဖြင့် သင်ကြားပေးပါသည်။ Quiz များ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ဆောင်ရွက်ပါ။ သင်၏ကျွမ်းကျင်မှုများကို တိုးတက်စေပြီး သင်ယူမှုကို ပိုမိုထိရောက်စေမည့် Project-based သင်ကြားမှုနည်းလမ်းဖြင့် သင်တန်းကို စတင်လိုက်ပါ။
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ!
#### 🧑‍🎓 _ကျောင်းသားလား?_
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ကို သွားရောက်ကြည့်ရှုပါ။ အခြေခံအရင်းအမြစ်များ၊ ကျောင်းသားအထုပ်များနှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို Bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများပြောင်းလဲသည့်အခါ ပြန်လည်ကြည့်ရှုပါ။
<div>
<img src="./images/background.png" width="600px" />
</div>
### 📣 ကြေညာချက် - _Generative AI သင်ရိုး_ အသစ်ကို မကြာသေးမီက ထုတ်ပြန်ခဲ့သည်
Generative AI သင်ရိုးအသစ်ကို လက်မလွှတ်ပါနှင့်!
- အခြေခံမှ RAG အထိ အရာအားလုံးကို ဖုံးကွယ်ထားသော သင်ခန်းစာများ
- GenAI နှင့် ကျွန်ုပ်တို့၏ အပလီကေးရှင်းကို အသုံးပြု၍ သမိုင်းဆိုင်ရာ စာရင်းဇယားများနှင့် အပြန်အလှန်ဆက်သွယ်ပါ
- စိတ်ဝင်စားဖွယ် ဇာတ်လမ်းတစ်ပုဒ်ဖြင့် အချိန်ခရီးသွားပါ!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားရောက်ပြီး စတင်လိုက်ပါ!
<div>
<img src="./images/character.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png)
သင်ခန်းစာတစ်ခုစီတွင် အလုပ်တာဝန်၊ အသိစစ်ဆေးမှုနှင့် စိန်ခေါ်မှုများ ပါဝင်ပြီး အောက်ပါအရာများကို လေ့လာနိုင်ပါသည် -
- Prompting နှင့် prompt engineering
- Text နှင့် image app ဖန်တီးခြင်း
- Search apps
- အခြေခံမှ RAG အထိ သင်ခန်းစာများ
- GenAI နှင့် အပလီကေးရှင်းကို အသုံးပြု၍ သမိုင်းဆိုင်ရာ ဇာတ်ကောင်များနှင့် အပြန်အလှန်ဆွေးနွေးပါ
- စိတ်ဝင်စားဖွယ် ဇာတ်လမ်းတစ်ခုဖြင့် အချိန်ခရီးသွားပါ!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png)
## 🌱 စတင်ရန်
သင်ခန်းစာတိုင်းတွင် အလုပ်ပေးစာ, သိမှတ်စရာများနှင့် စိန်ခေါ်မှုများ ပါဝင်ပြီး အောက်ပါအကြောင်းအရာများကို သင်ယူနိုင်ပါသည်-
- Prompting နှင့် Prompt Engineering
- Text နှင့် Image App ဖန်တီးခြင်း
- Search Apps
> **ဆရာများ**၊ ဤသင်ရိုးကို မည်သို့အသုံးပြုရမည်ဆိုသည်ကို [အကြံပြုချက်များ](for-teachers.md) ထည့်သွင်းထားပါသည်။ ကျွန်ုပ်တို့၏ [ဆရာများဆွေးနွေးပွဲ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် သင့်အကြံပြုချက်ကို မျှဝေပါ!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားရောက်ပြီး စတင်လိုက်ပါ!
**[သင်ယူသူများ](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) တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး ကျွန်ုပ်တို့၏ moderator အဖွဲ့သည် သင့်မေးခွန်းများကို ဖြေကြားပေးမည်ဖြစ်သည်။
**[သင်ယူသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, သင်ခန်းစာတိုင်းအတွက် Pre-lecture Quiz ဖြင့် စတင်ပြီး သင်ခန်းစာအကြောင်းအရာကို ဖတ်ရှုပါ။ လှုပ်ရှားမှုများကို ပြီးမြောက်စေပြီး Post-lecture Quiz ဖြင့် သင်၏နားလည်မှုကို စစ်ဆေးပါ။
သင်၏ပညာရေးကို ပိုမိုတိုးတက်စေရန် [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) တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး သင်၏မေးခွန်းများကို ဖြေကြားပေးမည့် Moderator များရှိပါသည်။
### 📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း
သင်၏ပညာရေးကို ပိုမိုတိုးတက်စေရန် [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) တွင် ထပ်မံလေ့လာရန် အကြံပြုပါသည်။
ဤသင်ရိုးသည် ဖွံ့ဖြိုးတိုးတက်မှုပတ်ဝန်းကျင်ကို အသင့်ဖြစ်စေပါသည်! စတင်ရန်အခါ [Codespace](https://github.com/features/codespaces/) (_browser-based, installation မလိုအပ်သော ပတ်ဝန်းကျင်_) သို့မဟုတ် သင့်ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော text editor ကို အသုံးပြု၍ လိုက်လျောစွာ အသုံးပြုနိုင်ပါသည်။
### 📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း
ဤသင်ရိုးသည် ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်ကို အသင့်ဖြစ်စေပါသည်! သင်စတင်လိုက်သောအခါ [Codespace](https://github.com/features/codespaces/) (_Browser-based, Install မလိုအပ်သော ပတ်ဝန်းကျင်_) သို့မဟုတ် သင်၏ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော Text Editor ကို အသုံးပြု၍ လုပ်ဆောင်နိုင်ပါသည်။
#### သင့် repository ကို ဖန်တီးပါ
သင့်အလုပ်ကို လွယ်ကူစွာ သိမ်းဆည်းရန် သင့် GitHub အကောင့်တွင် repository မိမိပိုင်တစ်ခုကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤစာမျက်နှာ၏ ထိပ်တွင်ရှိသော **Use this template** ခလုတ်ကို နှိပ်ပါ။
#### သင်၏ Repository ကို ဖန်တီးပါ
သင်၏အလုပ်ကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် သင်၏ Repository ကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤသင်ရိုး၏ မိတ္တူတစ်ခုကို သင်၏ GitHub အကောင့်တွင် ဖန်တီးရန် **Use this template** ခလုတ်ကို နှိပ်ပါ။
အဆင့်များကို လိုက်နာပါ -
1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ ညာဘက်ထိပ်တွင်ရှိသော "Fork" ခလုတ်ကို နှိပ်ပါ။
အဆင့်များကို လိုက်နာပါ-
1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace တွင် သင်ရိုးကို လည်ပတ်ခြင်း
#### Codespace တွင် သင်ရိုးကို လည်ပတ်ခြင်း
သင်ဖန်တီးထားသော Repository တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးချယ်ပါ။ ဤသည် သင်အလုပ်လုပ်ရန် Codespace အသစ်တစ်ခုကို ဖန်တီးပေးပါမည်။
သင့်ဖန်တီးထားသော repository တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးပါ။ ဤသည်သည် သင့်အတွက် အသစ်သော Codespace တစ်ခုကို ဖန်တီးပေးမည်ဖြစ်သည်။
[!Codespace](./images/createcodespace.png)
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ခြင်း
သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ရန် Text Editor, Browser နှင့် Command Line Tool တို့လိုအပ်ပါမည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ [Programming Languages နှင့် Tools of the Trade အကြောင်းအရာ](../../1-getting-started-lessons/1-intro-to-programming-languages) တွင် သင့်အတွက် အကောင်းဆုံးဖြစ်မည့် Tools များကို ရွေးချယ်ရန် လမ်းညွှန်ထားပါသည်။
#### သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ခြင်း
ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို Editor အဖြစ် အသုံးပြုရန် ဖြစ်ပြီး၊ ဤသည်တွင် [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) ဒေါင်းလုပ်လုပ်ပါ။
သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ရန်အတွက် text editor, browser နှင့် command line tool တစ်ခုလိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ [Programming Languages နှင့် Tools of the Trade အကြောင်းအရာ](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) သည် သင့်အတွက် အကောင်းဆုံးဖြစ်မည့် tools များကို ရွေးချယ်ရန် လမ်းညွှန်ပေးပါမည်။
1. သင်၏ Repository ကို သင်၏ကွန်ပျူတာသို့ Clone လုပ်ပါ။ **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို ကူးယူပါ-
ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို editor အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် [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) ဒေါင်းလုပ်လုပ်နိုင်ပါသည်။
[!CodeSpace](./images/createcodespace.png)
1. သင့် repository ကို သင့်ကွန်ပျူတာသို့ Clone လုပ်ပါ။ **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို ကူးယူပါ -
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
ထို့နောက် [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) ကို ဖွင့်ပြီး အောက်ပါ command ကို run လုပ်ပါ -
ထို့နောက်, [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) ကို ဖွင့်ပြီး အောက်ပါ Command ကို လုပ်ဆောင်ပါ-
```bash
git clone <your-repository-url>
```
2. Visual Studio Code တွင် folder ကို ဖွင့်ပါ။ **File** > **Open Folder** ကို နှိပ်ပြီး သင့် Clone လုပ်ထားသော folder ကို ရွေးပါ။
2. Visual Studio Code တွင် Folder ကို ဖွင့်ပါ။ **File** > **Open Folder** ကို နှိပ်ပြီး သင် Clone လုပ်ထားသော Folder ကို ရွေးချယ်ပါ။
> Visual Studio Code အတွက် အကြံပြုသော extensions -
> Visual Studio Code အတွက် အကြံပြု Extension များ-
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML စာမျက်နှာများကို Visual Studio Code တွင် preview လုပ်ရန်
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - သင့် 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) - Code ကို ပိုမိုမြန်ဆန်စွာ ရေးရန်
- စိတ်ကြိုက် sketchnote
- စိတ်ကြိုက် အပိုဗီဒီယို
- သင်ခန်းစာမတိုင်မီ စစ်ဆေးမေးခွန်း
## 📂 သင်ခန်းစာတိုင်းတွင် ပါဝင်သည်-
- စိတ်ကြိုက် Sketchnote
- အပို Supplemental Video
- Pre-lesson Warmup Quiz
- ရေးသားထားသော သင်ခန်းစာ
- ပရောဂျက်အခြေပြု သင်ခန်းစာများအတွက် လှုပ်ရှားမှုအဆင့်ဆင့် လမ်းညွှန်ချက်များ
- အသိစစ်ဆေးမှုများ
- Project-based သင်ခန်းစာများအတွက် လုပ်ငန်းဆောင်ရွက်ရန် လမ်းညွှန်ချက်များ
- သိမှတ်စရာများ
- စိန်ခေါ်မှု
- အပိုဖတ်ရှုရန်စာရင်း
- အလုပ်တာဝန်
- သင်ခန်းစာပြီးနောက် စစ်ဆေးမေးခွန်း
- အပိုစာဖတ်ရန်
- အလုပ်ပေးစာ
- [Post-lesson Quiz](https://ff-quizzes.netlify.app/)
> **စစ်ဆေးမေးခွန်းများအကြောင်းမှတ်ချက်**: စစ်ဆေးမေးခွန်းအားလုံးကို Quiz-app folder တွင် ထည့်သွင်းထားပြီး၊ စုစုပေါင်း ၄၈ ခုရှိပြီး တစ်ခုစီတွင် မေးခွန်း ၃ ခုပါဝင်သည်။ ၎င်းတို့ကို သင်ခန်းစာများမှ လင့်ခ်ထားပြီး Quiz app ကို locally သို့မဟုတ် Azure တွင် တင်နိုင်သည်။ `quiz-app` folder တွင် လမ်းညွှန်ချက်များကို လိုက်နာပါ။
> **Quiz များအကြောင်းမှတ်ချက်**: Quiz များအားလုံးကို Quiz-app Folder တွင် ထည့်သွင်းထားပြီး၊ 48 ခုရှိသည်။ Quiz တစ်ခုစီတွင် 3 မေးခွန်းပါဝင်သည်။ [ဤနေရာတွင်](https://ff-quizzes.netlify.app/) ရရှိနိုင်ပြီး၊ Quiz App ကို Local တွင် သို့မဟုတ် Azure တွင် တင်နိုင်ပါသည်။ `quiz-app` Folder တွင် လမ်းညွှန်ချက်များကို လိုက်နာပါ။
## 🗃️ သင်ခန်းစာများ
## 🗃️ သင်ခန်းစာများ
| | ပရောဂျက်အမည် | သင်ကြားမည့်အရာများ | သင်ယူရမည့်ရည်မှန်းချက်များ | သင်ခန်းစာလင့်ခ် | စာရေးသူ |
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | စတင်ခြင်း | Programming နှင့် Tools of the Trade အကြောင်းအရာများ | Programming ဘာသာစကားများ၏ အခြေခံအချက်များနှင့် ပရော်ဖက်ရှင်နယ် developer များအလုပ်လုပ်ရာတွင် အသုံးပြုသော software များကို လေ့လာပါ | [Programming Languages နှင့် Tools of the Trade အကြောင်း](1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | စတင်ခြင်း | GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း | GitHub ကို သင်၏ပရောဂျက်တွင် မည်သို့အသုံးပြုရမည်၊ အခြားသူများနှင့် code base တွင် မည်သို့ပူးပေါင်းဆောင်ရွက်ရမည် | [GitHub အခြေခံများ](1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | စတင်ခြင်း | ဝက်ဘ်လက်လှမ်းမီမှု | ဝက်ဘ်လက်လှမ်းမီမှု၏ အခြေခံအချက်များကို လေ့လာပါ | [ဝက်ဘ်လက်လှမ်းမီမှု အခြေခံ](1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS အခြေခံ | JavaScript Data Types | JavaScript data types အခြေခံများကို လေ့လာပါ | [Data Types](2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS အခြေခံ | Functions နှင့် Methods | Functions နှင့် methods များကို အသုံးပြု၍ application ၏ logic flow ကို စီမံခန့်ခွဲရန် လေ့လာပါ | [Functions နှင့် Methods](2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS အခြေခံ | JS ဖြင့် ဆုံးဖြတ်ချက်များလုပ်ခြင်း | Decision-making နည်းလမ်းများကို အသုံးပြု၍ သင့် code တွင် အခြေအနေများ ဖန်တီးရန် လေ့လာပါ | [ဆုံးဖြတ်ချက်များလုပ်ခြင်း](2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS အခြေခံ | Arrays နှင့် Loops | JavaScript တွင် data များကို arrays နှင့် loops အသုံးပြု၍ အလုပ်လုပ်ရန် လေ့လာပါ | [Arrays နှင့် Loops](2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](3-terrarium/solution/README.md) | HTML ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း | Online terrarium တစ်ခု ဖန်တီးရန် HTML ကို အသုံးပြု၍ layout တစ်ခု ဖန်တီးပါ | [HTML အကြို](3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](3-terrarium/solution/README.md) | CSS ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း | Online terrarium ကို style ပြုလုပ်ရန် CSS ကို အသုံးပြုပါ၊ CSS အခြေခံများနှင့် page ကို responsive ဖြစ်စေရန် အာရုံစိုက်ပါ | [CSS အကြို](3-
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | ဘရောက်ဆာများနှင့်အလုပ်လုပ်ခြင်း | ဘရောက်ဆာများ၏ လုပ်ဆောင်ပုံ၊ သမိုင်းကြောင်းနှင့် ဘရောက်ဆာ extension ၏ ပထမဆုံး အစိတ်အပိုင်းများကို ဖွဲ့စည်းပုံကို လေ့လာပါ | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Form တစ်ခုတည်ဆောက်ခြင်း၊ API ကို ခေါ်ယူခြင်းနှင့် local storage တွင် variable များသိမ်းဆည်းခြင်း | JavaScript ကို အသုံးပြု၍ local storage တွင် သိမ်းဆည်းထားသော variable များကို အသုံးပြု၍ API ကို ခေါ်ယူနိုင်သော ဘရောက်ဆာ extension ကို တည်ဆောက်ပါ | [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) | ဘရောက်ဆာ၏ နောက်ခံလုပ်ငန်းစဉ်များ၊ ဝဘ် performance | Extension ၏ icon ကို စီမံရန် ဘရောက်ဆာ၏ နောက်ခံလုပ်ငန်းစဉ်များကို အသုံးပြုပါ၊ ဝဘ် performance နှင့် အချို့သော optimization များကို လေ့လာပါ | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | JavaScript ဖြင့် အဆင့်မြင့်ဂိမ်းတည်ဆောက်ခြင်း | Class နှင့် Composition နှစ်မျိုးလုံးကို အသုံးပြု၍ Inheritance ကို လေ့လာပါ၊ Pub/Sub pattern ကိုလေ့လာပြီး ဂိမ်းတစ်ခုတည်ဆောက်ရန် ပြင်ဆင်ပါ | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Canvas တွင် ရေးဆွဲခြင်း | Screen ပေါ်တွင် element များကို ရေးဆွဲရန် အသုံးပြုသော Canvas API ကို လေ့လာပါ | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Screen ပေါ်တွင် element များကို ရွှေ့ခြင်း | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ element များကို ရွှေ့လှလှပပ လုပ်ဆောင်ပုံကို ရှာဖွေပါ | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Collision detection | Keypress များကို အသုံးပြု၍ element များကို တိုက်မိစေပြီး တုံ့ပြန်မှုကို ဖန်တီးပါ၊ ဂိမ်း၏ performance ကို အာမခံရန် cooldown function ကို ထည့်သွင်းပါ | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | အမှတ်တွက်ခြင်း | ဂိမ်း၏ အခြေအနေနှင့် performance အပေါ် မူတည်၍ သင်္ချာတွက်ချက်မှုများကို လုပ်ဆောင်ပါ | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | ဂိမ်းကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း | Asset များကို ရှင်းလင်းခြင်းနှင့် variable တန်ဖိုးများကို ပြန်လည်သတ်မှတ်ခြင်းအပါအဝင် ဂိမ်းကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်းကို လေ့လာပါ | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Web App တစ်ခုတွင် HTML Template များနှင့် Route များ | Routing နှင့် HTML Template များကို အသုံးပြု၍ multipage website architecture တစ်ခု၏ အခြေခံကို ဖန်တီးပုံကို လေ့လာပါ | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Login နှင့် Registration Form တစ်ခုတည်ဆောက်ခြင်း | Form များတည်ဆောက်ခြင်းနှင့် validation routine များကို စီမံပုံကို လေ့လာပါ | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Data ကို ရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းလမ်းများ | App ၏ data ရေစီးကြောင်း၊ data ကို fetch လုပ်ခြင်း၊ သိမ်းဆည်းခြင်းနှင့် ဖျက်ပစ်ခြင်းနည်းလမ်းများကို လေ့လာပါ | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | State Management ၏ အယူအဆများ | App ၏ state ကို retain လုပ်ပုံနှင့် programmatically စီမံပုံကို လေ့လာပါ | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 ပညာရေးဆိုင်ရာ
ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတန်းကို အဓိက ပညာရေးဆိုင်ရာ မူဝါဒနှစ်ခုအတိုင်း ဖန်တီးထားပါသည်။
* ပရောဂျက်အခြေခံ သင်ယူမှု
* မကြာခဏ စစ်မေးခွန်းများ
ဒီအစီအစဉ်သည် JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့ဝဘ် developer များအသုံးပြုသော နောက်ဆုံးပေါ် tools နှင့် နည်းလမ်းများကို သင်ကြားပေးပါသည်။ ကျောင်းသားများသည် typing game, virtual terrarium, သဘာဝပတ်ဝန်းကျင်နှင့်သဟဇာတဖြစ်သော browser extension, space-invader-style game, နှင့် စီးပွားရေးလုပ်ငန်းများအတွက် banking app တို့ကို တည်ဆောက်ခြင်းအားဖြင့် လက်တွေ့အတွေ့အကြုံရရှိနိုင်မည်ဖြစ်သည်။ အစီအစဉ်၏ အဆုံးတွင် ကျောင်းသားများသည် ဝဘ်တိုးတက်မှုအပေါ် solid နားလည်မှုရရှိထားမည်ဖြစ်သည်။
> 🎓 ဒီသင်ရိုးညွှန်းတန်း၏ ပထမဆုံး သင်ခန်းစာများကို 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)" tutorial video collection မှ video တစ်ခုနှင့် တွဲဖက်ထားပါသည်။ ဒီ collection ၏ အချို့သောရေးသားသူများသည် ဒီသင်ရိုးညွှန်းတန်းကိုလည်း အထောက်အကူပြုခဲ့ပါသည်။
ထို့အပြင်၊ အတန်းမတက်မီ စစ်မေးခွန်းတစ်ခုသည် ကျောင်းသား၏ အာရုံစိုက်မှုကို သင်ခန်းစာအပေါ် ဦးတည်စေပြီး အတန်းပြီးနောက် စစ်မေးခွန်းတစ်ခုသည် အယူအဆများကို ပိုမိုမှတ်မိစေမည်ဖြစ်သည်။ ဒီသင်ရိုးညွှန်းတန်းကို flexible ဖြစ်စေရန်နှင့် ပျော်ရွှင်စေရန် ရည်ရွယ်ဖန်တီးထားပြီး အစအဆုံး သို့မဟုတ် အစိတ်အပိုင်းအချို့ကို လေ့လာနိုင်ပါသည်။ ပရောဂျက်များသည် သေးငယ်ပြီး 12-ပတ်အချိန်ကာလ၏ အဆုံးတွင် ပိုမိုရှုပ်ထွေးလာမည်ဖြစ်သည်။
JavaScript framework များကို မိတ်ဆက်ခြင်းကို ရည်ရွယ်လျှောက်လွှာ developer အဖြစ် framework ကို အသုံးပြုမီ အခြေခံကျသော ကျွမ်းကျင်မှုများကို အာရုံစိုက်ရန် ရည်ရွယ်၍ ရှောင်ရှားထားသော်လည်း၊ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးမြောက်ပြီးနောက် လေ့လာရန်ကောင်းသော နောက်တစ်ဆင့်မှာ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" video collection ကို လေ့လာခြင်းဖြစ်သည်။
> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို ကြည့်ပါ။ သင့်၏ အဆောက်အအုံဆန်းစစ်မှုကို ကြိုဆိုပါသည်!
| 01 | Getting Started | Programming နှင့် Tools of the Trade အကြောင်းအရာများ | Programming Language များနှင့် Professional Developer များအလုပ်လုပ်ရန် အသုံးပြုသော Software များအကြောင်းကို သင်ယူပါ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း | GitHub ကို သင်၏ Project တွင် အသုံးပြုနည်း၊ အခြားသူများနှင့် Code Base တွင် ပူးပေါင်းဆောင်ရွက်နည်း | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Web Accessibility အခြေခံများကို သင်ယူပါ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | JavaScript Data Types အခြေခံများ | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Application Logic Flow ကို စီမံရန် Functions နှင့် Methods အကြောင်းကို သင်ယူပါ | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Decision-making နည်းလမ်းများကို အသုံးပြု၍ သင်၏ Code တွင် Conditions ဖန်တီးနည်း | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | JavaScript တွင် Arrays နှင့် Loops ကို အသုံးပြု၍ Data ကို စီမံပါ | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Online Terrarium တစ်ခု ဖန်တီးရန် HTML ကို အသုံးပြု၍ Layout တစ်ခုကို ဖန်တီးပါ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Online Terrarium ကို Style ပြုလုပ်ရန် CSS ကို အသုံးပြုပါ၊ CSS အခြေခံများနှင့် Page ကို Responsive ဖြစ်စေရန် အခြေခံများကို သင်ယူပါ | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | JavaScript ကို အသုံးပြု၍ terrarium ကို drag/drop အင်တာဖေ့စ်အဖြစ် လုပ်ဆောင်နိုင်ရန် closures နှင့် DOM ကိုင်တွယ်မှုကို အာရုံစိုက်ပါ။ | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | JavaScript app ၏ logic ကို keyboard events အသုံးပြု၍ လေ့လာပါ။ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Browser များအလုပ်လုပ်ပုံ၊ ၎င်းတို့၏ သမိုင်းကြောင်းနှင့် browser extension ၏ ပထမဆုံး အစိတ်အပိုင်းများကို စတင်ဖွဲ့စည်းပုံကို လေ့လာပါ။ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Browser extension ၏ JavaScript အစိတ်အပိုင်းများကို API ကို local storage တွင် သိမ်းဆည်းထားသော variable များ အသုံးပြု၍ ဖန်တီးပါ။ | [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 processes in the browser, web performance | Browser ၏ background processes ကို အသုံးပြု၍ extension ၏ icon ကို စီမံခန့်ခွဲပါ၊ web performance နှင့် အချို့သော optimization များကို လေ့လာပါ။ | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Class နှင့် Composition နှစ်မျိုးစလုံးကို အသုံးပြု၍ Inheritance ကို လေ့လာပြီး Pub/Sub pattern ကို သင်ယူပါ။ | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Canvas API ကို အသုံးပြု၍ screen ပေါ်တွင် element များကို ရေးဆွဲပုံကို လေ့လာပါ။ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ element များကို ရွေ့လျားပုံကို ရှာဖွေပါ။ | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Keypress များကို အသုံးပြု၍ element များကို တိုက်ဆိုင်စေပြီး game ၏ performance ကို အာရုံစိုက်ရန် cooldown function ကို ပံ့ပိုးပါ။ | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Game ၏ အခြေအနေနှင့် performance အပေါ် မူတည်၍ သင်္ချာတွက်ချက်မှုများကို လုပ်ဆောင်ပါ။ | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်လည်စတင်ခြင်းအကြောင်း၊ asset များကို ရှင်းလင်းခြင်းနှင့် variable တန်ဖိုးများကို ပြန်လည်သတ်မှတ်ခြင်းကို လေ့လာပါ။ | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Routing နှင့် HTML templates ကို အသုံးပြု၍ multipage website architecture ၏ scaffold ကို ဖန်တီးပုံကို လေ့လာပါ။ | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build a Login and Registration Form | Form များကို ဖန်တီးခြင်းနှင့် validation routine များကို ကိုင်တွယ်ပုံကို လေ့လာပါ။ | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | App ၏ data များကို ဘယ်လို ရယူ၊ သိမ်းဆည်း၊ နှင့် ဖယ်ရှားရမည်ကို လေ့လာပါ။ | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | App ၏ state ကို ဘယ်လို သိမ်းဆည်းပြီး programmatically စီမံခန့်ခွဲရမည်ကို လေ့လာပါ။ | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 သင်ကြားမှုနည်းလမ်း
ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတန်းကို အဓိက သင်ကြားမှုနည်းလမ်းနှစ်ခုအပေါ် အခြေခံထားပါသည်။
* စီမံကိန်းအခြေပြု သင်ကြားမှု
* မကြာခဏ စစ်ဆေးမှုများ
ဒီအစီအစဉ်က JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့၏ web developer များ အသုံးပြုနေသော နောက်ဆုံးပေါ် ကိရိယာများနှင့် နည်းလမ်းများကို သင်ကြားပေးပါသည်။ ကျောင်းသားများသည် typing game, virtual terrarium, သဘာဝပတ်ဝန်းကျင်နှင့် သင့်တော်သော browser extension, space-invader ပုံစံ game, နှင့် စီးပွားရေးလုပ်ငန်းများအတွက် banking app တို့ကို ဖန်တီးခြင်းအားဖြင့် လက်တွေ့အတွေ့အကြုံ ရရှိမည်ဖြစ်သည်။ သင်ရိုးညွှန်းတန်း၏ အဆုံးတွင် ကျောင်းသားများသည် web development အပေါ် အခြေခံအားကောင်းသော နားလည်မှု ရရှိမည်ဖြစ်သည်။
> 🎓 ဒီသင်ရိုးညွှန်းတန်း၏ ပထမဆုံး သင်ခန်းစာအချို့ကို Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ် လေ့လာနိုင်ပါသည်။
စီမံကိန်းများနှင့် အညီ အကြောင်းအရာများကို ကိုက်ညီစေရန် သေချာစွာ စီစဉ်ထားသောကြောင့် ကျောင်းသားများအတွက် ပိုမိုစိတ်ဝင်စားစေပြီး အကြောင်းအရာများကို ပိုမိုမှတ်မိစေပါသည်။ JavaScript အခြေခံများကို မိတ်ဆက်ပေးသည့် starter lesson အချို့ကိုလည်း ရေးသားထားပြီး "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယို tutorial စီးရီးမှ ဗီဒီယိုတစ်ခုနှင့် တွဲဖက်ထားပါသည်။ ဤ tutorial များ၏ အချို့သောရေးသားသူများကလည်း ဒီသင်ရိုးညွှန်းတန်းတွင် ပါဝင်ရေးသားထားကြသည်။
ထို့အပြင်၊ သင်တန်းမစတင်မီ စိတ်ဖိစီးမှုမရှိသော စစ်ဆေးမှုတစ်ခုက ကျောင်းသား၏ အာရုံစိုက်မှုကို သင်ခန်းစာအပေါ် ဦးတည်စေပြီး သင်တန်းပြီးဆုံးချိန်တွင် စစ်ဆေးမှုတစ်ခုက အကြောင်းအရာများကို ပိုမိုမှတ်မိစေပါသည်။ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးစီးရန် အချိန် ၁၂ ပတ်ကြာမည်ဖြစ်ပြီး စီမံကိန်းများသည် အစပိုင်းတွင် သေးငယ်ပြီး နောက်ပိုင်းတွင် အဆင့်မြင့်လာမည်ဖြစ်သည်။
JavaScript frameworks များကို မိတ်ဆက်ခြင်းကို ရှောင်ရှားထားပြီး framework များကို သုံးစွဲရန်မတိုင်မီ web developer အဖြစ် လိုအပ်သော အခြေခံကျသော ကျွမ်းကျင်မှုများကို အာရုံစိုက်ထားပါသည်။ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးစီးပြီးနောက် 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) လမ်းညွှန်ချက်များကို ကြည့်ပါ။ သင့်၏ အဆောက်အအုံဆန်းစစ်ချက်များကို ကြိုဆိုပါသည်။
## 🧭 အော့ဖ်လိုင်း အသုံးပြုမှု
ဒီ documentation ကို [Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ အော့ဖ်လိုင်းတွင် run လုပ်နိုင်ပါသည်။ ဒီ repo ကို fork လုပ်ပြီး [Docsify](https://docsify.js.org/#/quickstart) ကို သင့် local machine တွင် install လုပ်ပါ၊ ထို့နောက် ဒီ repo ၏ root folder တွင် `docsify serve` ဟု ရိုက်ထည့်ပါ။ website ကို သင့် localhost: `localhost:3000` တွင် port 3000 တွင် serve လုပ်မည်ဖြစ်သည်။
ဤစာတမ်းများကို [Docsify](https://docsify.js.org/#/) အသုံးပြု၍ အော့ဖ်လိုင်းတွင် လည်ပတ်နိုင်ပါသည်။ ဤ repo ကို fork လုပ်ပြီး [Docsify](https://docsify.js.org/#/quickstart) ကို သင့် local စက်တွင် install လုပ်ပါ၊ ထို့နောက် repo ၏ root folder တွင် `docsify serve` ဟု ရိုက်ထည့်ပါ။ website ကို သင့် localhost ၏ port 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) ရနိုင်ပါသည်။
## 🎒 အခြားသင်တန်းများ
ကျွန်ုပ်တို့၏အဖွဲ့သည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ပါ:
ကျွန်ုပ်တို့၏ အဖွဲ့သည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ပါ:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -193,9 +191,9 @@ JavaScript framework များကို မိတ်ဆက်ခြင်း
## License
ဒီ repository ကို MIT license အတိုင်း licensed လုပ်ထားပါသည်။ [LICENSE](../../LICENSE) ဖိုင်တွင် ပိုမိုသိရှိနိုင်ပါသည်။
ဤ repository သည် 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) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။

167
translations/uk/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-27T21:54:04+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T10:49:03+00:00",
"source_file": "README.md",
"language_code": "uk"
}
@ -21,44 +21,47 @@ 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)
Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS і HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!
Виконайте наступні кроки, щоб почати використовувати ці ресурси:
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)
# Веб-розробка для початківців - навчальна програма
Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки нашій ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!
#### 🧑‍🎓 _Ви студент?_
Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки та час від часу перевіряти, оскільки ми щомісяця оновлюємо контент.
### 📣 Оголошення — _Нова навчальна програма_ з генеративного AI для JavaScript
### 📣 Оголошення - _Нова навчальна програма_ з генеративного AI для JavaScript
Не пропустіть нашу нову навчальну програму з генеративного 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.uk.png)
- Уроки, що охоплюють все — від основ до RAG.
- Уроки, що охоплюють все від основ до RAG.
- Спілкуйтеся з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона.
- Захоплюючий сюжет, ви будете подорожувати у часі!
- Весела та захоплююча розповідь, ви будете подорожувати у часі!
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.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)!
**[Учні](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), де наша команда модераторів буде доступна для відповіді на ваші запитання.
@ -66,87 +69,87 @@ CO_OP_TRANSLATOR_METADATA:
### 📋 Налаштування середовища
Ця навчальна програма має готове середовище розробки! На початку ви можете вибрати запуск навчальної програми у [Codespace](https://github.com/features/codespaces/) (_середовище на основі браузера, без необхідності встановлення_) або локально на вашому комп'ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ця навчальна програма має готове середовище для розробки! На початку ви можете вибрати запуск навчальної програми у [Codespace](https://github.com/features/codespaces/) (_середовище на основі браузера, без необхідності встановлення_), або локально на вашому комп'ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Створіть свій репозиторій
Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub із копією навчальної програми.
Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub з копією навчальної програми.
Виконайте ці кроки:
1. **Форк репозиторію**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Клонування репозиторію**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Виконайте наступні кроки:
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Запуск навчальної програми у Codespace
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **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)
#### Запуск навчальної програми локально на вашому комп'ютері
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](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), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.
Ми рекомендуємо використовувати [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="Copy your repository 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) - для швидшого написання коду
## 📂 Кожен урок включає:
- необов'язковий скетчноут
- необов'язкове додаткове відео
- вікторину для розігріву перед уроком
- письмовий матеріал уроку
- вікторину перед уроком
- письмовий урок
- для уроків, заснованих на проєктах, покрокові інструкції щодо створення проєкту
- перевірку знань
- виклик
- додаткове читання
- завдання
- вікторину після уроку
- [вікторину після уроку](https://ff-quizzes.netlify.app/)
> **Примітка щодо вікторин**: Усі вікторини знаходяться в папці Quiz-app, всього 48 вікторин по три питання кожна. Вони пов'язані з уроками, додаток для вікторин можна запускати локально або розгортати в 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 | [Тераріум](/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 та збереження змінних у локальному сховищі | Створіть елементи 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 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 |
| 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 |
| 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 | Дізнайтеся про наслідування за допомогою класів і композиції, а також про патерн 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 |
| 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 |
| 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 |
## 🏫 Педагогіка
@ -155,50 +158,50 @@ CO_OP_TRANSLATOR_METADATA:
* навчання на основі проєктів
* часті тести
Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру для набору тексту, віртуаріум, екологічне розширення для браузера, гру в стилі "космічний нападник" та банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки.
Програма охоплює основи JavaScript, HTML і CSS, а також найновіші інструменти та техніки, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру для друку, віртуальний тераріум, екологічне розширення для браузера, гру в стилі "космічних загарбників" та банківський додаток для бізнесу. До кінця курсу студенти отримають міцне розуміння веб-розробки.
> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Learn Path](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 для ознайомлення з концепціями, у парі з відео з колекції "[Beginners Series to: 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 через іншу колекцію відео: "[Beginner Series to: 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). Ми вітаємо ваші конструктивні відгуки!
## 🧭 Офлайн-доступ
Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Веб-сайт буде доступний на порту 3000 вашого localhost: `localhost:3000`.
Ви можете переглядати цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 вашого localhost: `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).
## 🎒 Інші курси
Наша команда створює інші курси! Ознайомтеся з:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [ML for Beginners](https://aka.ms/ml-beginners)
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
- [Генеративний ШІ для початківців](https://aka.ms/genai-beginners)
- [Генеративний ШІ для початківців .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Генеративний ШІ з JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Генеративний ШІ з Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [ШІ для початківців](https://aka.ms/ai-beginners)
- [Наука про дані для початківців](https://aka.ms/datascience-beginners)
- [Машинне навчання для початківців](https://aka.ms/ml-beginners)
- [Кібербезпека для початківців](https://github.com/microsoft/Security-101)
- [Веб-розробка для початківців](https://aka.ms/webdev-beginners)
- [IoT для початківців](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)
- [Обирайте власну пригоду з Copilot](https://github.com/microsoft/CopilotAdventures)
## Ліцензія
Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
Цей репозиторій ліцензовано за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
---

Write Preview
Loading…
Cancel
Save