Toto je vzdělávací úložiště určené k výuce základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, který obsahuje 24 praktických lekcí zaměřených na JavaScript, CSS a HTML.
Toto je vzdělávací repozitář kurikula pro výuku základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML.
### Klíčové komponenty
### Klíčové součásti
- **Vzdělávací obsah**: 24 strukturovaných lekcí organizovaných do modulů založených na projektech
- **Praktické projekty**: Terárium, hra na psaní, rozšíření pro prohlížeč, vesmírná hra, bankovní aplikace, editor kódu a AI chatovací asistent
- **Interaktivní kvízy**: 48 kvízů, každý s 3 otázkami (před/po lekci)
- **Podpora více jazyků**: Automatické překlady do více než 50 jazyků pomocí GitHub Actions
- **Vzdělávací obsah**: 24 strukturovaných lekcí uspořádaný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ů, každý s 3 otázkami (před a po lekci)
- **Vícejazyčná podpora**: Automatické překlady do více než 50 jazyků pomocí GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) doporučený pro studenty
- Další kurzy: Generativní AI, Data Science, ML, IoT kurikula k dispozici
- Další kurzy: Generativní AI, Data Science, ML, IoT kurikula dostupná
### Práce s konkrétními projekty
Pro podrobné pokyny k jednotlivým projektům viz README soubory v:
- `quiz-app/README.md` - aplikace kvízů Vue 3
- `7-bank-project/README.md` - bankovní aplikace s autentizací
- `5-browser-extension/README.md` - vývoj rozšíření pro prohlížeč
- `6-space-game/README.md` - vývoj hry založené na Canvasu
- `9-chat-project/README.md` - projekt AI chatovacího asistenta
Pro podrobné instrukce k jednotlivým projektům viz README soubory v:
- `quiz-app/README.md` - Vue 3 aplikace kvízu
- `7-bank-project/README.md` - Bankovní aplikace s autentizací
- `5-browser-extension/README.md` - Vývoj rozšíření prohlížeče
- `6-space-game/README.md` - Vývoj hry založené na Canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepo
### Struktura Monorepo
I když nejde o tradiční monorepo, toto úložiště obsahuje několik 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ílejí závislosti
- Práce na jednotlivých projektech bez ovlivnění ostatních
- Naklonujte celé úložiště pro plný zážitek z kurikula
- Pracujte na jednotlivých projektech bez ovlivnění ostatních
- Naklonujte celý repozitář pro kompletní zážitek kurikula
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho 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. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o omezení odpovědnosti**:
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoliv usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo mylné výklady vyplývající z použití tohoto překladu.
Naučte se základy vývoje webu s naším komplexním 12týdenním kurzem od Microsoft Cloud Advocates. Každá z 24 lekcí se ponoří do JavaScriptu, CSS a HTML prostřednictvím praktických projektů jako jsou terária, rozšíření prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte uchování znalostí s naší efektivní pedagogikou založenou na projektech. Začněte svou programátorskou cestu ještě dnes!
Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá ze 24 lekcí se věnuje JavaScriptu, CSS a HTML prostřednictvím praktických projektů jako 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 uchování znalostí díky naší efektivní pedagogice založené na projektech. Začněte svou cestu programováním ještě dnes!
Připojte se ke komunitě Azure AI Foundry na Discordu
> Tento repozitář obsahuje více než 50 jazykových překladů, což významně zvětšuje velikost stahování. Pro klonování bez překladů použijte sparse checkout:
> Tento repozitář obsahuje více než 50 jazykových překladů, což výrazně zvětšuje velikost stažení. Pro klonování bez překladů použijte sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Tímto 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 chcete mít podporu dalších jazyků, seznam podporovaných je uveden [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> To vám poskytne vše potřebné k dokončení kurzu s mnohem rychlejším stahováním.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**Pokud chcete podporu dalších jazyků překladu, jsou uvedeny [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _Jste student?_
Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete zdroje pro začátečníky, studentské balíčky a dokonce způsoby, jak získat voucher na bezplatný certifikát. Tuto stránku si uložte do záložek a pravidelně kontrolujte, protože obsah se mění měsíčně.
Navštivte stránku [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete zdroje pro začátečníky, studentské balíčky a dokonce způsoby, jak získat bezplatný voucher na certifikát. Tuto stránku si uložte a čas od času zkontrolujte, protože obsah měníme každý měsíc.
### 📣 Oznámení - Nové výzvy v režimu GitHub Copilot Agent k dokončení!
### 📣 Oznámení – nové výzvy v režimu GitHub Copilot Agent k dokončení!
Přidána nová výzva, hledejte „GitHub Copilot Agent Challenge 🚀“ v většině kapitol. To je nová výzva, kterou můžete splnit pomocí GitHub Copilot a Agent režimu. Pokud jste režim Agent ještě nepoužili, umožňuje 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 🚀" v většině kapitol. Je to nová výzva k dokončení s využitím GitHub Copilot a režimu Agenta. Pokud jste režim Agenta dosud nepoužívali, zvládá nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
### 📣 Oznámení - _Nový projekt ke stavbě pomocí generativní AI_
### 📣 Oznámení – _nový projekt k vytvoření pomocí generativní AI_
Právě přidán nový projekt AI asistenta, podívejte se [projekt](./9-chat-project/README.md)
Nový projekt s AI Asistentem právě přidán, podívejte se na něj [projekt](./9-chat-project/README.md)
### 📣 Oznámení - _Nové kurikulum_ o generativní AI pro JavaScript bylo právě vydáno
### 📣 Oznámení –_nový učební plán_ na Generativní AI pro JavaScript právě vydán
Nezmeškejte naše nové kurikulum generativní AI!
Nezmeškejte náš nový učební plán Generativní AI!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
Každá lekce obsahuje úkol k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako:
- Vytváření promptů a inženýrství promptů
- Tvorba aplikací pro text a obrázky
Každá lekce obsahuje zadání k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako:
- Promptování a návrh promptů
- 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!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
## 🌱 Začínáme
> **Učitelé**, máme [několik návrhů](for-teachers.md), jak používat 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)!
> **Učitelé**, přidali jsme [několik návrhů](for-teachers.md), jak tento učební plán využívat. Budeme rádi za vaši zpětnou vazbu [v naší diskusní fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pro každou lekci začněte přednáškovým kvízem a pokračujte čtením studijního materiálu, dokončením různých aktivit a ověřením svého porozumění kvízem po přednášce.
**[Studenti](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 výukového materiálu, dokončením různých aktivit a ověřením pochopení pomocí závěrečného kvízu.
Pro zlepšení vašeho vzdělávacího zážitku se spojte s vrstevníky a pracujte na projektech společně! Diskuze jsou vítány v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde náš tým moderátorů bude k dispozici odpovědět na vaše dotazy.
Pro lepší zážitek z učení se spojte se svými spolužáky a pracujte společně na projektech! Diskuse jsou vítány v našem [diskusní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 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í silně doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro další studijní materiály.
### 📋 Nastavení vašeho prostředí
Toto kurikulum má připravené vývojové prostředí! Na začátku si můžete vybrat provoz kurikula v [Codespace](https://github.com/features/codespaces/) (_prohlížečové, bez nutnosti instalace_), nebo lokálně na svém počítači s textovým editorem jako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tento učební plán má připravené vývojové prostředí! Při začátku si můžete vybrat spuštění kurzu v [Codespace](https://github.com/features/codespaces/) (_prostředí v prohlížeči bez nutnosti instalací_), nebo lokálně na vašem počítači s textovým editorem, například [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Vytvoření vašeho repozitáře
Pro snadnější ukládání vaší práce se doporučuje vytvořit vlastní kopii tohoto repozitáře. To můžete udělat kliknutím na tlačítko **Use this template** v horní části stránky. Vytvoří se nový repozitář ve vašem GitHub účtu s kopií kurikula.
#### Vytvořte si svůj repozitář
Pro snadné ukládání své práce doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Můžete to udělat kliknutím na tlačítko **Use this template** v horní části stránky. Tím se vytvoří nový repozitář ve vašem účtu GitHub s kopií učebního plánu.
Postupujte takto:
1. **Forkujte repozitář**: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
Postupujte následovně:
1. **Vytvořte fork repositář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**. Vytvoří se nový Codespace, kde budete pracovat.
Ve své kopii repozitáře klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se vytvoří nový Codespace, ve kterém budete pracovat.
Pro spuštění kurikula lokálně budete potřebovat textový editor, prohlížeč a příkazový řádek. 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 těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje.
#### Spuštění učebního plánu lokálně na vašem počítači
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také integrovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Pro spuštění kurzu lokálně budete potřebovat textový editor, prohlížeč a příkazový řádek. 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 těchto nástrojů, abyste si vybrali, co vám vyhovuje nejlépe.
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má integrovaný i [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si stáhněte [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Naklonujte si váš repozitář do počítače. To můžete udělat kliknutím na tlačítko **Code** a zkopírováním URL:
1. Naklonujte svůj repozitář do počítače. Učiňte tak kliknutím na tlačítko **Code** a zkopírováním URL:
[CodeSpace](./images/createcodespace.png)
Pak 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) v rámci [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:
```bash
git clone <your-repository-url>
```
2. Otevřete složku ve Visual Studio Code. Uděláte to kliknutím na **Soubor** > **Otevřít složku** a vyberete složku, kterou jste právě klonovali.
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.
> 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) – aby vám pomohl psát kód rychleji
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 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) - pomáhá psát kód rychleji
## 📂 Každá lekce obsahuje:
- volitelný sketchnote
- volitelnou skicovou poznámku
- volitelné doplňkové video
- rozehřívací kvíz před lekcí
- psanou lekci
- u lekcí založených na projektu podrobný návod, jak projekt postavit
- u lekcí založených na projektu krok za krokem návody, jak projekt postavit
- kontroly znalostí
- výzvu
- doplňující čtení
- úkol
- [kvíz po lekci](https://ff-quizzes.netlify.app/web/)
> **Poznámka ke kvízům**: Všechny kvízy jsou umístěné ve složce Quiz-app, celkem 48 kvízů, každý se třemi otázkami. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; postup najdete ve složce `quiz-app`.
> **Poznámka ke kvízům**: Všechny kvízy jsou umístěny ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), aplikaci kvízu lze spustit lokálně nebo nasadit na Azure; postupujte podle instrukcí v složce `quiz-app`.
## 🗃️ Lekce
| | Název projektu | Probírané koncepty | Výukové cíle | Odkaz na lekci | Autor |
| 01 | Začínáme | Úvod do programování a nástroje profese | Naučit se základní principy většiny programovacích jazyků a software, který pomáhá profesionálním vývojářům v 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, 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čit se základy přístupnosti webu | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Datové typy v JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkce a metody | Naučit se o funkcích a metodách pro řízení toku logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Rozhodování v JS | Naučit se vytvářet podmínky ve vašem kódu za pomoci rozhodovacích konstrukcí | [Rozhodování](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a smyčky | Práce s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Postavit HTML pro vytvoření online terária se zaměřením na vytvář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 | Postavit CSS pro stylování online terária, se zaměřením 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 | Postavit JavaScript pro funkčnost terária jako rozhraní drag & drop, se zaměřením 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 na psaní](./4-typing-game/solution/README.md) | Stavba hry na psaní | Naučit se používat události klávesnice k řízení logiky vaší JavaScriptové aplikace | [Event-driven programování](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Rozšíření pro prohlížeč Green](./5-browser-extension/solution/README.md) | Práce s prohlížeči| Naučit se, jak prohlížeče fungují, jejich historii a jak vytvořit kostru prvních prvků rozšíření pro prohlížeč | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Rozšíření pro prohlížeč Green](./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 | Postavit JavaScriptové prvky rozšíření prohlížeče pro volání API s použitím 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 | [Rozšíření pro prohlížeč Green](./5-browser-extension/solution/README.md) | Pozadí procesů v prohlížeči, výkon webu | Využít pozadí prohlížeče k řízení ikony rozšíření; naučit se o výkonu webu a některých optimalizacích pro lepší běh | [Pozadí, úkoly 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 her v JavaScriptu | Naučit se o dědičnosti pomocí tříd i kompozice a o vzoru Pub/Sub, jako příprava ke stavbě 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čit se o Canvas API používaném pro kreslení prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevit, jak prvky získávají 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í | Nechat prvky kolidovat a reagovat na sebe pomocí stisků kláves a poskytnout 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ět matematické výpočty podle 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čení a restartování hry | Naučit se o ukončení a restartu hry, včetně úklidu zdrojů a resetování hodnot proměnných | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankovní aplikace](./7-bank-project/solution/README.md) | HTML šablony a směrování ve webové aplikaci | Naučit se vytvářet kostru více stránkové webové architektury s využ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) | Stavba přihlašovacího a registračního formuláře | Naučit se o tvorbě formulářů a ověřovacích rutinách | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Metody získávání a používání dat | Jak data proudí dovnitř a ven z vaší aplikace, jak je načíst, uložit a zbavit se jich | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučit 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 | [Editor kódu v prohlížeči/VScode](../../8-code-editor) | Práce s VScode | Naučit 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čit se vybudovat vlastního asistenta umělé inteligence | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Název projektu | Učené koncepty | Učební cíle | Připojená lekce | Autor |
| 01 | Začínáme | Úvod do programování a nástroje profese | Naučit se základní principy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům v jejich práci | [Úvod do programovacích jazyků a nástrojů profese](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, práce v týmu | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začínáme | Přístupnost | Naučit se základy přístupnosti na webu | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Datové typy v JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkce a metody | Naučte se o funkcích a metodách pro řízení logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Rozhodování v JS | Nauč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 smyčky | Práce s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvoření HTML pro online terárium, se zaměřením na rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvoření CSS pro stylování online terária, se zaměřením 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) | JavaScript Closures, manipulace s DOM | Vytvoření JavaScriptu pro funkční terárium s drag/drop rozhraním, se zaměřením na uzávěry (closures) a manipulaci s DOM | [JavaScript Closures, 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čit se používat události klávesnice k řízení logiky vaší JavaScript 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čit se, jak prohlížeče fungují, jejich historii a jak vytvořit první prvky rozšíření pro prohlíž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 do lokálního úložiště | Vytvoření JavaScriptových prvků rozšíření pro volání API a práci s proměnnými uloženými 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) | Procesy na pozadí v prohlížeči, výkon webu | Použití background procesů pro správu ikony rozšíření; naučit se o výkonu webu a optimalizacích | [Pozadí 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čit 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čit se o Canvas API, používaném ke kreslení 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í | Umožnit prvkům kolidovat a reagovat na sebe navzájem pomocí stisků kláves a zároveň poskytnout funkci cooldownu 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 | Provádění matematických výpočtů na základě stavu hry a výkonu | [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 restart hry | Naučit se ukončovat a restartovat hru včetně uvolnění zdrojů a resetování proměnných | [Konečná podmínka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablony a routování ve webové aplikaci | Naučit se vytvářet strukturu vícestránkového webu pomocí routování a HTML šablon | [HTML šablony a routová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čit se vytvářet formuláře a zpracovávat validační rutiny | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Způsoby získávání a používání dat | Jak data proudí ve vaší aplikaci, jak je získávat, ukládat a likvidovat | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučit se, jak si aplikace uchovává 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 kódový editor| [Používání kódového editoru 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 Assistant](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Náš učební plán je navržen se dvěma klíčovými pedagogickými principy:
Naše učební plán je navržen se dvěma klíčovými pedagogickými principy:
* učení založené na projektech
* časté kvízy
Program vyučuje základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti budou mít možnost získat praktické zkušenosti tvorbou hry na psaní, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu vesmírných vetřelců a bankovní aplikace pro firmy. Na konci série budou mít studenti 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 příležitost získat praktické zkušenosti vytvořením hry na psaní na klávesnici, virtuálního terária, ekologicky šetrného rozšíření prohlížeče, hry ve stylu Space Invader a bankovní aplikace pro firmy. Na konci série získají studenti solidní porozumění webovému vývoji.
> 🎓 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!
> 🎓 První lekce tohoto učebního plánu si můžete projít i jako [Učební cestu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Zajištěním shody obsahu s projekty se proces pro studenty stává zajímavějším a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí na základy JavaScriptu, abychom představili koncepty, doplněné videem z kolekce tutoriálů „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“, jejichž někteří autoři přispěli do tohoto kurikula.
Díky sladění obsahu s projekty je proces pro studenty více poutavý a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech 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íž autoři přispěli k tomuto učebnímu plánu.
Navíc nízkorizikový kvíz před vyučováním nastavuje záměr studenta učit se dané téma, zatímco druhý kvíz po výuce zajišťuje další upevnění znalostí. Tento učební plán byl navržen jako flexibilní a zábavný a lze jej absolvovat celý nebo částečně. Projekty začínají malé a postupně se během 12 týdnů stávají složitějšími.
Navíc nízkoryzový kvíz před hodinou nastavuje záměr studenta k učení daného tématu, zatímco druhý kvíz po hodině zajišťuje další zapamatování. Tento učební plán je navržen flexibilně a zábavně a může být absolvován celý nebo částečně. Projekty začínají malé a postupně se během 12týdenního cyklu stávají složitějšími.
I když jsme záměrně vynechali zavádění JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné jako webový vývojář před přechodem na framework, dalším dobrým krokem po dokončení 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)“.
I když jsme záměrně neuváděli frameworky JavaScriptu, abychom se soustředili na základní dovednosti nutné jako webový vývojář před přijetím frameworku, dalším dobrým krokem k dokončení tohoto učebního plánu je naučit se Node.js prostřednictvím jiné série 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 pokyny [Kodex chování](CODE_OF_CONDUCT.md) a [Přispívání](CONTRIBUTING.md). Těšíme se na vaši konstruktivní zpětnou vazbu!
> Navštivte naše [Kodex chování](CODE_OF_CONDUCT.md) a [Příspěvky](CONTRIBUTING.md) pravidla. Vítáme vaše konstruktivní zpětné vazby!
## 🧭 Offline přístup
Tuto dokumentaci můžete používat offline pomocí [Docsify](https://docsify.js.org/#/). Forkujte tento repozitář, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na vašem počítači a pak v kořenové složce tohoto repozitáře zadejte `docsify serve`. Web bude naservírován na portu 3000 na vašem localhostu: `localhost:3000`.
Tuto dokumentaci si můžete prohlížet i offline pomocí [Docsify](https://docsify.js.org/#/). Zforkujte toto repo, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na váš počítač a poté v kořenové složce tohoto repozitáře napište `docsify serve`. Webová stránka poběží na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
PDF všech lekcí lze najít [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF všech lekcí naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Další kurzy
Náš tým vytváří i další kurzy! Podívejte se na:
Náš tým vytváří další kurzy! Podívejte se:
<!-- 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)
---
### Azure / Edge / MCP / Agenti
@ -223,7 +197,7 @@ Náš tým vytváří i další kurzy! Podívejte se na:
[](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)
@ -231,41 +205,41 @@ Náš tým vytváří i další kurzy! Podívejte se na:
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Základní vzdělávání
[](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://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)
---
### 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)
Pokud se zaseknete nebo máte jakékoli dotazy týkající se tvorby AI aplikací, připojte se ke komunitě spolužáků a zkušených vývojářů na diskuse o MCP. Je to podporující komunita, kde jsou otázky vítány a znalosti se volně sdílejí.
Pokud máte potíže nebo jakékoli dotazy ohledně tvorby AI aplikací, připojte se ke společné diskusi s ostatními studenty a zkušenými vývojáři o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti jsou volně sdíleny.
Tento repozitář je licencován pod licencí MIT. Více informací naleznete v souboru [LICENSE](../../LICENSE).
Tento repozitář je licencován pod licencí MIT. Pro více informací si přečtěte soubor [LICENSE](../../LICENSE).
---
<!-- 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 AI [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za závazný zdroj. Pro kritické informace se doporučuje využít profesionálního lidského překladu. Nejsme odpovědni za jakékoliv nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí automatické překladové služby [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože usilujeme o přesnost, mějte prosím na paměti, že automatické 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 autoritativní zdroj. Pro kritické informace doporučujeme využít 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.
Ez egy oktatási tananyag-repozitórium, amely a webfejlesztés alapjainak tanítására készült kezdők számára. A tananyag egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, és 24 gyakorlati leckét tartalmaz JavaScript, CSS és HTML témakörökben.
Ez egy oktatási tananyag tárhelye, amely kezdők számára tanítja a webfejlesztés alapjait. A tananyag egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati leckével, amelyek a JavaScript, CSS és HTML témákat fedik le.
- `6-space-game/README.md`– Canvas alapú játék fejlesztés
- `9-chat-project/README.md`– AI csevegő asszisztens projekt
### Monorepo Struktúra
### Monorepo struktúra
Bár nem hagyományos monorepo, ez a repozitórium több független projektet tartalmaz:
Habár nem egy hagyományos monorepo, ez a tárhely több független projektet tartalmaz:
- Minden lecke önálló
- A projektek nem osztanak meg függőségeket
- Egyedi projekteken dolgozhatsz anélkül, hogy másokat befolyásolnál
- Az egész tárhely klónozásával megkaphatod a teljes tananyagot
---
**Felelősségi nyilatkozat**:
Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Kizáró nyilatkozat**:
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével készült. Bár igyekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvé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 eredő félreértésekért vagy téves értelmezésekért.
Tanuld meg a webfejlesztés alapjait a Microsoft Cloud Advocates által tartott átfogó 12 hetes tanfolyamunkkal. A 24 lecke mindegyike a JavaScript, CSS és HTML témakörét dolgozza fel gyakorlati projektek segítségével, mint például terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízekben, vitákban és gyakorlati feladatokban. Fejleszd készségeidet, és optimalizáld tudásod megőrzését hatékony, projektalapú oktatásunkkal. Kezdd el kódolási utadat még ma!
Ismerd meg a webfejlesztés alapjait 12 hetes átfogó tanfolyamunkon, amelyet a Microsoft Cloud Advocates tartanak. A 24 lecke mindegyike gyakorlati projektek segítségével mélyed el a JavaScript, CSS és HTML világában, többek között terráriumok, böngészőbővítmények és űrjátékok készítésével. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd képességeidet, és optimalizáld a tudásmegtartásodat hatékony, projektalapú oktatásunkkal. Kezdd el ma a kódolási utadat!
Csatlakozz az Azure AI Foundry Discord közösséghez
Csatlakozz az Azure AI Foundry Discord Közösséghez
Kövesd ezeket a lépéseket, hogy elkezdd használni ezeket az erőforrásokat:
1. **Forkold a tárolót**: Kattints a [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) gombra
2. **Klónozd a tárolót**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Csatlakozz az Azure AI Foundry Discord szerveréhez, találkozz szakértőkkel és fejlesztőtársaiddal**](https://discord.com/invite/ByRwuEEgH4)
Kövesd az alábbi lépéseket a források használatának megkezdéséhez:
1. **Forkold a tárházat**: Kattints ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klónozd a tárházat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj meg szakértőkkel és fejlesztőtársaiddal**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Többnyelvű támogatás
#### GitHub Action segítségével támogatott (Automatikus és mindig naprakész)
> Ez a tároló 50+ nyelvre fordításokat tartalmaz, amelyek jelentősen megnövelik a letöltési méretet. Ha fordítások nélkül szeretnéd letölteni, használj sparse checkoutot:
> Ez a tárház több mint 50 nyelvi fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítás nélkül szeretnéd klónozni, használd a sparse checkoutot:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ez mindent megad, ami a tanfolyam teljesítéséhez szükséges, sokkal gyorsabb letöltéssel.
> Ez mindent megad, 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, az elérhető nyelvek listája [itt található](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ha további fordítási nyelveket szeretnél támogatni, ezek listája [itt található](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Diák vagy?_
Látogass el a [**Student Hub oldalára**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol találsz kezdő erőforrásokat, diákcsomagokat, sőt az ingyenes bizonyítvány beváltó módját is. Ezt az oldalt érdemes könyvjelzőzni és időnként megnézni, mert havonta frissül a tartalom.
Látogass el a [**Diákoknak szóló oldalra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdő forrásokat, diákcsomagokat és akár ingyenes tanúsítványvouchereket is találhatsz. Ezt az oldalt érdemes könyvjelzőzni és időről időre visszanézni, mivel havonta frissítjük a tartalmakat.
### 📣 Bejelentés – Új kihívások GitHub Copilot Agent módban!
Új kihívás érhető el, keresd a "GitHub Copilot Agent Challenge 🚀" címkéjű részeket a legtöbb fejezetben. Ez egy új kihívás, amit GitHub Copilot és Agent mód használatával teljesíthetsz. Ha még nem használtad az Agent módot, tud szöveget generálni, de fájlokat létrehozni, szerkeszteni, parancsokat futtatni is képes.
Új kihívás került hozzáadásra, keresd a "GitHub Copilot Agent Challenge 🚀" címkét a legtöbb fejezetben. Ez egy új kihívás a GitHub Copilot és az Agent mód használatával végrehajtandó feladatokhoz. Ha még nem használtad az Agent módot, ez nemcsak szöveg generálására képes, hanem fájlokat is létre tud hozni és szerkeszteni, parancsokat futtat és még többre.
### 📣 Bejelentés - _Új projekt generatív MI használatával_
### 📣 Bejelentés – _Új projekt Generatív MI segítségével_
Új AI-asszisztens projekt került hozzáadásra, nézd meg [projektt](./9-chat-project/README.md)
Új MI asszisztens projekt került hozzáadásra, nézd meg [projekt](./9-chat-project/README.md)
### 📣 Bejelentés - _Új tanmenet_ generatív MI-ről JavaScripthez jelent meg
### 📣 Bejelentés –_Új tanterv_ Generatív MI témában JavaScript-hez
Ne hagyd ki új generatív MI tanmenetünket!
Ne hagyd ki új Generatív MI tantervünket!
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra és kezdj neki!
Látogass el ide: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) és kezdj bele!
Minden leckéhez tartozik egy teljesítendő feladat, egy tudásellenőrző és egy kihívás, melyek segítenek az alábbi témák elsajátításában:
- Promptok és prompttervezés
- Szöveg- és képgeneráló alkalmazások
Minden leckéhez tartozik egy feladat, tudásellenőrzés és kihívás, hogy vezessen az alábbi témák tanulásában:
- Promptolás és prompt-mérnökség
- Szöveg- és képalapú alkalmazásgenerálás
- Keresőalkalmazások
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra és kezdj neki!
Látogass el: [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) és kezdj bele!
## 🌱 Kezdés
> **Tanárok**, [tartalmazunk javaslatokat](for-teachers.md) a tanmenet használatához. Nagyon örülnénk a visszajelzéseteknek [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Tanárként**, nézd meg [az itt található javaslatainkat](for-teachers.md) a tanterv használatára. Nagyon örülnénk visszajelzésednek [a fó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 kezdjetek egy előadó előtti kvízzel, majd olvassátok el a lecke anyagát, végezzétek el a különféle tevékenységeket, és a lecke végén értékeljétek tudásotokat az utókvízzel.
**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckénél kezdd az előadás előtti kvízzel, majd olvasd el az előadási anyagot, végezd el a különböző tevékenységeket, és ellenőrizd a megértésed az előadás utáni kvízzel.
A tanulási élmény fokozásához érdemes társakkal együtt dolgozni a projekteken! A vitákra bátorítunk a [vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátor csapatunk válaszol a kérdéseitekre.
A tanulási élményed fokozása érdekében csatlakozz társaidhoz, hogy együtt dolgozzatok a projekteken! A beszélgetéseket bátorítjuk [a fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink válaszolnak kérdéseidre.
Tanulmányaitok elmélyítése érdekében javasoljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) további tananyag-kínálatának feltérképezését.
Továbbfejlődésed érdekében javasoljuk, hogy böngéssz a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) további tananyagainak között.
### 📋 Fejlesztőkörnyezet beállítása
### 📋 Környezet beállítása
Ehhez a tanmenethez kész fejlesztőkörnyezet jár! A tanfolyam kezdetekor választhatsz, hogy böngészőben futtatható [Codespace](https://github.com/features/codespaces/) környezetben (telepítés nélkül), vagy helyben a saját gépeden, egy szövegszerkesztővel, például [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) segítségével szeretnéd-e futtatni.
A tananyaghoz készen áll egy fejlesztői környezet! Amikor elkezded, eldöntheted, hogy a tananyagot [Codespace-ben](https://github.com/features/codespaces/) (_böngésző-alapú, telepítést nem igénylő környezet_) futtatod, vagy helyileg a számítógépeden, például [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) szövegszerkesztővel.
#### Tároló létrehozása
A munkád egyszerű mentése érdekében ajánlott saját példányt készítened ebből a tárolóból. Ezt a lap tetején található **Use this template** gombra kattintva teheted meg. Ezzel a saját GitHub fiókodban kapsz egy új tárolót, amely a tanmenet másolatát tartalmazza.
#### Hozd létre a saját tárházad
Ahhoz, hogy könnyedén mentsd munkáidat, ajánlott a saját példányod létrehozása ebből a tárházból. Ezt a felső sávban található **Use this template** gombra kattintva teheted meg. Ez egy új tárházat hoz létre GitHub fiókodban a tananyag másolatával.
Kövesd az alábbi lépéseket:
1. **Forkold a tárolót**: Kattints a lap jobb felső sarkában a „Fork” gombra.
2. **Klónozd a tárolót**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Forkold a tárházat**: Kattints a jobb felső sarokban található "Fork" gombra.
2. **Klónozd a tárházat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Tanmenet futtatása Codespace környezetben
#### A tananyag futtatása Codespace-ben
A saját tárolódban, amit létrehoztál, kattints a **Code** gombra, majd válaszd az **Open with Codespaces** opciót. Ez létrehoz egy új Codespace környezetet a munka számára.
A létrehozott saját példányodban kattints a **Code** gombra, és válaszd az **Open with Codespaces** lehetőséget. Ez létrehoz neked egy új Codespace-t a munkához.
#### A tananyag futtatása helyileg a számítógépeden
A tanmenet helyi futtatásához szükséged lesz egy szövegszerkesztőre, egy böngészőre és egy parancssori eszközre. Az első leckénk, a [Bevezetés a programozási nyelvekbe és a fejlesztői eszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages) bemutat különféle opciókat ezekre az eszközökre, hogy kiválaszthasd, melyik felel meg legjobban neked.
A helyi futtatáshoz szükséged lesz egy szövegszerkesztőre, egy böngészőre és parancssori eszközre. Első leckénk, az [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) segít kiválasztani az egyéni igényeidnek legmegfelelőbb eszközöket.
Ajánlásunk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használata szerkesztőként, mely beépített [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) is tartalmaz. A Visual Studio Code letölthető [innen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Javasoljuk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) szerkesztő használatát, mely beépített [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) is tartalmaz. A Visual Studio Code itt tölthető le: [itt](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klónozd a tárolót a gépedre. Ezt megteheted a **Code** gombra kattintva és a URL másolásával:
1. Klónozd le a saját példányod a számítógépedre. Ezt úgy teheted meg, hogy a **Code** gombra kattintasz és kimásolod az URL-t:
[CodeSpace](./images/createcodespace.png)
Ezután nyiss meg egy [Terminalt](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, az `<your-repository-url>` helyére a most másolt URL-t beillesztve:
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:
```bash
git clone <your-repository-url>
```
2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a **File** > **Open Folder** menüre kattintva teheted meg, majd válaszd ki a klónozott mappát.
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.
> Ajánlott Visual Studio Code kiterjesztések:
> Ajánlott Visual Studio Code bővítmények:
>
> * [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) - hogy gyorsabban írj 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éhez tartozik:
## 📂 Minden lecke tartalmaz:
- opcionális vázlatrajz
- opcionális kiegészítő videó
- előre a leckéhez tartozó ráhangoló kvíz
- írásos lecke
- projekt-alapú leckék esetén lépésről lépésre vezetett útmutató a projekt elkészítéséhez
> **Megjegyzés a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz, mindegyik három kérdésből áll. Elérhetőek [itt](https://ff-quizzes.netlify.app/web/), a kvíz alkalmazás helyileg futtatható vagy Telepíthető Azure-ra; kövesd a `quiz-app` mappában található utasításokat.
> **Megjegyzés a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz három kérdéssel. Elérhetőek [itt](https://ff-quizzes.netlify.app/web/), a kvízalkalmazás lokálisan is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a `quiz-app` mappában.
## 🗃️ Leckék
| | Projekt neve | Tanított fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző |
| | Projekt neve | Tanított fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző |
| 01 | Kezdés | Programozás alapjai és munkához használt eszközök | Megérteni a legtöbb programozási nyelv alapjait és a szoftvereket, amikkel a profi fejlesztők dolgoznak | [Programozási nyelvek és eszközök bevezetése](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kezdés | GitHub alapjai, csapatmunka | Hogyan használd a GitHub-ot a projektjeidhez, hogyan működj együtt másokkal egy kódalapon | [GitHub bevezető](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kezdés | Akadálymentesség | Alapok megismerése a webes akadálymentességből | [Akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS alapok | Függvények és metódusok | Megtanulni a függvényekről és metódusokról, amik egy alkalmazás logikáját kezelik | [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 | Megtanulni, hogyan hozz döntéseket a kódodban döntéshozatali metódusok segítségével | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS alapok | Tömbök és ciklusok | Adatkezelés tömbökkel és ciklusokkal JavaScriptben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML gyakorlatban | HTML felépítése egy online terráriumhoz, különös tekintettel az elrendezésre | [HTML bevezető](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS gyakorlatban | CSS készítése az online terrárium megjelenítéséhez, az alapoktól kezdve, beleértve az oldal reszponzívvá tételét | [CSS bevezető](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript zárványok, DOM kezelése | JavaScript írása a terrárium drag/drop működéséhez, fókuszálva a zárványokra és a DOM kezelésére | [JavaScript zárványok, DOM kezelés](./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és | Megtanulni, hogyan használj billentyűeseményeket a JavaScript alkalmazás logikájához | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zöld böngésző kiterjesztés](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Megismerni, hogyan működnek a böngészők, történetüket, és hogyan kezdj neki egy böngésző kiterjesztés első elemeinek megalkotásához | [Böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zöld böngésző kiterjesztés](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívás és változók helyi tárolása | JavaScript elemek elkészítése a böngésző kiterjesztéshez API hívásához helyi tárban tárolt változókkal | [API-k, űrlapok és helyi tárolás](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zöld böngésző kiterjesztés](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, webes teljesítmény | Használd a böngésző háttérfolyamatait a kiterjesztés ikon kezeléséhez; ismerkedj meg a web teljesítménnyel és néhány optimalizációval | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Űrjáték](./6-space-game/solution/README.md) | Fejlettebb játékfejlesztés JavaScript-tel | Megtanulni az öröklődést osztályokkal és kompozícióval, illetve a pub/sub mintát, felkészülve egy játék készítésére | [Bevezetés a fejlettebb játékfejlesztésbe](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás canvas-ra | Megismerni a Canvas API-t, amivel elemeket lehet megrajzolni a képernyőre | [Rajzolás canvas-ra](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Űrjáték](./6-space-game/solution/README.md) | Elem mozgatás a képernyőn | Felfedezni, hogyan kapnak mozgást az elemek kartézián koordináták és a Canvas API használatá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 | Elem-ütközések kezelése és reagálás egymásra billentyűleütések alapján, cooldown funkció biztosítása 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ámlálás | Matematikai műveletek elvégzése a játék állapota és teljesítménye alapján | [Pontszámlálás](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Űrjáték](./6-space-game/solution/README.md) | Játék befejezése és újraindítása | Megtanulni a játék befejezését és újraindítását, beleértve az erőforrások tisztítását és a változók visszaállítását | [A befejezési feltétel](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banki app](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak egy webalkalmazásban | Megtanulni többoldalas webhely architektúrájának felépítését routing és HTML sablonok használatával | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banki app](./7-bank-project/solution/README.md) | Bejelentkezési és regisztrációs űrlap készítése | Megtanulni az űrlapok építését és a validációs eljárásokat | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banki app](./7-bank-project/solution/README.md) | Adatok lekérése és használata | Hogyan áramlanak az adatok az app-ba és ki, hogyan lehet lekérni, tárolni és eltávolítani | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banki app](./7-bank-project/solution/README.md) | Állapotkezelés fogalmai | Megtanulni, hogyan tartja az app az állapotot és hogyan lehet programozottan kezelni | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | VScode használata | Megtanulni egy 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 | Megtanulni saját AI asszisztenst készíteni | [AI Asszisztens projekt](./9-chat-project/README.md) | Chris |
| 01 | Kezdés | Bevezetés a programozásba és a használt eszközökbe | Megtanulni a legtöbb programozási nyelv alapjait, valamint a szoftvereket, amelyek segítik a szakmai fejlesztők munkáját | [Bevezetés a programozási nyelvekbe és az eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kezdés | A GitHub alapjai, csoportos munkával kapcsolatosan | Hogyan használd a GitHubot a projektedben, hogyan működj együtt másokkal egy kódalapon | [Bevezetés a GitHubba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kezdés | Akadálymentesség | Megtanulni a webakadálymentesség alapjait | [Akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Alapok | Függvények és metódusok | Megtanulni a függvényekről és metódusokról, hogy hogyan kezeljük egy alkalmazás logikai folyamát | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher |
| 06 | JS Alapok | Döntéshozatal JS-sel | Megtanulni, hogyan hozzunk létre feltételeket a kódodban döntéshozatali módszerekkel | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Alapok | Tömbök és ciklusok | Adatok kezelése tömbök és ciklusok használatával JavaScript-ben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML gyakorlatban | HTML felépítése egy online terrárium létrehozásához, a jól tagolt elrendezé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 gyakorlatban | A terrárium stílusozása CSS-sel, beleértve az oldal reszponzívvá tételét | [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 manipuláció | JavaScript megírása a terrárium drag/drop működéséhez, fókuszban a lezárásokon (closures) és a DOM manipuláción | [JavaScript lezárások, 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 | Megtanulni, hogyan használjunk billentyűeseményeket az alkalmazás logikájához | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Megismerni a böngészők működését, történetét, és hogyan készítsünk egy böngészőbővítmény alapjait | [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) | Űrlapkészítés, API hívás és változók tárolása helyi tárhelyen | Megírni a böngészőbővítmény JavaScript elemeit API híváshoz és helyi tárolóban tárolt változók használatához | [API-k, űrlapok és helyi tároló](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, web teljesítmény | A böngésző háttérfolyamatait használni a kiterjesztés ikon kezelésére; megérteni a web teljesítményt és optimalizációkat végezni | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Űrhajós játék](./6-space-game/solution/README.md) | Fejlettebb játékfejlesztés JavaScript-tel | Megtanulni az öröklődést osztályokkal és komponálással, valamint a Pub/Sub mintát játékfejlesztéshez | [Bevezetés a fejlett játékfejlesztésbe](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Űrhajós játék](./6-space-game/solution/README.md) | Rajzolás a vászonra | Megismerni a Canvas API-t, amellyel elemek rajzolhatók a képernyőre | [Rajzolás a vászonra](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Űrhajós játék](./6-space-game/solution/README.md) | Mozgatás a képernyőn | Felfedezni, hogyan mozdulhatnak el elemek kartezián koordinátákkal és a Canvas API használatával | [Elemmozgatás](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Űrhajós játék](./6-space-game/solution/README.md) | Ütközés-észlelés | Elemei ütköztetni és reagáltatni a billentyűleütések alapján, és lehűlési funkcióval biztosítani a játék teljesítményét | [Ütközés-észlelés](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Űrhajós játék](./6-space-game/solution/README.md) | Pontszám vezetése | Számításokat végezni a játék állapota és teljesítménye alapján | [Pontszám vezetés](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Űrhajós játék](./6-space-game/solution/README.md) | Játék lezárása és újraindítása | Megtanulni a játék lezárását és újraindítását, beleértve az erőforrások tisztítását és változó értékek visszaállítását | [Lezárási feltétel](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak egy webalkalmazásban | Megtanulni, hogyan készítsünk többlapos weboldalak architektúráját útvonalkezeléssel és HTML sablonokkal | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan |
| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Adatok lekérése és felhasználása | Hogyan áramlanak az adatok az alkalmazásba és onnan ki, hogyan kérjük le, tároljuk és töröljük | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelési fogalmak | Megtanulni, hogyan tartja fenn az alkalmazás az állapotot és hogyan kezeljük 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 | Megtanulni egy kódszerkesztő használatát | [Használd a VScode Kodszerkesztőt](./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 | Megtanulni, hogyan építs saját AI asszisztenst | [Mesterséges intelligencia asszisztens projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagógia
Tananyagaink két kulcsfontosságú pedagógiai elv alapján készültek:
* projekt-alapú tanulás
Tananyagunk két fő pedagógiai alapelvet követ:
* projektalapú tanulás
* gyakori kvízek
A program JavaScript, HTML és CSS alapjait tanítja meg, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákoknak lehetőségük lesz gyakorlati tapasztalatot szerezni gépelős játék, virtuális terrárium, környezetbarát böngésző-kiterjesztés, űrtámadó stílusú játék és egy vállalati banki alkalmazás elkészítésével. A sorozat végére a diákok alapos webfejlesztési tudásra tesznek szert.
A program tanítja a JavaScript, HTML és CSS alapjait, valamint a legfrissebb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákok lehetőséget kapnak, hogy gyakorlatban is kipróbálják magukat: készíthetnek gépelős játékot, virtuális terráriumot, környezetbarát böngészőbővítményt, űrhajós-stílusú játékot és banki alkalmazást vállalkozások számára. A sorozat végére a hallgatók megalapozott ismereteket szereznek a webfejlesztésről.
> 🎓 Az első néhány 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!
> 🎓 Ezt a tananyagot az első néhány leckéjét veheted mint egy [Tanulási útvonalat](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) a Microsoft Learn-en!
A tartalom projektalapúsága révén a tanulási folyamat vonzóbbá válik, és az ismeretek mélyebb elsajátítását segíti elő. Írtunk néhány kezdeti leckét a JavaScript alapjairól, amelyek bevezetik az alapfogalmakat, egy videósorozattal kiegészítve a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videó-tutorial gyűjteményből, amelynek néhány szerzője hozzájárult ehhez a tananyaghoz.
Azáltal, hogy a tartalom projekt-alapú, a folyamat érdekesebb és a fogalmak megtartása is erősödik. Több bevezető leckét is írtunk JavaScript alapismeretek témakörében, amelyek egy videósorozattal vannak párosítva a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" oktatóanyagai közül, melyek szerzői közül néhányan közreműködtek ebben a tananyagban.
Ezen túlmenően, egy alacsony tétű kvíz az óra előtt beállítja a diák tanulási szándékát egy témára, míg a második kvíz az óra után elősegíti a mélyebb rögzítést. Ez a tananyag rugalmas és szórakoztató, teljes egészében vagy részleteiben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbek lesznek.
Ezen túl egy alacsony téttel bíró kvíz az óra előtt beállítja a hallgató szándékát a tanulásra, míg a második kvíz óra után segít a tanultak megtartásában. Ez a tananyag rugalmas és szórakoztató, egészben vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbé válnak.
Noha szándékosan elkerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztői alapkompetenciákra koncentráljunk mielőtt egy keretrendszer megismerésére térnénk, a tananyag befejezése után jó következő lépés lehet Node.js megtanulása egy másik videó-sorozaton keresztül: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a fejlesztői alapokat erősítsük a keretrendszer használata előtt, egy jó következő lépés lehet a Node.js elsajátítása egy másik videósorozat segítségével: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Látogasd meg alapelveinket a [Viselkedési kódexünk](CODE_OF_CONDUCT.md) és [Közreműködési irányelveink](CONTRIBUTING.md) oldalakon. Várjuk építő jellegű visszajelzéseidet!
> Látogasd meg a mi [Magatartási kódexünket](CODE_OF_CONDUCT.md) és [Hozzájárulás](CONTRIBUTING.md) irányelveinket. Várjuk az építő jellegű visszajelzésed!
## 🧭 Offline hozzáférés
A dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) segítségével. Forkold ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépedre, majd ennek a repónak a gyökérmappájában írd be: `docsify serve`. A weboldal a 3000-es porton lesz elérhető a localhostodon: `localhost:3000`.
Ez a dokumentáció offline is futtatható a [Docsify](https://docsify.js.org/#/) használatával. Fork-old ezt a tárhelyet, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a saját gépedre, majd a repo gyökérmappájában írd be: `docsify serve`. A weboldal a localhoston a 3000-es porton fog futni: `localhost:3000`.
## 📘 PDF
Az összes lecke PDF formátumban megtalálható [itt](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Az összes leckéről PDF található [itt](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Egyéb tanfolyamok
Csapatunk más kurzusokat is készít! Nézd meg:
Csapatunk más tanfolyamokat is készít! Nézd meg:
<!-- 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/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)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-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)
---
### Alap tanulás
[](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://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)
Ha elakadsz vagy bármilyen kérdésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz tanulótársaidhoz é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ések szívesen látottak, és a tudás szabadon megosztott.
Ha elakadsz vagy kérdéseid vannak 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ések szívesen fogadottak és a tudás szabadon megosztott.
Ez a tároló 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. További információért lásd a [LICENSE](../../LICENSE) fájlt.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Jogi nyilatkozat**:
Ez a dokumentum az AI fordító szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) használatával készült. Bár igyekszünk pontos fordítást nyújtani, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Fontos 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 hibás értelmezésekért.
**Nyilatkozat**:
Ez a dokumentum a [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordító szolgáltatás segítségével készült. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén ajánlott szakmai emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért.
Toto je vzdelávací repozitár určený na výučbu základov webového vývoja pre začiatočníkov. Kurikulum je komplexný 12-týždňový kurz vyvinutý tímom Microsoft Cloud Advocates, ktorý obsahuje 24 praktických lekcií zameraných na JavaScript, CSS a HTML.
Toto je repozitár vzdelávacieho kurikula na výučbu základov webového vývoja pre začiatočníkov. Kurikulum je komplexný 12-týždňový kurz vyvinutý Microsoft Cloud Advocates, obsahujúci 24 praktických lekcií pokrývajúcich JavaScript, CSS a HTML.
### Kľúčové komponenty
- **Vzdelávací obsah**: 24 štruktúrovaných lekcií organizovaných do modulov založených na projektoch
- **Praktické projekty**: Terárium, Hra na písanie, Rozšírenie prehliadača, Hra vo vesmíre, Banková aplikácia, Editor kódu a AI chatovací asistent
- **Interaktívne kvízy**: 48 kvízov, každý s 3 otázkami (pred/po lekcii)
- **Podpora viacerých jazykov**: Automatizované preklady do viac ako 50 jazykov pomocou GitHub Actions
- **Vzdelávací obsah**: 24 štruktúrovaných lekcií usporiadaných do modulov založených na projektoch
- **Praktické projekty**: Terrárium, Hra na písanie, Rozšírenie prehliadača, Hra vo vesmíre, Banková aplikácia, Editor kódu a AI Chat asistent
- **Interaktívne kvízy**: 48 kvízov s 3 otázkami každý (pred a po lekcii)
- **Podpora viacerých jazykov**: Automatizované preklady do 50+ jazykov pomocou GitHub Actions
- [Študentské zdroje Hub](https://docs.microsoft.com/learn/student-hub/)
- [Študentské centrum zdrojov](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) odporúčaný pre študentov
- Ďalšie kurzy: Generatívna AI, Data Science, ML, IoT kurikulum dostupné
- Ďalšie kurzy: Generatívna AI, Data Science, ML, IoT kurikula dostupné
### Práca s konkrétnymi projektmi
Pre podrobné pokyny k jednotlivým projektom si pozrite README súbory v:
- `quiz-app/README.md` - Aplikácia kvízov Vue 3
Podrobné inštrukcie pre jednotlivé projekty nájdete v README súboroch:
- `quiz-app/README.md` - Vue 3 quiz aplikácia
- `7-bank-project/README.md` - Banková aplikácia s autentifikáciou
- `5-browser-extension/README.md` - Vývoj rozšírenia prehliadača
- `6-space-game/README.md` - Vývoj hry na plátne
- `9-chat-project/README.md` - Projekt AI chatovacieho asistenta
- `6-space-game/README.md` - Vývoj hry na canvas
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Štruktúra monorepo
### Štruktúra monorepa
Aj keď nejde o tradičné monorepo, tento repozitár obsahuje viacero nezávislých projektov:
Aj keď to nie je tradičné monorepo, tento repozitár obsahuje niekoľko nezávislých projektov:
- Každá lekcia je samostatná
- Projekty nezdieľajú závislosti
- Práca na jednotlivých projektoch bez ovplyvnenia ostatných
- Naklonujte celý repozitár pre kompletný zážitok z kurikula
- Projekty nesdielajú závislosti
- Pracujte na jednotlivých projektoch bez vplyvu na ostatné
- Naklonujte celý repozitár pre kompletný zážitok kurikula
---
**Upozornenie**:
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vylúčenie zodpovednosti**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, vezmite prosím na vedomie, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie, ktoré môžu vzniknúť použitím tohto prekladu.
Naučte sa základy webového vývoja s naším 12-týždňovým komplexným kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa venuje JavaScriptu, CSS a HTML prostredníctvom praktických projektov, ako sú teráriá, rozšírenia prehliadača a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si uchovávanie informácií pomocou našej efektívnej projektovej metodiky. Začnite svoju cestu kódovania ešte dnes!
Naučte sa základy webového vývoja s naším 12-týždňovým komplexným kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa hlboko venuje JavaScriptu, CSS a HTML prostredníctvom praktických projektov ako teráriá, prehliadačové rozšírenia a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje schopnosti a optimalizujte si uchovávanie vedomostí pomocou našej efektívnej projektovo orientovanej pedagogiky. Začnite svoju cestu kódovania ešte dnes!
Pripojte sa ku komunite Azure AI Foundry na Discorde
Postupujte podľa týchto krokov, aby ste mohli začať využívať tieto zdroje:
1. **Vytvorte si fork repozitára**: Kliknite na [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Tento repozitár obsahuje viac ako 50 jazykových prekladov, čo výrazne zvyšuje veľkosť stiahnutia. Ak chcete klonovať bez prekladov, použite sparse checkout:
> Tento repozitár obsahuje viac ako 50 jazykových prekladov, čo výrazne zväčšuje veľkosť stiahnutia. Ak chcete klonovať bez prekladov, použite sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Toto vám poskytne všetko potrebné na dokončenie kurzu s rýchlejším sťahovaním.
> To vám poskytne všetko, čo potrebujete na dokončenie kurzu s oveľa rýchlejším sťahovaním.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ak si prajete podporu ďalších jazykov, podporované jazyky sú uvedené [tu](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ak chcete mať podporu ďalších jazykových prekladov, sú podporované jazyky uvedené [tu](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)
#### 🧑🎓 _Ste študent?_
Navštívte [**stránku Študentské centrum**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca aj spôsoby, ako získať voucher na bezplatný certifikát. Toto je stránka, ktorú chcete uložiť medzi záložky a občas ju skontrolovať, pretože obsah sa mesačne aktualizuje.
Navštívte [** stránku Študentského centra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca možnosti, ako získať bezplatný poukaz na certifikát. Toto je stránka, ktorú chcete mať uloženú a pravidelne kontrolovať, pretože obsah meníme mesačne.
### 📣 Oznámenie – Nové výzvy režimu GitHub Copilot Agent na dokončenie!
### 📣 Oznámenie - Nové výzvy režimu GitHub Copilot Agent na dokončenie!
Pridaná nová výzva, hľadajte "GitHub Copilot Agent Challenge 🚀" v väčšine kapitol. Je to nová výzva na dokončenie pomocou GitHub Copilot a Agent režimu. Ak ste režim Agent ešte nepoužili, umožňuje nielen generovať text, ale tiež vytvárať a upravovať súbory, spúšťať príkazy a viac.
Pridaná nová výzva, hľadajte "GitHub Copilot Agent Challenge 🚀" v väčšine kapitol. Je to nová výzva, ktorú môžete dokončiť pomocou GitHub Copilot a režimu Agent. Ak ste ešte režim Agent nepoužili, dokáže nielen generovať text, ale tiež vytvárať a upravovať súbory, spúšťať príkazy a viac.
### 📣 Oznámenie – _Nový projekt na vývoj pomocou Generatívnej AI_
### 📣 Oznámenie - _Nový projekt na vytvorenie pomocou generatívnej umelej inteligencie_
Práve pridaný nový projekt AI asistenta, pozrite si [projekt](./9-chat-project/README.md)
Práve pridaný nový AI asistent projekt, pozrite si [projekt](./9-chat-project/README.md)
### 📣 Oznámenie –_Nové kurikulum_ o Generatívnej AI pre JavaScript bolo práve vydané
### 📣 Oznámenie - _Nový učebný plán_ o generatívnej umelej inteligencii pre JavaScript práve vydaný
Nezmeškajte naše nové kurikulum o Generatívnej AI!
Nezmeškajte náš nový učebný plán o generatívnej umelej inteligencii!
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
> **Učitelia**, poskytli sme [niekoľko návrhov](for-teachers.md), ako používať toto kurikulum. Radi vám poskytneme spätnú väzbu [v našom diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Učitelia**, zahrnuli sme [niekoľko návrhov](for-teachers.md), ako tento učebný plán používať. Radi si vypočujeme vaše názory [v našom diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Študenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pri každej lekcii začnite prednáškovým kvízom a pokračujte čítaním prednáškového materiálu, dokončovaním rôznych aktivít a overte si pochopenie pomocou kvízu po prednáške.
**[Učiaci sa](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pre každú lekciu začnite s kvízom pred prednáškou a pokračujte čítaním výučbového materiálu, plnením rôznych aktivít a otestujte svoje pochopenie kvízom po prednáške.
Pre lepší zážitok z učenia sa spojte so svojimi rovesníkmi a pracujte na projektoch spoločne! Diskusie povzbudzujeme v našom [diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde vám náš tím moderátorov bude k dispozícii na zodpovedanie otázok.
Aby ste zlepšili svoj zážitok z učenia, spojte sa so svojimi rovesníkmi a pracujte spoločne na projektoch! Diskusie sú vítané v našom [diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je k dispozícii náš tím moderátorov na zodpovedanie vašich otázok.
Na ďalšie vzdelávanie dôrazne odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre doplnkové študijné materiály.
Pre ďalšie vzdelávanie dôrazne odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre doplnkové študijné materiály.
### 📋 Nastavenie vášho prostredia
### 📋 Nastavenie prostredia
Toto kurikulum má pripravené vývojové prostredie! Keď začnete, môžete si vybrať spustenie kurikula v [Codespace](https://github.com/features/codespaces/) (_prostredie v prehliadači bez nutnosti inštalácie_) alebo lokálne na vašom počítači pomocou textového editora ako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tento učebný plán má pripravené vývojové prostredie! Na začiatok si môžete vybrať spustenie kurzu v [Codespace](https://github.com/features/codespaces/) (_prostredie založené na prehliadači bez potreby inštalácie_), alebo lokálne na vašom počítači pomocou textového editora ako [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Vytvorte si svoj repozitár
Aby ste si mohli jednoducho ukladať svoju prácu, odporúča sa vytvoriť si vlastnú kópiu tohto repozitára. Môžete to urobiť kliknutím na tlačidlo **Use this template** v hornej časti stránky. Týmto sa vytvorí nový repozitár vo vašom GitHub účte s kópiou kurikula.
Pre jednoduché uloženie svojej práce sa odporúča vytvoriť si vlastnú kópiu tohto repozitára. Môžete tak urobiť kliknutím na tlačidlo **Použiť ako šablónu** v hornej časti stránky. Tým sa vytvorí nový repozitár vo vašom GitHub účte s kópiou učebného plánu.
Postupujte podľa týchto krokov:
1. **Vytvorte fork repozitára**: Kliknite na tlačidlo „Fork“ v pravom hornom rohu tejto stránky.
Vo vašej kópii repozitára, ktorú ste vytvorili, kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Týmto sa vytvorí nový Codespace, v ktorom môžete pracovať.
Vo vašej kópii repozitára, ktorú ste vytvorili, kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Tým sa vytvorí nový Codespace, v ktorom môžete pracovať.
#### Spustenie učebného plánu lokálne na vašom počítači
Na lokálne spustenie kurikula budete potrebovať textový editor, prehliadač a príkazový riadok. Naša prvá lekcia, [Úvod do programovacích jazykov a nástrojov](../../1-getting-started-lessons/1-intro-to-programming-languages), vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si mohli vybrať to, čo vám najviac vyhovuje.
Na spustenie tohto učebného plánu lokálne na vašom počítači budete potrebovať textový editor, prehliadač a terminálový nástroj. Naša prvá lekcia, [Úvod do programovacích jazykov a nástrojov remesla](../../1-getting-started-lessons/1-intro-to-programming-languages), vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si mohli vybrať, čo najlepšie vyhovuje vám.
Odporúčame použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý má aj zabudovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code môžete stiahnuť [tu](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Naše odporúčanie je použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý má tiež vstavaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si môžete stiahnuť [tu](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Naklonujte si repozitár do vášho počítača. Môžete to urobiť kliknutím na tlačidlo **Code** a skopírovaním URL:
1. Naklonujte svoj repozitár do počítača. Môžete tak urobiť kliknutím na tlačidlo **Code** a skopírovaním URL:
[CodeSpace](./images/createcodespace.png)
Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) vo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spustite nasledujúci príkaz, pričom `<your-repository-url>` nahraďte URL, ktorú ste práve skopírovali:
Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) vo vnútri [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spustite nasledujúci príkaz, pričom `<your-repository-url>` nahraďte URL adresou, ktorú ste práve skopírovali:
```bash
git clone <your-repository-url>
```
2. Otvorte priečinok vo Visual Studio Code. Urobíte to kliknutím na **Súbor** > **Otvoriť priečinok** a výberom priečinka, ktorý ste práve sklonovali.
2. Otvorte priečinok vo Visual Studio Code. Môžete to urobiť kliknutím na **Súbor** > **Otvoriť priečinok** a vybrať priečinok, ktorý ste práve klonovali.
> Odporúčané rozšírenia Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pre náhľad HTML stránok priamo vo Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pre pomoc pri rýchlejšom písaní kódu
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - na náhľad HTML stránok vo Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - na pomoc pri rýchlejšom písaní kódu
## 📂 Každá lekcia obsahuje:
- voliteľnú sketchnotu
- voliteľné doplnkové video
- kvíz pred lekciou na rozcvičenie
- rozcvičku pred lekciou
- písanú lekciu
- pri lekciách založených na projektoch, krok za krokom návody ako projekt vytvoriť
- overenie vedomostí
- pre projektové lekcie, krok za krokom návody, ako projekt postaviť
- kontroly vedomostí
- výzvu
- doplnkové čítanie
- zadanie úlohy
- [kvíz po lekcii](https://ff-quizzes.netlify.app/web/)
> **Poznámka kkvízom**: Všetky kvízy sú uložené v priečinku Quiz-app, celkovo 48 kvízov s tromi otázkami v každom. Sú dostupné [tu](https://ff-quizzes.netlify.app/web/), aplikáciu kvízov môžete spustiť lokálne alebo nasadiť do Azure; postupujte podľa pokynov v priečinku `quiz-app`.
> **Poznámka kkvízam**: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkom 48 kvízov so 3 otázkami. Sú dostupné [tu](https://ff-quizzes.netlify.app/web/), kvízovú aplikáciu je možné spustiť lokálne alebo nasadiť na Azure; riaďte sa inštrukciami v priečinku `quiz-app`.
## 🗃️ Lekcie
| | Názov projektu | Výučbové koncepty | Výučbové ciele | Prepojená lekcia | Autor |
| 01 | Začíname | Úvod do programovania a nástroje remesla | Naučiť sa základné princípy väčšiny programovacích jazykov a o softvéri, ktorý pomáha profesionálnym vývojárom v ich práci | [Úvod do programovacích jazykov a nástrojov remesla](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začíname | Základy GitHub, vrátane práce v tíme | Ako používať GitHub vo svojom projekte, ako spolupracovať s ostatnými na zdrojovom kóde | [Úvod do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začíname | Prístupnosť | Naučiť sa základy webovej prístupnosti | [Základy prístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Dátové typy JavaScriptu | Základy dátových typov v JavaScripte | [Dátové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkcie a metódy | Naučiť sa o funkciách a metódach na riadenie logiky aplikácie | [Funkcie a metódy](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Rozhodovanie v JS | Naučiť sa vytvárať podmienky v kóde pomocou rozhodovacích metód | [Rozhodovanie](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Polia a cykly | Pracovať s dátami pomocou polí a cyklov v JavaScripte | [Polia a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terárium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvoriť HTML pre online terárium, so zameraním na tvorbu rozloženia | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terárium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvoriť CSS na štýlovanie online terária, so zameraním na základy CSS vrátane responzívneho dizajnu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terárium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulácia s DOM | Vytvoriť JavaScript pre funkciu terária ako drag &drop rozhranie, so zameraním na closures a manipuláciu s DOM | [JavaScript Closures, manipulácia s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra na písanie](./4-typing-game/solution/README.md) | Vytvoriť hru na písanie | Naučiť sa používať klávesové udalosti na riadenie logiky JavaScript aplikácie | [Programovanie riadené udalosťami](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Práca s prehliadačmi | Naučiť sa ako prehliadače fungujú, ich históriu a ako vytvoriť prvé prvky rozšírenia prehliadača | [O prehliadačoch](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Vytváranie formulára, volanie API a ukladanie premenných do lokálneho úložiska | Vytvoriť JavaScriptové prvky vášho rozšírenia prehliadača na volanie API pomocou premenných uložených v lokálnom úložisku | [API, formuláre a lokálne úložisko](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Procesy na pozadí v prehliadači, webový výkon | Použiť procesy na pozadí pre správu ikony rozšírenia; naučiť sa o webovom výkone a optimalizáciách | [Úlohy na pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Pokročilejší vývoj hier v JavaScripte | Naučiť sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, príprava na tvorbu hry | [Úvod do pokročilého vývoja hier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Kreslenie na plátno | Naučiť sa o Canvas API, ktoré sa používa na kreslenie prvkov na obrazovku | [Kreslenie na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Pohyb prvkov po obrazovke | Objaviť, ako prvky môžu získať pohyb pomocou kartézskych súradníc a Canvas API | [Pohyb prvkov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Detekcia kolízií | Spraviť, aby sa prvky zrazili a reagovali navzájom pri stláčaní klávesov, zabezpečiť cooldown funkciu pre výkon hry | [Detekcia kolízií](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Skladanie bodov | Vykonávať matematické výpočty na základe stavu a výkonu hry | [Skladanie bodov](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Ukončenie a reštart hry | Naučiť sa, ako hru ukončiť a reštartovať, vrátane čistenia zdrojov a resetovania hodnôt premenných | [Podmienka ukončenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banková aplikácia](./7-bank-project/solution/README.md) | HTML šablóny a routy vo webovej aplikácii | Naučiť sa vytvoriť kostru architektúry multipage webu pomocou routovania a HTML šablón | [HTML šablóny a routy](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banková aplikácia](./7-bank-project/solution/README.md) | Vytvorenie prihlasovacieho a registračného formulára | Naučiť sa o tvorbe formulárov a riešení validácie | [Formuláre](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banková aplikácia](./7-bank-project/solution/README.md) | Spôsoby získavania a používania dát | Ako dáta prichádzajú do aplikácie a odchádzajú z nej, ako ich získavať, ukladať a likvidovať | [Dáta](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banková aplikácia](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučiť sa, ako si aplikácia udržiava stav a ako ho programovo spravovať | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kód prehliadača/VScode](../../8-code-editor) | Práca s VScode | Naučiť sa používať kódový editor| [Používanie VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práca s AI | Naučiť sa vytvoriť vlastného AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagógia
Náš učebný plán je navrhnutý s dvoma kľúčovými pedagogickými princípmi:
| | Názov projektu | Výučbové koncepty | Výučbové ciele | Prepojená lekcia | Autor |
| 01 | Začíname | Úvod do programovania a pracovné nástroje | Naučiť sa základné koncepcie väčšiny programovacích jazykov a o softvéri, ktorý pomáha profesionálnym vývojárom plniť ich úlohy | [Úvod do programovacích jazykov a pracovných nástrojov](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začíname | Základy GitHubu, zahŕňa spoluprácu v tíme | Ako používať GitHub vo vašom projekte, ako spolupracovať na kóde | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začíname | Prístupnosť | Naučiť sa základy prístupnosti webu | [Základy prístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Dátové typy v JavaScripte | Základy dátových typov v JavaScripte | [Dátové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkcie a metódy | Naučiť sa o funkciách a metódach na riadenie logiky aplikácie | [Funkcie a metódy](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Tvorba rozhodnutí s JS | Naučiť sa vytvárať podmienky v kóde pomocou rozhodovacích metód | [Tvorba rozhodnutí](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Polia a cykly | Práca s dátami pomocou polí a cyklov v JavaScripte | [Polia a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvorte HTML pre online terárium so zameraním na tvorbu rozloženia | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvorte CSS na štýlovanie online terária, so zameraním na základy CSS vrátane responzívnosti stránky | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulácia s DOM | Vytvorte JavaScript, aby terárium fungovalo ako drag/drop rozhranie, so zameraním na closures a manipuláciu s DOM | [JavaScript Closures, manipulácia s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra na písanie](./4-typing-game/solution/README.md) | Vytváranie hry na písanie | Naučiť sa používať klávesové udalosti na riadenie logiky v JavaScript aplikácii | [Programovanie riadené udalosťami](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Práca s prehliadačmi | Naučiť sa, ako fungujú prehliadače, ich história a ako vytvoriť základné elementy rozšírenia prehliadača | [O prehliadačoch](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Tvorba formulára, volanie API a ukladanie premenných do lokálneho úložiska| Vytvorte JavaScriptové prvky rozšírenia prehliadača na volanie API s použitím premenných uložených v lokálnom úložisku | [API, formuláre a lokálne úložisko](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Pozadie procesov v prehliadači, webový výkon | Použite pozadie procesov premeniť ikonu rozšírenia; naučte sa o webovom výkone a optimalizáciách, ktoré ho zlepšujú | [Pozadie úloh a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra v priestore](./6-space-game/solution/README.md) | Pokročilejšie vývoj hier v JavaScripte | Naučiť sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub ako príprava na tvorbu hry | [Úvod do pokročilého vývoja hier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Hra v priestore](./6-space-game/solution/README.md) | Kreslenie na plátno | Naučiť sa o Canvas API, používanom na kreslenie elementov na obrazovku | [Kreslenie na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra v priestore](./6-space-game/solution/README.md) | Pohyb elementov na obrazovke | Objasnenie, ako získať pohyb elementov pomocou karteziánskych súradníc a Canvas API | [Pohyb elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra v priestore](./6-space-game/solution/README.md) | Detekcia kolízií | Umožniť kolízie elementov a ich reakcie na seba pomocou stlačenia kláves, poskytnúť cooldown funkciu pre zabezpečenie výkonu hry | [Detekcia kolízií](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra v priestore](./6-space-game/solution/README.md) | Udržiavanie skóre | Vykonávať matematické výpočty na základe stavu a výkonu hry | [Udržiavanie skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra v priestore](./6-space-game/solution/README.md) | Ukončenie a reštartovanie hry | Naučiť sa ukončiť a reštartovať hru vrátane čistenia zdrojov a resetovania premenných | [Podmienka ukončenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banková appka](./7-bank-project/solution/README.md) | HTML šablóny a routovanie vo webovej aplikácii | Naučiť sa vytvoriť kostru viacstránkovej webovej architektúry pomocou routovania a HTML šablón | [HTML šablóny a routovanie](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banková appka](./7-bank-project/solution/README.md) | Vytváranie prihlasovacieho a registračného formulára | Naučiť sa tvoriť formuláre a spracovávať validačné rutiny | [Formuláre](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banková appka](./7-bank-project/solution/README.md) | Metódy získavania a používania dát | Ako údaje prichádzajú do aplikácie a odchádzajú z nej, ako ich načítať, ukladať a likvidovať | [Dáta](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banková appka](./7-bank-project/solution/README.md)| Koncepty správy stavu | Naučiť sa, ako si aplikácia uchováva stav a ako ho programovo spravovať | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Kód](../../8-code-editor) | Práca s VScode | Naučte sa používať kódový editor| [Použitie VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práca s AI | Naučte sa vytvoriť vlastného AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Náš učebný plán je navrhnutý so zreteľom na dva kľúčové pedagogické princípy:
* učenie založené na projektoch
* časté kvízy
Program vyučuje základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky používané dnešnými webovými vývojármi. Študenti budú mať príležitosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terária, ekologicky priateľského rozšírenia prehliadača, hry vo vesmírnom štýle a bankovej aplikácie pre firmy. Na konci série budú mať študenti pevné pochopenie webového vývoja.
Program vyučuje základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky používané dnešnými webovými vývojármi. Študenti budú mať príležitosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terária, ekologického rozšírenia prehliadača, hry typu space invader a bankovej aplikácie pre podniky. Na konci série budú študenti nadobudnúť pevné základy webového vývoja.
> 🎓 Prvé lekcie v tomto kurikule si môžete zobrať ako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Môžete absolvovať prvé niekoľko lekcií tohto učebného plánu ako [učebnú cestu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Zabezpečením, že obsah je zosúladený s projektmi, sa proces pre študentov stáva zábavnejším a zlepšuje sa zapamätateľnosť konceptov. Tiež sme napísali niekoľko úvodných lekcií v základoch JavaScriptu, ktoré predstavujú koncepty, spolu s videom z kolekcie „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“, ktorého niektorí autori prispeli do tohto kurikula.
Zabezpečením, že obsah korešponduje s projektmi, sa proces stáva pre študentov atraktívnejší a zlepšuje sa udržiavanie poznatkov. Tiež sme napísali niekoľko úvodných lekcií v základoch JavaScriptu na predstavenie konceptov, spárovaných s videom zo série "[Séria pre začiatočníkov: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ktorej niektorí autori prispeli k tomuto učebnému plánu.
Okrem toho, nízko náročný kvíz pred triedou nastavuje študentovi cieľ naučiť sa danú tému, zatiaľ čo druhý kvíz po hodine zabezpečuje ďalšie upevnenie vedomostí. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný a môžete ho absolvovať celý alebo čiastočne. Projekty začínajú jednoduché a postupne sa stávajú zložitejšími počas 12-týždňového cyklu.
Okrem toho nízko nárokový kvíz pred triedou nastaví študentovi zámer k učeniu, zatiaľ čo druhý kvíz po triede zabezpečuje ďalšie upevnenie poznatkov. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný a môže byť absolvovaný celý alebo čiastočne. Projekty začínajú malé a do konca 12-týždňového cyklu sa stávajú čoraz komplexnejšími.
Hoci sme zámerne vynechali zavádzanie JavaScript frameworkov, aby sme sa sústredili na základné zručnosti potrebné pre webového vývojára pred prijatím frameworku, ďalším dobrým krokom po dokončení tohto kurikula je naučiť sa o Node.js cez inú kolekciu videí: „[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“.
Zatiaľ čo sme účelovo vynechali zavedenie JavaScript frameworkov, aby sme sa sústredili na základné zručnosti potrebné vývojárovi webu pred použitím frameworku, ďalším dobrým krokom po dokončení tohto učebného plánu by bolo naučiť sa o Node.js prostredníctvom ďalšej kolekcie videí: "[Séria pre začiatočníkov: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Navštívte náš [Kódex správania](CODE_OF_CONDUCT.md) a [Príspevky](CONTRIBUTING.md). Radi prijímame vaše konštruktívne pripomienky!
> Navštívte naše [Pravidlá správania](CODE_OF_CONDUCT.md) a [Prispievanie](CONTRIBUTING.md). Vaša konštruktívna spätná väzba je vítaná!
## 🧭 Prístup offline
Túto dokumentáciu môžete používať offline pomocou [Docsify](https://docsify.js.org/#/). Forknite tento repozitár, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na svoj lokálny počítač a potom v koreňovom priečinku tohto repozitára zadajte príkaz `docsify serve`. Webstránka bude dostupná na porte 3000 na localhoste: `localhost:3000`.
Túto dokumentáciu môžete spustiť offline pomocou [Docsify](https://docsify.js.org/#/). Forknite tento repozitár, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na lokálny počítač a potom v koreňovom priečinku tohto repozitára napíšte `docsify serve`. Webstránka sa bude servovať na porte 3000 na vašom localhoste: `localhost:3000`.
## 📘 PDF
PDF všetkých lekcií nájdete [tu](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF s všetkými lekciami nájdete [tu](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Ďalšie kurzy
Náš tím vytvára aj ďalšie kurzy! Pozrite si:
## 🎒 Iné kurzy
Náš tím vytvára aj ďalšie kurzy! Pozrite sa:
<!-- 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://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 / 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)
[](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ívna AI séria
[](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)
### Séria Generatívnej 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)
---
### Základné učenie
[](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://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 séria
[](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)
Ak sa zaseknete alebo máte otázky o tvorbe AI aplikácií. Pridajte sa k ostatným študentom a skúseným vývojárom v diskusiách o MCP. Je to podporná komunita, kde sú otázky vítané a znalosti sa slobodne zdieľajú.
Ak sa zaseknete alebo máte otázky o tvorbe AI aplikácií. Pridajte sa k ostatným študentom a skúseným vývojárom v diskusiách o MCP. Je to podporná komunita, kde sú otázky vítané a poznatky sa zdieľajú slobodne.
@ -266,6 +266,6 @@ Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Upozornenie**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.
**Zrieknutie sa zodpovednosti**:
Tento dokument bol preložený pomocou AI prekladovej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, majte prosím na pamäti, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.
localizeflow[bot]
4 months ago