Web-Dev-For-Beginners/translations/cs

Webový vývoj pro začátečníky - Kurikulum

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řidejte se do komunity Azure AI Foundry na Discordu

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

1. Vytvořte forknutí repozitáře: 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 potkejte odborníky a ostatní vývojáře

🌐 Podpora více jazyků

Podporováno skrze 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

Dáváte přednost lokálnímu klonování?

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 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é ke zdárnému dokončení kurzu a výrazně rychlejší stažení.

Pokud si přejete, aby byly podporovány další překladové jazyky, jsou uvedeny zde

🧑‍🎓 Jste student?

Navštivte Student Hub stránku, 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 GitHub Copilot Agent mode k dokončení!

Nová výzva přidána, hledejte „GitHub Copilot Agent Challenge 🚀“ ve většině kapitol. Je to nová výzva, kterou můžete dokončit pomocí GitHub Copilota a režimu Agent. Pokud jste režim Agent předtím nepoužívali, dokáže nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.

📣 Oznámení - Nový projekt k postavení pomocí Generativní AI

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

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

Nezapomeňte na 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.
• Komunikujte s historickými postavami pomocí GenAI a naší doprovodné aplikace.
• Zábavný a poutavý příběh, při němž budete cestovat časem!

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 a začněte!

🌱 Začínáme

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

Studující, 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 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, 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 pro doplňující studijní materiály.

📋 Nastavení vašeho prostředí

Toto kurikulum má připravené vývojové prostředí! Jakmile začnete, můžete si vybrat spouštět kurikulum v Codespace (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.

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. Vytvořte fork repozitář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í kurikula v Codespace

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.

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 nástroj příkazového řádku. Naše první lekce, Úvod do programovacích jazyků a nástrojů oboru, 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é vestavěný Terminál. Visual Studio Code si můžete stáhnout zde.

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 Poté 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. 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 - pro náhled HTML stránek přímo ve Visual Studio Code
• Copilot - který vám pomůže psát kód rychleji

📂 Každá lekce zahrnuje:

• volitelnou náčrtovou poznámku
• volitelné doplňkové video
• rozcvičkový kvíz před lekcí
• písemnou lekci
• u lekcí založených na projektu podrobné návody, jak projekt vytvořit
• kontrolní znalostní otázky
• výzvu
• doplňkové čtení
• zadání
• kvíz po lekci

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, kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; řiďte se pokyny ve složce quiz-app.

🗃️ Lekce

	Název projektu	Naučené koncepty	Výukové cíle	Odkaz na lekci	Autor
01	Začínáme	Úvod do programování a nástroje řemeslníka	Naučte se základy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům vykonávat jejich práci	Úvod do programovacích jazyků a nástrojů	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	Floor
03	Začínáme	Přístupnost	Naučte se základy webové přístupnosti	Základy přístupnosti	Christopher
04	Základy JS	Datové typy 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 správu logiky aplikace	Funkce a metody	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í	Jasmine
07	Základy JS	Pole a smyčky	Pracujte s daty pomocí polí a smyček v JavaScriptu	Pole a smyčky	Jasmine
08	Terrarium	HTML v praxi	Vytvořte HTML pro online terárium se zaměřením na vytvoření rozvržení	Úvod do HTML	Jen
09	Terrarium	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	Jen
10	Terrarium	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	Jen
11	Hra psaní na klávesnici	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	Christopher
12	Zelené rozšíření prohlížeče	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	Jen
13	Zelené rozšíření prohlížeče	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ě	Jen
14	Zelené rozšíření prohlížeče	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	Jen
15	Hra ve vesmíru	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	Chris
16	Hra ve vesmíru	Kreslení na plátno	Naučte 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	Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API	Pohyb prvků	Chris
18	Hra ve vesmíru	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í	Chris
19	Hra ve vesmíru	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	Chris
20	Hra ve vesmíru	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í	Chris
21	Bankovní aplikace	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í	Yohan
22	Bankovní aplikace	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	Yohan
23	Bankovní aplikace	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	Yohan
24	Bankovní aplikace	Koncepty správy stavu	Naučte se, jak vaše aplikace uchovává stav a jak s ním programově pracovat	Správa stavu	Yohan
25	Editor kódu pro prohlížeč/VScode	Práce s VScodem	Naučte se používat editor kódu	Použití editoru VScode	Chris
26	AI asistenti	Práce s AI	Naučte se vytvořit vlastního AI asistenta	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 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 učebního plánu můžete absolvovat také jako Výukovou cestu na Microsoft Learn!

Zajištěním, že obsah odpovídá projektům, se proces pro studenty stává zajímavějším a dochází k lepšímu zapamatování konceptů. Napsali jsme také několik úvodních lekcí základů JavaScriptu, které představují koncepty, doplněné videem ze série "Beginners Series to: JavaScript", jejíchž autoři se na plánu podíleli.

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.

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

Navštivte naše chování a příspěvky pravidla. Vítáme vaše konstruktivní návrhy!

🧭 Offline přístup

Tuto dokumentaci můžete spustit offline pomocí Docsify. Vytvořte fork tohoto repozitáře, nainstalujte Docsify 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 se všemi lekcemi naleznete zde.

🎒 Další kurzy

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

LangChain

Azure / Edge / MCP / Agenti

---

Série Generativní AI

---

Základní učení

---

Série Copilot

Získání pomoci

Pokud se zaseknete nebo máte jakékoli otázky ohledně vývoje AI aplikací, připojte se k ostatním učenlivým a zkušeným vývojářům v diskuzích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se sdílejí svobodně.

Pokud máte zpětnou vazbu k produktu nebo chcete hlásit chyby při tvorbě, 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í AI překladatelské služby 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.