Web-Dev-For-Beginners/translations/cs

Vývoj webu 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 si zapamatování znalostí díky naší efektivní projektové pedagogice. Začněte svou cestu programování ještě dnes!

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

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

1. Vytvořte fork 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 Discord a setkejte se s experty a dalšími vývojáři

🌐 Podpora více jazyků

Podporováno pomocí GitHub Action (automatické 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

Preferujete klonovat lokálně?

Tento repozitář obsahuje více než 50 jazykových překladů, což výrazně zvyšuje velikost stahování. Chcete-li klonovat 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'

Tak získáte vše potřebné ke splnění kurzu s mnohem rychlejším stažením.

Pokud chcete podporu dalších jazyků překladů, jsou uvedeny 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 chcete uložit do záložek a občas ji navštívit, protože pravidelně měníme obsah.

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

Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" v několika kapitolách. Je to nová výzva pro dokončení s využitím GitHub Copilota a režimu Agenta. Pokud jste režim Agenta 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 k vytvoření pomocí generativní AI

Právě byl přidán nový AI Assistant projekt, podívejte se na něj projekt

📣 Oznámení - Nový učební plán o generativní AI pro JavaScript byl právě vydán

Nezmeškejte náš nový kurz o 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é vyprávění, budete cestovat časem!

Každá lekce obsahuje úkol k dokončení, ověření znalostí a výzvu, která vás provede tématy jako:

• Promptování a inženýrství 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é, zahrnuli jsme několik návrhů, jak tento učební plán používat. Budeme rádi za vaši zpětnou vazbu v naší diskuzní sekci!

Žáci, pro každou lekci začněte kvízem před přednáškou a pokračujte čtením přednáškového materiálu, plněním různých aktivit a ověřte si porozumění kvízem po přednášce.

Pro zkvalitnění vašeho učení se spojte s ostatními a pracujte na projektech společně! Diskuze jsou vítány v našem diskuzním fóru, kde je náš tým moderátorů připraven odpovídat na vaše otázky.

Pro další vzdělávání důrazně doporučujeme prozkoumat Microsoft Learn pro doplňující studijní materiály.

📋 Nastavení prostředí

Tento učební plán má připravené vývojové prostředí! Na začátku můžete zvolit spuštění kurzu v Codespace (prostředí v prohlížeči bez nutnosti instalace), nebo lokálně na svém počítači s použitím editoru jako je Visual Studio Code.

Vytvoření repozitáře

Pro snadné ukládání své práce doporučujeme vytvořit vlastní kopii tohoto repozitáře. Uděláte to 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í kurzu.

Postupujte podle těchto kroků:

1. Vytvořte Fork Repozitáře: Klikněte na tlačítko "Fork" vpravo nahoře na této stránce.
2. Naklonujte Repozitář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Spuštění kurzu v Codespace

Ve své kopii repozitáře klikněte na tlačítko Code a vyberte Open with Codespaces. Tím se vám vytvoří nový Codespace k práci.

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

K lokálnímu spuštění kurzu potřebujete textový editor, prohlížeč a nástroj příkazové řádky. 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 nejvíce vyhovuje.

Doporučujeme použít editor Visual Studio Code, který má integrovaný Terminál. Visual Studio Code si můžete stáhnout zde.

1. Naklonujte repozitář do počítače. Uděláte to kliknutím na tlačítko Code a zkopírováním URL:

   CodeSpace Pak otevřete Terminál v Visual Studio Code a spusťte následující příkaz, přičemž <your-repository-url> nahraďte URL adresou, 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 výběrem právě klonované složky.

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

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

📂 Každá lekce obsahuje:

• volitelnou sketchnotu
• volitelné doplňkové video
• rozehřívací kvíz před lekcí
• psanou lekci
• u lekcí založených na projektu návod krok za krokem, jak projekt vytvořit
• ověřování znalostí
• výzvu
• doplňkové čtení
• úkol
• kvíz po lekci

Poznámka ohledně kvízů: Všechny kvízy jsou obsaženy ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné zde, aplikaci s kvízy lze spustit lokálně nebo nasadit na Azure; následujte pokyny ve složce quiz-app.

🗃️ Lekce

	Název projektu	Výukové koncepty	Výukové cíle	Propojená lekce	Autor
01	Začínáme	Úvod do programování a nástroje řemesla	Naučte se základní principy většiny programovacích jazyků a o software, který pomáhá profesionálním vývojářům při 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 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í toku 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 cykly	Pracujte s daty pomocí polí a cyklů v JavaScriptu	Pole a cykly	Jasmine
08	Terrárium	HTML v praxi	Vytvořte HTML pro online terrárium, se zaměřením na sestavení rozvržení	Úvod do HTML	Jen
09	Terrárium	CSS v praxi	Vytvořte CSS pro stylování online terrária, se zaměřením na základy CSS včetně responzivního designu	Úvod do CSS	Jen
10	Terrárium	JavaScript Closures, manipulace s DOM	Vytvořte JavaScript, který umožní terráriu fungovat jako drag & drop rozhraní, zaměřeno na uzávorky a manipulaci s DOM	JavaScript Closures, manipulace s DOM	Jen
11	Hra na psaní	Vytvoření hry na psaní	Naučte se využívat události klávesnice k řízení logiky vaší JavaScriptové aplikace	Programování založené na událostech	Christopher
12	Zelené rozšíření pro prohlížeč	Práce s prohlížeči	Naučte se, jak fungují prohlížeče, jejich historii a jak vytvořit první prvky rozšíření prohlížeče	O prohlížečích	Jen
13	Zelené rozšíření pro prohlížeč	Vytváření formulářů, volání API a ukládání proměnných do lokálního úložiště	Vytvořte JavaScriptové prvky vašeho rozšíření prohlížeče pro volání API 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	Zelené rozšíření pro prohlížeč	Pozadové procesy v prohlížeči, výkonnost webu	Použijte pozadové procesy pro správu ikony rozšíření; naučte se o výkonnosti webu a některých optimalizacích	Pozadové úlohy a výkonnost	Jen
15	Hra ve vesmíru	Pokročilejší vývoj her v JavaScriptu	Naučte se o dědičnosti pomocí tříd i kompozice a vzoru Pub/Sub jako přípravu na budování hry	Úvod do pokročilého vývoje her	Chris
16	Hra ve vesmíru	Kreslení na plátno	Seznamte se s API Canvas, které slouží k vykreslování prvků na obrazovku	Kreslení na plátno	Chris
17	Hra ve vesmíru	Pohyb objektů po obrazovce	Objevte, jak získávají prvky pohyb pomocí kartézských souřadnic a Canvas API	Pohyb objektů	Chris
18	Hra ve vesmíru	Detekce kolizí	Umožněte prvkům kolidovat a reagovat na sebe pomocí stisků kláves a zajistěte cooldown funkci pro výkon hry	Detekce kolizí	Chris
19	Hra ve vesmíru	Udržování skóre	Provádějte matematické výpočty na základě stavu a výkonu hry	Udržování skóre	Chris
20	Hra ve vesmíru	Ukončení a restart hry	Naučte se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných	Podmínka ukončení	Chris
21	Bankovní aplikace	HTML šablony a směrování ve webové aplikaci	Naučte se vytvářet strukturu vícestránkového webu pomocí routingu a HTML šablon	HTML šablony a směrování	Yohan
22	Bankovní aplikace	Vytvoření přihlašovacího a registr. 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 užívání dat	Jak data proudí do a z vaší aplikace, jak je získávat, ukládat a likvidovat	Data	Yohan
24	Bankovní aplikace	Koncepty správy stavu	Naučte se, jak si vaše aplikace uchovává stav a jak jím programově řídit	Správa stavu	Yohan
25	Editor kódu Browser/VScode	Práce s VScode	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 s ohledem na dvě klíčové pedagogické zásady:

• 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í, virtuálního terrária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders a bankovní aplikace pro firmy. Na konci série získají pevné porozumění webovému vývoji.

🎓 První lekce tohoto kurikula můžete absolvovat jako Výukovou cestu na Microsoft Learn!

Zajištěním souladu obsahu s projekty je proces pro studenty zajímavější a dochází k lepšímu zapamatování konceptů. Také jsme napsali několik úvodních lekcí v základech JavaScriptu pro uvedení konceptů, doplněných videem ze série "Beginners Series to: JavaScript", jehož autoři na kurikulum přispěli.

Navíc nízkorizikový kvíz před hodinou nasměruje záměr studenta k učení tématu a druhý kvíz po hodině zajistí další upevnění znalostí. Kurikulum je navrženo flexibilně a zábavně, lze ho absolvovat celé nebo po částech. Projekty začínají jednoduše a postupně se během 12týdenního cyklu zvyšuje jejich složitost.

Zatímco jsme záměrně vynechali zavedení JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné webovému vývojáři před přechodem na framework, dobrým dalším krokem po absolvování tohoto kurikula je naučit se Node.js pomocí další série videí: "Beginner Series to: Node.js".

Navštivte naše zásady Kodex chování a Přispívání. Vítáme vaše konstruktivní připomínky!

🧭 Offline přístup

Tuto dokumentaci si můžete spustit offline za použití Docsify. Forkněte si tento repozitář, nainstalujte Docsify na lokální stroj a v kořenové složce repozitáře spusťte příkaz docsify serve. Webová stránka bude dostupná na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF všech lekcí naleznete zde.

🎒 Ostatní kurzy

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

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Získání pomoci

Pokud uvíznete nebo máte nějaké dotazy ohledně vytváření AI aplikací, připojte se k ostatním studentům a zkušeným vývojářům v diskusích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se volně sdílejí.

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

Licence

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

---

Prohlášení:
Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. Přestože usilujeme o přesnost, vezměte prosím na vědomí, že automatizované 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 zásadní informace se doporučuje 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.