Web-Dev-For-Beginners/translations/cs

Webový vývoj pro začátečníky – učební plán

Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá ze 24 lekcí se věnuje JavaScriptu, CSS a HTML prostřednictvím praktických projektů jako terária, rozšíření prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte uchování znalostí díky naší efektivní pedagogice založené na projektech. Začněte svou cestu programováním ještě dnes!

Připojte se ke komunitě Azure AI Foundry na Discordu

Postupujte podle těchto kroků, abyste začali používat tyto zdroje:

1. Vytvořte fork repositáře: Klikněte na
2. Naklonujte repositář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Připojte se k Azure AI Foundry Discordu a potkejte odborníky a další vývojáře

🌐 Podpora více jazyků

Podporováno pomocí GitHub Action (automatizováno a vždy aktuální)

Raději chcete klonovat lokálně?

Tento repozitář obsahuje více než 50 jazykových překladů, což výrazně zvětšuje velikost stažení. Pro klonování bez překladů použijte sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

To vám poskytne vše potřebné k dokončení kurzu s mnohem rychlejším stahováním.

Pokud chcete podporu dalších jazyků překladu, jsou uvedeny zde

🧑‍🎓 Jste student?

Navštivte stránku Student Hub, kde najdete zdroje pro začátečníky, studentské balíčky a dokonce způsoby, jak získat bezplatný voucher na certifikát. Tuto stránku si uložte a čas od času zkontrolujte, protože obsah měníme každý měsíc.

📣 Oznámení – nové výzvy v režimu GitHub Copilot Agent k dokončení!

Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" v většině kapitol. Je to nová výzva k dokončení s využitím GitHub Copilot a režimu Agenta. Pokud jste režim Agenta dosud nepoužívali, zvládá nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.

📣 Oznámení – nový projekt k vytvoření pomocí generativní AI

Nový projekt s AI Asistentem právě přidán, podívejte se na něj projekt

📣 Oznámení – nový učební plán na Generativní AI pro JavaScript právě vydán

Nezmeškejte náš nový učební plán Generativní AI!

Navštivte https://aka.ms/genai-js-course a začněte!

• Lekce pokrývají vše od základů po RAG.
• Komunikujte s historickými postavami pomocí GenAI a naší doprovodné aplikace.
• Zábavný a poutavý příběh, budete cestovat časem!

Každá lekce obsahuje zadání k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako:

• Promptování a návrh promptů
• Generování textových a obrazových aplikací
• Vyhledávací aplikace

Navštivte https://aka.ms/genai-js-course a začněte!

🌱 Začínáme

Učitelé, přidali jsme několik návrhů, jak tento učební plán využívat. Budeme rádi za vaši zpětnou vazbu v naší diskusní fóru!

Studenti, u každé lekce začněte přednáškovým kvízem a pokračujte čtením výukového materiálu, dokončením různých aktivit a ověřením pochopení pomocí závěrečného kvízu.

Pro lepší zážitek z učení se spojte se svými spolužáky a pracujte společně na projektech! Diskuse jsou vítány v našem diskusním fóru, kde je náš tým moderátorů připraven odpovědět na vaše dotazy.

Pro další vzdělávání silně doporučujeme prozkoumat Microsoft Learn pro další studijní materiály.

📋 Nastavení vašeho prostředí

Tento učební plán má připravené vývojové prostředí! Při začátku si můžete vybrat spuštění kurzu v Codespace (prostředí v prohlížeči bez nutnosti instalací), nebo lokálně na vašem počítači s textovým editorem, například Visual Studio Code.

Vytvořte si svůj repozitář

Pro snadné ukládání své práce doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Můžete to udělat kliknutím na tlačítko Use this template v horní části stránky. Tím se vytvoří nový repozitář ve vašem účtu GitHub s kopií učebního plánu.

Postupujte následovně:

1. Vytvořte fork repositáře: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
2. Naklonujte repozitář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Spuštění učebního plánu v Codespace

Ve své kopii repozitáře klikněte na tlačítko Code a vyberte Open with Codespaces. Tím se vytvoří nový Codespace, ve kterém budete pracovat.

Spuštění učebního plánu lokálně na vašem počítači

Pro spuštění kurzu lokálně budete potřebovat textový editor, prohlížeč a příkazový řádek. Naše první lekce, Úvod do programovacích jazyků a nástrojů, vás provede různými možnostmi těchto nástrojů, abyste si vybrali, co vám vyhovuje nejlépe.

