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 zabývá JavaScriptem, 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 uchování znalostí díky naší efektivní projektově orientované pedagogice. Začněte svou cestu programování ještě dnes!

Připojte se k Azure AI Foundry Discord komunitě

Postupujte podle těchto kroků, abyste začali 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řidejte se k Azure AI Foundry Discord a poznejte experty a ostatní vývojáře

🌐 Podpora více jazyků

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

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Čínština (zjednodušená) | Čínština (tradiční, Hongkong) | Čínština (tradiční, Macao) | Čínština (tradiční, Tchaj-wan) | Chorvatština | Čeština | Dánština | Nizozemština | Estonština | Finština | Francouzština | Němčina | Řečtina | Hebrejština | Hindština | Maďarština | Indonéština | Italština | Japonština | Kannadština | Korejština | Litevština | Malajština | Malayalam | Maráthština | Nepálština | Nigérijská pidžin | Norština | Perština (Farsi) | Polština | Portugalština (Brazílie) | Portugalština (Portugalsko) | Paňdžábština (Gurmukhí) | Rumunština | Ruština | Srbština (cyrilice) | Slovenština | Slovinština | Španělština | Svahilština | Švédština | Tagalog (Filipínština) | Tamil | Telugština | Thajština | Turečtina | Ukrajinština | Urdu | Vietnamština

Raději klonovat lokálně?

Tento repozitář obsahuje více než 50 překladů jazyků, což výrazně zvětš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 chcete podporu dalších jazyků, jsou zde uvedeny podporované jazykové možnosti zde

🧑‍🎓 Jste student?

Navštivte Student Hub stránku, kde naleznete zdroje pro začátečníky, studentské balíčky a dokonce i způsoby, jak získat bezplatný certifikát. Tuto stránku si chcete zařadit mezi oblíbené a čas od času ji zkontrolovat, protože obsah měníme měsíčně.

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

Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" ve většině kapitol. To je nová výzva, kterou máte dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent nikdy 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ě přidán nový projekt AI asistenta, podívejte se na 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ů až po RAG.
• Komunikujte s historickými postavami pomocí GenAI a naší průvodní aplikace.
• Zábavný a poutavý příběh, budete cestovat časem!

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

• Vytváření promptů a jejich inženýrství
• 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 použít toto kurikulum. 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 přednáškového materiálu, dokončením různých aktivit a ověřením porozumění pomocí povětrná přednáškového kvízu.

Pro lepší zkušenosti s učením se spojte s kolegy a pracujte na projektech společně! Diskuze jsou vítané v našem diskuzním fóru, kde je k dispozici náš tým moderátorů, kteří vám pomohou.

Pro další vzdělávání 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, zda budete kurz spouštět v Codespace (prohlížečem ovládané prostředí bez nutnosti instalace), nebo lokálně na svém počítači pomocí textového editoru, například Visual Studio Code.

Vytvořte si vlastní repozitář

Pro snadné ukládání vaší práce je doporučeno vytvořit si vlastní kopii tohoto repozitáře. Můžete tak učinit kliknutím na tlačítko Použít tuto šablonu na vrchu stránky. Tím se vytvoří nový repozitář na vašem GitHub účtu s kopií kurikula.

Postupujte následovně:

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 své kopii repozitáře klikněte na tlačítko Code a vyberte Open with Codespaces. Tím vytvoříte nový Codespace, ve kterém můžete pracovat.

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

Pro spuštění tohoto 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ů, vás provede různými možnostmi pro každý z těchto nástrojů, abyste si vybrali, co vám vyhovuje nejvíce.

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

1. Naklonujte si své úložiště do počítače. Můžete to udělat 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 právě zkopírovanou URL:

   git clone <your-repository-url>
   

2. Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na File > Open Folder a výběrem 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 - pomáhá rychleji psát kód

📂 Každá lekce obsahuje:

• volitelnou náčrtnou poznámku (sketchnote)
• volitelné doplňkové video
• rozcvičovací kvíz před lekcí
• psanou lekci
• u lekcí založených na projektu krok za krokem průvodce, jak projekt postavit
• kontrolní otázky
• výzvu
• doplňkové čtení
• úkol
• kvíz po lekci

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

🗃️ Lekce

	Název projektu	Naučené koncepty	Cíle učení	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 softwaru, která pomáhá profesionálním vývojářům	Ú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 k ří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 cykly	Práce s daty pomocí polí a cyklů v JavaScriptu	Pole a cykly	Jasmine
