Toto je vzdělávací repozitář kurikula pro výuku základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý týmem Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML.
Toto je vzdělávací repozitář kurikula pro výuku základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML.
### Klíčové komponenty
### Klíčové součásti
- **Vzdělávací obsah**: 24 strukturovaných lekcí uspořádaných do modulů založených na projektech
- **Vzdělávací obsah**: 24 strukturovaných lekcí uspořádaných v modulech založených na projektech
- **Praktické projekty**: Terrárium, Hra na psaní, Prodlžek prohlížeče, Hra ve vesmíru, Bankovní aplikace, Kódový editor a AI chatovací asistent
- **Praktické projekty**: Terrárium, Typovací hra, Rozšíření pro prohlížeč, Vesmírná hra, Bankovní aplikace, Editor kódu a AI chat asistent
- **Interaktivní kvízy**: 48 kvízů po 3 otázkách (testy před a po lekci)
- **Interaktivní kvízy**: 48 kvízů po 3 otázkách (před a po lekci)
- **Podpora více jazyků**: Automatizované překlady do více než 50 jazyků pomocí GitHub Actions
- **Podpora více jazyků**: Automatické překlady do 50+ jazyků pomocí GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) doporučen pro studenty
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) doporučený pro studenty
- Další kurzy: Generativní AI, Data Science, ML, IoT dostupné kurikula
- Další kurzy: Generativní AI, Data Science, ML, IoT kurikula k dispozici
### Práce s konkrétními projekty
### Práce s konkrétními projekty
Pro detailní instrukce u jednotlivých projektů nahlédněte do README souborů:
Pro podrobné instrukce k jednotlivým projektům odkazujte na README soubory v:
- `quiz-app/README.md` - Vue 3 aplikace kvízu
- `quiz-app/README.md` - Vue 3 aplikace kvízu
- `7-bank-project/README.md` - Bankovní aplikace s autentizací
- `7-bank-project/README.md` - Bankovní aplikace s autentizací
- `5-browser-extension/README.md` - Vývoj prodlužků prohlížeče
- `5-browser-extension/README.md` - Vývoj rozšíření prohlížeče
- `6-space-game/README.md` - Vývoj hry na canvasu
- `6-space-game/README.md` - Vývoj hry založené na Canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepa
### Struktura monorepa
I když nejde o tradiční monorepo, tento repozitář obsahuje několik nezávislých projektů:
I když se nejedná o tradiční monorepo, tento repozitář obsahuje několik nezávislých projektů:
- Každá lekce je samostatná
- Každá lekce je samostatná
- Projekty nesdílí závislosti
- Projekty nesdílejí závislosti
- Práce na jednotlivých projektech neovlivňuje ostatní
- Pracujte na jednotlivých projektech bez ovlivnění ostatních
- Naklonujte celý repozitář pro plný zážitek kurikula
- Naklonujte celý repozitář pro plný zážitek kurikula
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o vyloučení odpovědnosti**:
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme zodpovědní za jakákoliv nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, uvědomte si, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo nesprávné výklady vzniklé použitím tohoto překladu.
Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá z 24 lekcí proniká do JavaScriptu, CSS a HTML prostřednictvím praktických projektů, jako jsou terária, rozšíření prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si uchování znalostí díky naší efektivní pedagogice založené na projektech. Začněte svou cestu kódováním ještě dnes!
Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá ze 24 lekcí se věnuje JavaScriptu, CSS a HTML prostřednictvím praktických projektů, jako jsou terária, rozšíření pro prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si uchování znalostí díky naší efektivní metodice založené na projektech. Začněte svou cestu kódováním dnes!
Připojte se ke komunitě Azure AI Foundry na Discordu
Připojte se k Discordu Azure AI Foundry a potkejte odborníky a další vývojáře.
> Tento repozitář obsahuje více než 50 jazykových překladů, což výrazně zvětšuje velikost stahování. Pro klonování bez překladů použijte sparse checkout:
> Tento repozitář obsahuje přes 50 jazykových překladů, což výrazně zvyšuje velikost stahování. Pro klonování bez překladů použijte sparse checkout:
>
>
> **Bash / macOS / Linux:**
> **Bash / macOS / Linux:**
> ```bash
> ```bash
@ -48,82 +48,80 @@ Postupujte podle těchto kroků, abyste mohli začít používat tyto zdroje:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
> ```
>
>
> Tento způsob vám poskytne vše potřebné ke zvládnutí kurzu s mnohem rychlejším stažením.
> Tím získáte vše potřebné k dokončení kurzu s mnohem rychlejším stažením.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Pokud si přejete podporu dalších překladových jazyků, jsou uvedeny [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Pokud si přejete mít další překlady, podporované jazyky jsou uvedeny zde. [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jste student?_
#### 🧑🎓 _Jste student?_
Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde naleznete zdroje pro začátečníky, studentské balíčky a dokonce i způsoby, jak získat voucher na bezplatný certifikát. Tuto stránku si chcete uložit do záložek a občas jí kontrolovat, protože obsah měníme každý měsíc.
Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete zdroje pro začátečníky, studentské balíčky a také možnosti, jak získat bezplatný certifikát. Tuto stránku si nezapomeňte uložit do záložek a pravidelně kontrolovat, protože obsah měníme každý měsíc.
### 📣 Oznámení - Nové výzvy v režimu GitHub Copilot Agent k dokončení!
### 📣 Oznámení - Nové výzvy režimu GitHub Copilot Agent k dokončení!
Nová výzva přidána, hledejte "GitHub Copilot Agent Challenge 🚀" v většině kapitol. Je to nová výzva pro dokončení pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent dosud nepoužili, umožňuje nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
Byla přidána nová výzva, hledejte „GitHub Copilot Agent Challenge 🚀“ v většině kapitol. Jedná se o novou výzvu, kterou máte dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent dosud nepoužívali, umožňuje nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
### 📣 Oznámení - _Nový projekt k vytvoření pomocí generativní AI_
### 📣 Oznámení - _Nový projekt k vytvoření pomocí Generativní AI_
Právě přidán nový AI Assistant projekt, podívejte se na [projekt](./9-chat-project/README.md)
Byl přidán nový projekt AI asistenta, podívejte se na něj [projekt](./9-chat-project/README.md)
### 📣 Oznámení - _Nový kurz_ o Generativní AI pro JavaScript byl právě zveřejněn
### 📣 Oznámení - _Nové kurikulum_ o Generativní AI pro JavaScript právě vyšlo
Nezmeškejte náš nový kurz Generativní AI!
Nepromeškejte naše nové kurikulum Generativní AI!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
Každá lekce obsahuje úkol k dokončení, kontrolu znalostí a výzvu, které vás provedou tématy jako:
Každá lekce obsahuje úkol k dokončení, kontrolu znalostí a výzvu, které vás provedou tématy jako:
- Promptování a tvorba promptů (prompt engineering)
- Výzvy a návrh promptů
- Generování textových a obrazových aplikací
- Generování textových a obrazových aplikací
- Vyhledávací aplikace
- Vyhledávací aplikace
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
## 🌱 Začínáme
## 🌱 Začínáme
> **Učitelé**, zahrnuli jsme [některé návrhy](for-teachers.md), jak tento plán kurzu používat. Budeme rádi za vaši zpětnou vazbu [v našem diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Učitelé**, máme [několik návrhů](for-teachers.md), jak používat toto kurikulum. Rádi uvítáme vaše názory [v našem diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pro každou lekci začněte přednáškovým kvízem a pokračujte čtením výukového materiálu, plněním různých aktivit a ověřte si své porozumění pomocí popřednáškového kvízu.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ke každé lekci začněte přednáškovým kvízem, pak si přečtěte učební materiál, dokončete různé aktivity a ověřte své porozumění pomocí závěrečného kvízu.
Pro zlepšení vašeho studijního zážitku se spojte s kolegy a pracujte společně na projektech! Diskuze jsou podporovány v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je k dispozici tým moderátorů, aby zodpověděl vaše dotazy.
Pro lepší zážitek z učení se propojte s vrstevníky a pracujte na projektech společně! Diskuze jsou vítány v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde vám tým moderatorů rád pomůže s dotazy.
Pro další vzdělávání důrazně doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro doplňující studijní materiály.
Pro další vzdělávání vřele doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro doplňující studijní materiály.
### 📋 Nastavení vašeho prostředí
### 📋 Nastavení vývojového prostředí
Tento plán kurzu má připravené vývojové prostředí! Na začátku si můžete vybrat, zda budete kurz spouštět v [Codespace](https://github.com/features/codespaces/) (_prohlížečové prostředí bez nutnosti instalací_) nebo lokálně na vašem počítači s použitím textového editoru, jako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Toto kurikulum má připravené vývojové prostředí! Na začátku si můžete zvolit spuštění kurikula v [Codespace](https://github.com/features/codespaces/) (_prostředí založené na prohlížeči bez nutnosti instalace_), nebo lokálně na vašem počítači pomocí textového editoru, například [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Vytvořte svůj repozitář
#### Vytvořte si repozitář
Pro snadné ukládání své práce se doporučuje vytvořit si vlastní kopii tohoto repozitáře. To můžete udělat kliknutím na tlačítko **Use this template** v horní části stránky. Tím se vytvoří nový repozitář ve vašem GitHub účtu s kopií kurzu.
Abyste si mohli snadno ukládat svou práci, doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Učiníte tak kliknutím na tlačítko **Use this template** v horní části stránky. Tím se vytvoří nový repozitář ve vašem GitHub účtu s kopií kurikula.
Postupujte podle těchto kroků:
Postupujte takto:
1. **Vytvořte fork repozitáře**: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
1. **Vytvořte Fork repozitáře**: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
Ve vaší kopii tohoto repozitáře klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se vytvoří nový Codespace, ve kterém můžete pracovat.
Ve vaší kopii repozitáře, kterou jste vytvořili, klikněte na tlačítko **Code** a zvolte **Open with Codespaces**. Vytvoří se tak nová Codespace, kde můžete pracovat.
Pro spuštění tohoto kurzu lokálně na vašem počítači budete potřebovat textový editor, prohlížeč a nástroj příkazového řádku. Naše první lekce, [Úvod do programovacích jazyků a nástrojů řemesla](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi pro každý z těchto nástrojů, abyste si mohli vybrat, co vám nejvíce vyhovuje.
Pro spuštění kurikula lokálně budete potřebovat textový editor, prohlížeč a nástroj příkazové řádky. Naše první lekce, [Úvod do programovacích jazyků a nástrojů řemesla](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi pro každý z těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje.
Doporučujeme používat [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také integrovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také integrovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Naklonujte si své úložiště do počítače. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním URL:
1. Naklonujte si vaše úložiště do počítače. Uděláte to kliknutím na tlačítko **Code** a zkopírováním URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
@ -133,90 +131,90 @@ Doporučujeme používat [Visual Studio Code](https://code.visualstudio.com/?WT.
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na **Soubor** > **Otevřít složku** a výběrem složky, kterou jste právě naklonovali.
2. Otevřete ve Visual Studio Code složku. Uděláte to kliknutím na **Soubor** > **Otevřít složku** a vyberte složku, kterou jste právě naklonovali.
> Doporučené rozšíření Visual Studio Code:
> Doporučené rozšíření pro Visual Studio Code:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – pro náhled HTML stránek přímo ve Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pro náhled HTML stránek přímo ve Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – pro rychlejší psaní kódu
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pro rychlejší psaní kódu
## 📂 Každá lekce obsahuje:
## 📂 Každá lekce obsahuje:
- volitelnou sketchnotu
- nepovinné sketchnote
- volitelné doplňkové video
- nepovinné doplňkové video
- rozehřívací kvíz před lekcí
- předpočáteční kvíz
- psanou lekci
- písemnou lekci
- u lekcí založených na projektech krok za krokem návody, jak projekt vybudovat
- u lekcí založených na projektu krok za krokem průvodce výstavbou projektu
- ověřování znalostí
- kontrolu znalostí
- výzvu
- výzvu
- doplňující čtení
- doplňující četbu
- úkol
- zadání
- [kvíz po lekci](https://ff-quizzes.netlify.app/web/)
- [povědomostní kvíz po lekci](https://ff-quizzes.netlify.app/web/)
> **Poznámka ke kvízům**: Všechny kvízy jsou umístěny ve složce Quiz-app, celkem 48 kvízů se třemi otázkami každý. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), aplikaci s kvízy lze spustit lokálně nebo publikovat na Azure; řiďte se pokyny ve složce `quiz-app`.
> **Poznámka ke kvízům**: Všechny kvízy jsou uložené ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/) a aplikaci kvízů lze spustit lokálně nebo nasadit do Azure; postupujte podle instrukcí ve složce `quiz-app`.
## 🗃️ Lekce
## 🗃️ Lekce
| | Název projektu | Naučené koncepty | Výukové cíle | Propojená lekce | Autor |
| | Název projektu | Učené koncepty | Učební cíle | Odkaz na lekci | Autor |
| 01 | Začínáme | Úvod do programování a nástroje oboru | Naučit se základní principy většiny programovacích jazyků a software, který pomáhá profesionálním vývojářům jejich práci | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Začínáme | Úvod do programování a nástroje profese | Naučit se základní principy většiny programovacích jazyků a software, který pomáhá profesionálním vývojářům jejich práci | [Úvod do programovacích jazyků a nástrojů profese](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, práce v týmu | Jak používat GitHub ve svém projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Začínáme | Základy GitHubu, týmová práce | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začínáme | Přístupnost | Naučit se základy přístupnosti webu | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Začínáme | Přístupnost | Naučit se základy webové přístupnosti | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Datové typy v JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | Základy JS | Datové typy v JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkce a metody | Naučit se o funkcích a metodách pro řízení logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 05 | Základy JS | Funkce a metody | Naučit se o funkcích a metodách pro řízení logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Rozhodování v JS | Naučit se vytvářet podmínky v kódu pomocí rozhodovacích metod | [Rozhodování](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | Základy JS | Rozhodování v JS | Naučit se vytvářet podmínky v kódu pomocí rozhodovacích metod | [Rozhodování](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a smyčky | Práce s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Základy JS | Pole a cykly | Práce s daty za použití polí a cyklů v JavaScriptu | [Pole a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořit HTML pro online terrárium, zaměřit se na tvorbu rozložení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořit HTML pro online terárium, se zaměřením na rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořit CSS pro stylování online terrária, zaměřit se na základy CSS včetně responzivního designu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořit CSS pro stylování online terária, zaměřit se na základy CSS a responzivní design | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Napsat JavaScript, aby terrárium fungovalo jako rozhraní drag/drop, zaměřit se na uzávěry a manipulaci s DOM | [JavaScriptové uzávěry, manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulace s DOM | Vytvořit JavaScript pro terárium jako rozhraní drag/drop, zaměřit se na closury a práci s DOM | [JavaScript Closures, manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra na psaní](./4-typing-game/solution/README.md) | Vytvoření hry na psaní | Naučit se používat klávesové události pro řízení logiky ve své JavaScriptové aplikaci | [Programování řízené událostmi](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Hra na psaní](./4-typing-game/solution/README.md) | Vytvoření hry na psaní | Naučit se používat klávesové události k řízení logiky JavaScriptové aplikace | [Programování orientované na události](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Ekologické rozšíření pro prohlížeč](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučit se, jak fungují prohlížeče, jejich historii a jak vytvořit první prvky rozšíření | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Rozšíření prohlížeče Green](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučit se, jak fungují prohlížeče, jejich historii a jak vytvořit základy rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Ekologické rozšíření pro prohlížeč](./5-browser-extension/solution/README.md) | Vytváření formuláře, volání API a ukládání proměnných v lokálním úložišti | Napsat JavaScriptové prvky rozšíření pro volání API a ukládání proměnných v lokálním úložišti | [API, formuláře a lokální úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Rozšíření prohlížeče Green](./5-browser-extension/solution/README.md) | Vytváření formulářů, volání API a ukládání proměnných do lokálního úložiště | Vytvořit JavaScriptové prvky rozšíření pro volání API s využitím lokálního úložiště | [API, formuláře a lokální úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Ekologické rozšíření pro prohlížeč](./5-browser-extension/solution/README.md) | Procesy na pozadí v prohlížeči, webový výkon | Použití procesů na pozadí pro správu ikon rozšíření; poznání webového výkonu a některých optimalizací pro zlepšení | [Úlohy na pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Rozšíření prohlížeče Green](./5-browser-extension/solution/README.md) | Pozadí procesů v prohlížeči, výkonnost webu | Použít pozadí procesů pro správu ikony rozšíření; naučit se o webové výkonnosti a optimalizacích | [Pozadí a výkonnost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Kosmická hra](./6-space-game/solution/README.md) | Pokročilejší vývoj her v JavaScriptu | Naučit se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub, jako přípravu na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pokročilejší vývoj her v JavaScriptu | Naučit se dědičnost pomocí tříd a kompozice a vzor Pub/Sub v přípravě na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Kosmická hra](./6-space-game/solution/README.md) | Kreslení na plátno | Naučit se o Canvas API používaném pro kreslení prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Kreslení na canvas | Naučit se používat Canvas API, používané pro kreslení prvků na obrazovku | [Kreslení na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Kosmická hra](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak prvky získávají pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků po obrazovce](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak prvky získávají pohyb za použití kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Kosmická hra](./6-space-game/solution/README.md) | Detekce kolizí | Zajistit kolize a reakce prvků na sebe navzájem pomocí stisknutých kláves a přidat cooldown funkci pro výkon hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Detekce kolizí | Nechte prvky kolidovat a reagovat na sebe pomocí stisků kláves, přidejte funkci cooldown pro zajištění výkonu hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Kosmická hra](./6-space-game/solution/README.md) | Udržování skóre | Provádět matematické výpočty na základě stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Udržování skóre | Provádění matematických výpočtů podle stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Kosmická hra](./6-space-game/solution/README.md) | Ukončení a restartování hry | Naučit se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Ukončení a restart hry | Naučit se ukončit a restartovat hru včetně úklidu zdrojů a resetování proměnných | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankovní aplikace](./7-bank-project/solution/README.md) | HTML šablony a routování ve webové aplikaci | Naučit se vytvářet kostru vícestránkové webové stránky pomocí routování a HTML šablon | [HTML šablony a routování](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Bankovní aplikace](./7-bank-project/solution/README.md) | HTML šablony a směrování ve webové aplikaci | Naučit se vytvořit strukturu vícestránkového webu pomocí routingu a HTML šablon | [HTML šablony a směrování](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučit se o tvorbě formulářů a zpracování validačních rutin | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučit se jak vytvářet formuláře a také jak validovat jejich zadání | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Metody získávání a používání dat | Jak data proudí do aplikace i ven z ní, jak je načítat, ukládat a mažet | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Metody získávání a používání dat | Jak data plynou do aplikace a ven, jak je získat, uložit a poté odstranit | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncept správy stavu | Naučit se, jak si aplikace uchovává stav a jak ho programově ovládat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncepty správy stavů | Naučit se, jak aplikace uchovává stav a jak s ním programátorsky pracovat | [Správa stavů](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kód prohlížeče/VScode](../../8-code-editor) | Práce s VScode | Naučte se používat editor kódu | [Použití editoru VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Práce s VScode | Naučit se používat editor kódu | [Použití VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práce s AI | Naučte se vytvořit vlastního AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práce s AI | Naučit se vytvořit vlastního AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
## 🏫 Pedagogika
Náš učební plán je navržený s dvěma klíčovými pedagogickými principy:
Naše učební osnovy jsou navrženy se dvěma hlavními pedagogickými principy:
* učení založené na projektech
* učení založené na projektech
* časté kvízy
* časté kvízy
Program vede základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti budou mít příležitost získat praktické zkušenosti vytvořením hry na psaní, virtuálního terrária, ekologického rozšíření pro prohlížeč, hry ve stylu space-invader a bankovní aplikace pro firmy. Na konci série budou mít studenti pevné porozumění webovému vývoji.
Program vyučuje základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti budou mít příležitost získat praktické zkušenosti tvorbou hry na psaní, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu space invader a bankovní aplikace pro podnikání. Na konci série studenti získají pevné základy webového vývoje.
> 🎓 První lekce v tomto kurikulu můžete absolvovat jako [Učební cestu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 První lekce tohoto kurzu můžete absolvovat jako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Díky propojení obsahu s projekty je proces pro studenty poutavější a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu, které představují koncepty, doprovázené videi ze série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"– někteří autoři těchto videí přispěli do tohoto kurikula.
Zajištěním souladu obsahu s projekty je proces pro studenty více poutavý a lepší je také zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu doplněných videi ze sbírky "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejichž autoři na tuto osnovu přispěli.
Navíc nízkorizikový kvíz před lekcí pomáhá studentovi zaměřit se na téma, zatímco kvíz po lekci podpoří další zapamatování. Tento učební plán je navržen flexibilně a zábavně a lze ho absolvovat celý nebo částečně. Projekty začínají jednoduché a postupně se v průběhu 12 týdnů stávají složitějšími.
Navíc před hodinou nízkorizikový kvíz nastavit zaměření studenta na téma, zatímco druhý kvíz po hodině zajistí lepší zapamatování. Tento obsah je navržen tak, aby byl flexibilní a zábavný a lze ho absolvovat celý nebo částečně. Projekty začínají jednoduše a během 12 týdnů se stávají stále složitějšími.
I když jsme záměrně vynechali zavádění frameworků JavaScriptu, abychom se soustředili na základní dovednosti webového vývojáře před přijetím frameworku, dobrým dalším krokem po dokončení tohoto kurikula je naučit se o Node.js prostřednictvím další série videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Záměrně jsme se vyhnuli zavedení JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné pro webového vývojáře před přijetím frameworku; dobrým dalším krokem po dokončení tohoto kurzu je naučit se Node.js skrze další kolekci videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Navštivte naše [Kodex chování](CODE_OF_CONDUCT.md) a [Příspěvky](CONTRIBUTING.md) zásady. Vítáme vaše konstruktivní připomínky!
> Navštivte náš [Kodex chování](CODE_OF_CONDUCT.md) a pokyny k [přispívání](CONTRIBUTING.md). Vítáme vaše konstruktivní připomínky!
## 🧭 Offline přístup
## 🧭 Přístup offline
Tuto dokumentaci můžete používat offline pomocí [Docsify](https://docsify.js.org/#/). Forkněte si toto repozitář, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svůj počítač a pak v kořenové složce repozitáře napište `docsify serve`. Webová stránka bude dostupná na portu 3000 na vašem localhostu: `localhost:3000`.
Tuto dokumentaci můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Forkněte si toto úložiště, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na váš místní počítač, a potom v kořenové složce tohoto úložiště napište `docsify serve`. Webová stránka bude dostupná na portu 3000 na localhostu: `localhost:3000`.
## 📘 PDF
## 📘 PDF
PDF všech lekcí lze nalézt [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF všech lekcí najdete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Další kurzy
## 🎒 Další kurzy
Náš tým vytváří i další kurzy! Podívejte se na:
Náš tým vyrábí i další kurzy! Podívejte se:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
@ -229,18 +227,18 @@ Náš tým vytváří i další kurzy! Podívejte se na:
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Série Generativní AI
### Generativní AI série
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
---
### Základní vzdělávání
### Základní vzdělávání
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,30 +249,30 @@ Náš tým vytváří i další kurzy! Podívejte se na:
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Série Copilot
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Pokud budete mít potíže nebo nějaké dotazy ohledně vytváření AI aplikací, připojte se k ostatním studentům a zkušeným vývojářům v diskuzích o MCP. Je to vstřícná komunita, kde jsou otázky vítány a znalosti se sdílejí otevřeně.
Pokud se zaseknete nebo máte jakékoli dotazy ohledně vytváření AI aplikací. Přidejte se k ostatním studentům a zkušeným vývojářům v diskusích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti sdíleny svobodně.
Toto úložiště je licencováno pod licencí MIT. Pro více informací viz soubor [LICENSE](../../LICENSE).
Tento repozitář je licencován pod licencí MIT. Více informací naleznete v souboru [LICENSE](../../LICENSE).
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zdroj informací**:
**Disclaimer**:
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoliv nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoliv nedorozumění nebo mylné výklady vyplývající z použití tohoto překladu.
## 🎥 Video
## [Kvíz před přednáškou](../../../lesson-template/quiz-url)
> Přidejte sem vložené video nebo odkaz na lekci.
[Popište, co se naučíme]
---
## Přednáškový kvíz
> Přidejte odkaz na kvíz, jakmile bude k dispozici.
---
Poskytněte krátký přehled, co se studenti v této lekci naučí.
---
### Úvod
### Úvod
Popište, co bude obsahem
Poskytněte krátký úvod popisující, co bude v této lekci probíráno.
> Poznámky
> Poznámky
---
### Předpoklady
### Předpoklady
Jaké kroky by měly být splněny před touto lekcí?
Uveďte koncepty nebo témata, se kterými by studenti měli být obeznámeni před začátkem této lekce.
---
### Příprava
### Příprava
Přípravné kroky pro zahájení této lekce
Uveďte jakékoliv kroky nastavení nebo nástroje potřebné před zahájením lekce.
---
---
[Projděte obsah v blocích]
### Obsah
Projděte obsah lekce v strukturovaných sekcích.
---
## [Téma 1]
## Téma 1
### Úkol:
### Úkol:
Spolupracujte na postupném vylepšování svého kódu, abyste vytvořili projekt se sdíleným kódem:
Spolupracujte na postupném zlepšování vašeho kódu tak, aby projekt využíval sdílený kód:
```html
```html
code blocks
code blocks
```
```
✅ Kontrola znalostí - využijte tento okamžik k rozšíření znalostí studentů pomocí otevřených otázek
✅ Kontrola znalostí
Využijte tento moment k rozšíření znalostí studentů otevřenými otázkami.
## [Téma 2]
## Téma 2
## Téma 3
## [Téma 3]
🚀 Výzva
Přidejte společnou výzvu pro studenty k vylepšení projektu.
🚀 Výzva: Přidejte výzvu, na které studenti mohou společně pracovat ve třídě, aby vylepšili projekt
Volitelné: Přidejte screenshot dokončeného uživatelského rozhraní lekce, pokud je to vhodné.
Volitelné: přidejte snímek obrazovky dokončeného uživatelského rozhraní lekce, pokud je to vhodné
## Po přednáškový kvíz
## [Kvíz po přednášce](../../../lesson-template/quiz-url)
Přidejte odkaz na kvíz po dokončení lekce.
## Přehled & Samostudium
## Revize a samostudium
**Úkol k odevzdání [MM/RR]**: [Název úkolu](assignment.md)
**Zadání splnit do [MM/YY]**: [Název zadání](assignment.md)
---
---
**Prohlášení**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Tento dokument byl přeložen pomocí služby pro automatizovaný překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.
Ez egy oktatási tanterv-tárhely, amely kezdők számára tanítja a webfejlesztés alapjait. A tanterv egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, és 24 gyakorlati leckét tartalmaz, amelyek JavaScriptet, CSS-t és HTML-t fednek le.
Ez egy oktatási tanterv tárház, amely kezdők számára tanítja meg a webfejlesztés alapjait. A tanterv egy átfogó 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati leckével, amelyek JavaScriptet, CSS-t és HTML-t fednek le.
### Főbb összetevők
### Fő összetevők
- **Oktatási tartalom**: 24 strukturált lecke, amely projektalapú modulokba rendezett
- `6-space-game/README.md` - Vászon alapú játék fejlesztés
- `6-space-game/README.md` - Vászon alapú játék fejlesztés
- `9-chat-project/README.md` - AI chat asszisztens projekt
- `9-chat-project/README.md` - AI csevegő asszisztens projekt
### Monorepo struktúra
### Monorepo felépítés
Habár nem hagyományos monorepo, ez a tárhely több önálló projektet tartalmaz:
Bár nem hagyományos monorepo, ez a tárház több független projektet tartalmaz:
- Minden lecke önálló
- Minden lecke önálló
- Projektek nem osztanak meg függőségeket
- A projektek nem osztanak meg függőségeket
- Egyedi projektek fejlesztése anélkül, hogy másokat befolyásolnánk
- Egyedi projekteken dolgozhatsz anélkül, hogy másokat érintenél
- Teljes tanterv élményéhez a teljes tárhely klónozása ajánlott
- A teljes tananyag élményéért klónozd le az egész tárházat
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Nyilatkozat**:
**Jogi nyilatkozat**:
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az anyanyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális emberi fordítás. Nem vállalunk felelősséget ezen fordítás használatából eredő félreértésekért vagy félreértelmezésekért.
Ezt a dokumentumot az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az anyanyelvén tekintendő hiteles forrásnak. Kritikus információk esetén professzionális emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy félreértelmezésekért.
Ismerkedjen meg a webfejlesztés alapjaival a Microsoft Cloud Advocates által készített 12 hetes átfogó tanfolyamunkkal. Mind a 24 lecke a JavaScript, CSS és HTML témakörébe nyújt betekintést gyakorlati projektek segítségével, mint például terráriumok, böngészőkiegészítők és űrjátékok. Vegyen részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejlessze képességeit és optimalizálja tudásának megőrzését hatékony, projekten alapuló oktatásunkkal. Kezdje el a kódolási kalandot még ma!
Ismerje meg a webfejlesztés alapjait a Microsoft Cloud Advocates által készített 12 hetes átfogó tanfolyamunkkal. A 24 lecke mindegyike gyakorlati projektek segítségével mélyed el a JavaScript, CSS és HTML témakörökben, mint például terráriumok, böngészőbővítmények és űrjátékok. Vegyen részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejlessze képességeit és optimalizálja tudásának megszilárdítását hatékony, projektalapú oktatásunkkal. Kezdje el a kódolási útját még ma!
Csatlakozzon az Azure AI Foundry Discord közösséghez
Csatlakozzon az Azure AI Foundry Discord szerveréhez, ismerkedjen meg szakértőkkel és fejlesztőtársakkal.
Kövesse az alábbi lépéseket, hogy elkezdje használni ezeket az erőforrásokat:
Kövesse az alábbi lépéseket a források használatának megkezdéséhez:
1. **Forkolja a tárházat**: Kattintson ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Forkolja a tárolót**: Kattintson ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klónozza a tárházat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Klónozza a tárolót**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Csatlakozzon az Azure AI Foundry Discordhoz, hogy találkozzon szakértőkkel és fejlesztőtársaival**](https://discord.com/invite/ByRwuEEgH4)
3. [**Csatlakozzon az Azure AI Foundry Discord szerveréhez, és ismerkedjen meg szakértőkkel és fejlesztőtársakkal**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Többnyelvű támogatás
### 🌐 Többnyelvű támogatás
#### GitHub Action segítségével támogatott (Automatizált és Mindig naprakész)
#### GitHub Action segítségével támogatott (Automatikus és mindig naprakész)
> Ez a tárház több mint 50 nyelvi fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretné klónozni, használja a sparse checkout-ot:
> Ez a tároló több mint 50 nyelvű fordítást tartalmaz, ami jelentősen növeli a letöltési méretet. A fordítások nélküli klónozáshoz használjon részleges kitekintést:
>
>
> **Bash / macOS / Linux:**
> **Bash / macOS / Linux:**
> ```bash
> ```bash
@ -48,233 +48,231 @@ Kövesse az alábbi lépéseket, hogy elkezdje használni ezeket az erőforráso
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
> ```
>
>
> Ez mindent megad, amire szüksége van a tanfolyam elvégzéséhez sokkal gyorsabb letöltéssel.
> Így mindent megkap, ami a kurzus elvégzéséhez szükséges, sokkal gyorsabb letöltéssel.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ha további támogatott fordítási nyelveket szeretne, azok [itt találhatók](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ha további fordításokat szeretne, az elérhető nyelvek itt találhatók: [itt](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Diák vagy?_
#### 🧑🎓 _Diák vagy?_
Látogass el a [**Diák Hub oldalra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdő erőforrásokat, diák csomagokat és akár ingyenes tanúsítvány utalványokat is találsz. Ezt az oldalt érdemes rendszeresen könyvjelzőzni, mivel havonta frissítjük a tartalmat.
Látogasd meg a [**Student Hub oldalt**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdő erőforrásokat, diákcsomagokat és akár ingyenes tanúsítványkuponokat is találsz. Ezt az oldalt érdemes könyvjelzőznie és időről időre ellenőriznie, mivel havonta cseréljük a tartalmat.
### 📣 Bejelentés - Új GitHub Copilot Agent mód kihívások!
Új kihívás került hozzáadásra "GitHub Copilot Agent Challenge 🚀" néven a legtöbb fejezetben. Ez egy új kihívás, amit a GitHub Copilot és az Agent mód segítségével teljesíthetsz. Ha még nem használtad az Agent módot, az nemcsak szöveg generálására képes, hanem fájlok létrehozására és szerkesztésére, parancsok futtatására és még sok másra.
Új kihívás került hozzáadásra, keresd a "GitHub Copilot Agent Challenge 🚀" feliratot a legtöbb fejezetben. Ez egy új kihívás, amelyet GitHub Copilot és Agent mód segítségével kell megoldanod. Ha még nem használtad az Agent módot, az nemcsak szöveg generálására képes, hanem fájlok létrehozására és szerkesztésére, parancsok futtatására és egyéb feladatokra is.
### 📣 Bejelentés - _Új projekt a Generatív Mesterséges Intelligencia használatával_
### 📣 Bejelentés – _Új projekt generatív MI használatával_
Új AI asszisztens projekt került hozzáadásra, nézd meg a [projektdokumentációt](./9-chat-project/README.md)
Új MI-asszisztens projekt került hozzáadásra, nézd meg a [projektet](./9-chat-project/README.md)
### 📣 Bejelentés - _Új tanmenet_ JavaScript Generatív MI témában jelent meg
### 📣 Bejelentés –_Új tanterv_ a JavaScript generatív MI témakörében megjelent
Ne hagyd ki új Generatív MI tanmenetünket!
Ne hagyd ki új generatív MI tantervünket!
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, és kezdj bele!
Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez!
Minden lecke egy feladatot, egy tudásellenőrzést és egy kihívást tartalmaz, hogy segítsen a következő témák elsajátításában:
Minden lecke tartalmaz egy befejezendő feladatot, egy tudásellenőrzést és egy kihívást, amelyek témái például:
- Promptolás és prompt mérnöki munka
- Utasítások megadása és utasítás-tervezés
- Szöveg- és képalkalmazás generálás
- Szöveg- és képgeneráló alkalmazások
- Keresőalkalmazások
- Keresőalkalmazások
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, és kezdj bele!
Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez!
## 🌱 Kezdés
## 🌱 Kezdés
> **Tanárként** néhány javaslatot [ide](for-teachers.md) tettünk közzé a tanmenet használatára. Szívesen fogadjuk visszajelzésedet [vitafórumunkban](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Tanárként**, [ide kattintva](for-teachers.md) találsz néhány javaslatot a tanterv használatához. Várjuk visszajelzésed [beszélgetési fórumunkban](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden lecke előtt végezzetek bevezető kvízt, majd olvassátok el az anyagot, végezzétek el a feladatokat, és teszteljétek tudásotokat az utólagos kvízzel.
**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckéhez kezdjétek egy előadás előtti kvízzel, majd olvassátok el az előadási anyagot, teljesítsétek a különféle feladatokat, és ellenőrizzétek a tudásotokat az előadás utáni kvízzel.
A tanulási élmény fokozása érdekében dolgozzatok együtt diáktársaitokkal a projekteken! A beszélgetések ösztönzöttek a [vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátor csapatunk készen áll válaszolni kérdéseitekre.
A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A beszélgetésekre bátorítunk a [beszélgetési fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink segítséget nyújtanak kérdéseitekre.
A tanulmányaitok elősegítéséhez erősen ajánljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platform további anyagainak felfedezését.
További tanulmányokhoz javasoljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) használatát, ahol még több oktatóanyagot találsz.
### 📋 Fejlesztői környezet beállítása
### 📋 Környezet beállítása
Ez a tanmenet egy működő fejlesztői környezettel érkezik! Kezdésként választhatjátok a tanmenet futtatását [Codespace-ben](https://github.com/features/codespaces/) (_böngészőalapú, telepítés nélküli környezet_), vagy helyben, a számítógépeden egy szövegszerkesztővel, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) segítségével.
Ezen tantervhez egy kész fejlesztői környezet tartozik! Induláskor választhatod a tanterv futtatását [Codespace-ben](https://github.com/features/codespaces/) (_egy böngészőalapú, telepítés nélküli környezet_), vagy helyben a számítógépedön egy szövegszerkesztő, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatával.
#### Hozd létre a saját tárházad
#### Tároló létrehozása
A munkád biztonságos mentése érdekében ajánlott létrehoznod a saját példányodat ebből a tárházból. Ezt megteheted az oldal tetején található **Use this template** gombra kattintva. Ez egy új tárházat hoz létre GitHub fiókodban, a tanmenet másolatával.
Ahhoz, hogy könnyen elmentsd a munkád, ajánlott, hogy saját példányt készíts erről a tárolóról. Ezt a lap tetején található **Use this template** gomb megnyomásával teheted meg. Ez létrehoz egy új tárolót a GitHub fiókodban, amely a tanterv másolatát tartalmazza.
Lépések:
Kövesd ezeket a lépéseket:
1. **Forkold a tárházat**: Kattints a jobb felső sarokban lévő "Fork" gombra.
1. **Forkold a tárolót**: Kattints az oldal jobb felső sarkában a "Fork" gombra.
2. **Klónozd a tárházat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Klónozd a tárolót**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Tanmenet futtatása Codespace-ben
#### A tanterv futtatása Codespace-ben
A tárházadban, amit létrehoztál, kattints a **Code** gombra, majd válaszd az **Open with Codespaces** opciót. Ez létrehoz egy új Codespace-t a munkához.
A saját tárolód példányában, amit előzőleg létrehoztál, kattints a **Code** gombra, és válaszd az **Open with Codespaces** opciót. Ez létrehoz egy új Codespace-t, ahol dolgozhatsz.
A tanmenet helyi futtatásához szükséged lesz egy szövegszerkesztőre, egy böngészőre és egy parancssori eszközre. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages) segít több lehetőség közötti választásban ezek közül.
A tanterv helyi futtatásához szükséged lesz egy szövegszerkesztőre, böngészőre és parancssori eszközre. Az első leckénk, a [Bevezetés a programozási nyelvekbe és fejlesztőeszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages), végigvezet a különböző lehetőségeken, hogy kiválaszthasd a számodra legmegfelelőbb eszközöket.
Ajánljuk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatát szerkesztőként, amely beépített [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) is tartalmaz. A Visual Studio Code letölthető [innen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ajánljuk, hogy a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) szerkesztőt használd, amely beépített [terminállal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) rendelkezik. A Visual Studio Code-ot innen töltheted le: [itt](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klónozd a tárolódat a számítógépedre. Ezt úgy teheted meg, hogy rákattintasz a **Code** gombra, és kimásolod az URL-t:
1. Klónozd a tárhelyed a számítógépedre. Ezt megteheted a **Code** gombra kattintva, majd a URL másolásával:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Ezután nyisd meg a [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) belül, és futtasd a következő parancsot, az `<your-repository-url>` helyére beillesztve a most kimásolt URL-t:
Ezután nyisd meg a [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) programban, és futtasd a következő parancsot, cseréld le a `<your-repository-url>` részt az imént másolt URL-re:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy rákattintasz a**File** > **Open Folder** menüpontra, majd kiválasztod a klónozott mappát.
2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy az **File** > **Open Folder** menüpontra kattintasz, és kiválasztod az imént klónozott mappát.
> Ajánlott Visual Studio Code kiegészítők:
> Ajánlott Visual Studio Code kiterjesztések:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML oldalak előnézete a Visual Studio Code-on belül
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML oldalak előnézete a Visual Studio Code-on belül
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít gyorsabban kódot írni
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít a kód gyorsabb írásában
## 📂 Minden lecke tartalmaz:
## 📂 Minden leckében található:
- opcionális vázlatrajzot
- opcionális vázlatjegyzet
- opcionális kiegészítő videót
- opcionális kiegészítő videó
- tanóra előtti bemelegítő kvízt
- óra előtti bemelegítő kvíz
- írott leckét
- írott lecke
- projekt alapú leckékhez lépésről lépésre útmutatókat a projekt megépítéséhez
- projektalapú leckékhez lépésről-lépésre útmutatók a projekt elkészítéséhez
- tudásellenőrzéseket
- tudásellenőrzések
- kihívást
- kihívás
- kiegészítő olvasnivalót
- kiegészítő olvasmány
- feladatot
- feladat
- [tanóra utáni kvízt](https://ff-quizzes.netlify.app/web/)
- [órafeladat utáni kvíz](https://ff-quizzes.netlify.app/web/)
> **Megjegyzés a kvízekhez**: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz három kérdéssel. Elérhetőek [itt](https://ff-quizzes.netlify.app/web/), a kvízalkalmazás futtatható helyileg vagy telepíthető Azure-ra; kövesd az utasításokat a `quiz-app` mappában.
> **Megjegyzés a kvízekhez**: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz mindegyik három kérdéssel. Ezek elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvíz alkalmazás futtatható helyben vagy telepíthető Azure-ra; kövesd az utasításokat a `quiz-app` mappában.
## 🗃️ Leckék
## 🗃️ Leckék
| | Projekt neve | Tanított fogalmak | Tanulási célok | Hivatkozott lecke | Szerző |
| | Projekt neve | Oktatott fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző |
| 01 | Kezdés | Bevezetés a programozásba és a szakmai eszközökbe | Ismerd meg a legtöbb programozási nyelv alapjait és azokat a szoftvereket, amelyek segítik a profi fejlesztők munkáját | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Első lépések | Bevezetés a programozásba és a munkaeszközökbe | Megérteni a legtöbb programozási nyelv alapjait és a szoftvereket, melyek segítik a profi fejlesztőket munkájukban | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kezdés | A GitHub alapjai, beleértve a csapatmunkát | Hogyan használd a GitHubot a projektedben, és hogyan működj együtt másokkal kódbázison | [Bevezetés a GitHubba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Első lépések | GitHub alapjai, csapatmunkával | Hogyan használd a GitHubot a projektben, hogyan működj együtt másokkal egy kódalapon | [GitHub alapok](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kezdés | Akadálymentesség | Ismerd meg a web akadálymentesség alapjait | [Akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Első lépések | Akadálymentesség | Megtanulni a webes akadálymentesség alapjait | [Akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS alapok | Függvények és metódusok | Ismerd meg a függvényeket és metódusokat az alkalmazás logikájának kezeléséhez | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher |
| 05 | JS alapok | Függvények és metódusok | Megismerni a függvényeket és metódusokat, hogy hogyan kezeljük az alkalmazás logikai folyamatát | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher |
| 06 | JS alapok | Döntéshozatal JS-ben | Tanuld meg, hogyan hozz létre feltételeket a kódodban döntéshozatali módszerekkel | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS alapok | Tömbök és ciklusok | Dolgozz adatkezeléssel tömbök és ciklusok segítségével JavaScriptben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS alapok | Tömbök és ciklusok | Adatkezelés tömbök és ciklusok használatával JavaScript-ben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML gyakorlatban | Építsd meg a HTML-t egy online terráriumhoz, a layout készítésére fókuszálva | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML gyakorlat | HTML készítése online terráriumhoz, a layout kialakítására fókuszálva | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS gyakorlatban | Építsd meg a CSS-t az online terráriumhoz, a CSS alapjaira fókuszálva, beleértve az oldal reszponzívvá tételét | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS gyakorlat | CSS készítése az online terrárium stílusához, alapok a reszponzív oldal készítéséhez | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript closures, DOM manipuláció | Építsd meg a JavaScript-et, hogy a terrárium drag/drop felületként működjön, fókuszálva a closures és a DOM kezelésére | [JavaScript closures, DOM manipuláció](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript zárványok, DOM manipuláció | JavaScript készítése, hogy a terrárium működjön húzd és ejtsd felületen, zárványok és DOM manipulációra fókuszálva | [JavaScript zárványok, DOM manipuláció](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Gépelős játék](./4-typing-game/solution/README.md) | Gépelős játék építése | Tanuld meg, hogyan használd a billentyűzetes eseményeket appod logikájának vezérlésére | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Gépelős játék](./4-typing-game/solution/README.md) | Gépelős játék készítése | Megtanulni a billentyűzet események használatát JavaScript alkalmazás logikájához | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Tanuld meg, hogyan működnek a böngészők, történetüket és hogyan használd a böngészőbővítmény első elemeinek létrehozásához | [A böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Böngészőkezelés | Megérteni, hogyan működnek a böngészők, történetük és hogyan építsük fel az első elemeket egy böngészőbővítményhez | [A böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívása és helyi tároló változók használata | Építsd meg a böngészőbővítményed JavaScript elemeit egy API meghívásához helyi tároló változókkal | [API-k, űrlapok és helyi tárolás](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Űrlapkészítés, API hívás és helyi adattárolás | JavaScript elemek építése bővítményedhez, API hívások végrehajtásához és változók helyi tárolásával | [API-k, űrlapok, helyi tárolás](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, web teljesítmény | Használd a böngésző háttérfolyamatait az ikonjának kezelésére; ismerd meg a web teljesítményét és néhány optimalizálási módszert | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, webes teljesítmény | Böngésző háttérfolyamatok kezelése az ikon menedzseléséhez; webes teljesítmény és optimalizációk megismerése | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Űrjáték](./6-space-game/solution/README.md) | Fejlettebb játékfejlesztés JavaScript-tel | Ismerd meg az öröklést osztályok és összetétel (composition) használatával, valamint a Pub/Sub mintát, hogy előkészülj egy játék építésére | [Bevezetés a fejlett játékfejlesztésbe](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Űrjáték](./6-space-game/solution/README.md) | Haladóbb játékfejlesztés JavaScript-tel | Megtanulni az öröklődést osztályok és összetétel segítségével, valamint a Pub/Sub mintázatot játék készítés előtt | [Bevezetés haladó játékfejlesztésbe](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás a vászonra | Ismerd meg a Canvas API-t, amellyel elemeket rajzolhatunk a képernyőre | [Rajzolás a vászonra](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás a vászonra | Megismerni a Canvas API-t a képernyőre rajzoláshoz | [Rajzolás a vászonra](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Űrjáték](./6-space-game/solution/README.md) | Mozgatás a képernyőn | Fedezd fel, hogyan kaphatnak mozgást az elemek a kartézián koordináták és a Canvas API segítségével | [Elemek mozgatása](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Űrjáték](./6-space-game/solution/README.md) | Mozgatás a képernyőn elhelyezett elemekkel | Felfedezni, hogyan mozognak az elemek kartézián koordinátákkal és a Canvas API-val | [Elemek mozgatása](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközésészlelés | Készíts ütközéseket és reagálást az elemek között billentyűleütésekkel és adj hozzá hűlési funkciót a játék teljesítményének biztosítására | [Ütközésészlelés](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközés érzékelés | Az elemek ütközésének és kölcsönhatásának megvalósítása billentyűleütések segítségével, hűtési funkcióval a teljesítményért | [Ütközésérzékelés](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Űrjáték](./6-space-game/solution/README.md) | Pontszám nyilvántartás | Végez matematika műveleteket a játék állapota és teljesítménye alapján | [Pontszámlálás](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Űrjáték](./6-space-game/solution/README.md) | Pontozás | Matematikai számítások elvégzése a játék állapota és teljesítménye alapján | [Pontozás](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Űrjáték](./6-space-game/solution/README.md) | A játék befejezése és újraindítása | Tanuld meg a játék befejezését és újraindítását, beleértve az erőforrások takarítását és a változó értékek visszaállítását | [A befejezési feltétel](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Űrjáték](./6-space-game/solution/README.md) | Játék befejezése és újraindítása | Játék befejezésének és újraindításának megtanulása, eszközök tisztítása és változók visszaállítása | [Befejezési feltétel](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak egy webalkalmazásban | Tanuld meg, hogyan készítsd el egy többoldalas weboldal felépítését routinggal és HTML sablonokkal | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak webalkalmazásban | Többoldalas weboldal felépítésének megértése routing és HTML sablonok használatával | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Bejelentkezési és regisztrációs űrlap készítése | Tanuld meg az űrlapkészítést és az érvényesítési rutinok kezelését | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Adatok lekérése és használata | Hogyan áramlanak be és ki az adatok az alkalmazásból, hogyan kérd le, tárold és szabadulj meg tőlük | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Adatok lekérése és kezelése | Az adatáramlás megértése az alkalmazásban, hogyan kérjük le, tároljuk és dobjuk el az adatokat | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés fogalmai | Tanuld meg, hogyan őrzi meg az alkalmazás az állapotot és hogyan kezeld programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés fogalmai | Megtanulni, hogyan őrzi meg az alkalmazás az állapotot és hogyan kezelhető programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | Munka VScode-dal | Tanulj meg kódszerkesztőt használni | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | Működés VScode-dal | Megtanulni szerkesztő használatát | [VScode kód szerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Mesterséges intelligencia asszisztensek](./9-chat-project/README.md) | Munkavégzés MI-vel | Tanuld meg, hogyan építsd fel a saját MI asszisztensed | [MI asszisztens projekt](./9-chat-project/README.md) | Chris |
| 26 | [AI asszisztensek](./9-chat-project/README.md) | Működés AI-val | Megtanulni saját AI asszisztenst építeni | [AI asszisztens projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagógia
## 🏫 Pedagógia
Tananyagunk két fontos pedagógiai elv szerint készült:
Tananyagunk két fő pedagógiai elven alapul:
* projektalapú tanulás
* projektalapú tanulás
* gyakori kvízek
* gyakori kvízek
A program JavaScript, HTML és CSS alapjait tanítja meg, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákoknak lehetőségük nyílik gyakorlati tapasztalat szerzésére gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrhajós játék és üzleti bankalkalmazás építésével. A sorozat végére alapos webfejlesztési tudásra tesznek szert.
A program a JavaScript, HTML és CSS alapjait tanítja meg, valamint a legújabb webfejlesztői eszközöket és technikákat. A diákok gyakorlati tapasztalatot szerezhetnek gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űr-inváziós stílusú játék, és egy banki alkalmazás elkészítésével. A sorozat végére alapos webfejlesztési tudást szereznek.
> 🎓 Az első néhány leckét ebben a tananyagban Microsoft Learn-ön [Tanulási útvonalként](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) is végezheted!
Azáltal, hogy a tartalom a projektekhez igazodik, a folyamat érdekesebb a diákok számára, és a fogalmak megtartása is javul. Több kezdő leckét is írtunk JavaScript alapokból, hogy megismertessük az alapfogalmakat, kiegészítve a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videósorozat néhány szerzőjének oktató videóival, akik szintén hozzájárultak ehhez a tananyaghoz.
> 🎓 Az első néhány leckét elvégezheted [Tanulási Útként](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) a Microsoft Learn-en!
Továbbá egy alacsony tétű kvíz óra előtt beállítja a diák szándékát a tanulásra, míg egy második kvíz óra után elősegíti a tudás mélyebb rögzítését. Ez a tananyag rugalmas és szórakoztató, egészben vagy részleteiben is végezhető. A projektek kicsiben indulnak és fokozatosan egyre összetettebbek lesznek a 12 hetes ciklus végére.
Ha az anyagokat projektekhez igazítjuk, az érdeklődést fenntartja a diákoknál és növeli a fogalmak megtartását. Több bevezető leckét is írtunk JavaScript alapok témában, videóval kiegészítve a "[JavaScript kezdő sorozat](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" oktatóvideókból, amelyek egyes szerzői hozzájárultak ehhez a tananyaghoz.
Bár tudatosan kerültük a JavaScript keretrendszerek bevezetését, hogy az alapvető webfejlesztői készségekre koncentráljunk a keretrendszerhasználat előtt, a tananyag elvégzése után jó következő lépés a Node.js megismerése egy másik videósorozat segítségével: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Emellett egy alacsony tétű kvíz óra előtt beállítja a tanuló szándékát egy téma megtanulására, míg az óra utáni kvíz elősegíti a további megszilárdítást. Ez a tananyag rugalmas és élvezetes, egészben vagy részenként is végezhető. A projektek kis lépésekben indulnak, és a 12 hetes ciklus végére egyre összetettebbek lesznek.
> Látogasd meg [Viselkedési Kódexünket](CODE_OF_CONDUCT.md) és [Hozzájárulás](CONTRIBUTING.md) irányelveinket. Szívesen fogadjuk építő jellegű visszajelzéseidet!
Miközben szándékosan kerültük a JavaScript keretrendszerek bemutatását, hogy az alapvető készségekre koncentráljunk, mielőtt keretrendszert használunk, egy jó következő lépés lehet a Node.js megtanulása a "[Node.js kezdő sorozat](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" videógyűjtemény segítségével.
> Látogasd meg [Magatartási kódexünket](CODE_OF_CONDUCT.md) és [Közreműködési útmutatónkat](CONTRIBUTING.md). Várjuk építő jellegű visszajelzésedet!
## 🧭 Offline hozzáférés
## 🧭 Offline hozzáférés
Ezt a dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) használatával. Fork-old ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépedre, majd a repó gyökérmappájában írd be: `docsify serve`. Az oldal a 3000-es porton lesz elérhető a localhostodon: `localhost:3000`.
Ez a dokumentáció offline is futtatható a [Docsify](https://docsify.js.org/#/) használatával. Fork-old ezt a tárolót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépedre, majd a tároló gyökérmappájában írd be, hogy `docsify serve`. A webhely a 3000-es porton lesz elérhető a localhostodon: `localhost:3000`.
## 📘 PDF
## 📘 PDF
A PDF az összes leckéről megtalálható [itt](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Az összes leckéről szóló PDF [itt](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) található.
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Generatív AI sorozat
### Generatív AI sorozat
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Copilot sorozat
### Copilot sorozat
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ha elakadsz vagy kérdésed van AI alkalmazások fejlesztésével kapcsolatban. Csatlakozz tanulótársaidhoz és tapasztalt fejlesztőkhöz a MCP témájú beszélgetésekben. Ez egy támogató közösség, ahol a kérdések szívesen látottak, és a tudás szabadon megosztott.
Ha elakadnál vagy kérdésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP-ről folytatott beszélgetésekben. Ez egy támogató közösség, ahol a kérdések szívesen fogadottak, és a tudás szabadon megosztott.
Ez a tároló az MIT licenc alatt áll. További információért lásd a [LICENSE](../../LICENSE) fájlt.
Ez a tárhely az MIT licenc alatt áll. További információkért lásd a [LICENSE](../../LICENSE) fájlt.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Felelősség kizárása**:
**Jogi nyilatkozat**:
Ezt a dokumentumot az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvén tekintendő hivatalos forrásnak. Kritikus információk esetén professzionális emberi fordítás javasolt. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért.
Ez a dokumentum az AI fordító szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével készült. Bár igyekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelven tekintendő hivatalos forrásnak. Kritikus információk esetén professzionális emberi fordítás használata javasolt. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy hibás értelmezésekért.
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
**Nyilatkozat**:
Ez a dokumentum az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével készült. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az anyanyelvén tekintendő hiteles forrásnak. Kritikus információk esetén professzionális emberi fordítást javaslunk. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért.
Huu ni hazina ya mtaala wa elimu kwa ajili ya kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala ni kozi kamili ya wiki 12 iliyotengenezwa na Microsoft Cloud Advocates, ikiwa na masomo 24 ya vitendo yanayohusu JavaScript, CSS, na HTML.
Huu ni hifadhidata ya mtaala wa kielimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala ni kozi kamili ya wiki 12 iliyotengenezwa na Microsoft Cloud Advocates, inayojumuisha masomo 24 ya vitendo yanayochukua JavaScript, CSS, na HTML.
### Vipengele Muhimu
### Vipengele Muhimu
- **Yaliyomo ya Elimu**: Masomo 24 yaliyopangwa kwa muundo wa moduli za miradi
- **Maudhui ya Kielimu**: Masomo 24 yaliyoandaliwa kwa mfululizo katika moduli za miradi
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Upanuzi wa Kivinjari, Mchezo wa Anga, Programu ya Benki, Mhariri wa Msimbo, na Msaidizi wa AI wa Mazungumzo
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Kiongezeo cha Kivinjari, Mchezo wa Anga, Programu ya Benki, Mhariri wa Msimbo, na Msaidizi wa AI wa Mazungumzo
- **Maswali Shindani Ya Kihusianisho**: Maswali 48 kila moja ikiwa na maswali 3 (majaribio kabla/baada ya somo)
- **Mtihani wa Kuelewa**: Mitihani 48 yenye maswali 3 kila moja (kipimo kabla/baada ya somo)
- **Msaada wa Lugha Nyingi**: Tafsiri za moja kwa moja za lugha zaidi ya 50 kupitia GitHub Actions
- **Msaada wa Lugha Nyingi**: Tafsiri za kiotomatiki kwa lugha zaidi ya 50 kupitia GitHub Actions
- Tumia VS Code na upanuzi wa Live Server kwa miradi ya HTML
- Tumia VS Code na kiendelezi cha Live Server kwa miradi ya HTML
- Sakinisha upanuzi za ESLint na Prettier kwa mtindo thabiti
- Sakinisha kiendelezi cha ESLint na Prettier kwa mtindo thabiti
- Tumia DevTools wa kivinjari kwa kupata na kutatua makosa ya JavaScript
- Tumia DevTools za kivinjari kwa ugunduzi wa makosa ya JavaScript
- Kwa miradi ya Vue, sakinisha upanuzi wa Vue DevTools kivinjari
- Kwa miradi ya Vue, sakinisha kiendelezi cha Vue DevTools kwa kivinjari
### Mambo ya Kujali Kuhusu Utendaji
### Mambo ya Utendaji
- Idadi kubwa ya faili za tafsiri (za lugha 50+) huongeza ukubwa wa nakala kamili
- Idadi kubwa ya faili zilizotafsiriwa (lugha 50+) hufanya nakala kamili kuwa kubwa
- Tumia nakala ya chini (shallow) ikiwa unafanya kazi tu kwa yaliyomo: `git clone --depth 1`
- Tumia nakala ya kina kidogo ikiwa unafanya kazi pekee na maudhui: `git clone --depth 1`
- Epuka tafutiza za tafsiri wakati unafanya kazi na yaliyomo ya Kiingereza
- Epuka tafutaji za tafsiri unaporatibu kazi kwa maudhui ya Kiingereza
- Mienendo ya ujenzi inaweza kuwa polepole mwanzoni (npm install, ujenzi wa Vite)
- Mchakato wa ujenzi unaweza kuwa polepole mara ya kwanza (npm install, Vite build)
## Masuala ya Usalama
## Mambo ya Usalama
### Mabadiliko ya Mazingira
### Vigezo vya Mazingira
- Funguo za API hazipaswi kuwekwa moja kwa moja katika hazina
- Mofadhi za API hazipaswi kuwekwa hifadhidanini
- Tumia faili za `.env` (zipo katika `.gitignore`)
- Tumia faili za `.env` (ziko katika `.gitignore`)
- Elezea mabadiliko ya mazingira yanayohitajika katika README za miradi
- Andika vigezo vya mazingira vinavyohitajika katika README za miradi
### Miradi ya Python
### Miradi ya Python
- Tumia mazingira ya pekee: `python -m venv venv`
- Tumia mazingira ya kipengele: `python -m venv venv`
- Sasisha utegemezi mara kwa mara
- Endelea kusasisha utegemezi
- Tokeni za GitHub zinapaswa kuwa na vibali vidogo vinavyotakiwa tu
- Vidhibiti vya GitHub vinapaswa kuwa na ruhusa ndogo zinazohitajika
### Ufikiaji wa GitHub Models
### Ufikiaji wa GitHub Models
- Mipangilio ya Ufikiaji wa Kibinafsi (PAT) inahitajika kwa GitHub Models
- Vidhibiti vya Ufikiaji wa Binafsi (PAT) vinahitajika kwa GitHub Models
- Tokeni ziwe katika mabadiliko ya mazingira
- Vidhibiti vinapaswa kuhifadhiwa kama vigezo vya mazingira
- Kamwe usiweka tokeni au nyaraka katika hazina
- Kamwe usiweka vidhibiti au nyaraka za siri kwenye hifadhidata
## Vidokezo Zaidi
## Vidokezo Ziada
### Hadhira Lengwa
### Watu Wanaolengwa
- Wananchi wapya kabisa katika maendeleo ya wavuti
- Wanaoanza kabisa katika maendeleo ya wavuti
- Wanafunzi na waelimishaji wa kujifunza peke yao
- Wanafunzi na wanaojifunza pekee
- Walimu wanaotumia mtaala darasani
- Walimu wanaotumia mtaala huyu kwenye madarasa
- Yaliyomo yamebuniwa kwa kupatikana na kukuza hatua kwa hatua ujuzi
- Maudhui yameundwa kwa ufikiaji rahisi na kujenga ujuzi kwa hatua
### Falsafa ya Elimu
### Falsafa ya Elimu
- Mbinu ya kujifunza kwa miradi
- Mbinu za kujifunza kupitia mradi
- Ukaguzi wa mara kwa mara wa maarifa (maswali)
- Ukaguzi wa mara kwa mara wa maarifa (mitihani)
- Mazoezi ya kuandika msimbo kwa vitendo
- Mazoezi ya coding ya vitendo
- Mifano ya matumizi halisi ya dunia ya kweli
- Mifano ya matumizi halisi duniani
- Kuzingatia misingi kabla ya mifumo ngumu
- Kipaumbele katika misingi kabla ya mifumo ya kielekezi
### Matengenezo ya Hazina
### Matengenezo ya Hifadhidata
- Jamii hai ya wanafunzi na wasaidizi
- Jamii hai ya wanafunzi na wachangiaji
- Sasisho za mara kwa mara za utegemezi na yaliyomo
- Sasisho za mara kwa mara kwa utegemezi na maudhui
- Masuala na majadiliano yanatazamwa na watunzaji
- Masuala na majadiliano huangaliwa na watunza
- Sasisho za tafsiri zimepangwa moja kwa moja kupitia GitHub Actions
- Sasisho za tafsiri kiotomatiki kupitia GitHub Actions
### Rasilimali Zinazohusiana
### Rasilimali Zinazohusiana
- [Moduli za Microsoft Learn](https://docs.microsoft.com/learn/)
- [Moduli za Microsoft Learn](https://docs.microsoft.com/learn/)
- [Rasilimali za Kitovu cha Mwanafunzi](https://docs.microsoft.com/learn/student-hub/)
- [Rasilimali za Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inashauriwa kwa wanafunzi
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inashauriwa kwa wanafunzi
- Kozi zingine: AI ya kuzalisha, Sayansi ya Data, ML, na mtaala wa IoT zinapatikana
- Kozi za ziada: AI ya kuzalisha, Sayansi ya Data, ML, IoT zinazopatikana
### Kufanya kazi na Miradi Mahususi
### Kufanya Kazi na Miradi Maalum
Kwa maelekezo ya kina juu ya miradi binafsi, rejea faili za README katika:
Kwa maagizo ya kina juu ya miradi binafsi, rejelea mafaili ya README katika:
- `quiz-app/README.md` - Programu ya mtihani ya Vue 3
- `quiz-app/README.md` - Programu ya quiz ya Vue 3
- `7-bank-project/README.md` - Programu ya benki yenye uthibitishaji
- `7-bank-project/README.md` - Programu ya benki yenye uthibitishaji
- `5-browser-extension/README.md` - Maendeleo ya upanuzi wa kivinjari
- `5-browser-extension/README.md` - Maendeleo ya kiongezeo cha kivinjari
- `6-space-game/README.md` - Maendeleo ya mchezo wa Canvas
- `6-space-game/README.md` - Maendeleo ya mchezo wa canvas
- `9-chat-project/README.md` - Mradi wa msaidizi wa mazungumzo wa AI
- `9-chat-project/README.md` - Mradi wa msaidizi wa mazungumzo wa AI
### Muundo wa Monorepo
### Muundo wa Monorepo
Ingawa sio monorepo ya kawaida, hazina hii ina miradi huru mingi:
Ingawa si monorepo ya kawaida, hifadhidata hii ina miradi huru mingi:
- Kila somo limejitegemea
- Kila somo lina utaratibu wake binafsi
- Miradi haishiriki utegemezi
- Miradi haigawani utegemezi
- Fanya kazi kwenye miradi binafsi bila kuathiri mingine
- Fanya kazi kwenye miradi binafsi bila kuathiri mingine
- Nakili hazina nzima kwa uzoefu kamili wa mtaala
- Dondoa hifadhidata yote kwa uzoefu kamili wa mtaala
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Kinyang'anyiro**:
**Kumbusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Wakati tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za kiotomati zinaweza kuwa na makosa au upotoshaji. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya mtaalamu wa binadamu inapendekezwa. Hatubeba jukumu la kutokea kwa kutoelewana au tafsiri potofu kutokana na matumizi ya tafsiri hii.
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Wakati tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatubebei dhamana kwa kutokuelewana au tafsiri potofu zinazotokana na matumizi ya tafsiri hii.
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu kamili ya wiki 12 inayotolewa na Microsoft Cloud Advocates. Kila somo kati ya 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya anga. Shirikiana na maswali ya mtihani, mijadala, na kazi za vitendo. Boresha ujuzi wako na uboresha kumbukumbu yako kwa kutumia mfumo wetu mzuri wa kujifunza unaotegemea miradi. Anza safari yako ya kuandika msimbo leo!
Jifunze misingi ya maendeleo ya wavuti kwa kozi yetu kamili ya wiki 12 iliyotolewa na Microsoft Cloud Advocates. Kila somo kati ya 24 linaangazia JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya anga. Shirikiana kupitia maswali ya kujitathmini, mijadala, na majukumu ya vitendo. Boresha ujuzi wako na ўboresha ukumbuzi wako wa maarifa kwa njia yetu madhubuti inayotegemea miradi. Anza safari yako ya kuandika msimbo leo!
Jiunge na Jamii ya Azure AI Foundry kwenye Discord
Jiunge na Azure AI Foundry Discord na kutana na wataalamu na wajasiriamali wenzako.
1. **Fanya Nakala ya Hifadhi**: Bonyeza [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Fungua Nakala ya Hifadhi**: Bonyeza [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Hifadhi hii ina tafsiri za lugha 50+ ambazo huongeza sana ukubwa wa kupakua. Ili kukopa bila tafsiri, tumia sparse checkout:
> Hifadhi hii ina tafsiri zaidi ya 50 za lugha zinazoongeza ukubwa wa kupakua. Ili kunakili bila tafsiri, tumia sparse checkout:
>
>
> **Bash / macOS / Linux:**
> **Bash / macOS / Linux:**
> ```bash
> ```bash
@ -48,82 +48,82 @@ Fuata hatua hizi kuanza kutumia rasilimali hizi:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
> ```
>
>
> Hii itakupa kila kitu unachohitaji kukamilisha kozi kwa usakinishaji wa haraka zaidi.
> Hii inakupa kila kitu unachohitaji kukamilisha kozi kwa upakuaji wa kasi zaidi.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ikiwa unataka lugha za ziada za tafsiri kuungwa mkono zimetajwa [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ikiwa unataka kupata tafsiri za ziada, lugha zinazoungwa mkono ziko hapa. [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Je, wewe ni mwanafunzi?_
#### 🧑🎓 _Je, wewe ni mwanafunzi?_
Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali za wanaoanza, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ndio ukurasa unaotaka kuweka kama alama na kuangalia mara kwa mara tunapobadilisha maudhui kila mwezi.
Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali za waanzilishi, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ni ukurasa ungependa kuweka alama na kuangalia mara kwa mara kwani hubadilishwa kila mwezi.
### 📣 Tangazo - Changamoto Mpya za Mode ya GitHub Copilot Agent kukamilisha!
### 📣 Taarifa - Changamoto Mpya za Mode ya GitHub Copilot Agent za Kukamilisha!
Changamoto Mpya imeongezwa, tafuta "GitHub Copilot Agent Challenge 🚀" katika sura nyingi. Hiyo ni changamoto mpya kwako kukamilisha ukiwa unatumia GitHub Copilot na Mode ya Agent. Ikiwa hujawahi kutumia Mode ya Agent hapo awali, ina uwezo si tu wa kuandika maandishi bali pia kuunda na kuhariri mafaili, kuendesha amri na mengineyo.
Changamoto Mpya imeongezwa, tazama "Changamoto ya GitHub Copilot Agent 🚀" katika sura nyingi. Hii ni changamoto mpya ya kukamilisha ukitumia GitHub Copilot na mode ya Agent. Ikiwa hujawahi kutumia mode ya Agent, inauwezo wa si tu kuunda maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi.
### 📣 Tangazo - _Mradi Mpya wa kujenga kwa kutumia AI ya Kizazi_
### 📣 Taarifa - _Mradi Mpya wa Kujenga kwa Kutumia AI ya Kuumbilia_
Mradi mpya wa Msaidizi wa AI umeongezwa, angalia [mradi](./9-chat-project/README.md)
Mradi mpya wa Msaidizi wa AI umeongezwa, angalia [mradi](./9-chat-project/README.md)
### 📣 Tangazo - _Mtaala Mpya_ kuhusu AI ya Kizazi kwa JavaScript umeachiliwa
### 📣 Taarifa - _Mtaala Mpya_ juu ya AI ya Kuumbilia kwa JavaScript umebuniwa
> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na mtihani kabla ya mihadhara na fuata kwa kusoma nyenzo za mihadhara, kukamilisha shughuli mbalimbali na hakikisha unaelewa kupitia mtihani baada ya mihadhara.
**[Wajifunzaji](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na jaribio la kabla ya mhadhara na fuata kwa kusoma vifaa vya mhadhara, kukamilisha shughuli mbalimbali na thibitisha uelewa wako kwa jaribio la baada ya mhadhara.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya miradi pamoja! Majadiliano yanahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwepo kujibu maswali yako.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwepo kujibu maswali yako.
Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa nyenzo zaidi za kusoma.
Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa vifaa zaidi vya kujifunzia.
### 📋 Kuandaa mazingira yako
### 📋 Kuweka mazingira yako
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, yasiyo na usakinishaji yanayohitajika_), au eneo la karibu kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, yasiyo na haja ya ufungaji_), au sehemu yako ya kazi kwenye kompyuta ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Tengeneza hifadhi yako
#### Tengeneza hifadhi yako
Ili iwe rahisi kuhifadhi kazi yako, inapendekezwa kutengeneza nakala yako mwenyewe ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Use this template** juu ya ukurasa. Hii itatengeneza hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala.
Ili kuhifadhi kazi yako kwa urahisi, inashauriwa utengeneze nakala yako ya hifadhi hii. Unaweza kufanya hivi kwa kubonyeza kitufe cha **Tumia templeti hii** juu ya ukurasa. Hii itaunda hifadhi mpya kwenye akaunti yako ya GitHub pamoja na nakala ya mtaala.
Fuata hatua hizi:
Fuata hatua hizi:
1. **Fanya Nakala ya Hifadhi**: Bonyeza kitufe cha "Fork" upande wa juu-mwenye kulia wa ukurasa huu.
1. **Fungua Nakala ya Hifadhi**: Bonyeza kitufe cha "Fork" upande wa juu kulia wa ukurasa huu.
Katika nakala yako ya hifadhi uliyotengeneza, bonyeza kitufe cha **Code** kisha chagua **Open with Codespaces**. Hii itatengeneza Codespace mpya utakaoweza kufanya kazi ndani yake.
Katika nakala yako ya hifadhi uliyotengeneza, bonyeza kitufe cha **Msimbo** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya kwa ajili yako kufanya kazi ndani yake.
#### Kuendesha mtaala eneo la karibu kwenye kompyuta yako
#### Kuendesha mtaala kwa sehemu yako ya kazi kwenye kompyuta
Ili kuendesha mtaala huu eneo la karibu kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana za mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Kazi](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila zana ili kuchagua kama inakufaa.
Ili kuendesha mtaala huu kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na chombo cha amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Vifaa vya Kazi](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali kwa kila chombo kwa ajili ya kuchagua kinachofaa kwako.
Pendekezo letu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Mapendekezo yetu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Nakili hazina yako kwenye kompyuta yako. Unaweza kufanya hivi kwa kubofya kitufe cha **Code** kisha kunakili URL:
1. Nakili hifadhidata yako kwenye kompyuta yako. Unaweza kufanya hivi kwa kubofya kitufe cha **Code** na kunakili URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
@ -133,82 +133,83 @@ Pendekezo letu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Fungua folda katika Visual Studio Code. Unaweza kufanya hivi kwa kubofya **File** > **Open Folder** na kuchagua folda uliyoinakili hivi karibuni.
2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivi kwa kubofya **File** > **Open Folder** na kuchagua folda uliyoinakili hivi karibuni.
> Virahisi vinavyopendekezwa vya Visual Studio Code:
> Upanuzi wa Visual Studio Code unaopendekezwa:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kutazama mapokeo ya kurasa za HTML ndani ya Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuangalia mapema kurasa za HTML ndani ya Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo haraka zaidi
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika code haraka zaidi
## 📂 Kila somo linajumuisha:
## 📂 Kila somo linajumuisha:
- sketchnote hiari
- sketchnote hiari
- video ya ziada ya hiari
- video ya ziada hiari
- zoezi la kuwajalia kabla ya somo
- mtihani wa kuwasha kabla ya somo
- somo lililoandikwa
- somo lililoandikwa
- kwa masomo yanayotegemea miradi, miongozo ya hatua kwa hatua ya jinsi ya kujenga mradi
- kwa masomo yanayotegemea mradi, miongozo hatua kwa hatua jinsi ya kujenga mradi
- ukaguzi wa maarifa
- ukaguzi wa maarifa
- changamoto
- changamoto
- usomaji wa ziada
- usomaji wa ziada
- kazi ya nyumbani
- kazi ya nyumbani
- [zoezi la baada ya somo](https://ff-quizzes.netlify.app/web/)
- [mtihani baada ya somo](https://ff-quizzes.netlify.app/web/)
> **Kumbukumbu kuhusu mazoezi ya maswali**: Mazoezi yote yapo katika folda ya Quiz-app, jumla ya mazoezi 48 yenye maswali matatu kila moja. Yapatikana [hapa](https://ff-quizzes.netlify.app/web/), programu ya mazoezi inaweza kuendeshwa kwa ndani au kutolewa Azure; fuata maelekezo katika folda `quiz-app`.
> **Kumbuka kuhusu mitihani**: Mitihani yote ipo katika folda ya Quiz-app, mitihani 48 yote yenye maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/) programu ya mtihani inaweza kuendeshwa kwa ndani au kuwekwa kwenye Azure; fuata maelekezo katika folda ya `quiz-app`.
## 🗃️ Masomo
## 🗃️ Masomo
| | Jina la Mradi | Mada Zinazofundishwa | Malengo ya Kujifunza | Somo Lililohusishwa | Mwandishi |
| | Jina la Mradi | Maudhui Yanayofundishwa | Malengo ya Kujifunza | Somo Lililohusishwa | Mwandishi |
| 01 | Kuanzia | Utangulizi wa Programu na Vifaa vya Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Vifaa vya Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Kuanzia Mwanzo | Utangulizi wa Uprogramu na Zana za Kitaalamu | Jifunze msingi wa lugha nyingi za programu na kuhusu programu zinazowasaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kitaalamu](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanzia | Msingi wa GitHub, ikijumuisha kazi ya timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine katika msimbo wa programu | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Kuanzia Mwanzo | Misingi ya GitHub, ikijumuisha kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa programu | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanzia | Upatikanaji | Jifunze misingi ya upatikanaji wa wavuti | [Misingi ya Upatikanaji](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Kuanzia Mwanzo | Upatikanaji | Jifunze misingi ya upatikanaji wa wavuti | [Misingi ya Upatikanaji](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Misingi ya JS | Aina za Data za JavaScript | Misingi ya aina za data za JavaScript | [Aina za Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | Misingi ya JS | Aina za Data za JavaScript | Misingi ya aina za data za JavaScript | [Aina za Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Misingi ya JS | Kazi na Mbinu | Jifunze kuhusu kazi na mbinu za kusimamia mtiririko wa mantiki ya programu | [Kazi na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher |
| 05 | Misingi ya JS | Funguo na Mbinu | Jifunze kuhusu funguo na mbinu za kudhibiti mtiririko wa mantiki ya programu | [Funguo na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher |
| 06 | Misingi ya JS | Kufanya Maamuzi na JS | Jifunze jinsi ya kuunda masharti katika msimbo wako kwa kutumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | Misingi ya JS | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako kwa kutumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Misingi ya JS | Array na Loops | Fanya kazi na data kwa kutumia array na loops katika JavaScript | [Array na Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Misingi ya JS | Mipangilio na Mizunguko | Fanya kazi na data kwa kutumia mipangilio na mizunguko ndani ya JavaScript | [Mipangilio na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML ili kuunda terrarium mtandaoni, ukizingatia ujenzi wa mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML katika Vitendo | Jenga HTML ya kuunda terrarium mtandaoni, ukizingatia uundaji wa mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Vitendo | Jenga CSS kuunda mtindo wa terrarium mtandaoni, ukizingatia misingi ya CSS ikiwa pamoja na kufanya ukurasa uwe wa responsive | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS katika Vitendo | Jenga CSS ya kupanga terrarium mtandaoni, ukizingatia misingi ya CSS ikijumuisha kufanya ukurasa uwe wa kukabiliana na vifaa mbalimbali | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Jifunze JavaScript Closures, na uendeshaji DOM | Jenga JavaScript ili terrarium ifanye kazi kama interface ya buruta/acha, ukizingatia closures na uendeshaji wa DOM | [JavaScript Closures, uendeshaji wa DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Funga JavaScript, uendeshaji DOM | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha kukausha na kuachia, ukizingatia fungo na uendeshaji DOM | [Fungo JavaScript, uendeshaji DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya keyboard kuendesha mantiki ya app yako ya JavaScript | [Programu Dhirio kwa Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika Haraka | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | [Uprogramu Iendayo Kwa Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kazi na Vivinjari | Jifunze jinsi vivinjari vinavyofanya kazi, historia yao, na jinsi ya kuunda vipengele vya awali vya kiendelezi cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kazi na Vivinjari (Browsers) | Jifunze jinsi vivinjari vinavyofanya kazi, historia yao, na jinsi ya kuanzisha vipengele vya kwanza vya kiendelezi cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Jenga fomu, piga API na hifadhi mabadiliko kwenye hifadhi ya ndani | Jenga vipengele vya JavaScript vya kiendelezi chako cha kivinjari kupiga API kwa kutumia mabadiliko yaliyohifadhiwa kwenye hifadhi ya ndani | [API, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuitisha API na kuhifadhi vigezo katika hifadhi ya ndani | Tengeneza vipengele vya JavaScript vya kiendelezi chako cha kivinjari kuitisha API kwa kutumia vigezo vilivyo hifadhiwa katika hifadhi ya ndani | [APIs, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Michakato ya nyuma katika kivinjari, utendaji wa wavuti | Tumia michakato ya nyuma ya kivinjari kusimamia ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya mbinu za kuboresha kufanya kazi vizuri | [Kazi za Nyuma na Utendaji](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mchakato wa nyuma wa kivinjari, utendaji wa wavuti | Tumia michakato ya nyuma ya kivinjari kudhibiti ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya maboresho ya kufanya | [Kazi za Nyuma na Utendaji](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Mchezo Zaidi kwa JavaScript | Jifunze kuhusu Urithi kwa kutumia madarasa na muundo pamoja na muundo wa Pub/Sub, tayari kwa kujenga mchezo | [Utangulizi kwa Maendeleo ya Mchezo Zaidi](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Mchezo wa Juu zaidi kwa JavaScript | Jifunze kuhusu Urithi kwa kutumia Mifumo (Classes) na Muundo pamoja na muundo wa Pub/Sub, kujiandaa kwa kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo wa Juu](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye Canvas | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini| [Kuchora kwenye Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye kanvas | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kuhamisha vipengele kwenye skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia koordineti za Cartesian na API ya Canvas | [Kuhamisha Vipengele](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kuhamisha vipengele kwenye skrini | Gundua jinsi vipengele vinavyopata mwendo kwa kutumia uratibu wa kartsiani na API ya Canvas | [Kuhamisha Vipengele](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ugunduzi wa Mgongano | Fanya vipengele vikagongane na kujibu kwa kila mmoja kwa kutumia vitufe vya kuandika na toa kazi ya hifadhi ili kuhakikisha utendaji mzuri wa mchezo | [Ugunduzi wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ugundaji wa mgongano | Fanya vipengele vigonjane na kujibu kwa kila mmoja kwa kutumia vitufe vya kibodi na toa kazi ya kupumzika kuhakikisha utendaji wa mchezo | [Ugundaji wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya mahesabu ya hisabati kulingana na hali na utendaji wa mchezo | [Kuhifadhi alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya mahesabu ya kihisabati kulingana na hali na utendaji wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kumaliza na kuanza upya mchezo | Jifunze kuhusu kumaliza na kuanza upya mchezo, ikijumuisha kusafisha mali na kuweka tena thamani za mabadiliko | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kuisha na kuanza upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, ikiwa ni pamoja na kusafisha mali na kuweka upya vigezo | [Hali ya Mwisho](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika Programu ya Wavuti | Jifunze jinsi ya kuunda miundo ya tovuti yenye kurasa nyingi kwa kutumia njia na violezo vya HTML | [Violezo vya HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Templeti za HTML na Njia za Web App | Jifunze jinsi ya kuunda muundo wa tovuti ya kurasa nyingi kwa kutumia njia za kuingia na templeti za HTML | [Templeti za HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Usajili | Jifunze kuhusu ujenzi wa fomu na kushughulikia taratibu za uthibitishaji | [Fomu](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Usajili | Jifunze kuhusu kujenga fomu na kushughulikia utambuzi | [Fomu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyoingia na kutoka kwenye app yako, jinsi ya kuipata, kuihifadhi, na kuitupa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyotiririka ndani na nje ya programu yako, jinsi ya kuipata, kuihifadhi, na kuiondoa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Misingi ya Usimamizi wa Hali | Jifunze jinsi app yako inavyohifadhi hali na jinsi ya kuisimamia kwa njia ya programu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Misingi ya Usimamizi wa Hali | Jifunze jinsi programu yako inavyoendelea kuweka hali na jinsi ya kuisimamia kwa njia za programu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | [Tumia Mhariri wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | [Tumia Mhariri wa Code wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Kazi na AI | Jifunze jinsi ya kujenga msaidizi wako wa AI | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Kazi na AI | Jifunze jinsi ya kujenga msaidizi wako wa AI | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
## 🏫 Mbinu ya Kufundishia
## 🏫 Pedagojia
Mtaala wetu umeundwa kwa misingi miwili muhimu ya kielimu:
Mtaala wetu umeundwa kwa kanuni mbili za msingi za kifundisho:
* kujifunza kupitia miradi
* kujifunza kwa njia ya mradi
* mazoezi ya mara kwa mara
* mitihani mara kwa mara
Mpango huu hufundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa leo. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium wa kidijitali, kiendelezi cha kivinjari rafiki wa mazingira, mchezo wa wavamizi wa anga, na programu ya benki kwa biashara. Mwisho wa mfululizo huu, wanafunzi watakuwa na uelewa mzuri wa maendeleo ya wavuti.
Mpango hufundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za kisasa zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika haraka, terrarium ya mtandaoni, kiendelezi kivinjari kinachohifadhi mazingira, mchezo wa kuwasiliana na wahasidi wa anga, na programu ya benki kwa biashara. Mwishoni mwa mfululizo huo, wanafunzi watakuwa na uelewa thabiti wa maendeleo ya wavuti.
> 🎓 Unaweza kuchukua masomo machache ya kwanza katika mtaala huu kama [Njia ya Kujifunza](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn!
> 🎓 Unaweza kuchukua masomo ya kwanza kadhaa katika mtaala huu kama [Njia ya Kujifunza](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn!
Kwa kuhakikisha kuwa maudhui yanaendana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na kuhifadhi dhana kutaboreshwa. Pia tuliandika masomo kadhaa ya mwanzo juu ya misingi ya JavaScript ili kuanzisha dhana, yanayounganishwa na video kutoka kwa mkusanyiko wa "[Mfululizo wa Waanzilishi kwa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ambapo baadhi ya waandishi wake walichangia mtaala huu.
Kwa kuhakikisha kwamba maudhui yanahusiana na miradi, mchakato huu hufanya kuwa wa kuvutia zaidi kwa wanafunzi na kukumbuka kwa dhana kutaimarishwa. Pia tuliandika masomo kadhaa ya kuanzisha katika misingi ya JavaScript ili kuanzisha dhana, yakiwa na video kutoka kwa mkusanyiko wa mafundisho ya video ya "[Mfululizo wa Waanzilishi wa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ambayo baadhi ya waandishi wake walichangia mtaala huu.
Aidha, zoezi la nyepesi kabla ya darasa hutoa nia kwa mwanafunzi kuelekea kujifunza mada, wakati zoezi la pili baada ya darasa linahakikisha uhifadhi wa zaidi. Mtaala huu umetengenezwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa mkamilifu au sehemu. Miradi huanza midogo na kuwa changamoto zaidi mwishoni mwa mzunguko wa wiki 12.
Zaidi ya hayo, mtihani wa chini kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati mtihani wa pili baada ya darasa unahakikisha kukumbukwa zaidi. Mtaala huu uliundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa jumla au sehemu tu. Miradi inaanza midogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Ingawa tuliepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama msanidi wa wavuti kabla ya kutumia mfumo, hatua nzuri inayofuata kumalizia mtaala huu ni kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Waanzilishi kwa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Ingawa tumekwepa kwa makusudi kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mendelezaji wa wavuti kabla ya kutumia mfumo, hatua nzuri inayofuata kukamilisha mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Waanzilishi wa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tembelea [Kanuni zetu za Maadili](CODE_OF_CONDUCT.md) na mwongozo wa [Kushiriki](CONTRIBUTING.md). Tunakaribisha maoni yako ya kujenga!
> Tembelea miongozo yetu ya [Kanuni za Maadili](CODE_OF_CONDUCT.md) na [Kushiriki](CONTRIBUTING.md). Tunakaribisha maoni yako yenye kujenga!
## 🧭 Ufikiaji wa Kupatikana Bila Mtandao
Unaweza kuendesha nyaraka hii bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Fanya fork ya repo hii, [sakinisha Docsify](https://docsify.js.org/#/quickstart) kwenye kompyuta yako, kisha katika folda ya mizizi ya repo hii, andika `docsify serve`. Tovuti itapelekwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`.
## 🧭 Ufikiaji wa Nje ya Mtandao
Unaweza kuendesha nyaraka hii ukiwa nje ya mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Tengeneza nakala ya hifadhidata hii, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye kompyuta yako ya ndani, kisha katika folda kuu ya hifadhidata hii, andika `docsify serve`. Tovuti itaendeshwa kwenye mlimbwende 3000 kwenye localhost yako: `localhost:3000`.
## 📘 PDF
## 📘 PDF
PDF ya masomo yote inapatikana [hapa](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF ya masomo yote inapatikana [hapa](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,65 +217,65 @@ PDF ya masomo yote inapatikana [hapa](https://microsoft.github.io/Web-Dev-For-Be
## 🎒 Kozi Nyingine
## 🎒 Kozi Nyingine
Timu yetu hutoa kozi nyingine! Angalia:
Timu yetu hutengeneza kozi nyingine! Angalia:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Mfululizo wa AI ya Kizazi
### Mfululizo wa AI Inayozalisha
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
---
### Kujifunza Msingi
### Mafunzo ya Msingi
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Mfululizo wa Copilot
### Mfululizo wa Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
Ikiwa unaenda kikwazo au una maswali yoyote kuhusu ujenzi wa programu za AI. Jiunge na wanafunzi wenzako na watengenezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii ya kusaidia ambapo maswali yanakaribishwa na maarifa hushirikiwa kwa uhuru.
Ikiwa unashikwa au una maswali yoyote kuhusu kujenga programu za AI. Ungana na wanafunzi wenzako na waendelezaji waliobobea katika majadiliano kuhusu MCP. Ni jamii yenye msaada ambapo maswali yanakaribishwa na maarifa yanashirikiwa kwa uhuru.
Hazina hii inalindwa chini ya leseni ya MIT. Tazama faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
Hifadhidata hii ina leseni chini ya leseni ya MIT. Tazama faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Sekela**:
**Maandishi ya Kukataa**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kufikia usahihi, tafadhali fahamuni kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au upungufu. Hati asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo chenye mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatubebwi dhamana kwa kutoelewana au tafsiri potofu zinazotokana na matumizi ya tafsiri hii.
Hati hii imetafsiriwa kwa kutumia huduma ya utafsiri wa AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au upotoshaji. Hati asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inashauriwa. Hatuwezi kuwajibika kwa maelewano au tafsiri potofu yoyote inayotokana na matumizi ya tafsiri hii.
## 🎥 Video
## [Jaribio la kabla ya somo](../../../lesson-template/quiz-url)
> Ongeza video iliyojumuishwa au kiungo cha somo hapa.
[Eleza kile tutakachojifunza]
---
## Mtihani wa awali
> Ongeza kiungo cha mtihani hapa unapopatikana.
---
Toa muhtasari mfupi wa kile wanafunzi watajifunza katika somo hili.
---
### Utangulizi
### Utangulizi
Eleza kile kitakachojadiliwa
Toa utangulizi mfupi unaoelezea kile kitakachojadiliwa katika somo hili.
> Vidokezo
> Vidokezo
---
### Mahitaji ya awali
### Mahitaji ya awali
Ni hatua zipi zinapaswa kuwa zimekamilika kabla ya somo hili?
Orodhesha dhana au mada ambazo wanafunzi wanapaswa kuwa tayari nazo kabla ya kuanza somo hili.
---
### Maandalizi
### Maandalizi
Hatua za maandalizi kuanza somo hili
Orodhesha hatua za maandalizi au zana zinazohitajika kabla ya kuanza somo.
---
---
[Pitisha maudhui kwa hatua]
### Yaliyomo
Pitia yaliyomo kwenye somo kwa sehemu zilizopangwa.
---
## [Mada 1]
## Mada 1
### Kazi:
### Kazi:
Fanyeni kazi pamoja kuboresha msimbo wenu hatua kwa hatua ili kujenga mradi kwa kutumia msimbo wa pamoja:
Fanyeni kazi pamoja kuboresha hatua kwa hatua msimbo wenu kwa ajili ya kujenga mradi kwa kutumia msimbo unaoshirikiwa:
```html
```html
code blocks
code blocks
```
```
✅ Ukaguzi wa Maarifa - tumia muda huu kupanua uelewa wa wanafunzi kwa maswali ya wazi
✅ Kagua Maarifa
Tumia fursa hii kupanua maarifa ya wanafunzi kwa maswali ya wazi.
## [Mada 2]
## Mada 2
## Mada 3
## [Mada 3]
🚀 Changamoto
Ongeza changamoto ya ushirikiano kwa wanafunzi kuboresha mradi.
🚀 Changamoto: Ongeza changamoto kwa wanafunzi kufanya kazi kwa pamoja darasani ili kuboresha mradi
Hiari: Ongeza picha ya skrini ya UI ya somo lililokamilika ikiwa ni sahihi.
Hiari: ongeza picha ya skrini ya UI ya somo lililokamilika ikiwa inafaa
## Mtihani wa baada ya somo
## [Jaribio la baada ya somo](../../../lesson-template/quiz-url)
Ongeza kiungo cha mtihani hapa baada ya kumaliza somo.
## Mapitio na Kujisomea
## Mapitio & Kujifunza Binafsi
**Kazi Inayopaswa Kukamilika [MM/YY]**: [Jina la Kazi](assignment.md)
**Kazi ya Nyumbani Inayotarajiwa [MM/YY]**: [Jina la Kazi ya Nyumbani](assignment.md)
---
---
**Kanusho**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
**Kumbusho**:
Hati hii imefasirishwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au upotoshaji. Hati ya asili katika lugha yake halisi inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatuna dhamana kwa kutoelewana au utofauti unaotokana na matumizi ya tafsiri hii.
localizeflow[bot]
5 months ago