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ář učebního plánu pro výuku základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML.
### Klíčové komponenty
- **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**: Terrarium, Hra na psaní, Rozšíření prohlížeče, Kosmická hra, Bankovní aplikace, Kódovací editor a AI chat asistent
- **Interaktivní kvízy**: 48 kvízů po 3 otázkách (před a po lekci)
- **Podpora vícejazyčnosti**: Automatizované překlady do více než 50 jazyků přes GitHub Actions
- [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 kvízová aplikace
- `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 Canvas
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura monorepo
### Struktura Monorepo
I když nejde o tradiční monorepo, toto úložiště obsahuje několik nezávislých projektů:
Ačkoliv nejde 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
- Projekty nesdílí závislosti
- Pracujte na jednotlivých projektech bez ovlivnění ostatních
- Naklonujte celý repozitář pro plný 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 vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí služby automatického překladu [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. U kritických informací se doporučuje využít profesionální lidský překlad. Nejsme odpovědní za jakákoli nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
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 v našem 12týdenním komplexním kurzu od Microsoft Cloud Advocates. Každá z 24 lekcí se věnuje JavaScriptu, CSS a HTML prostřednictvím praktických projektů jako jsou terária, rozšíření prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si uchování znalostí s naší efektivní projektově orientovanou výukou. Začněte svou cestu s kódováním ještě dnes!
Připojte se ke komunitě Azure AI Foundry na Discordu
Přidejte se do komunity 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ář zahrnuje více než 50 překladů jazyků, což výrazně zvětšuje velikost stažených dat. Pro klonování bez překladů použijte sparse checkout:
> 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.
> To vám poskytne vše potřebné ke zdárnému dokončení kurzu a výrazně rychlejší stažení.
<!-- 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)**
**Pokud si přejete, aby byly podporovány další překladové jazyky, jsou uvedeny [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jste student?_
Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete 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 [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete začátečnické zdroje, studentské balíčky a dokonce způsoby, jak získat voucher na bezplatný certifikát. Tuto stránku si doporučujeme přidat do záložek a čas od času ji navštívit, protože obsah měníme měsíčně.
### 📣 Oznámení - Nové výzvy v režimu GitHub Copilot Agent k dokončení!
### 📣 Oznámení - Nové výzvy GitHub Copilot Agent mode 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ší.
Nová výzva přidána, hledejte „GitHub Copilot Agent Challenge 🚀“ ve většině kapitol. Je to nová výzva, kterou můžete dokončit pomocí GitHub Copilota a režimu Agent. Pokud jste režim Agent předtím nepoužívali, dokáže nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.
### 📣 Oznámení - _Nový projekt ke stavbě pomocí generativní AI_
### 📣 Oznámení - _Nový projekt k postavení pomocí Generativní AI_
Právě přidán nový projekt AI asistenta, podívejte se [projekt](./9-chat-project/README.md)
Nový projekt AI asistenta právě přidán, podívejte se na [projekt](./9-chat-project/README.md)
### 📣 Oznámení - _Nové kurikulum_ o generativní AI pro JavaScript bylo právě vydáno
### 📣 Oznámení - _Nové kurikulum_ o Generativní AI pro JavaScript právě vydáno
Nezmeškejte naše nové kurikulum generativní AI!
Nezapomeňte na naše nové kurikulum Generativní AI!
Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte!
Každá lekce 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 zahrnuje úkol k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako:
- Promptování a prompt engineering
- 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é**, zahrnuli jsme [několik návrhů](for-teachers.md) jak toto kurikulum používat. Budeme rádi za vaši zpětnou vazbu [v našem diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[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.
**[Studující](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte přednáškovým kvízem a pokračujte čtením materiálu přednášky, plněním různých aktivit a ověřte si pochopení pomocí kvízu po přednášce.
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ší studijní zážitek se spojte se svými spolužáky a pracujte na projektech společně! Diskuze jsou vítané v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je náš tým moderátorů připraven odpovědět na vaše dotazy.
Pro 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.
### 📋 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).
Toto kurikulum má připravené vývojové prostředí! Jakmile začnete, můžete si vybrat spouštět kurikulum v [Codespace](https://github.com/features/codespaces/) (_prostředí v prohlížeči bez potřeby instalace_), nebo lokálně na vašem počítači pomocí textového editoru jako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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 repozitář
Pro snadné ukládání své práce je doporučeno vytvořit si vlastní kopii tohoto repozitáře. To můžete udělat kliknutím na tlačítko **Use this template** v horní části stránky. Tím vznikne nový repozitář ve vašem GitHub účtu s kopií kurikula.
Postupujte takto:
1. **Forkujte repozitář**: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
1. **Vytvořte fork repozitáře**: Klikněte na tlačítko „Fork“ v pravém horním rohu této stránky.
Ve vaší kopii 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 vaší kopii repozitáře, kterou jste vytvořili, klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se pro vás vytvoří nový Codespace, ve kterém můžete pracovat.
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.
Pro spuštění kurikula lokálně budete potřebovat textový editor, prohlížeč a nástroj příkazového řádku. Naše první lekce, [Úvod do programovacích jazyků a nástrojů oboru](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje.
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).
Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také vestavěný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Naklonujte 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. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním adresy 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) 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:
```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) - pro náhled HTML stránek přímo ve Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - který vám pomůže psát kód rychleji
## 📂 Každá lekce obsahuje:
## 📂 Každá lekce zahrnuje:
- volitelný sketchnote
- volitelnou náčrtovou 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
- kontroly znalostí
- rozcvičkový kvíz před lekcí
- písemnou lekci
- u lekcí založených na projektu podrobné návody, jak projekt vytvořit
- kontrolní znalostní otázky
- výzvu
- doplňující čtení
- úkol
- doplňkové čtení
- zadání
- [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 uloženy ve složce Quiz-app, celkem je 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; řiďte se pokyny ve složce `quiz-app`.
## 🗃️ 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 | Naučené koncepty | Výukové cíle | Odkaz na lekci | Autor |
| 01 | Začínáme | Úvod do programování a nástroje řemeslníka | Naučte se základy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům vykonávat jejich práci | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, včetně práce v týmu | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začínáme | Přístupnost | Naučte se základy webové přístupnosti | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Datové typy JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkce a metody | Naučte se o funkcích a metodách pro správu logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Tvorba podmínek v JS | Naučte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod | [Tvorba rozhodnutí](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a smyčky | Pracujte s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořte HTML pro online terárium se zaměřením na vytvoření rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořte CSS pro stylování online terária, se zaměřením na základy CSS včetně responzivního designu stránky | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Vytvořte JavaScript pro funkčnost terária jako drag/drop rozhraní, zaměřeno na uzávěry a manipulaci s DOM | [JavaScript uzávěry a manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra psaní na klávesnici](./4-typing-game/solution/README.md) | Vytvoření hry psaní na klávesnici | Naučte se používat klávesové události k řízení logiky vaší JavaScriptové aplikace | [Programování událostmi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučte se, jak prohlížeče fungují, jejich historický vývoj a jak vytvořit první prvky rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Vytváření formuláře, volání API a ukládání proměnných do místního úložiště | Vytvořte JavaScriptové prvky rozšíření prohlížeče, které volají API a používají proměnné uložené v místním úložišti | [API, formuláře a místní úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Pozadí procesy v prohlížeči, webový výkon | Použijte pozadí procesy pro zvládání ikony rozšíření, naučte se o webovém výkonu a optimalizacích | [Pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pokročilejší vývoj hry v JavaScriptu | Naučte se o dědičnosti pomocí tříd a kompozice, stejně jako o vzoru Pub/Sub, jako přípravu na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Kreslení na plátno | Naučte se o Canvas API používaném pro kreslení prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Detekce kolizí | Umožněte prvkům kolidovat a reagovat na sebe pomocí stisknutí kláves a přidejte cooldown funkci pro zajištění výkonu hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Udržování skóre | Provádějte matematické výpočty založené na stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Ukončování a restartování hry | Naučte se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných hodnot | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankovní aplikace](./7-bank-project/solution/README.md) | HTML šablony a směrování v webové aplikaci | Naučte se vytvořit strukturu více stránkové webové aplikace použitím směrování a HTML šablon | [HTML šablony a směrování](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučte se vytvářet formuláře a zpracovávat validační rutiny | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Metody získávání a použití dat | Jak data proudí do vaší aplikace a ven, jak je načítat, ukládat a likvidovat | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte se, jak vaše aplikace uchovává stav a jak s ním programově pracovat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Editor kódu pro prohlížeč/VScode](../../8-code-editor) | Práce s VScodem | Naučte se používat editor kódu | [Použití editoru VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práce s AI | Naučte se vytvořit vlastního AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
@ -184,36 +183,36 @@ Náš 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 získají příležitost získat praktické zkušenosti tvorbou hry na psaní na klávesnici, virtuálního terária, ekologicky šetrného rozšíření prohlížeče, hry ve stylu vesmírných vetřelců a bankovní aplikace pro firmy. Po dokončení série budou studenti mít pevné základy webového vývoje.
> 🎓 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 můžete absolvovat také jako [Výukovou cestu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
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.
Zajištěním, že obsah odpovídá projektům, se proces pro studenty stává zajímavějším a dochází k lepšímu zapamatování konceptů. Napsali jsme také několik úvodních lekcí základů JavaScriptu, které představují koncepty, doplněné videem ze série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejíchž autoři se na plánu podíleli.
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ízkorizikový kvíz před hodinou nastaví studentovi záměr naučit se téma, zatímco druhý kvíz po hodině zajistí další upevnění znalostí. Tento učební plán je navržen tak, aby byl flexibilní a zábavný, lze jej absolvovat celý nebo částečně. Projekty začínají jednoduché a ke konci 12týdenního cyklu se postupně stávají složitějšími.
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)“.
Ačkoliv jsme záměrně vynechali zavádění JavaScriptových frameworků, abychom se zaměřili na základní dovednosti webového vývojáře před adopcí frameworku, vhodným dalším krokem po absolvování tohoto kurzu je naučit se Node.js prostřednictvím další kolekce videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> 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 [chování](CODE_OF_CONDUCT.md) a [příspěvky](CONTRIBUTING.md) pravidla. Vítáme vaše konstruktivní návrhy!
## 🧭 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 můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Vytvořte fork tohoto repozitáře, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svém počítači a poté ve výchozím adresáři repozitáře spusťte příkaz `docsify serve`. Webová stránka poběží na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
PDF všech lekcí lze najít [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF se všemi lekcemi naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Další kurzy
Náš tým vytváří i další kurzy! Podívejte se na:
Náš tým vytváří i 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
@ -232,30 +231,30 @@ Náš tým vytváří i další kurzy! Podívejte se na:
---
### Základní vzdělávání
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
### Základní učení
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](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)
[](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 se zaseknete nebo máte jakékoli otázky ohledně vývoje AI aplikací, připojte se k ostatním učenlivým a zkušeným vývojářům v diskuzích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se sdílejí svobodně.
@ -266,6 +265,6 @@ Tento repozitář je licencován pod licencí MIT. Více informací naleznete v
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí 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í AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro zásadní informace je doporučován profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo nesprávné výklady vzniklé použitím tohoto překladu.
# Plán cesty repozitáře Microsoft Web-Dev-For-Beginners
**Tento repozitář poskytuje plán cesty pro učení základů webového vývoje se zaměřením na JavaScript, HTML a CSS. Kurz je flexibilní a může být absolvován celý nebo částečně, obsahuje 24 lekcí rozložených do 12 týdnů.**
## Klíčové milníky
* **Týdny 1-3:**
* Úvod do programovacích jazyků a nástrojů řemesla
* Základy GitHubu
* Přístupnost
* Základy JS: datové typy, funkce a metody
* Rozhodování s JS
* **Týdny 4-6:**
* Pole a cykly
* Terárium: HTML v praxi
* CSS v praxi
* Uzávěry v JavaScriptu
* Manipulace s DOM
* **Týdny 7-9:**
* Hra psaní: Událostmi řízené programování
* Zelené rozšíření prohlížeče: Práce s prohlížeči
* Vytvoření formuláře, volání API a ukládání proměnných do lokálního úložiště
* Pozadí běžících procesů v prohlížeči
* Výkon webu
* **Týdny 10-12:**
* Hra ve vesmíru: Pokročilejší vývoj hry v JavaScriptu
* Kreslení na plátno
* Pohyb prvků po obrazovce
* Detekce kolizí
* Zaznamenávání skóre, ukončení a restartování hry
* Bankovní aplikace: HTML šablony a trasy ve webové aplikaci
* Vytvoření přihlašovacího a registračního formuláře
* Metody získávání a používání dat
* Koncepty správy stavu
## Výsledky učení
**Absolvováním tohoto plánu získají studenti praktické zkušenosti s tvorbou hry na psaní, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders a bankovní aplikace pro podniky. Také si vybudují pevné základy ve webovém vývoji.**
## Další zdroje
* Tento repozitář poskytuje množství zdrojů pro další učení, včetně tutoriálů, příkladů kódu a výzev.
* Platforma Microsoft Learn nabízí různé kurzy a vzdělávací cesty zaměřené na webový vývoj.
* Online komunity jako Stack Overflow a MDN Web Docs poskytují cennou podporu a zdroje pro webové vývojáře.
**Doufám, že vám tento plán cesty pomůže na vaší cestě webovým vývojem!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo mylné výklady vzniklé z použití 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 tanterv adattára, amely kezdőknek tanítja a webfejlesztés alapjait. A tanterv egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati leckével, amelyek lefedik a JavaScript, CSS és HTML témaköröket.
- `6-space-game/README.md` - Vászon alapú játékfejlesztés
- `6-space-game/README.md` - Canvas alapú játékfejlesztés
- `9-chat-project/README.md` - AI chat asszisztens projekt
### Monorepo Struktúra
### Monorepo szerkezet
Bár nem hagyományos monorepo, ez a repozitórium több független projektet tartalmaz:
- Minden lecke önálló
Bár nem hagyományos monorepo, ez az adattár több független projektet tartalmaz:
- Minden lecke önállóan működik
- A projektek nem osztanak meg függőségeket
- Egyes projektek fejlesztése nem befolyásolja a többit
- A teljes tananyag élményhez klónozd az egész adattárat
---
**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 -->
**Jogi nyilatkozat**:
Ezt a dokumentumot az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti dokumentum a saját nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén szakmai emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért.
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 a Microsoft Cloud Advocates átfogó, 12 hetes tanfolyamán. A 24 leckéből álló anyag minden egyes részében gyakorlati projektek – teráriumok, böngészőbővítmények és űrjátékok – segítségével mélyedhetsz el a JavaScript, CSS és HTML világában. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet, és optimalizáld tudásod megtartását hatékony, projektalapú oktatásunkkal. Kezdd el a kódolási utadat még ma!
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)
Kezd el az alábbi lépések követésével használni ezeket az erőforrásokat:
1. **Forkold az adattárat**: Kattints ide [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj szakértőkkel és más fejlesztőkkel**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Többnyelvű támogatás
#### GitHub Action segítségével támogatott (Automatikus és mindig naprakész)
#### GitHub Action által támogatott (Automatizált é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 az adattár több mint 50 nyelvű fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretnéd klónozni, használhatod a sparse checkoutot:
> 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.
> Ezzel minden szükséges anyagot megkapsz 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 nyelvi támogatást szeretnél, jelenleg támogatott fordítások listája [itt található](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](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 [**Student Hub oldalra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdőknek szóló forrásokat, diák csomagokat és akár ingyenes tanúsítványutalványt is találsz. Ezt az oldalt érdemes könyvjelzővel ellátni és időnként felkeresni, hiszen havonta frissítjük a tartalmat.
### 📣 Bejelentés – Új GitHub Copilot Agent mód kihívások!
Ú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, keress rá a "GitHub Copilot Agent Challenge 🚀" kifejezésre a legtöbb fejezetben. Ez egy új kihívás, amelyhez a GitHub Copilot és az Agent mód segítségével dolgozhatsz. Ha még nem használtad az Agent módot, ez nem csak szöveg generálására képes, hanem fájlokat is létre tud hozni és szerkeszteni, parancsokat futtat és egyebeket.
### 📣 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 be, nézd meg [projekt](./9-chat-project/README.md)
### 📣 Bejelentés - _Új tanmenet_ generatív MI-ről JavaScripthez jelent meg
### 📣 Bejelentés –_Új tananyag_ Generatív MI JavaScript számára most jelent meg
Ne hagyd ki új generatív MI tanmenetünket!
Ne hagyd ki új Generatív MI tananyagunkat!
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra és kezdj neki!
Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd!
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 lecke tartalmaz egy feladatot, tudásellenőrzést és kihívást, amelyek segítségével megismerheted:
- Promptolás és prompt mérnökség
- Szöveges és képes alkalmazás generálás
- 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 a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd!
## 🌱 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)!
**[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.
> **Tanári megjegyzésként**, tartalmazunk néhány javaslatot [itt](for-teachers.md) a tananyag használatához. Várjuk visszajelzésedet [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
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.
**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckét egy előzetes kvízzel kezdjetek, majd olvassátok el az anyagot, végezzétek el a feladatokat, és ellenőrizzétek megértéseteket az utólagos kvízzel.
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.
Tanulási élményetek javítása érdekében dolgozzatok együtt társaiddal a projekteken! A beszélgetéseket biztatjuk [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink válaszolnak kérdéseitekre.
### 📋 Fejlesztőkörnyezet beállítása
Tanulmányaitok elősegítésére erősen ajánljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) oldal további anyagainak megismerését.
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.
### 📋 Környezeted beállítása
#### Tároló létrehozása
A tananyag fejlesztői környezete készen áll! Kezdéskor választhatsz, hogy egy [Codespace](https://github.com/features/codespaces/) (_böngésző alapú, telepítés nélküli környezet_) futtatásával, vagy helyben, a számítógépeden egy szövegszerkesztő, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatával dolgozol.
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 saját adattáradat
Annak érdekében, hogy könnyen menthesd munkád, ajánlott létrehozni saját példányodat ebből az adattárból. Ezt a felül található **Use this template** gombbal teheted meg. Ez létrehoz egy új adattárat a GitHub-fiókodban a tananyag másolatával.
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 az adattárat**: Kattints a "Fork" gombra a felső jobb sarokban ezen az oldalon.
2. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Tanmenet futtatása Codespace környezetben
#### 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 adattáradban kattints a **Code** gombra, majd válaszd az **Open with Codespaces** opciót. Ez létrehoz neked egy új Codespace környezetet.
A 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 tananyag helyi futtatásához szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközeibe](../../1-getting-started-lessons/1-intro-to-programming-languages), bemutat különféle lehetőségeket ezekre az eszközökre, hogy kiválaszthasd a számodra legmegfelelőbbet.
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).
Ajánlásunk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használata, amely beépített [terminállal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) rendelkezik. A Visual Studio Code-ot innen töltheted le: [link](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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 a saját adattáradat a számítógépedre. Ezt megteheted a **Code** gombra kattintva és az URL másolásával:
[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:
>
> * [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 írni a kódot
## 📂 Minden leckéhez tartozik:
## 📂 Minden leckében megtalálható:
- opcionális vázlatrajz
- opcionális skiccjegyzet
- opcionális kiegészítő videó
- előre a leckéhez tartozó ráhangoló kvíz
- óra előtti bemelegítő 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
- tudásellenőrzések
- projekt alapú leckék esetén lépésről lépésre útmutatók a projekt elkészítéséhez
- [óra utáni kvíz](https://ff-quizzes.netlify.app/web/)
> **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.
> **Jegyzet a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdéssel. Elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvízalkalmazás helyben futtatható vagy telepíthető az Azure-ra; az instrukciókat a `quiz-app` mappában találod.
## 🗃️ Leckék
| | 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 |
| | Projekt neve | Tanult fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző |
| 01 | Kezdés | Bevezetés a programozásba és a fejlesztői eszközökbe | Megtanulni a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a szakmai fejlesztőket munkájuk során | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kezdés | GitHub alapok, köztük csapatmunkával kapcsolatos ismeretek | Megtanulni, hogyan kell használni a GitHub-ot a projektben és hogyan működj együtt másokkal a kódon | [Bevezetés a GitHub-ba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kezdés | Akadálymentesség | Megtanulni a web akadálymentesség alapjait | [Az akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS alapok | Függvények és metódusok | Függvényekről és metódusokról tanulni az alkalmazás logikájának kezeléséhez | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher |
| 06 | JS alapok | Döntéshozatal JavaScripttel | Tanulj meg feltételeket létrehozni a kódodban döntéshozatali módszerek segítségével | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS alapok | Tömbök és ciklusok | Adatok kezelése tömbök és ciklusok segítségével JavaScript-ben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML a gyakorlatban | HTML felépítése egy online terrárium számára, a felépítésre fókuszálva | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS a gyakorlatban | CSS készítése az online terrárium stílusához, a CSS alapjaira fókuszálva, beleértve a reszponzív oldal készítését | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript closure-ök, DOM manipuláció | JavaScript írása a terrárium húzás- és ejtéses működéséhez, a closure-ök és a DOM manipuláció fókuszával | [JavaScript closure-ök, DOM manipuláció](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Gépelős játék](./4-typing-game/solution/README.md) | Gépelős játék készítése | Tanuld meg, hogyan használhatóak a billentyűesemények a JavaScript alkalmazás logikájában | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Tanuld meg, hogyan működnek a böngészők, történetüket és hogyan lehet elkészíteni az első elemeket egy böngészőbővítményhez | [A böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívása és változók tárolása helyi tárolóban | JavaScript elemek írása a böngészőbővítményedhez API hívásához, helyi tárolóban tárolt változók használatával | [API-k, űrlapok és helyi tároló](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, web teljesítmény | Használd a böngésző háttérfolyamatait a bővítmény ikon kezelésére; ismerkedj meg a web teljesítménnyel és optimalizációkkal | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Űrjáték](./6-space-game/solution/README.md) | Haladóbb játékkészítés JavaScript-tel | Tanulj az öröklésről osztályokkal és kompozícióval, valamint a Pub/Sub mintáról játék készítéshez | [Bevezetés a haladó játékkészítésbe](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás a canvas-re | Ismerd meg a Canvas API-t, amellyel elemek rajzolhatók a képernyőre | [Rajzolás a canvas-re](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Űrjáték](./6-space-game/solution/README.md) | Mozgatás a képernyőn elemekkel | Fedezd fel, hogyan lehet mozgást adni elemeknek a kartézián koordinátákkal és a Canvas API-val | [Elemek mozgatása](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközés érzékelés | Készítsd el az ütközések kezelését elemek között, billentyűnyomások segítségével, valamint adj egy várakozási funkciót a játék teljesítményéhez | [Ütközés érzékelés](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Űrjáték](./6-space-game/solution/README.md) | Pontszámkészítés | Végezz matematikai számításokat a játék státusza és teljesítménye alapján | [Pontszámkészítés](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Űrjáték](./6-space-game/solution/README.md) | A játék befejezése és újraindítása | Ismerkedj meg a játék befejezésével és újraindításával, beleértve az erőforrások törlését és változók alaphelyzetbe állítását | [A befejező feltétel](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak webalkalmazásban | Tanuld meg, hogyan készíthetsz többszörös oldalt tartalmazó weboldal architektúrát routinggal és HTML sablonokkal | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Bejelentkezési és regisztrációs űrlap készítése | Tanulj az űrlapkészítésről és az érvényesítési folyamatokról | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Adatok lekérése és használata | Hogyan áramlanak az adatok az alkalmazásodba és onnan ki, hogyan kérd le, tárold és töröld őket | [Adatok](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés fogalmai | Tanuld meg, hogyan kezeli az alkalmazásod az állapotot és hogyan kezeld azt programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Böngésző/VScode kód](../../8-code-editor) | VScode használata | Tanuld meg, hogyan használj kódszerkesztőt | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asszisztensek](./9-chat-project/README.md) | Mesterséges intelligenciával való munka | Tanulj meg saját mesterséges intelligencia asszisztenst építeni | [AI asszisztens projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagógia
Tananyagaink két kulcsfontosságú pedagógiai elv alapján készültek:
* projekt-alapú tanulás
A tananyagunk két fő pedagógiai elv mentén készült:
* 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 a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A hallgatóknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy üzleti banki alkalmazás fejlesztésével. A sorozat végére a résztvevők szilárd ismereteket szereznek a webfejlesztés területén.
> 🎓 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!
> 🎓 Az első néhány leckét ezen tananyagból elvégezheted a [Tanulási útvonal](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) keretében a Microsoft Learn-en!
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 az anyagok a projektekhez igazodnak, a tanulás élvezetesebb és a fogalmak jobb megtartása válik lehetővé. Továbbá több JavaScript alapokat bemutató kezdő leckét írtunk, melyek fogalmakat vezetnek be, kiegészítve a "[Kezdők sorozata: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videós oktatóanyagokkal, melyek egyes szerzői közreműködtek ebben a tananyagban.
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 felül egy alacsony tétű kvíz az óra előtt beállítja a diák motivációját a téma tanulására, míg egy második kvíz az óra után biztosítja a tudás további megtartását. Ez a tananyag rugalmas és szórakoztató módon lett kialakítva, teljes egészében vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbek lesznek.
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 webfejlesztői alapok megtanítása után lehessen csak áttérni azok használatára, jó következő lépés lehet a tananyag után a Node.js elsajátítása a "[Kezdők sorozata: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" videósorozat által.
> 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 [Viselkedési Kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulás](CONTRIBUTING.md) útmutatókat. Várjuk építő jellegű visszajelzéseidet!
## 🧭 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`.
Ezt a dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) használatával. Forkold le ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépeden, majd a repo gyökérmappájában írd be: `docsify serve`. A weboldal a localhost 3000-es portján lesz elérhető: `localhost:3000`.
## 📘 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 készült PDF [itt található](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:
## 🎒 Egyéb kurzusok
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ésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz a többi tanulóhoz és tapasztalt fejlesztőkhöz az MCP-vel kapcsolatos beszélgetésekben. Ez egy támogató közösség, ahol a kérdések szívesen fogadottak és a tudás szabadon megosztott.
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árhely az MIT licenc alatt áll. További információké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**:
Ezt a dokumentumot a [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordító szolgáltatás segítségével fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvén tekintendő hivatalos forrásnak. Fontos információk esetén ajánlott szakmai, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért.
# A Microsoft Web-Dev-For-Beginners adattárának ütemterve
**Ez az adattár egy ütemtervet kínál a webfejlesztés alapjainak elsajátításához, különös tekintettel a JavaScriptre, HTML-re és CSS-re. A tananyag rugalmas, egészében vagy részben is elvégezhető, 24 leckével, amelyek 12 hétre vannak elosztva.**
## Fő mérföldkövek
* **1–3. hét:**
* Bevezetés a programozási nyelvekbe és az eszközökbe
* A GitHub alapjai
* Akadálymentesítés
* JS alapok: adattípusok, függvények és metódusok
* Döntéshozatal JS-sel
* **4–6. hét:**
* Tömbök és ciklusok
* Terrárium: HTML a gyakorlatban
* CSS a gyakorlatban
* JavaScript lezárások
* DOM manipuláció
* **7–9. hét:**
* Gépelős játék: eseményvezérelt programozás
* Zöld böngészőbővítmény: munkavégzés a böngészőkkel
* Űrlap készítése, API hívása és változók tárolása a helyi tárolóban
* Banki alkalmazás: HTML sablonok és útvonalak webalkalmazásban
* Bejelentkezési és regisztrációs űrlap készítése
* Adatlekérés és felhasználás módszerei
* Állapotkezelési koncepciók
## Tanulási eredmények
**Az ütemterv teljesítésével a tanulók gyakorlati tapasztalatot szereznek gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űr inváziós stílusú játék és üzleti banki alkalmazás fejlesztésében. Emellett szilárd alapot kapnak a webfejlesztés alapelveinek megértésében.**
## További források
* Ez az adattár bőséges forrásokat kínál a további tanuláshoz, beleértve oktatóanyagokat, kódpéldákat és kihívásokat.
* A Microsoft Learn platform számos webfejlesztési kurzust és tanulási útvonalat kínál.
* Az olyan online közösségek, mint a Stack Overflow és az MDN Web Docs értékes támogatást és forrásokat nyújtanak a webfejlesztőknek.
**Remélem, ez az ütemterv segít a webfejlesztői utadon!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Jogi nyilatkozat**:
Ezt a dokumentumot az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti dokumentum az anyanyelvén tekintendő hivatalos forrásnak. Fontos információk esetén szakmai, emberi fordítás igénylése javasolt. Nem vállalunk felelősséget az ebből a fordításbó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 vzdelávacia učebná osnova na výučbu základov webového vývoja pre začiatočníkov. Učebná osnova 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
- [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 učebné osnovy 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
Pre podrobné inštrukcie k jednotlivým projektom si pozrite README súbory v:
- `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
- `5-browser-extension/README.md` - Vývoj rozšírení prehliadača
- `6-space-game/README.md` - Vývoj hry založenej na Canvas
- `9-chat-project/README.md` - AI chat asistent projekt
### Štruktúra monorepo
### Štruktúra monorepa
Aj keď nejde o tradičné monorepo, tento repozitár obsahuje viacero nezávislých projektov:
Aj keď nejde o tradičné monorepo, toto úložisko 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
- Pracujte na jednotlivých projektoch bez vplyvu na ostatné
- Naklonujte celé repozitárum pre kompletný zážitok z osnovy
---
**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 -->
**Vymedzenie zodpovednosti**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme zabezpečiť presnosť, majte prosím na pamäti, ž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. Za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu nenesieme zodpovednosť.
Naučte sa základy webového vývoja s naším komplexným 12-týždňovým kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa zameriava na JavaScript, CSS a HTML prostredníctvom praktických projektov ako teráriá, rozšírenia pre prehliadače a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si zapamätanie vedomostí pomocou našej efektívnej projektovo orientovanej pedagogiky. Začnite svoju cestu kódovania už 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 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!
Pripojte sa ku komunite Azure AI Foundry na Discorde
Pridajte sa do komunity 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)
Nasledujte tieto kroky, aby ste mohli začať používať tieto zdroje:
1. **Vytvorte fork repozitára**: Kliknite na [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
#### Podporované cez GitHub Action (automatizované a vždy aktuálne)
> **Uprednostňujete lokálne klonovanie?**
> 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 zvyšuje veľkosť sťahovania. 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.
<!-- 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)**
> Tým získate všetko, čo potrebujete na absolvovanie kurzu s oveľa rýchlejším sťahovaním.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**Ak chcete, aby boli podporované ďalšie jazyky prekladov, nájdete ich [tu](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _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 [**študentskú stránku**](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 spôsoby, ako získať bezplatný certifikát. Toto je stránka, ktorú si chcete uložiť do záložiek a občas si ju pozrieť, pretože obsah sa mení každý mesiac.
### 📣 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 najväčšine kapitol. To je nová výzva na dokončenie pomocou GitHub Copilot a režimu Agent. Ak ste režim Agent ešte nepoužili, dokáže nielen generovať text, ale aj vytvárať a upravovať súbory, spúšťať príkazy a ďalšie.
### 📣 Oznámenie – _Nový projekt na vývoj pomocou Generatívnej AI_
### 📣 Oznámenie - _nový projekt na vybudovanie pomocou generatívnej AI_
Práve pridaný nový projekt AI asistenta, pozrite si [projekt](./9-chat-project/README.md)
Práve bol pridaný nový projekt AI asistenta, 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 AI 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 AI!
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby ste mohli začať!
Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí a výzvu, ktoré vás prevedú témami ako:
- Zadávanie požiadaviek a návrh promptov (prompt engineering)
- Promptovanie a prompt engineering
- Generovanie textových a obrazových aplikácií
- Aplikácie na vyhľadávanie
- Vyhľadávacie aplikácie
Navštívte [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) a začnite!
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby ste mohli začať!
## 🌱 Začíname
> **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**, pridali sme [niekoľko návrhov](for-teachers.md), ako používať tento učebný plán. Radi uvítame vaše pripomienky [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.
**[Študenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pre každú lekciu začnite kvízom pred prednáškou, pokračujte čítaním prednáškového materiálu, dokončite rôzne aktivity a overte si svoje porozumenie pomocou kvízu 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.
Pre zlepšenie vášho učenia sa spojte 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 vám bude k dispozícii náš tím moderátorov na zodpovedanie 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 rozšírenie vašich vedomostí dôrazne odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre ďalšie študijné materiály.
### 📋 Nastavenie vášho 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! Keď začnete, môžete si vybrať spustenie kurzu v [Codespace](https://github.com/features/codespaces/) (_prostredie v prehliadači, ktoré nevyžaduje inštaláciu_), 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 vašej práce sa odporúča vytvoriť si vlastnú kópiu tohto repozitára. Môžete to urobiť kliknutím na tlačidlo **Použiť túto š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.
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 pre vás vytvorí nový Codespace na prácu.
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 kurzu lokálne potrebujete textový editor, prehliadač a nástroj príkazového riadka. 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 vybrali, čo vám najviac vyhovuje.
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).
Odporúčame použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý má tiež zabudovaný [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 to 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:
@ -124,148 +103,148 @@ Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT
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 vybratím priečinka, ktorý ste práve naklonovali.
> Odporúčané rozšírenia Visual Studio Code:
> 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 priamo 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ú sketchnotku
- voliteľné doplnkové video
- kvíz pred lekciou na rozcvičenie
- písanú lekciu
- pri lekciách založených na projektoch, krok za krokom návody ako projekt vytvoriť
- overenie vedomostí
- rozcvičku pred lekciou formou kvízu
- napísanú lekciu
- pre projektové lekcie krok za krokom návody, ako projekt vybudovať
- kontroly vedomostí
- výzvu
- doplnkové čítanie
- zadanie úlohy
- zadanie
- [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 o kvízoch**: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkovo 48 kvízov po troch otázkach. Nájdete ich [tu](https://ff-quizzes.netlify.app/web/). Kvízová aplikácia môže byť spustená lokálne alebo nasadená na Azure; postupujte podľa inštrukcií 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 |
| | Názov projektu | Prebrané koncepty | Ciele učenia | Prepojená lekcia | Autor |
| 01 | Začíname | Úvod do programovania a nástroje remesla | Naučte sa základné princípy väčšiny programovacích jazykov a o softvéri pomáhajúcom profesionálnym vývojárom | [Ú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 vašom projekte, ako spolupracovať s ostatnými na kóde | [Úvod do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začíname | Prístupnosť | Naučte sa základy prístupnosti na webe | [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čte 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čte sa, ako vytvárať podmienky vo vašom kóde pomocou rozhodovacích metód | [Rozhodovanie](./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 | [Terrárium](./3-terrarium/solution/README.md) | HTML v praxi | Postavte HTML pre online terrárium, zamerané na tvorbu rozloženia stránky | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS v praxi | Postavte CSS na štýlovanie online terrária, zamerajte sa na základy CSS vrátane responzívneho dizajnu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript Closure, manipulácia s DOM | Vybudujte JavaScript, ktorý umožní drag/drop rozhranie terrária, zamerajte sa na closure a manipuláciu s DOM | [JavaScript Closure, 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) | Vytvorenie hry na písanie | Naučte sa používať udalosti klávesnice na riadenie logiky JavaScriptovej 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čte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť základy 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 | Vytvorte JavaScriptové prvky rozšírenia prehliadača, ktoré volajú API a používajú premenné uložené 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 pozadné procesy prehliadača na správu ikony rozšírenia; naučte sa o webovom výkone a optimalizáciách | [Pozadné úlohy 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šie vývoj hier v JavaScripte | Naučte sa o dedičnosti cez triedy aj kompozíciu a o vzore Pub/Sub, v príprave na vytvorenie 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 canvas | Naučte sa o Canvas API, ktoré sa používa na kreslenie prvkov na obrazovku | [Kreslenie na Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Pohyb prvkov na obrazovke | Objavte, ako môžu prvky 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í | Urobte, aby sa prvky zrážali a reagovali navzájom pomocou stlačení klávesov; pridajte cooldown funkciu na zabezpečenie výkonu | [Detekcia kolízií](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra vo vesmíre](./6-space-game/solution/README.md) | Udržiavanie skóre | Vykonávajte 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 vo vesmíre](./6-space-game/solution/README.md) | Ukončenie a reštart hry | Naučte sa o ukončení a reštartovaní hry vrátane čistenia zdrojov a resetovania 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 trasy vo webovej aplikácii | Naučte sa vytvoriť kostru viacstránkovej webovej architektúry pomocou routovania a HTML šablón | [HTML šablóny a trasy](./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čte sa vytvárať formuláre a spracovávať validačné rutiny | [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 využívania dát | Ako do vašej aplikácie vstupujú a z nej vychádzajú dáta, 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čte sa, ako si vaša aplikácia udržiava stav a ako s ním manažovať programovo | [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čte sa používať editor kódu | [Použitie VScode Editora](./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 |
## 🏫 Pedagógia
Náš učebný plán je navrhnutý s dvoma kľúčovými pedagogickými princípmi:
Náš učebný plán je navrhnutý s ohľadom na dve 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 učí 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ť možnosť získať praktické skúsenosti tvorbou hry na písanie, virtuálneho terrária, ekologického rozšírenia prehliadača, hry typu space invaders a bankovej aplikácie pre podniky. Na konci série získajú študenti pevné základy vo webovom vývoji.
> 🎓 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é lekcie tohto učebného plánu ako [Learn Path](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.
Zaradením obsahu do projektov sa celý proces stáva pre študentov atraktívnejším a zvyšuje sa udržanie naučených konceptov. Tiež sme pripravili niekoľko úvodných lekcií o základoch JavaScriptu, ktoré vysvetľujú koncepty, doplnených videom z kolekcie "[Séria pre začiatočníkov: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ktorých 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-stresový kvíz pred vyučovaním nastaví študentovi zámer učiť sa tému, zatiaľ čo druhý kvíz po vyučovaní zabezpečuje ďalšie upevnenie vedomostí. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný, a dá sa absolvovať celý alebo čiastočne. Projekty začínajú malé a na konci 12-týždňového cyklu sú čoraz zložitejšie.
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)“.
Aj keď sme zámerne vynechali zavedenie JavaScriptových frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred osvojením frameworku, ďalším dobrým krokom po dokončení tohto učebného plánu je naučiť sa o Node.js pomocou ďalšej video kolekcie: "[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 pokyny k [Príspevkom](CONTRIBUTING.md). Vaša konštruktívna spätná väzba je vítaná!
## 🧭 Prístup offline
## 🧭 Offline prístup
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/#/). Vytvorte si fork tohoto repozitára, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na svoj lokálny stroj a potom v koreňovom priečinku tohto repozitára zadajte príkaz `docsify serve`. Webová stránka bude dostupná na porte 3000 na localhoste: `localhost:3000`.
## 📘 PDF
PDF všetkých lekcií nájdete [tu](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF so 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:
Náš tím vytvára aj iné kurzy! Pozrite sa na:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://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)
### Azure / Edge / MCP / Agentúry
[](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)
[](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 akékoľvek otázky ohľadom tvorby AI aplikácií, pripojte sa ku komunite študentov a skúsených vývojárov k diskusiám o MCP. Je to podporná komunita, kde sú otázky vítané a zdieľanie vedomostí je voľné.
Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore [LICENSE](../../LICENSE).
Tento repozitár je licencovaný pod licenciou MIT. Pre viac informácií pozrite súbor [LICENSE](../../LICENSE).
---
<!-- 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.
**Výhrada**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, uvedomte si, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný 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 žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
# Plán vývoja pre repozitár Web-Dev-For-Beginners od Microsoftu
**Tento repozitár poskytuje plán na učenie základov webového vývoja so zameraním na JavaScript, HTML a CSS. Učebný plán je flexibilný a môžete ho absolvovať celý alebo čiastočne, pozostáva zo 24 lekcií rozložených na 12 týždňov.**
## Kľúčové míľniky
* **Týždne 1-3:**
* Úvod do programovacích jazykov a nástrojov remesla
* Základy GitHubu
* Prístupnosť
* Základy JS: dátové typy, funkcie a metódy
* Rozhodovanie v JS
* **Týždne 4-6:**
* Polia a slučky
* Terrárium: HTML v praxi
* CSS v praxi
* Uzávierky v JavaScripte
* Manipulácia s DOM
* **Týždne 7-9:**
* Hra na písanie: Programovanie riadené udalosťami
* Zelené rozšírenie prehliadača: Práca s prehliadačmi
* Tvorba formulára, volanie API a ukladanie premenných do miestneho úložiska
* Pozadie procesov v prehliadači
* Výkon webu
* **Týždne 10-12:**
* Hra v priestore: Pokročilejší vývoj hier v JavaScripte
* Kreslenie na plátno
* Pohyb prvkov po obrazovke
* Detekcia kolízií
* Sčítanie bodov, ukončenie a reštart hry
* Banková aplikácia: HTML šablóny a trasy vo webovej aplikácii
* Tvorba prihlásenia a registračného formulára
* Spôsoby získavania a používania dát
* Koncepty správy stavu
## Výsledky učenia
**Úspešným absolvovaním tohto plánu získajú študenti praktické skúsenosti s tvorbou hry na písanie, virtuálneho terária, ekologického rozšírenia prehliadača, hry v štýle útočníka z vesmíru a bankovej aplikácie pre firmy. Taktiež si vybudujú pevné základy webového vývoja.**
## Ďalšie zdroje
* Tento repozitár poskytuje množstvo zdrojov na ďalšie učenie, vrátane tutoriálov, príkladov kódu a výziev.
* Platforma Microsoft Learn ponúka rôzne kurzy a vzdelávacie cesty v oblasti webového vývoja.
* Online komunity ako Stack Overflow a MDN Web Docs poskytujú cennú podporu a zdroje pre webových vývojárov.
**Dúfam, že vám tento plán pomôže na vašej ceste vo webovom vývoji!**
---
<!-- 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). Hoci sa snažíme o presnosť, upozorňujeme, ž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 odporúčame profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vzniknuté použitím tohto prekladu.
localizeflow[bot]
3 days ago