08	Terrarium	HTML v praxi	Vytvořte HTML pro online terárium, zaměřte se na tvorbu rozvržení	Úvod do HTML	Jen
09	Terrarium	CSS v praxi	Vytvořte CSS pro stylování online terária, zaměřte se na základy CSS včetně responzivního designu	Úvod do CSS	Jen
10	Terrarium	JavaScriptové uzávěry, manipulace s DOM	Napište JavaScript, aby terárium fungovalo jako rozhraní drag/drop, zaměřte se na uzávěry a manipulaci s DOM	JavaScriptové uzávěry, manipulace s DOM	Jen
11	Typing Game	Vytvoření hry psaní na klávesnici	Naučte se používat události klávesnice k řízení logiky JavaScriptové aplikace	Programování řízené událostmi	Christopher
12	Green Browser Extension	Práce s prohlížeči	Naučte se, jak fungují prohlížeče, jejich historii a jak vytvářet základy rozšíření prohlížeče	O prohlížečích	Jen
13	Green Browser Extension	Vytváření formuláře, volání API a ukládání proměnných v lokálním úložišti	Vytvořte JavaScriptové prvky rozšíření pro volání API pomocí proměnných uložených v lokálním úložišti	API, formuláře a lokální úložiště	Jen
14	Green Browser Extension	Pozadí procesů v prohlížeči, webový výkon	Použijte pozadí prohlížeče ke správě ikony rozšíření; naučte se o výkonu webu a optimalizacích	Pozadí úkolů a výkon	Jen
15	Space Game	Pokročilejší vývoj her v JavaScriptu	Naučte 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čte se o Canvas API, které slouží k vykreslování prvků 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í	Udělejte, aby se prvky srážely a reagovaly na sebe pomocí stisků kláves a přidejte funkci chladnutí pro výkon hry	Detekce kolizí	Chris
19	Space Game	Udržování skóre	Proveďte matematické výpočty na základě stavu a výkonu hry	Udržování skóre	Chris
20	Space Game	Ukončení 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	Podmínka ukončení	Chris
21	Banking App	HTML šablony a směrování ve webové aplikaci	Naučte se vytvářet architekturu vícestránkového webu pomocí směrování a HTML šablon	HTML šablony a směrování	Yohan
22	Banking App	Vytvoření přihlašovacího a registračního formuláře	Naučte se o tvorbě formulářů a zpracování validací	Formuláře	Yohan
23	Banking App	Metody získávání a použití dat	Jak data proudí do a z vaší aplikace, jak je získávat, ukládat a odstraňovat	Data	Yohan
24	Banking App	Koncepty správy stavu	Naučte se, jak vaše aplikace udržuje stav a jak ho programově spravovat	Správa stavu	Yohan
25	Browser/VScode Code	Práce s VScode	Naučte se používat editor kódu	Použití editoru kódu VScode	Chris
26	AI Assistants	Práce s AI	Naučte se vytvořit vlastního AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogika

Náš výukový plán je navržen s ohledem na dva klíčové pedagogické 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 možnost získat praktické zkušenosti stavbou hry psaní na klávesnici, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders 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!

Díky sladění obsahu s projekty je proces pro studenty zajímavější a zvyšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu doplněných videi z kolekce "Beginners Series to: JavaScript", jejichž autoři se podíleli na tomto kurzu.

Navíc nízkorizikový kvíz před hodinou nastavuje záměr studenta se učit dané téma, zatímco druhý kvíz po hodině podporuje další zapamatování. Tento kurz je navržen tak, aby byl flexibilní a zábavný a lze ho absolvovat celý nebo částečně. Projekty začínají malé a na konci 12týdenního cyklu jsou stále složitější.

Záměrně jsme se vyhnuli zavádění JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné jako webový vývojář před přijetím frameworku, dobrým dalším krokem po absolvování tohoto kurzu by bylo naučit se Node.js prostřednictvím jiné kolekce videí: "Beginner Series to: Node.js".

Navštivte naše Kodex chování a Přispívání. Těšíme se na vaše konstruktivní návrhy!

🧭 Offline přístup

Tuto dokumentaci můžete spustit offline pomocí Docsify. Forkněte si toto repo, nainstalujte Docsify na svém počítači a poté v kořenové složce tohoto repozitáře spusťte příkaz docsify serve. Webová stránka bude servírována na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF všech lekcí naleznete zde.

🎒 Ostatní kurzy

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

LangChain

Azure / Edge / MCP / Agents

---

Generativní AI série

---

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

---

Série Copilot

Získání pomoci

Pokud se zaseknete nebo máte otázky ohledně tvorby 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 sdílejí otevřeně.

Pokud máte zpětnou vazbu k produktu nebo narazíte na chyby během vývoje, 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. I když usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Za jakékoli nedorozumění nebo nesprávné výklady vzniklé z použití tohoto překladu neneseme odpovědnost.