Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト(テラリウム、ブラウザ拡張機能、宇宙ゲームなど)を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を促進します。今すぐコーディングの旅を始めましょう!
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト(テラリウム、ブラウザ拡張機能、宇宙ゲームなど)を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を最大化します。今日からコーディングの旅を始めましょう!
#### 🧑🎓 _学生の方へ_
@ -42,17 +42,13 @@ Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ
おすすめのエディタは[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)からダウンロードできます。
<imgsrc="./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ページをプレビューするため
プロジェクトに沿った内容を確保することで、学生にとって学習プロセスがより魅力的になり、概念の定着が促進されます。また、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)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの著者の一部は、このカリキュラムに貢献しています。
私たちは、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)"が役立ちます。
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
| 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 |
| 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 |
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Веб-розробка для початківців — навчальна програма
[](https://discord.com/invite/ByRwuEEgH4)
Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS і HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!
Виконайте наступні кроки, щоб почати використовувати ці ресурси:
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), щоб розпочати!
Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам освоїти такі теми, як:
- Створення запитів і інженерія запитів
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам освоїти такі теми, як:
- Створення запитів та інженерія запитів
- Генерація тексту та зображень
- Додатки для пошуку
Відвідайте [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" у верхньому правому куті цієї сторінки.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**та виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
#### Запуск навчальної програми локально на вашому комп'ютері
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](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:
<imgsrc="./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) для отримання додаткової інформації.