Doporučujeme použít Visual Studio Code jako editor, který má integrovaný i Terminál. Visual Studio Code si stáhněte zde.

1. Naklonujte svůj repozitář do počítače. Učiňte tak kliknutím na tlačítko Code a zkopírováním URL:

   CodeSpace Poté otevřete Terminál v rámci Visual Studio Code a spusťte následující příkaz, přičemž <your-repository-url> nahraďte URL, kterou jste právě zkopírovali:

   git clone <your-repository-url>
   

2. Otevřete složku ve Visual Studio Code. To můžete udělat kliknutím na Soubor > Otevřít složku a vybráním složky, kterou jste právě naklonovali.

Doporučené rozšíření Visual Studio Code:

• Live Server - náhled HTML stránek přímo ve Visual Studio Code
• Copilot - pomáhá psát kód rychleji

📂 Každá lekce obsahuje:

• volitelnou skicovou poznámku
• volitelné doplňkové video
• rozehřívací kvíz před lekcí
• psanou lekci
• u lekcí založených na projektu krok za krokem návody, jak projekt postavit
• kontroly znalostí
• výzvu
• doplňující čtení
• úkol
• kvíz po lekci

Poznámka ke kvízům: Všechny kvízy jsou umístěny ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné zde, aplikaci kvízu lze spustit lokálně nebo nasadit na Azure; postupujte podle instrukcí v složce quiz-app.

🗃️ Lekce

	Název projektu	Učené koncepty	Učební cíle	Připojená lekce	Autor
01	Začínáme	Úvod do programování a nástroje profese	Naučit se základní principy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům v jejich práci	Úvod do programovacích jazyků a nástrojů profese	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	Floor
03	Začínáme	Přístupnost	Naučit se základy přístupnosti na webu	Základy přístupnosti	Christopher
04	Základy JS	Datové typy v JavaScriptu	Základy datových typů v JavaScriptu	Datové typy	Jasmine
05	Základy JS	Funkce a metody	Naučte se o funkcích a metodách pro řízení logiky aplikace	Funkce a metody	Jasmine a Christopher
06	Základy JS	Rozhodování v JS	Naučte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod	Rozhodování	Jasmine
07	Základy JS	Pole a smyčky	Práce s daty pomocí polí a smyček v JavaScriptu	Pole a smyčky	Jasmine
08	Terrarium	HTML v praxi	Vytvoření HTML pro online terárium, se zaměřením na rozvržení	Úvod do HTML	Jen
09	Terrarium	CSS v praxi	Vytvoření CSS pro stylování online terária, se zaměřením na základy CSS včetně responzivního designu	Úvod do CSS	Jen
10	Terrarium	JavaScript Closures, manipulace s DOM	Vytvoření JavaScriptu pro funkční terárium s drag/drop rozhraním, se zaměřením na uzávěry (closures) a manipulaci s DOM	JavaScript Closures, manipulace s DOM	Jen
11	Typing Game	Vytvoření hry psaní na klávesnici	Naučit se používat události klávesnice k řízení logiky vaší JavaScript aplikace	Programování řízené událostmi	Christopher
12	Green Browser Extension	Práce s prohlížeči	Naučit se, jak prohlížeče fungují, jejich historii a jak vytvořit první prvky rozšíření pro prohlížeč	O prohlížečích	Jen
13	Green Browser Extension	Vytváření formuláře, volání API a ukládání proměnných do lokálního úložiště	Vytvoření JavaScriptových prvků rozšíření pro volání API a práci s proměnnými uloženými v lokálním úložišti	API, formuláře a lokální úložiště	Jen
14	Green Browser Extension	Procesy na pozadí v prohlížeči, výkon webu	Použití background procesů pro správu ikony rozšíření; naučit se o výkonu webu a optimalizacích	Pozadí a výkon	Jen
15	Space Game	Pokročilejší vývoj her v JavaScriptu	Naučit se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub, jako příprava na tvorbu hry	Úvod do pokročilého vývoje her	Chris
16	Space Game	Kreslení na plátno	Naučit se o Canvas API, používaném ke kreslení na obrazovku	Kreslení na plátno	Chris
17	Space Game	Pohyb prvků po obrazovce	Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API	Pohyb prvků	Chris
18	Space Game	Detekce kolizí	Umožnit prvkům kolidovat a reagovat na sebe navzájem pomocí stisků kláves a zároveň poskytnout funkci cooldownu pro výkon hry	Detekce kolizí	Chris
19	Space Game	Udržování skóre	Provádění matematických výpočtů na základě stavu hry a výkonu	Udržování skóre	Chris
20	Space Game	Ukončení a restart hry	Naučit se ukončovat a restartovat hru včetně uvolnění zdrojů a resetování proměnných	Konečná podmínka	Chris
21	Banking App	HTML šablony a routování ve webové aplikaci	Naučit se vytvářet strukturu vícestránkového webu pomocí routování a HTML šablon	HTML šablony a routování	Yohan
22	Banking App	Vytvoření přihlašovacího a registračního formuláře	Naučit se vytvářet formuláře a zpracovávat validační rutiny	Formuláře	Yohan
23	Banking App	Způsoby získávání a používání dat	Jak data proudí ve vaší aplikaci, jak je získávat, ukládat a likvidovat	Data	Yohan
24	Banking App	Koncepty správy stavu	Naučit se, jak si aplikace uchovává stav a jak ho programově spravovat	Správa stavu	Yohan
25	Browser/VScode Code	Práce s VScode	Naučte se používat kódový editor	Používání kódového editoru VScode	Chris
26	AI Assistants	Práce s AI	Naučte se vytvořit vlastního AI asistenta	Projekt AI Assistant	Chris

