Toto je vzdělávací repozitář učebního plánu 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.
Toto je vzdělávací repozitář pro výuku základů webového vývoje pro začátečníky. Kurikul 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é prvky
- **Vzdělávací obsah**: 24 strukturovaných lekcí uspořádaných do modulů založených na projektech
- **Praktické projekty**: Terrarium, Hra na psaní, Rozšíření prohlížeče, Kosmická hra, Bankovní aplikace, Kódovací editor a AI chat asistent
- **Interaktivní kvízy**: 48 kvízů po 3 otázkách (před a po lekci)
- **Podpora vícejazyčnosti**: Automatizované překlady do více než 50 jazyků přes GitHub Actions
- **Vzdělávací obsah**: 24 strukturovaných lekcí organizovaných do modulů založených na projektech
- **Praktické projekty**: Terrárium, Hra na psaní, Rozšíření prohlížeče, Hra ve vesmíru, Bankovní aplikace, Editor kódu a AI chatovací asistent
- **Interaktivní kvízy**: 48 kvízů se 3 otázkami každý (hodnocení před a po lekci)
- **Podpora více jazyků**: Automatické překlady pro více než 50 jazyků pomocí GitHub Actions
- Používejte VS Code s rozšířením Live Server pro HTML projekty
- Nainstalujte ESLint a Prettier rozšíření pro jednotné formátování
- K debugu JavaScriptu používejte DevTools v prohlížeči
- Pro Vue projekty nainstalujte Vue DevTools rozšíření prohlížeče
- Nainstalujte rozšíření ESLint a Prettier pro konzistentní formátování
- Použijte DevTools v prohlížeči pro debugování JavaScriptu
- Pro Vue projekty nainstalujte Vue DevTools rozšíření do prohlížeče
### Výkonové aspekty
- Velké množství přeložených souborů (50+ jazyků) znamená velké klony
- Použijte shallow clone, pokud pracujete pouze s obsahem: `git clone --depth 1`
- Velké množství překladových souborů (50+ jazyků) znamená velké klony
- Pro práci pouze s obsahem použijte shallow clone: `git clone --depth 1`
- Při práci s anglickým obsahem vylučujte překlady z vyhledávání
- Procesy build mohou být při prvním spuštění pomalé (npm install, build Vite)
- První běh build procesů může být pomalý (npm install, Vite build)
## Bezpečnostní aspekty
### Proměnné prostředí
- API klíče nikdy neukládejte do repozitáře
- Používejte `.env` soubory (jsou uvedeny v `.gitignore`)
- Dokumentujte požadované proměnné prostředí v README projektů
- API klíče by se nikdy neměly commitovat do repozitáře
- Používejte `.env` soubory (již v `.gitignore`)
- Dokumentujte požadované proměnné prostředí v README projektech
### Python projekty
@ -346,35 +346,35 @@ CO_OP_TRANSLATOR_METADATA:
- Udržujte závislosti aktuální
- GitHub tokeny by měly mít minimální potřebná oprávnění
### Přístup k GitHub modelům
### Přístup k GitHub Models
- Vyžadovány personal access tokens (PAT)
- Pro GitHub Models jsou potřeba Personal Access Tokens (PAT)
- Tokeny ukládejte jako proměnné prostředí
- Nikdy neukládejte tokeny ani přihlašovací údaje do repozitáře
- Nikdy necommitujte tokeny či přihlašovací údaje
## Další poznámky
### Cílová skupina
- Kompletní začátečníci ve webovém vývoji
- Úplní začátečníci ve webovém vývoji
- Studenti a samouci
- Učitelé využívající kurikulum ve třídě
- Obsah navržen pro přístupnost a postupné budování dovedností
- Učitelé používající kurikulum ve třídách
- Obsah je navržen pro přístupnost a postupné rozvíjení dovedností
### Vzdělávací filozofie
- Projektově orientované učení
- Přístup založený na projektech
- Časté ověřování znalostí (kvízy)
- Praktická cvičení v psaní kódu
- Reálné příklady použití
- Důraz na základy před frameworky
- Praktická cvičení kódování
- Příklady využití v reálném světě
- Zaměření na základy před frameworky
### Údržba repozitáře
- Aktivní komunita studentů a přispěvatelů
- Pravidelné aktualizace závislostí a obsahu
- Issues a diskuse sledovány maintainery
- Aktualizace překladů automatizované přes GitHub Actions
- Sledují se issues a diskuse správci
- Aktualizace překladů automatizovány přes GitHub Actions
### Související zdroje
@ -387,22 +387,22 @@ CO_OP_TRANSLATOR_METADATA:
Pro podrobné instrukce k jednotlivým projektům viz README soubory v:
- `quiz-app/README.md` - Vue 3 kvízová aplikace
- `7-bank-project/README.md` - Bankovní aplikace s autentizací
- `7-bank-project/README.md` - Bankovní aplikace s autentifikací
- `5-browser-extension/README.md` - Vývoj rozšíření prohlížeče
- `6-space-game/README.md` - Vývoj hry založené na Canvas
- `9-chat-project/README.md` - AI chat asistent projekt
- `6-space-game/README.md` - Vývoj hry s využitím Canvas
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura Monorepo
### Struktura monorepa
Ačkoliv nejde o tradiční monorepo, tento repozitář obsahuje více nezávislých projektů:
I když se nejedná o tradiční monorepo, tento repozitář obsahuje více nezávislých projektů:
- Každá lekce je samostatná
- Projekty nesdílí závislosti
- Pracujte na jednotlivých projektech bez ovlivnění ostatních
- Naklonujte celý repozitář pro plný zážitek kurikula
- Pracujte na jednotlivých projektech, aniž byste ovlivnili ostatní
- Pro plný kurz si naklonujte celý repozitář
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí služby automatického překladu [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. U kritických informací se doporučuje využít profesionální lidský překlad. Nejsme odpovědní za jakákoli nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
**Vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí služby automatického překladu [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. Originální dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Nejsme odpovědni za jakékoliv nedorozumění či nesprávné výklady vyplývající z použití tohoto překladu.
Naučte se základy webového vývoje v našem 12týdenním komplexním kurzu od Microsoft Cloud Advocates. Každá z 24 lekcí se věnuje 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í s naší efektivní projektově orientovanou výukou. Začněte svou cestu s 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 zabývá JavaScriptem, 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 uchování znalostí díky naší efektivní projektově orientované pedagogice. Začněte svou cestu programování ještě dnes!
Přidejte se do komunity Azure AI Foundry na Discordu
> Tento repozitář zahrnuje více než 50 překladů jazyků, což výrazně zvětšuje velikost stažených dat. Pro klonování bez překladů použijte sparse checkout:
> **Raději klonovat lokálně?**
>
> Tento repozitář obsahuje více než 50 překladů jazyků, což výrazně zvětšuje velikost stahování. Pro klonování bez překladů použijte sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 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 -->
**Pokud si přejete, aby byly podporovány další překladové jazyky, jsou uvedeny [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Pokud chcete podporu dalších jazyků, jsou zde uvedeny podporované jazykové možnosti [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?_
Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete začátečnické zdroje, studentské balíčky a dokonce způsoby, jak získat voucher na bezplatný certifikát. Tuto stránku si doporučujeme přidat do záložek a čas od času ji navštívit, protože obsah měníme měsíčně.
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 bezplatný certifikát. Tuto stránku si chcete zařadit mezi oblíbené a čas od času ji zkontrolovat, protože obsah měníme měsíčně.
### 📣 Oznámení - Nové výzvy GitHub Copilot Agent mode 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 🚀“ ve většině kapitol. Je to nová výzva, kterou můžete dokončit pomocí GitHub Copilota a režimu Agent. Pokud jste režim Agent předtím nepoužívali, dokáže nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" ve většině kapitol. To je nová výzva, kterou máte dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent nikdy nepoužili, umožňuje nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
### 📣 Oznámení - _Nový projekt k postavení pomocí Generativní AI_
### 📣 Oznámení - _Nový projekt k vytvoření pomocí generativní AI_
Nový projekt AI asistenta právě přidán, podívejte se na [projekt](./9-chat-project/README.md)
Právě přidán nový projekt AI asistenta, podívejte se na [projekt](./9-chat-project/README.md)
### 📣 Oznámení - _Nové kurikulum_ o Generativní AI pro JavaScript právě vydáno
### 📣 Oznámení - _Nové kurikulum_ o generativní AI pro JavaScript bylo právě vydáno
Nezapomeňte na naše nové kurikulum Generativní AI!
Nezmeš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!
Každá lekce zahrnuje úkol k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako:
- Promptování a prompt engineering
Každá lekce obsahuje úkol k dokončení, ověření znalostí a výzvu, která vás provede tématy jako:
- Vytváření promptů a jejich inženýrství
- Generování textových a obrazových aplikací
- Vyhledávací aplikace
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
## 🌱 Začínáme
> **Učitelé**, zahrnuli jsme [několik návrhů](for-teachers.md) jak toto kurikulum 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é**, zahrnuli jsme [několik návrhů](for-teachers.md), jak použít toto kurikulum. 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)!
**[Studující](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte přednáškovým kvízem a pokračujte čtením materiálu přednášky, plněním různých aktivit a ověřte si pochopení pomocí kvízu po přednášce.
**[Studující](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte přednáškovým kvízem a pokračujte čtením přednáškového materiálu, dokončením různých aktivit a ověřením porozumění pomocí povětrná přednáškového kvízu.
Pro lepší studijní zážitek se spojte se svými spolužáky a pracujte na projektech společně! Diskuze jsou vítané v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je náš tým moderátorů připraven odpovědět na vaše dotazy.
Pro lepší zkušenosti s učením se spojte s kolegy a pracujte na projektech společně! Diskuze jsou vítané v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je k dispozici náš tým moderátorů, kteří vám pomohou.
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í 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í
Toto kurikulum má připravené vývojové prostředí! Jakmile začnete, můžete si vybrat spouštět kurikulum v [Codespace](https://github.com/features/codespaces/) (_prostředí v prohlížeči bez potřeby instalace_), nebo lokálně na vašem počítači pomocí 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 vybrat, zda budete kurz spouštět v [Codespace](https://github.com/features/codespaces/) (_prohlížečem ovládané prostředí bez nutnosti instalace_), nebo lokálně na svém počítači pomocí textového editoru, například [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Vytvořte si repozitář
Pro snadné ukládání své práce je doporučeno 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 vznikne nový repozitář ve vašem GitHub účtu s kopií kurikula.
#### Vytvořte si vlastní repozitář
Pro snadné ukládání vaší práce je doporučeno vytvořit si vlastní kopii tohoto repozitáře. Můžete tak učinit kliknutím na tlačítko **Použít tuto šablonu** na vrchu stránky. Tím se vytvoří nový repozitář na vašem GitHub účtu s kopií kurikula.
Postupujte takto:
1. **Vytvořte fork repozitáře**: Klikněte na tlačítko „Fork“ v pravém horním rohu této stránky.
Postupujte následovně:
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 repozitáře, kterou jste vytvořili, klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se pro vás vytvoří nový Codespace, ve kterém můžete pracovat.
Ve své kopii repozitáře klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím vytvoříte nový Codespace, ve kterém můžete pracovat.
Pro spuštění kurikula lokálně 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ů oboru](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje.
Pro spuštění tohoto kurikula lokálně 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ů](../../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 vybrali, co vám vyhovuje nejvíce.
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také vestavěný [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 svůj repozitář do počítače. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním adresy URL:
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také zabudovaný [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:
[CodeSpace](./images/createcodespace.png)
Poté otevřete [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ve [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spusťte následující příkaz, přičemž `<your-repository-url>` nahraďte URL, kterou jste právě zkopírovali:
Poté otevřete [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ve [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spusťte následující příkaz, přičemž `<your-repository-url>` nahraďte právě zkopírovanou URL:
```bash
git clone <your-repository-url>
```
2. Otevřete složku ve Visual Studio Code. To můžete udělat kliknutím na **Soubor** > **Otevřít složku** a vybráním složky, kterou jste právě naklonovali.
2. Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na **File** > **Open Folder** a výběrem složky, kterou jste právě naklonovali.
> Doporučené rozšíření 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) - který vám pomůže psát kód rychleji
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pomáhá rychleji psát kód
## 📂 Každá lekce zahrnuje:
## 📂 Každá lekce obsahuje:
- volitelnou náčrtovou poznámku
- volitelnou náčrtnou poznámku (sketchnote)
- volitelné doplňkové video
- rozcvičkový kvíz před lekcí
- písemnou lekci
- u lekcí založených na projektu podrobné návody, jak projekt vytvořit
- kontrolní znalostní otázky
- rozcvičovací kvíz před lekcí
- psanou lekci
- u lekcí založených na projektu krok za krokem průvodce, jak projekt postavit
- kontrolní otázky
- výzvu
- doplňkové čtení
- zadání
- úkol
- [kvíz po lekci](https://ff-quizzes.netlify.app/web/)
> **Poznámka ke kvízům**: Všechny kvízy jsou uloženy ve složce Quiz-app, celkem je 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; řiďte se pokyny ve složce `quiz-app`.
> **Poznámka ke kvízům**: Všechny kvízy jsou uloženy ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; postupujte podle instrukcí ve složce `quiz-app`.
## 🗃️ Lekce
| | Název projektu | Naučené koncepty | Výukové cíle | Odkaz na lekci | Autor |
| 01 | Začínáme | Úvod do programování a nástroje řemeslníka | Naučte se základy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům vykonávat jejich práci | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, včetně práce v týmu | 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čte 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 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čte se o funkcích a metodách pro správu logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Tvorba podmínek v JS | Naučte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod | [Tvorba rozhodnutí](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a smyčky | Pracujte s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořte HTML pro online terárium se zaměřením na vytvoření rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořte CSS pro stylování online terária, se zaměřením na základy CSS včetně responzivního designu stránky | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Vytvořte JavaScript pro funkčnost terária jako drag/drop rozhraní, zaměřeno na uzávěry a manipulaci s DOM | [JavaScript uzávěry a manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra psaní na klávesnici](./4-typing-game/solution/README.md) | Vytvoření hry psaní na klávesnici | Naučte se používat klávesové události k řízení logiky vaší JavaScriptové aplikace | [Programování událostmi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučte se, jak prohlížeče fungují, jejich historický vývoj a jak vytvořit první prvky rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Vytváření formuláře, volání API a ukládání proměnných do místního úložiště | Vytvořte JavaScriptové prvky rozšíření prohlížeče, které volají API a používají proměnné uložené v místním úložišti | [API, formuláře a místní úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Pozadí procesy v prohlížeči, webový výkon | Použijte pozadí procesy pro zvládání ikony rozšíření, naučte se o webovém výkonu a optimalizacích | [Pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pokročilejší vývoj hry v JavaScriptu | Naučte se o dědičnosti pomocí tříd a kompozice, stejně jako 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 |
| 16 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Kreslení na plátno | Naučte 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 |
| 17 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Detekce kolizí | Umožněte prvkům kolidovat a reagovat na sebe pomocí stisknutí kláves a přidejte cooldown funkci pro zajištění výkonu hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Udržování skóre | Provádějte matematické výpočty založené na stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Ukončování a restartování hry | Naučte se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných hodnot | [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 směrování v webové aplikaci | Naučte se vytvořit strukturu více stránkové webové aplikace použitím směrování 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čte se vytvářet formuláře a zpracovávat validační rutiny | [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žití dat | Jak data proudí do vaší aplikace a ven, jak je načítat, ukládat a likvidovat | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte se, jak vaše aplikace uchovává stav a jak s ním programově pracovat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Editor kódu pro prohlížeč/VScode](../../8-code-editor) | Práce s VScodem | Naučte se používat editor kódu | [Použití editoru VScode](./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 |
| | Název projektu | Naučené koncepty | Cíle učení | Propojená lekce | Autor |
| 01 | Začínáme | Úvod do programování a nástroje řemesla | Naučte se základní principy většiny programovacích jazyků a o softwaru, která pomáhá profesionálním vývojářům | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, včetně práce v týmu | 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čte 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 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čte se o funkcích a metodách k ří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čte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod | [Rozhodování](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a cykly | Práce s daty pomocí polí a cyklů v JavaScriptu | [Pole a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořte HTML pro online terárium, zaměřte se na tvorbu rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořte CSS pro stylování online terária, zaměřte se na základy CSS včetně responzivního designu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Napište JavaScript, aby terárium fungovalo jako rozhraní drag/drop, zaměřte 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 |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Vytvoření hry psaní na klávesnici | Naučte se používat události klávesnice k řízení logiky JavaScriptové aplikace | [Programování řízené událostmi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučte se, jak fungují prohlížeče, jejich historii a jak vytvářet základy rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./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 | Vytvořte JavaScriptové prvky rozšíření pro volání API pomocí proměnných uložený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 |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pozadí procesů v prohlížeči, webový výkon | Použijte pozadí prohlížeče ke správě ikony rozšíření; naučte se o výkonu webu a optimalizacích | [Pozadí úkolů a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pokročilejší vývoj her v JavaScriptu | Naučte se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub jako příprava na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kreslení na plátno | Naučte se o Canvas API, které slouží k vykreslování prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Detekce kolizí | Udělejte, aby se prvky srážely a reagovaly na sebe pomocí stisků kláves a přidejte funkci chladnutí pro výkon hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Udržování skóre | Proveďte 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 |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ukončení a restartování hry | Naučte 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 |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablony a směrování ve webové aplikaci | Naučte se vytvářet architekturu vícestránkového webu pomocí směrování a HTML šablon | [HTML šablony a směrování](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučte se o tvorbě formulářů a zpracování validací | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody získávání a použití dat | Jak data proudí do a z vaší aplikace, jak je získávat, ukládat a odstraňovat | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte se, jak vaše aplikace udržuje stav a jak ho programově spravovat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Práce s VScode | Naučte se používat editor kódu | [Použití editoru kódu VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./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 |
## 🏫 Pedagogika
Náš učební plán je navržen se dvěma klíčovými pedagogickými principy:
Náš výukový plán je navržen s ohledem na dva klíčové pedagogické principy:
* učení založené na projektech
* časté kvízy
Program učí 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 získají příležitost získat praktické zkušenosti tvorbou hry na psaní na klávesnici, virtuálního terária, ekologicky šetrného rozšíření prohlížeče, hry ve stylu vesmírných vetřelců a bankovní aplikace pro firmy. Po dokončení série budou studenti mít pevné základy webového vývoje.
Program učí 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 možnost získat praktické zkušenosti stavbou hry psaní na klávesnici, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders a bankovní aplikace pro firmy. Na konci série budou mít studenti pevné základy webového vývoje.
> 🎓 První lekce tohoto učebního plánu můžete absolvovat také jako [Výukovou 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!
Zajištěním, že obsah odpovídá projektům, se proces pro studenty stává zajímavějším a dochází k lepšímu zapamatování konceptů. Napsali jsme také několik úvodních lekcí základů JavaScriptu, které představují koncepty, doplněné videem ze série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejíchž autoři se na plánu podíleli.
Díky sladění obsahu s projekty je proces pro studenty zajímavější a zvyšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu doplněných videi z kolekce "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejichž autoři se podíleli na tomto kurzu.
Navíc nízkorizikový kvíz před hodinou nastaví studentovi záměr naučit se téma, zatímco druhý kvíz po hodině zajistí další upevnění znalostí. Tento učební plán je navržen tak, aby byl flexibilní a zábavný, lze jej absolvovat celý nebo částečně. Projekty začínají jednoduché a ke konci 12týdenního cyklu se postupně stávají složitějšími.
Navíc nízkorizikový kvíz před hodinou nastavuje záměr studenta se učit dané téma, zatímco druhý kvíz po hodině podporuje další zapamatování. Tento kurz je navržen tak, aby byl flexibilní a zábavný a lze ho absolvovat celý nebo částečně. Projekty začínají malé a na konci 12týdenního cyklu jsou stále složitější.
Ačkoliv jsme záměrně vynechali zavádění JavaScriptových frameworků, abychom se zaměřili na základní dovednosti webového vývojáře před adopcí frameworku, vhodným dalším krokem po absolvování tohoto kurzu je naučit se Node.js prostřednictvím další kolekce 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 zavádění JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné jako webový vývojář před přijetím frameworku, dobrým dalším krokem po absolvování tohoto kurzu by bylo naučit se Node.js prostřednictvím jiné kolekce 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 [chování](CODE_OF_CONDUCT.md) a [příspěvky](CONTRIBUTING.md) pravidla. Vítáme vaše konstruktivní návrhy!
> Navštivte naše [Kodex chování](CODE_OF_CONDUCT.md) a [Přispívání](CONTRIBUTING.md). Těšíme se na vaše konstruktivní návrhy!
## 🧭 Offline přístup
Tuto dokumentaci můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Vytvořte fork tohoto repozitáře, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svém počítači a poté ve výchozím adresáři repozitáře spusťte příkaz `docsify serve`. Webová stránka poběží 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 repo, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svém počítači a poté v kořenové složce tohoto repozitáře spusťte příkaz `docsify serve`. Webová stránka bude servírována na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
PDF všech lekcí naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF se všemi lekcemi naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Ostatní kurzy
## 🎒 Další kurzy
Náš tým vytváří i další kurzy! Podívejte se:
Náš tým připravuje i další kurzy! Podívejte se na:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenti
[](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/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](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/mcp-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
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Generativní AI série
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-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í učení
[](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)
### Základní vzdělávání
[](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)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](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://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)
Pokud se zaseknete nebo máte jakékoli otázky ohledně vývoje AI aplikací, připojte se k ostatním učenlivým a zkušeným vývojářům v diskuzích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se sdílejí svobodně.
Pokud se zaseknete nebo máte otázky ohledně tvorby AI aplikací, připojte 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 se sdílejí otevřeně.
@ -265,6 +274,6 @@ Tento repozitář je licencován pod licencí MIT. Více informací naleznete v
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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). Přestože 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 mateřském jazyce by měl být považován za autoritativní zdroj. Pro zásadní informace je doporučován 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.
**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. Originální 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. Za jakékoli nedorozumění nebo nesprávné výklady vzniklé z použití tohoto překladu neneseme odpovědnost.
Ez egy oktatási tanterv adattára, amely kezdőknek tanítja a webfejlesztés alapjait. A tanterv egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati leckével, amelyek lefedik a JavaScript, CSS és HTML témaköröket.
Ez egy oktatási tanterv-tár, amely a 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, 24 gyakorlati órával, amelyek JavaScript-et, CSS-t és HTML-t fednek le.
### Főbb összetevők
### Fő komponensek
- **Oktatási tartalom**: 24 strukturált lecke projekt alapú modulokba rendezve
- **Gyakorlati projektek**: Terrárium, gépelős játék, böngészőbővítmény, űrjáték, banki alkalmazás, kódszerkesztő és AI chat asszisztens
- `6-space-game/README.md` - Canvas alapú játékfejlesztés
@ -394,15 +394,15 @@ Az egyes projektek részletes utasításai a README fájlokban találhatók:
### Monorepo szerkezet
Bár nem hagyományos monorepo, ez azadattár több független projektet tartalmaz:
- Minden lecke önállóan működik
- A projektek nem osztanak meg függőségeket
- Egyes projektek fejlesztése nem befolyásolja a többit
- A teljes tananyag élményhez klónozd az egész adattárat
Bár nem hagyományos monorepo, ez a tár több független projektet tartalmaz:
- Minden lecke önálló
- Projektek nem osztoznak függőségeken
- Egyedi projekteken dolgozhatsz anélkül, hogy a többit érintenéd
- A teljes tantervi élményhez klónozd az egész tárat
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti dokumentum a saját nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén szakmai emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért.
**Felelősségkizárás**:
Ezt a dokumentumot a [Co-op Translator](https://github.com/Azure/co-op-translator) mesterséges intelligencia fordító szolgáltatás segítségével fordítottuk le. Bár az 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ő hivatalos forrásnak. Kritikus információk esetén szakmai 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.
Ismerd meg a webfejlesztés alapjait a Microsoft Cloud Advocates átfogó, 12 hetes tanfolyamán. A 24 leckéből álló anyag minden egyes részében gyakorlati projektek – teráriumok, böngészőbővítmények és űrjátékok– segítségével mélyedhetsz el a JavaScript, CSS és HTML világában. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet, és optimalizáld tudásod megtartását hatékony, projektalapú oktatásunkkal. Kezdd el a kódolási utadat még ma!
Ismerd meg a webfejlesztés alapjait a Microsoft Cloud Advocates által tartott 12 hetes átfogó tanfolyamunkon. A 24 leckéből mindegyik JavaScriptet, CSS-t és HTML-t tárgyal, gyakorlati projektek révén, mint terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet és optimalizáld a tudásod megtartását hatékony, projekt-alapú tanulási módszerünkkel. Kezdd el a kódolási utadat még ma!
Csatlakozz az Azure AI Foundry Discord közösséghez!
Csatlakozz az Azure AI Foundry Discord közösséghez
Kezd el az alábbi lépések követésével használni ezeket az erőforrásokat:
1. **Forkold az adattárat**: Kattints ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj szakértőkkel és más fejlesztőkkel**](https://discord.com/invite/ByRwuEEgH4)
Kövesd ezeket a lépéseket, hogy elkezdd használni ezeket az erőforrásokat:
1. **Repozitorium klónozása**: Kattints ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Ez az adattár több mint 50 nyelvű fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretnéd klónozni, használhatod a sparse checkoutot:
> **Szeretnéd helyben klónozni?**
>
> Ez a repozitórium 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éd klónozni, használj sparse checkoutot:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Így mindent megkapsz, amire szükséged van a tanfolyam elvégzéséhez, sokkal gyorsabb letöltéssel.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ha további nyelvi támogatást szeretnél, jelenleg támogatott fordítások listája [itt található](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ha további nyelvű fordításokat szeretnél, ezek 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)
#### 🧑🎓 _Diák vagy?_
#### 🧑🎓 _Tanuló vagy?_
Látogass el a [**Student Hub oldalra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdőknek szóló forrásokat, diák csomagokat és akár ingyenes tanúsítványutalványt is találsz. Ezt az oldalt érdemes könyvjelzővel ellátni és időnként felkeresni, hiszen havonta frissítjük a tartalmat.
Látogasd meg a [**Hallgatói központ oldalt**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol megtalálod a kezdő erőforrásokat, hallgatói csomagokat és akár ingyenes tanúsítvány kupont is szerezhetsz. Ezt az oldalt érdemes elmenteni könyvjelzőnek és időnként ellenőrizni, mert havonta frissítjük a tartalmat.
### 📣 Bejelentés – Új GitHub Copilot Agent mód kihívások!
Új kihívás került hozzáadásra, keress rá a "GitHub Copilot Agent Challenge 🚀" kifejezésre a legtöbb fejezetben. Ez egy új kihívás, amelyhez a GitHub Copilot és az Agent mód segítségével dolgozhatsz. Ha még nem használtad az Agent módot, ez nem csak szöveg generálására képes, hanem fájlokat is létre tud hozni és szerkeszteni, parancsokat futtat és egyebeket.
Ú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 teljesíthetsz. Ha még nem használtad az Agent módot, tud szöveget generálni, fájlokat létrehozni és szerkeszteni, parancsokat futtatni és még sok mást.
### 📣 Bejelentés – _Új projekt generatív MI segítségével_
### 📣 Bejelentés - _Új projekt generatív MI használatával_
Új MI asszisztens projekt került be, nézd meg [projekt](./9-chat-project/README.md)
Új AI asszisztens projekt került hozzáadásra, nézd meg a [projektet](./9-chat-project/README.md)
### 📣 Bejelentés –_Új tananyag_ Generatív MI JavaScript számára most jelent meg
### 📣 Bejelentés - _Új tananyag_ Generatív MI témában JavaScripthez
Ne hagyd ki új Generatív MI tananyagunkat!
Ne hagyd ki új generatív MI tananyagunkat!
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd!
Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez!
Minden lecke tartalmaz egy feladatot, tudásellenőrzést és kihívást, amelyek segítségével megismerheted:
- Promptolás és prompt mérnökség
- Szöveges és képes alkalmazás generálás
Minden lecke tartalmaz egy kitöltendő feladatot, tudásellenőrzést és egy kihívást, amelyek segítenek a következők elsajátításában:
- Promptolás és prompttervezés
- Szöveg és kép alkalmazás generálás
- Keresőalkalmazások
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd!
Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez!
## 🌱 Kezdés
> **Tanári megjegyzésként**, tartalmazunk néhány javaslatot [itt](for-teachers.md) a tananyag használatához. Várjuk visszajelzésedet [a vitafórumunkon](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 leckét egy előzetes kvízzel kezdjetek, majd olvassátok el az anyagot, végezzétek el a feladatokat, és ellenőrizzétek megértéseteket az utólagos kvízzel.
## 🌱 Első lépések
Tanulási élményetek javítása érdekében dolgozzatok együtt társaiddal a projekteken! A beszélgetéseket biztatjuk [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink válaszolnak kérdéseitekre.
> **Tanárok**, [tartalmazunk néhány javaslatot](for-teachers.md) a tananyag használatához. Visszajelzéseteket szívesen várjuk [a beszélgetési fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Tanulmányaitok elősegítésére erősen ajánljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) oldal további anyagainak megismerését.
**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckéhez kezdjetek egy előadás előtti kvízzel, majd olvassátok el az előadás anyagát, végezzétek el a különféle feladatokat, és a végén a jó megértés érdekében oldjátok meg az előadás utáni kvízt.
A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A beszélgetéseket ösztönözzük [beszélgetési fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink rendelkezésre állnak, hogy válaszoljanak kérdéseitekre.
Tovább mélyítheted tudásodat, ha felfedezed a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) oldalát további tananyagokért.
### 📋 Környezeted beállítása
A tananyag fejlesztői környezete készen áll! Kezdéskor választhatsz, hogy egy [Codespace](https://github.com/features/codespaces/) (_böngésző alapú, telepítés nélküli környezet_) futtatásával, vagy helyben, a számítógépeden egy szövegszerkesztő, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatával dolgozol.
Ez a tananyag fejlesztői környezettel érkezik, ami készen áll a használatra! A kezdéshez választhatod, hogy a tananyagot egy [Codespace-ben](https://github.com/features/codespaces/) futtatod (_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) alkalmazással.
#### Hozd létre saját adattáradat
Annak érdekében, hogy könnyen menthesd munkád, ajánlott létrehozni saját példányodat ebből az adattárból. Ezt a felül található **Use this template** gombbal teheted meg. Ez létrehoz egy új adattárat a GitHub-fiókodban a tananyag másolatával.
#### Hozd létre saját repositorydat
Ahhoz, hogy könnyen elmented a munkádat, ajánlott, hogy készíts saját másolatot erről a repozitóriumról. Ezt megteheted, ha a lap tetején a **Use this template** gombra kattintasz. Ez létrehoz egy új repozitóriumot a GitHub fiókodban a tananyag másolatával.
Kövesd az alábbi lépéseket:
1. **Forkold az adattárat**: Kattints a "Fork" gombra a felső jobb sarokban ezen az oldalon.
2. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Kövessétek ezeket a lépéseket:
1. **Forráspont másolása (Fork)**: Kattints a "Fork" gombra a lap jobb felső sarkában.
A létrehozott adattáradban kattints a **Code** gombra, majd válaszd az **Open with Codespaces** opciót. Ez létrehoz neked egy új Codespace környezetet.
A saját másolatodban, amit létrehoztál, kattints a **Code** gombra, majd válaszd az **Open with Codespaces** lehetőséget. Ez új Codespace-et hoz létre a munkához.
A tananyag helyi futtatásához szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközeibe](../../1-getting-started-lessons/1-intro-to-programming-languages), bemutat különféle lehetőségeket ezekre az eszközökre, hogy kiválaszthasd a számodra legmegfelelőbbet.
#### A tananyag helyi futtatása
Ajánlásunk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használata, 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: [link](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
A tananyag helyi futtatásához egy szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages), bemutat különféle lehetőségeket ezek közül, hogy kiválaszthasd a számodra legmegfelelőbbet.
1. Klónozd a saját adattáradat a számítógépedre. Ezt megteheted a **Code** gombra kattintva és az URL másolásával:
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-ot innen töltheted le: [ide](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klónozd le a tárolódat a számítógépedre. Ezt úgy teheted meg, hogy rákattintasz a **Code** gombra, majd kimásolod az URL-t:
[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) alkalmazáson belül, és futtasd a következő parancsot, a `<your-repository-url>` helyére illeszd be az imént má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) alkalmazáson belül, és futtasd a következő parancsot, a `<your-repository-url>` helyére beillesztve az imént kimásolt URL-t:
```bash
git clone <your-repository-url>
```
2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy a **Fájl** > **Mappa megnyitása** menüpontra kattintasz, majd kiválasztod az imént klónozott mappát.
2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a **File** > **Open Folder** menüpont kiválasztásával, majd a klónozott mappa megadásával teheted meg.
> 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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít gyorsabban írni a kódot
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít gyorsabban kódot írni
## 📂 Minden leckében megtalálható:
## 📂 Minden lecke tartalmaz:
- opcionális skiccjegyzet
- opcionális kiegészítő videó
- óra előtti bemelegítő kvíz
- írásos lecke
- projekt alapú leckék esetén lépésről lépésre útmutatók a projekt elkészítéséhez
- tudásellenőrző kérdések
- kihívás
- kiegészítő olvasmányok
- feladat
- [óra utáni kvíz](https://ff-quizzes.netlify.app/web/)
- opcionális vázlatrajzot
- opcionális kiegészítő videót
- leckét megelőző bemelegítő kvízt
- írott leckét
- projekt alapú leckékhez lépésről lépésre útmutatókat a projekt elkészítéséhez
- tudásellenőrzőket
- kihívást
- kiegészítő olvasnivalót
- feladatot
- [lecke utáni kvízt](https://ff-quizzes.netlify.app/web/)
> **Jegyzet a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdéssel. Elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvízalkalmazás helyben futtatható vagy telepíthető az Azure-ra; az instrukciókat a `quiz-app` mappában találod.
> **Megjegyzés a kvízekhez**: Az összes kvíz a Quiz-app mappában található, összesen 48 darab, mindhárom kérdésből álló teszt. Elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvíz alkalmazás helyileg is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a `quiz-app` mappában.
## 🗃️ Leckék
| | Projekt neve | Tanult fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző |
| 01 | Kezdés | Bevezetés a programozásba és a fejlesztői eszközökbe | Megtanulni a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a szakmai fejlesztőket munkájuk során | [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 | GitHub alapok, köztük csapatmunkával kapcsolatos ismeretek | Megtanulni, hogyan kell használni a GitHub-ot a projektben és hogyan működj együtt másokkal a kódon | [Bevezetés a GitHub-ba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kezdés | Akadálymentesség | Megtanulni a web akadálymentesség alapjait | [Az akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS alapok | Függvények és metódusok | Függvényekről és metódusokról tanulni 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 |
| 06 | JS alapok | Döntéshozatal JavaScripttel | Tanulj meg feltételeket létrehozni a kódodban döntéshozatali módszerek segítségével | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS alapok | Tömbök és ciklusok | Adatok kezelése tömbök és ciklusok segítségével 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 a gyakorlatban | HTML felépítése egy online terrárium számára, a felépítésre 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 a gyakorlatban | CSS készítése az online terrárium stílusához, a CSS alapjaira fókuszálva, beleértve a reszponzív oldal készítését | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript closure-ök, DOM manipuláció | JavaScript írása a terrárium húzás- és ejtéses működéséhez, a closure-ök és a DOM manipuláció fókuszával | [JavaScript closure-ök, 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 készítése | Tanuld meg, hogyan használhatóak a billentyűesemények a JavaScript alkalmazás logikájában | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./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 lehet elkészíteni 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 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívása és változók tárolása helyi tárolóban | JavaScript elemek írása a böngészőbővítményedhez API hívásához, helyi tárolóban tárolt változók használatával | [API-k, űrlapok és helyi tároló](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./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 a bővítmény ikon kezelésére; ismerkedj meg a web teljesítménnyel és optimalizációkkal | [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) | Haladóbb játékkészítés JavaScript-tel | Tanulj az öröklésről osztályokkal és kompozícióval, valamint a Pub/Sub mintáról játék készítéshez | [Bevezetés a haladó játékkészítésbe](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás a canvas-re | Ismerd meg a Canvas API-t, amellyel elemek rajzolhatók a képernyőre | [Rajzolás a canvas-re](./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 elemekkel | Fedezd fel, hogyan lehet mozgást adni elemeknek a 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 érzékelés | Készítsd el az ütközések kezelését elemek között, billentyűnyomások segítségével, valamint adj egy várakozási funkciót a játék teljesítményéhez | [Ü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ámkészítés | Végezz matematikai számításokat a játék státusza és teljesítménye alapján | [Pontszámkészíté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 | Ismerkedj meg a játék befejezésével és újraindításával, beleértve az erőforrások törlését és változók alaphelyzetbe állítását | [A befejező 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 webalkalmazásban | Tanuld meg, hogyan készíthetsz többszörös oldalt tartalmazó weboldal architektúrát routinggal és HTML sablonokkal | [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 | Tanulj az űrlapkészítésről és az érvényesítési folyamatokról | [Ű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 az adatok az alkalmazásodba és onnan ki, hogyan kérd le, tárold és töröld őket | [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 kezeli az alkalmazásod az állapotot és hogyan kezeld azt programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | VScode használata | Tanuld meg,hogyan használj kódszerkesztőt | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asszisztensek](./9-chat-project/README.md) | Mesterséges intelligenciával való munka | Tanulj meg saját mesterséges intelligencia asszisztenst építeni | [AI asszisztens projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagógia
A tananyagunk két fő pedagógiai elv mentén készült:
| | Projekt neve | Tanított koncepciók | Tanulási célok | Kapcsolódó lecke | Szerző |
| 01 | Első lépések | Bevezetés a programozásba és a szakmában használt eszközök | Ismerd meg a legtöbb programozási nyelv alapjait és azokat a szoftvereket, amelyek segítik a profi fejlesztőket a 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 | Első lépések | A GitHub alapjai, csapatmunkával együtt | Hogyan használd a GitHubot a projektedben, és hogyan működj össze másokkal egy kódalapon | [Bevezetés a GitHubba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Első lépések | Akadálymentesség | Ismerd meg a webes akadálymentesség alapjait | [Az 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, amelyek az alkalmazás logikájának kezelésére szolgálnak | [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 készíts feltételeket a kódodban döntéshozó módszerekkel | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Alapok | Tömbök és ciklusok | Dolgozz adatokkal tömbök és ciklusok segítségével JavaScriptben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML a gyakorlatban | Építsd meg az online terrárium HTML-jét, fókuszálva a layout elkészítésére | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS a gyakorlatban | Építsd meg a CSS-t az online terrárium stílusához, beleértve az oldal reszponzívvá tételét is | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript lezárások, DOM kezelése | Építsd meg a JavaScript-et, hogy a terrárium drag/drop felületként működjön, fókuszálva a lezárásokra és a DOM kezelésére | [JavaScript lezárások, DOM kezelés](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Billentyűzetes játék](./4-typing-game/solution/README.md) | Billentyűzetes játék építése | Tanulj meg billentyűeseményeket használni JavaScript alkalmazásod logikájának vezérléséhez | [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 | Ismerd meg, hogyan működnek a böngészők, történetüket és hogyan készítsd el 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ás és változók tárolása helyi tárolóban | Építsd meg a böngészőbővítmény JavaScript elemeit, hogy API-t hívj változók használatával, melyek helyileg tárolódnak | [API-k, űrlapok és helyi tárolók](./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, webteljesítmény | Használd a böngésző háttérfolyamatait az ikon kezelésére; ismerd meg a webteljesítményt és néhány optimalizálást | [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) | Haladóbb játékfejlesztés JavaScript-tel | Tanuld meg az öröklődést osztályok és kompozíció segítségével, valamint a Pub/Sub mintát egy játék fejlesztéséhez | [Bevezetés a 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 vászonra | Ismerd meg a Canvas API-t, amely elemek rajzolására szolgál a képernyőre | [Rajzolás 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 mozdíthatók el elemek kartézián koordináták és a Canvas API segítségével | [Elemmozgatás](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközésérzékelés | Tedd lehetővé, hogy az elemek ütközzenek, reagáljanak egymásra billentyűleütések alapján, és legyen visszaállító funkció a teljesítmény érdekében | [Ü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ámlálás | Végezz matematikai számításokat a játék állapotának és teljesítményének megfelelően | [Pontszámlálá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 | Ismerd meg, hogyan zárd le és indítsd újra a játékot, beleértve az erőforrások felszabadítását és a változók alaphelyzetbe állítását | [A befejezés feltétele](./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öbblapos weboldal architektúrájának alapját útvonalak é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) | Belépési és regisztrációs űrlap készítése | Tanuld meg az űrlapok építését és az érvényesítés kezelését | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Az adatok lekérése és használata | Hogyan áramlanak az adatok az alkalmazásban, hogyan kérhetők le, tárolhatók és törölhetők | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés alapjai | Tanuld meg, hogyan őrzi meg az alkalmazás az állapotot, és hogyan kezelheted programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | VScode használata | Tanuld meg a kódszerkesztő használatát | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asszisztensek](./9-chat-project/README.md) | Mesterséges intelligenciával való munka | Tanuld meg, hogyan építsd fel a saját AI asszisztensedet | [AI asszisztens projekt](./9-chat-project/README.md) | Chris |
## 🏫 Didaktika
Tananyagunk kialakításánál két alapvető didaktikai elv vezérelt minket:
* projektalapú tanulás
* gyakori kvízek
A program a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A hallgatóknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy üzleti banki alkalmazás fejlesztésével. A sorozat végére a résztvevők szilárd ismereteket szereznek a webfejlesztés területén.
A program a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A diákoknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy billentyűzetes játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy banki alkalmazás építésével. A tanfolyam végére szilárd webfejlesztési ismeretekkel rendelkeznek majd.
> 🎓 Az első néhány leckét ezen tananyagból elvégezheted a [Tanulási útvonal](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) keretében a Microsoft Learn-en!
> 🎓 Az első pár leckét ebben a tananyagban egy [tanulási útvonal](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) formájában is elvégezheted a Microsoft Learn-en!
Azáltal, hogy az anyagok a projektekhez igazodnak, a tanulás élvezetesebb és a fogalmak jobb megtartása válik lehetővé. Továbbá több JavaScript alapokat bemutató kezdő leckét írtunk, melyek fogalmakat vezetnek be, kiegészítve a "[Kezdők sorozata: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videós oktatóanyagokkal, melyek egyes szerzői közreműködtek ebben a tananyagban.
Az anyag projektekhez igazítása által a folyamat élvezetesebb lesz a diákok számára, és növeli a koncepciók elsajátítását. Emellett több bevezető leckét is írtunk a JavaScript alapjairól, kiegészítve a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videós oktatóanyag gyűjtemény egyik videójával, amelynek néhány szerzője közreműködött ebben a tananyagban.
Ezen felül egy alacsony tétű kvíz az óra előtt beállítja a diák motivációját a téma tanulására, míg egy második kvíz az óra után biztosítja a tudás további megtartását. Ez a tananyag rugalmas és szórakoztató módon lett kialakítva, teljes egészében vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbek lesznek.
Továbbá, egy alacsony tétű kvíz az óra előtt segíti a tanuló elköteleződését a téma iránt, míg egy második kvíz az óra után tovább erősíti a tudás megszilárdítását. Ez a tananyag rugalmas és szórakoztató, egészben vagy részleteiben is végezhető. A projektek kicsiben indulnak, és a 12 hetes ciklus végére egyre összetettebbekké válnak.
Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztői alapok megtanítása után lehessen csak áttérni azok használatára, jó következő lépés lehet a tananyag után a Node.js elsajátítása a "[Kezdők sorozata: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" videósorozat által.
Miközben szándékosan mellőztük JavaScript keretrendszerek bemutatását, hogy a webfejlesztőként szükséges alapvető készségekre koncentráljunk, mielőtt keretrendszert alkalmaznánk, egy jó következő lépés a tananyag elvégzése után a Node.js megismerése lehet a következő videósorozaton keresztül: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Látogasd meg a [Viselkedési Kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulás](CONTRIBUTING.md) útmutatókat. Várjuk építő jellegű visszajelzéseidet!
> Látogasd meg a [Viselkedési kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulás](CONTRIBUTING.md) irányelveinket. Örömmel fogadjuk konstruktív visszajelzésed!
## 🧭 Offline hozzáférés
## 🧭 Offline használat
Ezt a dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) használatával. Forkold le ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépeden, majd a repo gyökérmappájában írd be: `docsify serve`. A weboldal a localhost 3000-es portján lesz elérhető: `localhost:3000`.
Ez a dokumentáció offline is használható a [Docsify](https://docsify.js.org/#/) használatával. Forkold ezt a repo-t, telepítsd a Docsify-t helyileg a gépeden, majd a repo gyökerében írd be, hogy `docsify serve`. A weboldal a 3000-es porton lesz elérhető a localhostodon: `localhost:3000`.
## 📘 PDF
Az összes leckéről készült PDF [itt található](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](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/edgeai-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/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
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?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)
[-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)
[](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
[](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 az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz a többi tanulóhoz és tapasztalt fejlesztőkhöz az MCP-vel kapcsolatos 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.
Ha elakadsz vagy kérdésed van az AI alkalmazások építésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP-ről szóló beszélgetésekben. Ez egy támogató közösség, ahol a kérdéseket örömmel fogadják és a tudást szabadon megosztják.
Ez a tárhely az MIT licenc alatt áll. További információkért lásd a [LICENSE](../../LICENSE) fájlt.
Ez a tároló az MIT licenc alatt áll. Részletekért lásd a [LICENSE](../../LICENSE) fájlt.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Nyilatkozat**:
Ezt a dokumentumot a [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordító szolgáltatás segítségével fordítottuk. 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 a saját nyelvén tekintendő hivatalos forrásnak. Fontos információk esetén ajánlott szakmai, emberi fordítást igénybe venni. 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.
**Jóváhagyási nyilatkozat**:
Ezt a dokumentumot az AI fordító szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) használatával fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő a 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.
Hii ni hifadhidata ya mtaala wa elimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala ni kozi kamilifu ya wiki 12 iliyotengenezwa na Wakili wa Wingu wa Microsoft, ukiwa na masomo 24 ya vitendo yanayohusisha JavaScript, CSS, na HTML.
Hii ni hifadhidata ya mtaala wa kielimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala huu ni kozi kamili ya wiki 12 iliyotengenezwa na Wakili wa Microsoft Cloud, ikiwa na masomo 24 ya vitendo yanayohusisha JavaScript, CSS, na HTML.
### Vipengele Muhimu
### Sehemu Muhimu
- **Yaliyomo ya Kielimu**: Masomo 24 yaliyoandaliwa kwa muundo wa miradi
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Kiendelezi cha Kivinjari, Mchezo wa Anga, App ya Benki, Mhariri wa Nambari, na Msaidizi wa Chat wa AI
- **Mitihani ya Kuingiliana**: Mitihani 48 yenye maswali 3 kila moja (uchunguzi kabla/baada ya somo)
- **Maudhui ya Kielimu**: Masomo 24 yaliyopangwa katika moduli za miradi
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kutaipa, Kiongezi cha Kivinjari, Mchezo wa Anga, Programu ya Benki, Mhariri wa Msimbo, na Msaidizi wa Mazungumzo wa AI
- **Mitozo ya Kuingiliana**: Mitozo 48 yenye maswali 3 kila mmoja (vipimo kabla/baada ya somo)
- **Msaada wa Lugha Nyingi**: Tafsiri za kiotomatiki kwa lugha 50+ kupitia GitHub Actions
- [Moduli za Microsoft Learn](https://docs.microsoft.com/learn/)
- [Rasilimali za Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inayopendekezwa kwa wanafunzi
- Kozi za ziada: AI ya Kutengeneza, Sayansi ya Data, ML, kozi za IoT zinapatikana
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inapendekezwa kwa wanaojifunza
- Kozi za ziada: AI ya Asili, Sayansi ya Takwimu, ML, na mtaala wa IoT zinapatikana
### Kazi na Miradi Maalum
### Kufanya Kazi na Miradi Maalum
Kwa maelekezo ya kina kuhusu miradi binafsi, rejelea faili za README katika:
- `quiz-app/README.md` - Programu ya quiz ya Vue 3
Kwa maelekezo ya kina juu ya miradi binafsi, rejelea faili za README katika:
- `quiz-app/README.md` - Programu ya mtihani ya Vue 3
- `7-bank-project/README.md` - Programu ya benki yenye uthibitishaji
- `5-browser-extension/README.md` - Maendeleo ya kiendelezi cha kivinjari
- `6-space-game/README.md` - Maendeleo ya mchezo wa Canvas
- `9-chat-project/README.md` - Mradi wa msaidizi wa chat AI
- `5-browser-extension/README.md` - Ukuaji wa kiongezi cha kivinjari
- `6-space-game/README.md` - Ukuaji wa mchezo wa Canvas
- `9-chat-project/README.md` - Mradi wa msaidizi wa mazungumzo wa AI
### Muundo wa Monorepo
Ingawa sio monorepo ya kawaida, hifadhidata hii ina miradi kadhaa huru:
- Kila somo lina muundo wake
- Miradi haishiriki utegemezi
Ingawa si monorepo ya kawaida, hifadhidata hii ina miradi huru mingi:
- Kila somo ni huru
- Miradi haiungi mkono tegemezi zao
- Fanya kazi kwenye miradi binafsi bila kuathiri mingine
- Nakili hifadhidata nzima kwa uzoefu kamili wa mtaala
- Nakili hifadhidata yote kwa uzoefu kamili wa mtaala
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Kipengele cha Kutolewa Wajibu**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au usahihi mdogo. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya mtaalamu wa binadamu inapendekezwa. Hatuwezi kuwajibika kwa kutoelewana au tafsiri potovu zinazotokana na matumizi ya tafsiri hii.
**Kiarifu cha Kutokujali**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali kumbuka kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au upungufu wa usahihi. Hati ya asili katika lugha yake ya mama inapaswa kuchukuliwa kama chanzo halali. Kwa taarifa muhimu, tafsiri ya mtaalamu wa kibinadamu inapendekezwa. Hatutawajibika kwa changamoto au tafsiri zisizo sahihi 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/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/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/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 ya kina ya wiki 12 inayotolewa na Wakili wa Wingu wa Microsoft. Kila somo kati ya 24 linaingia kwa undani katika JavaScript, CSS, na HTML kwa mradi wa vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya anga. Shirikiana na maswali, mijadala, na kazi za vitendo. Boreshaji ujuzi wako na kuimarisha ufahamu wako kwa njia yetu bora ya kufundisha inayozingatia miradi. Anza safari yako ya kuprogramu leo!
Jifunze misingi ya maendeleo ya wavuti na kozi yetu kamili ya wiki 12 iliyotolewa na Microsoft Cloud Advocates. Kila somo kati ya 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, virutubisho vya kivinjari, na michezo ya anga. Shirikiana na vipimo, mijadala, na waraka wa vitendo. Boresha ujuzi wako na boresha ufahamu wako kwa mbinu bora ya kujifunza kupitia miradi. Anza safari yako ya kuweka nambari leo!
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Hii itakupa kila kitu unachohitaji kukamilisha kozi kwa upakuaji wa haraka zaidi.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ikiwa unataka kuwa na lugha za tafsiri za ziada zinazoungwa mkono zimo [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ikiwa unataka kuongezwa kwa lugha za tafsiri zinazoungwa mkono zimetajwa [hapa](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?_
Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali kwa wanaoanza, vifurushi vya Wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ni ukurasa unayotaka kuweka 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 ndio ukurasa unaotaka kuweka alama na kuangalia mara kwa mara tunapobadilisha maudhui kila mwezi.
### 📣 Tangazo - Changamoto mpya za Hali ya Wakala wa GitHub Copilot za kukamilisha!
### 📣 Tangazo - Changamoto Mpya za GitHub Copilot Agent Mode za Kumaliza!
Changamoto mpya imeongezwa, tafuta "Changamoto ya Wakala wa GitHub Copilot 🚀" katika sura nyingi. Hii ni changamoto mpya kwako kumaliza ukitumia GitHub Copilot na hali ya Wakala. Ikiwa hujawahi kutumia hali ya Wakala hapo awali ina uwezo wa si tu kuandika maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi.
Changamoto mpya imeongezwa, tafuta "GitHub Copilot Agent Challenge 🚀" katika sura nyingi. Hiyo ni changamoto mpya kwa ajili yako kukamilisha ukitumia GitHub Copilot na Agent mode. Ikiwa hujawahi kutumia Agent mode hapo awali, ina uwezo wa si tu kuzalisha maandishi bali pia kuunda na kuhariri faili, kuendesha amri zaidi.
### 📣 Tangazo - _Mradi Mpya wa kujenga ukitumia AI ya Kizazi_
### 📣 Tangazo - _Mradi Mpya wa Kujenga kwa Kutumia AI ya Kizazi_
Mradi mpya wa Msaidizi wa AI umeongezwa hivi karibuni, angalia [mradi](./9-chat-project/README.md)
Mradi mpya wa Msaidizi wa AI umeongezwa, angalia [mradi](./9-chat-project/README.md)
### 📣 Tangazo - _Mtaala Mpya_ juu ya AI ya Kizazi kwa JavaScript umeachiliwa tu
@ -63,18 +73,18 @@ Usikose mtaala wetu mpya wa AI ya Kizazi!
> **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)!
> **Walimu**, tumetoa [mapendekezo baadhi](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yenu [katika jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Wajifunza](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza kwa mtihani wa kabla ya somo na fuata kwa kusoma nyenzo za somo, kukamilisha shughuli mbalimbali na thibitisha uelewa wako kwa mtihani wa baada ya somo.
**[Wanafunzi](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 nyenzo za mhadhara, kukamilisha shughuli mbalimbali na angalia ufahamu wako na jaribio la baada ya mhadhara.
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 itakuwa tayari kujibu maswali yako.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzao kufanya miradi pamoja! Majadiliano yanahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwa inapatikana 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 za ziada za kujifunzia.
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 masomo.
### 📋 Kuweka mazingira yako
Mtaala huu una mazingira ya maendeleo tayari kwa matumizi! Unapoanza unaweza kuchagua kuendesha mtaala huu katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, pasipo hitaji kufunga programu_), au kwa kompyuta yako mwenyewe 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 kufanya kazi! Unapoanza unaweza kuchagua kuendesha mtaala kwenye [Codespace](https://github.com/features/codespaces/) (_eneo la kivinjari lisilo hitaji usakinishaji_), au sokoni kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Tengeneza hifadhi yako
Ili kuhifadhi kazi yako kwa urahisi, inashauriwa kutengeneza nakala yako ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Tumia kiolezo hiki** juu ya ukurasa. Hii itaunda hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala huu.
#### Unda repository yako
Ili kukuwezesha kuhifadhi kazi yako kwa urahisi, inashauriwa uunde nakala yako mwenyewe ya repository hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Use this template** juu ya ukurasa huu. Hii itaunda repository mpya kwenye akaunti yako ya GitHub na nakala ya mtaala.
Fuata hatua hizi:
1. **Chimba Hifadhi**: Bonyeza kitufe cha "Fork" juu-kulia wa ukurasa huu.
Katika nakala yako ya hifadhi uliyotengeneza, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya kwako kufanya kazi.
Katika nakala yako ya repository uliyoiunda, bonyeza kitufe cha **Code** na chagua **Open with Codespaces**. Hii itaunda Codespace mpya utakayofanyia kazi.
#### Kuendesha mtaala huu kafaida ya kompyuta yako mwenyewe
Ili kuendesha mtaala huu kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana ya amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila chombo ili uchague kinachokufaa zaidi.
#### Kuendesha mtaala sokoni kwenye kompyuta yako
Tunapendekeza 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).
Ili kuendesha mtaala huu sokoni kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na chombo cha mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Vifaa vya Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila chombo ili uchague kinachofaa zaidi kwako.
1. Nakili hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL:
Mapendekezo yetu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminal](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 hivyo kwa kubofya kitufe cha **Code** na kunakili URL:
[CodeSpace](./images/createcodespace.png)
Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `<your-repository-url>` na URL uliyokuwa nayo:
Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `<your-repository-url>` na URL uliyoinakili hivi karibuni:
```bash
git clone <your-repository-url>
```
2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivi kwa kubonyeza **File** > **Open Folder** na kuchagua folda uliyokuwa umeikopa.
2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivyo kwa kubofya **File** > **Open Folder** na kuchagua folda uliyoinakili hivi karibuni.
> Mapendekezo ya nyongeza za Visual Studio Code:
> Vipengele vya ziada vya Visual Studio Code vinavyopendekezwa:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuangalia ukurasa wa HTML ndani ya Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo kwa haraka
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kutazama ukurasa wa 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
## 📂 Kila somo linajumuisha:
- sketchnote ya hiari
- video ya ziada ya hiari
- mtihani wa kuandaa kabla ya somo
- sketchnote hiari
- video ya ziada hiari
- mtihani wa kujiandaa kabla ya somo
- somo lililoandikwa
- kwa masomo ya mradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi
- kwa masomo yanayohusiana na miradi, mwongozo wa hatua kwa hatua jinsi ya kujenga mradi
- ukaguzi wa maarifa
- changamoto
- usomaji wa ziada
- kazi ya nyumbani
- [mtihani wa baada ya somo](https://ff-quizzes.netlify.app/web/)
- [mtihani baada ya somo](https://ff-quizzes.netlify.app/web/)
> **Kumbuka kuhusu mitihani**: Mitihani yote iko katika folda ya Quiz-app, mitihani 48 jumla ya maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/), programu ya mtihani inaweza kuendeshwa kwa ndani au kusambazwa kwenye Azure; fuata maagizo katika folda ya `quiz-app`.
> **Kumbuka kuhusu mitihani**: Mitihani yote ipo katika folda ya Quiz-app, mitihani 48 kwa jumla yenye maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/) programu ya mtihani inaweza kuendeshwa kwa ndani au kuwekwa katika Azure; fuata maelekezo katika folda ya `quiz-app`.
## 🗃️ Masomo
| | Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Linalohusiana | Mwandishi |
| 01 | Kuanzisha | Utangulizi wa Uprogramu na Zana za Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanzisha | Misingi ya GitHub, ikiwa ni pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa chanzo | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanzisha | Ufikivu | Jifunze misingi ya ufikivu wa wavuti | [Misingi ya Ufikivu](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | Kuanzisha | Utangulizi wa Programu na Zana za Kazi | Jifunze msingi wa misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanzisha | Misingi ya GitHub, pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa msingi | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanzisha | Ufikikaji | Jifunze misingi ya upatikanaji wa mtandao | [Misingi ya Ufikikaji](./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 |
| 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 |
| 06 | Misingi ya JS | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako ukitumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Misingi ya JS | Msururu na Mizunguko | Fanya kazi na data kupitia msururu na mizunguko katika JavaScript | [Msururu na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium ya mtandaoni, ukizingatia kujenga 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 kuibeba terrarium ya mtandaoni, ukizingatia misingi ya CSS ikiwa ni pamoja na kuifanya ukurasa uwe responsive | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Funguo za JavaScript, uendeshaji wa DOM | Tengeneza JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/acha, ukizingatia funguo na uendeshaji wa DOM | [Funguo za JavaScript, uendeshaji wa 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 kibodi kuendesha mantiki ya programu yako ya JavaScript | [Uprogramu unaoendeshwa na Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vinjari 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) | Kujenga fomu, kuita API na kuhifadhi vigezo kwenye hifadhi ya ndani | Tengeneza vipengele vya JavaScript vya kiendelezi chako cha kivinjari kuitumia API kwa kutumia vigezo vilivyosubiriwa 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) | Mchakato wa nyuma katika kivinjari, utendaji wa wavuti | Tumia michakato ya kivinjari ya nyuma kusimamia ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya marekebisho ili 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 Juu zaidi ya Mchezo kwa JavaScript | Jifunze kuhusu Urithi ukitumia Madarasa na Muundo pamoja na mfano wa Pub/Sub, kama maandalizi ya kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo Cha Juu](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye turubai | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kuweka vipengele kuzunguka kwenye skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za Cartesian na API ya Canvas | [Kusogeza Vipengele Kizunguka](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kugundua mgongano | Fanya vipengele kuwa na mgongano na kutoa athari kwa kila mmoja kwa kutumia kufungia vitufe na toa kazi ya kupumzika ili kuhakikisha utendaji wa mchezo | [Ugunduzi wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya hesabu za kijumla kulingana na hali na utendakazi wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kumaliza na kuanzisha upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, ikiwa ni pamoja na kusafisha mali na kuweka upya thamani za vigezo | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika App ya Wavuti | Jifunze jinsi ya kuunda muundo wa tovuti ya kurasa nyingi ukitumia uelekeaji na violezo vya HTML | [Violezo vya 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 Kusajili | Jifunze kuhusu ujenzi wa 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 inavyopita ndani na nje ya app yako, jinsi ya kuipata, kuhifadhi na kuiondoa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyoshikilia hali na jinsi ya kuisimamia kitaalamu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | [Tumia mhariri wa msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako mwenye akili bandia | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Mtaala wetu umeundwa kwa misingi miwili muhimu ya kielimu:
* kujifunza kwa mradi
| 05 | Misingi ya JS | Vifunction na Mbinu | Jifunze kuhusu vifunction na mbinu za kusimamia mtiririko wa mantiki ya programu | [Vifunction na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher |
| 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 | Miskani na Mizunguko | Fanya kazi na data kwa kutumia miskani na mizunguko katika JavaScript | [Miskani na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium mtandaoni, ukielekeza kwenye kuunda 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 kupamba terrarium mtandaoni, ukielekeza misingi ya CSS ikijumuisha kupangilia ukurasa iwe rahisi kubadilika | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Kufunga za JavaScript, usimamizi wa DOM | Jenga JavaScript ili kufanya terrarium kufanya kazi kama interface ya buruta/achilia, ukielekeza kwenye kufunga na usimamizi wa DOM | [Kufunga za JavaScript, usimamizi wa 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 kibodi kuendesha mantiki ya programu yako ya JavaScript | [Programu Inayoendeshwa na Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vivinjari vinavyofanya kazi, historia yao, na jinsi ya kuanzisha vipengele vya kwanza vya kiendelezaji cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuitisha API na kuhifadhi vigezo katika hifadhi ya ndani | Jenga vipengele vya JavaScript vya kiendelezaji chako cha kivinjari kuitisha API kwa kutumia vigezo vilivyohifadhiwa katika hifadhi ya ndani | [API, 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) | Mchakato wa nyuma katika kivinjari, utendakazi wa wavuti | Tumia michakato ya nyuma ya kivinjari kusimamia ikoni ya kiendelezaji; jifunze kuhusu utendakazi wa wavuti na baadhi ya maboresho ya kufanya | [Mchakato wa Nyuma na Utendakazi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Mchezo wa Juu zaidi na JavaScript | Jifunze kuhusu Urithi kwa kutumia Madarasa na Muundo pamoja na muundo wa Pub/Sub, tayari kwa kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo ya Juu](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye turubai | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Turubai](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kusogeza vipengele kwenye skrini | Gundua jinsi vipengele vinavyoweza kupata mwendo kwa kutumia makosari ya Cartesian na API ya Canvas | [Kusogeza Vipengele](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ugunduzi wa Migongano | Fanya vipengele kugongana na kuathiriana kwa kutumia kubofya funguo na toa kipengele cha mapumziko kuhakikisha utendakazi bora wa mchezo | [Ugunduzi wa Migongano](./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 utendakazi wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kuhitimisha na kuanzisha upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, pamoja na kusafisha rasilimali na kuweka upya thamani za vigezo | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika Tovuti Mtandao | Jifunze jinsi ya kuunda muundo wa tovuti yenye kurasa nyingi kwa kutumia routing na violezo vya HTML | [Violezo vya 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 uhakiki | [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 inavyotiririka ndani na nje ya app yako, jinsi ya kuipata, kuhifadhi na kuizitupa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyodumisha hali na jinsi ya kuiendesha kwa mpangilio | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo| [Tumia Mhariri wa Msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako wa AI | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
## 🏫 Falsafa ya Mafunzo
Mtaala wetu umeundwa kwa kanuni mbili muhimu za kielimu:
* kujifunza kwa miradi
* mitihani ya mara kwa mara
Programu hii inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya kidijitali, kiendelezi cha kivinjari chenye uangalifu wa mazingira, mchezo wa kawaida wa wavamizi wa anga, na app ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa na ufahamu imara wa maendeleo ya wavuti.
Mpango huu hufundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kufanya mazoezi kwa mikono kwa kujenga mchezo wa kuandika, terrarium halisi mtandaoni, kiendelezaji cha kivinjari kinachozingatia mazingira, mchezo wa aina ya wavamizi wa anga, na programu ya benki kwa biashara. Mwisho wa mfululizo huu, wanafunzi watakuwa na uelewa thabiti wa uendelezaji wa 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 mwanzo ya 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 uhifadhi wa dhana utaimarishwa. Pia tuliandika masomo kadhaa ya kuanzisha misingi ya JavaScript ili kuanzisha dhana, yakiwa na video kutoka kwa mkusanyiko wa video wa "[Mfululizo wa Waanzilishi kwa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", baadhi ya waandishi wake walichangia mtaala huu.
Kwa kuhakikisha kuwa maudhui yanahusiana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya mwanzo kuhusu misingi ya JavaScript kuanzisha dhana, pamoja na video kutoka kwenye mkusanyo wa “"[Mfululizo wa Waanzilishi wa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” ya mafunzo ya video, baadhi ya waandishi wake walichangia kwa mtaala huu.
Zaidi ya hayo, mtihani wa hali ya chini kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati mtihani wa pili baada ya darasa huhakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa na ufanisi na furaha na unaweza kuchukuliwa kwa jumla au sehemu. Miradi inaanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Pia, mtihani wa chini kabla ya darasa unaweka nia ya mwanafunzi kuelekea kujifunza somo, wakati mtihani wa pili baada ya darasa unahakikisha uhifadhi zaidi. Mtaala huu umeundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa ujumla au sehemu. Miradi huanza ndogo na kuendelea kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Ingawa tumejaribu kuepuka kuanzisha mifumo ya JavaScript badala yake tunalenga ujuzi wa msingi unaohitajika kama msanifu wa wavuti kabla ya kutumia mfumo, hatua inayofuata bora ya kumaliza mtaala huu itakuwa 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 tumependelea kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mendelezaji wa wavuti kabla ya kutumia mfumo, hatua njema inayofuata baada ya kukamilisha mtaala huu ni kujifunza kuhusu Node.js kupitia mkusanyo 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 miongozo ya [Michango](CONTRIBUTING.md). Tunakaribisha maoni yako yenye kujenga!
> Tembelea [Kanuni Zetu za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Kushiriki](CONTRIBUTING.md). Tunakukaribisha maoni yako yenye kujenga!
## 🧭 Ufikiaji wa Offline
## 🧭 Upatikanaji bila Mtandao
Unaweza kuendesha nyaraka hizi bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Kopia hifadhi hii, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye kompyuta yako ya karibu, kisha katika folda kuu ya hifadhi hii, andika `docsify serve`. Tovuti itakuwa ikihudumiwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`.
Unaweza kuendesha nyaraka hii bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Nakili repozitori hii, [sakinisha Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya ndani, kisha katika folda kuu ya repozitori hii, andika `docsify serve`. Tovuti itahudumiwa kwenye lango la 3000 kwenye localhost yako: `localhost:3000`.
## 📘 PDF
PDF ya masomo yote inaweza kupatikana [hapa](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kozi Nyingine
Timu yetu hutengeneza kozi zingine! Angalia:
Timu yetu hutengeneza kozi nyingine! Angalia:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -215,7 +225,7 @@ Timu yetu hutengeneza kozi zingine! Angalia:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Wakala
### Azure / Edge / MCP / Agents
[](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/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -231,7 +241,7 @@ Timu yetu hutengeneza kozi zingine! Angalia:
---
### Kujifunza Msingi
### Msingi wa Kujifunza
[](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)
@ -250,21 +260,21 @@ Timu yetu hutengeneza kozi zingine! Angalia:
## Kupata Msaada
Kama unashindwa au una maswali yoyote kuhusu kujenga programu za AI. Jiunge na wanafunzi wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa hushirikiwa kwa huru.
Ikiwa umekwama au una maswali kuhusu kujenga programu za AI. Jiunge na wanafunzi wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa husambazwa kwa huru.
Hifadhidata hii imelindwa chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
Hifadhidata hii imepewa leseni chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Kidokezo cha Kutokujali**:
Nyaraka hii imetafsiriwa kwa kutumia huduma ya utafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuwa sahihi, tafadhali fahamu kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro. Nyaraka asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, utafsiri wa kitaalamu wa binadamu unashauriwa. Hatutawajibika kwa kutoelewana au tafsiri za makosa zitokanazo na matumizi ya tafsiri hii.
**Takwimu ya Kukataa**:
Hati hii imetafsiriwa 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 moja kwa moja zinaweza kuwa na makosa au kasoro. Hati ya awali katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo chenye mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu na ya binadamu inapendekezwa. Hatuwajibiki kwa kutoelewana au tafsiri mbaya yatokanayo na matumizi ya tafsiri hii.
localizeflow[bot]
4 months ago