Web-Dev-For-Beginners/translations/cs

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

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 jsou terária, rozšíření pro 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í díky naší efektivní metodice založené na projektech. Začněte svou cestu kódováním dnes!

Připojte se k Discordu Azure AI Foundry a potkejte odborníky a další vývojáře.

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 Discordu a potkejte odborníky a další vývojáře

🌐 Podpora vícejazyčných verzí

Podporováno pomocí GitHub Action (automatizováno 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 | Khmer | 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 přes 50 jazykových překladů, což výrazně zvyšuje velikost stahování. Pro klonování bez překladů použijte sparse checkout:

Bash / macOS / Linux:

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'

CMD (Windows):

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ím získáte vše potřebné k dokončení kurzu s mnohem rychlejším stažením.

Pokud si přejete mít další překlady, podporované jazyky jsou uvedeny zde. zde

🧑‍🎓 Jste student?

Navštivte Student Hub stránku, kde najdete zdroje pro začátečníky, studentské balíčky a také možnosti, jak získat bezplatný certifikát. Tuto stránku si nezapomeňte uložit do záložek a pravidelně kontrolovat, protože obsah měníme každý měsíc.

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

Byla přidána nová výzva, hledejte „GitHub Copilot Agent Challenge 🚀“ v většině kapitol. Jedná se o novou výzvu, kterou máte dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent dosud nepoužívali, 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

Byl přidán nový projekt AI asistenta, podívejte se na něj projekt

📣 Oznámení - Nové kurikulum o Generativní AI pro JavaScript právě vyšlo

Nepromeš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.
• Komunikujte s historickými postavami pomocí GenAI a naší doprovodné aplikace.
• Zábavný a poutavý příběh, zažijete cestování časem!

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

• Výzvy 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é, máme několik návrhů, jak používat toto kurikulum. Rádi uvítáme vaše názory v našem diskuzním fóru!

Studenti, ke každé lekci začněte přednáškovým kvízem, pak si přečtěte učební materiál, dokončete různé aktivity a ověřte své porozumění pomocí závěrečného kvízu.

Pro lepší zážitek z učení se propojte s vrstevníky a pracujte na projektech společně! Diskuze jsou vítány v našem diskuzním fóru, kde vám tým moderatorů rád pomůže s dotazy.

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

📋 Nastavení vývojového prostředí

Toto kurikulum má připravené vývojové prostředí! Na začátku si můžete zvolit spuštění kurikula v Codespace (prostředí založené na prohlížeči bez nutnosti instalace), nebo lokálně na vašem počítači pomocí textového editoru, například Visual Studio Code.

Vytvořte si repozitář

Abyste si mohli snadno ukládat svou práci, doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Učiníte tak kliknutím na tlačítko Use this template v horní části stránky. Tím se vytvoří 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 zvolte Open with Codespaces. Vytvoří se tak nová Codespace, kde 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é řádky. Naše první lekce, Úvod do programovacích jazyků a nástrojů řemesla, vás provede různými možnostmi pro každý z 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 vaše úložiště do počítače. Uděláte to kliknutím na tlačítko Code a zkopírováním 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 ve Visual Studio Code složku. Uděláte to kliknutím na Soubor > Otevřít složku a vyberte složku, kterou jste právě naklonovali.

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

• Live Server - pro náhled HTML stránek přímo ve Visual Studio Code
• Copilot - pro rychlejší psaní kódu

📂 Každá lekce obsahuje:

• nepovinné sketchnote
• nepovinné doplňkové video
• předpočáteční kvíz
• písemnou lekci
• u lekcí založených na projektu krok za krokem průvodce výstavbou projektu
• kontrolu znalostí
• výzvu
• doplňující četbu
• zadání
• povědomostní kvíz po lekci

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

🗃️ Lekce

	Název projektu	Učené koncepty	Učební 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 jejich práci	Úvod do programovacích jazyků a nástrojů profese	Jasmine
02	Začínáme	Základy GitHubu, týmová práce	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 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čit 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čit se vytvářet podmínky v kódu pomocí rozhodovacích metod	Rozhodování	Jasmine
07	Základy JS	Pole a cykly	Práce s daty za použití polí a cyklů v JavaScriptu	Pole a cykly	Jasmine
08	Terrárium	HTML v praxi	Vytvořit HTML pro online terárium, se zaměřením na rozvržení	Úvod do HTML	Jen
09	Terrárium	CSS v praxi	Vytvořit CSS pro stylování online terária, zaměřit se na základy CSS a responzivní design	Úvod do CSS	Jen
10	Terrárium	JavaScript Closures, manipulace s DOM	Vytvořit JavaScript pro terárium jako rozhraní drag/drop, zaměřit se na closury a práci s DOM	JavaScript Closures, manipulace s DOM	Jen
11	Hra na psaní	Vytvoření hry na psaní	Naučit se používat klávesové události k řízení logiky JavaScriptové aplikace	Programování orientované na události	Christopher
12	Rozšíření prohlížeče Green	Práce s prohlížeči	Naučit se, jak fungují prohlížeče, jejich historii a jak vytvořit základy rozšíření prohlížeče	O prohlížečích	Jen
13	Rozšíření prohlížeče Green	Vytváření formulářů, volání API a ukládání proměnných do lokálního úložiště	Vytvořit JavaScriptové prvky rozšíření pro volání API s využitím lokálního úložiště	API, formuláře a lokální úložiště	Jen
14	Rozšíření prohlížeče Green	Pozadí procesů v prohlížeči, výkonnost webu	Použít pozadí procesů pro správu ikony rozšíření; naučit se o webové výkonnosti a optimalizacích	Pozadí a výkonnost	Jen
15	Hra ve vesmíru	Pokročilejší vývoj her v JavaScriptu	Naučit se dědičnost pomocí tříd a kompozice a vzor Pub/Sub v přípravě na tvorbu hry	Úvod do pokročilého vývoje her	Chris
16	Hra ve vesmíru	Kreslení na canvas	Naučit se používat Canvas API, používané pro kreslení prvků na obrazovku	Kreslení na canvas	Chris
17	Hra ve vesmíru	Pohyb prvků po obrazovce	Objevte, jak prvky získávají pohyb za použití kartézských souřadnic a Canvas API	Pohyb prvků	Chris
18	Hra ve vesmíru	Detekce kolizí	Nechte prvky kolidovat a reagovat na sebe pomocí stisků kláves, přidejte funkci cooldown pro zajištění výkonu hry	Detekce kolizí	Chris
19	Hra ve vesmíru	Udržování skóre	Provádění matematických výpočtů podle stavu a výkonu hry	Udržování skóre	Chris
20	Hra ve vesmíru	Ukončení a restart hry	Naučit se ukončit a restartovat hru včetně úklidu 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čit se vytvořit 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 registračního formuláře	Naučit se jak vytvářet formuláře a také jak validovat jejich zadání	Formuláře	Yohan
23	Bankovní aplikace	Metody získávání a používání dat	Jak data plynou do aplikace a ven, jak je získat, uložit a poté odstranit	Data	Yohan
24	Bankovní aplikace	Koncepty správy stavů	Naučit se, jak aplikace uchovává stav a jak s ním programátorsky pracovat	Správa stavů	Yohan
25	Browser/VScode Code	Práce s VScode	Naučit se používat editor kódu	Použití VScode Code Editor	Chris
26	AI asistenti	Práce s AI	Naučit se vytvořit vlastního AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogika

Naše učební osnovy jsou navrženy se dvěma hlavní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 příležitost získat praktické zkušenosti tvorbou hry na psaní, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu space invader a bankovní aplikace pro podnikání. Na konci série studenti získají pevné základy webového vývoje.

🎓 První lekce tohoto kurzu můžete absolvovat jako Learn Path na Microsoft Learn!

Zajištěním souladu obsahu s projekty je proces pro studenty více poutavý a lepší je také zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu doplněných videi ze sbírky "Beginners Series to: JavaScript", jejichž autoři na tuto osnovu přispěli.

Navíc před hodinou nízkorizikový kvíz nastavit zaměření studenta na téma, zatímco druhý kvíz po hodině zajistí lepší zapamatování. Tento obsah je navržen tak, aby byl flexibilní a zábavný a lze ho absolvovat celý nebo částečně. Projekty začínají jednoduše a během 12 týdnů se stávají stále složitějšími.

Záměrně jsme se vyhnuli zavedení JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné pro webového vývojáře před přijetím frameworku; dobrým dalším krokem po dokončení tohoto kurzu je naučit se Node.js skrze další kolekci videí: "Beginner Series to: Node.js".

Navštivte náš Kodex chování a pokyny k přispívání. Vítáme vaše konstruktivní připomínky!

🧭 Přístup offline

Tuto dokumentaci můžete spustit offline pomocí Docsify. Forkněte si toto úložiště, nainstalujte Docsify na váš místní počítač, a potom v kořenové složce tohoto úložiště napište docsify serve. Webová stránka bude dostupná na portu 3000 na localhostu: localhost:3000.

📘 PDF

PDF všech lekcí najdete zde.

🎒 Další kurzy

Náš tým vyrábí i další kurzy! Podívejte se:

LangChain

Azure / Edge / MCP / Agenti

---

Generativní AI série

---

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

---

Série Copilot

Získání pomoci

Pokud se zaseknete nebo máte jakékoli dotazy ohledně vytváření AI aplikací. Přidejte 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 sdíleny svobodně.

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. Více informací naleznete v souboru LICENSE.

---

Disclaimer:
Tento dokument byl přeložen pomocí AI překladatelské služby 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. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoliv nedorozumění nebo mylné výklady vyplývající z použití tohoto překladu.