Web-Dev-For-Beginners/translations/cs

Vývoj webu pro začátečníky - kurikulum

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!

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

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

1. Forkujte repozitář: Klikněte na
2. Naklonujte repozitář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Připojte se k Azure AI Foundry Discordu a setkejte se s odborníky a dalšími vývojáři

🌐 Podpora více jazyků

Podporováno přes GitHub Action (automatizované a vždy aktuální)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Raději klonovat lokálně?

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:

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'

Tímto získáte vše potřebné k dokončení kurzu s mnohem rychlejším stažením.

Pokud chcete mít podporu dalších jazyků, seznam podporovaných je uveden zde

🧑‍🎓 Jste student?

Navštivte Student Hub stránku, 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ě.

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

Přidána nová výzva, hledejte „GitHub Copilot Agent Challenge 🚀“ v většině kapitol. To je nová výzva, kterou můžete splnit pomocí GitHub Copilot a Agent režimu. Pokud jste režim Agent ještě nepoužili, umožňuje nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.

📣 Oznámení - Nový projekt ke stavbě pomocí generativní AI

Právě přidán nový projekt AI asistenta, podívejte se projekt

📣 Oznámení - Nové kurikulum o generativní AI pro JavaScript bylo právě vydáno

Nezmeškejte naše nové kurikulum generativní AI!

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

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

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
• Vyhledávací aplikace

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

🌱 Začínáme

Učitelé, máme několik návrhů, jak používat toto kurikulum. Budeme rádi za vaši zpětnou vazbu v našem diskuzním fóru!

Studenti, 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.

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, kde náš tým moderátorů bude k dispozici odpovědět na vaše dotazy.

Pro další vzdělávání důrazně doporučujeme prozkoumat Microsoft Learn 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 (prohlížečové, bez nutnosti instalace), nebo lokálně na svém počítači s textovým editorem jako je Visual Studio Code.

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.

Postupujte takto:

1. Forkujte repozitář: 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í kurikula v Codespace

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.

Spuštění kurikula lokálně na vašem počítači

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ů, 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 jako editor, který má také integrovaný Terminál. Visual Studio Code si můžete stáhnout zde.

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:

   CodeSpace Pak otevřete Terminál ve 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. Uděláte to kliknutím na Soubor > Otevřít složku a vyberete složku, kterou jste právě klonovali.

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

• Live Server – pro náhled HTML stránek přímo ve Visual Studio Code
• Copilot – aby vám pomohl psát kód rychleji

📂 Každá lekce obsahuje:

• volitelný sketchnote
• 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í
• výzvu
• doplňující čtení
• úkol
• kvíz po lekci

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, kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; postup najdete 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ů	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 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čit se o funkcích a metodách pro řízení toku logiky aplikace	Funkce a metody	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í	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	Postavit HTML pro vytvoření online terária se zaměřením na vytváření rozvržení	Úvod do HTML	Jen
09	Terrarium	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	Jen
10	Terrarium	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	Jen
11	Hra na psaní	Stavba hry na psaní	Naučit se používat události klávesnice k řízení logiky vaší JavaScriptové aplikace	Event-driven programování	Christopher
12	Rozšíření pro prohlížeč Green	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	Jen
13	Rozšíření pro prohlížeč Green	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ě	Jen
14	Rozšíření pro prohlížeč Green	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	Jen
15	Hra ve vesmíru	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	Chris
16	Hra ve vesmíru	Kreslení na plátno	Naučit se o Canvas API používaném pro kreslení prvků na obrazovku	Kreslení na plátno	Chris
17	Hra ve vesmíru	Pohyb prvků po obrazovce	Objevit, jak prvky získávají pohyb pomocí kartézských souřadnic a Canvas API	Pohyb prvků	Chris
18	Hra ve vesmíru	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í	Chris
19	Hra ve vesmíru	Udržování skóre	Provádět matematické výpočty podle stavu a výkonu hry	Udržování skóre	Chris
20	Hra ve vesmíru	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í	Chris
21	Bankovní aplikace	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í	Yohan
22	Bankovní aplikace	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	Yohan
23	Bankovní aplikace	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	Yohan
24	Bankovní aplikace	Koncepty správy stavu	Naučit se, jak vaše aplikace udržuje stav a jak ho programově spravovat	Správa stavu	Yohan
25	Editor kódu v prohlížeči/VScode	Práce s VScode	Naučit se používat editor kódu	Použití editoru VScode	Chris
26	AI asistenti	Práce s AI	Naučit se vybudovat vlastního asistenta umělé inteligence	Projekt AI asistenta	Chris

🏫 Pedagogika

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.

🎓 První lekce tohoto kurzu můžete absolvovat jako Learn Path 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“, jejichž někteří autoři přispěli do tohoto kurikula.

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.

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“.

Navštivte naše pokyny Kodex chování a Přispívání. Těšíme se na vaši konstruktivní zpětnou vazbu!

🧭 Offline přístup

Tuto dokumentaci můžete používat offline pomocí Docsify. Forkujte tento repozitář, nainstalujte Docsify 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.

📘 PDF

PDF všech lekcí lze najít zde.

🎒 Další kurzy

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

LangChain

---

Azure / Edge / MCP / Agenti

---

Série Generativní AI

---

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

---

Série Copilot

Získání pomoci

Pokud se zaseknete nebo máte jakékoli dotazy týkající se tvorby AI aplikací, připojte se ke komunitě spolužáků a zkušených vývojářů na diskuse o MCP. Je to podporující komunita, kde jsou otázky vítány a znalosti se volně sdílejí.

Pokud máte zpětnou vazbu k produktu nebo se při tvorbě setkáte s chybami, navštivte:

Licence

Tento repozitář je licencován pod licencí MIT. Více informací naleznete v souboru LICENSE.

---

Prohlášení o vyloučení odpovědnosti: Tento dokument byl přeložen pomocí služby automatického překladu AI 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.