🏫 Pedagogika

Naše učební plán je navržen se dvěma klíčovými pedagogickými principy:

• učení založené na projektech
• časté kvízy

Program učí základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti budou mít příležitost získat praktické zkušenosti vytvořením hry na psaní na klávesnici, virtuálního terária, ekologicky šetrného rozšíření prohlížeče, hry ve stylu Space Invader a bankovní aplikace pro firmy. Na konci série získají studenti solidní porozumění webovému vývoji.

🎓 První lekce tohoto učebního plánu si můžete projít i jako Učební cestu na Microsoft Learn!

Díky sladění obsahu s projekty je proces pro studenty více poutavý a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu, které představují koncepty, doplněné videem ze série "Beginners Series to: JavaScript", jejíž autoři přispěli k tomuto učebnímu plánu.

Navíc nízkoryzový kvíz před hodinou nastavuje záměr studenta k učení daného tématu, zatímco druhý kvíz po hodině zajišťuje další zapamatování. Tento učební plán je navržen flexibilně a zábavně a může být absolvován celý nebo částečně. Projekty začínají malé a postupně se během 12týdenního cyklu stávají složitějšími.

I když jsme záměrně neuváděli frameworky JavaScriptu, abychom se soustředili na základní dovednosti nutné jako webový vývojář před přijetím frameworku, dalším dobrým krokem k dokončení tohoto učebního plánu je naučit se Node.js prostřednictvím jiné série videí: "Beginner Series to: Node.js".

Navštivte naše Kodex chování a Příspěvky pravidla. Vítáme vaše konstruktivní zpětné vazby!

🧭 Offline přístup

Tuto dokumentaci si můžete prohlížet i offline pomocí Docsify. Zforkujte toto repo, nainstalujte Docsify na váš počítač a poté v kořenové složce tohoto repozitáře napište docsify serve. Webová stránka poběží na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF všech lekcí naleznete zde.

🎒 Další kurzy

Náš tým vytváří další kurzy! Podívejte se:

LangChain

Azure / Edge / MCP / Agenti

---

Série Generativní AI

---

Základní vzdělávání

---

Série Copilot

Získání pomoci

Pokud máte potíže nebo jakékoli dotazy ohledně tvorby AI aplikací, připojte se ke společné diskusi s ostatními studenty a zkušenými vývojáři o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti jsou volně sdíleny.

Pokud máte zpětnou vazbu k produktu nebo narazíte na chyby při vývoji, navštivte:

Licence

Tento repozitář je licencován pod licencí MIT. Pro více informací si přečtěte soubor LICENSE.

---

Prohlášení o vyloučení odpovědnosti:
Tento dokument byl přeložen pomocí automatické překladové služby Co-op Translator. Přestože usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro kritické informace doporučujeme využít profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo nesprávné výklady vzniklé použitím tohoto překladu.