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 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá z 24 lekcí se zaměřuje na JavaScript, 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 zapamatování znalostí díky efektivnímu projektově orientovanému přístupu. Začněte svou cestu programováním ještě dnes!

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

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

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

🌐 Podpora více jazyků

Podporováno prostřednictvím GitHub Action (automaticky a vždy aktuální)

Arabština | Bengálština | Bulharština | Barmština (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 | Korejština | Litevština | Malajština | Maráthština | Nepálština | Norština | Perština (Fársí) | Polština | Portugalština (Brazílie) | Portugalština (Portugalsko) | Panjábština (Gurmukhi) | Rumunština | Ruština | Srbština (cyrilice) | Slovenština | Slovinština | Španělština | Svahilština | Švédština | Tagalog (Filipínština) | Tamilština | Thajština | Turečtina | Ukrajinština | Urdu | Vietnamština

Pokud si přejete přidat další jazyky, seznam podporovaných jazyků najdete zde

🧑‍🎓 Jste student?

Navštivte stránku Student Hub, kde najdete zdroje pro začátečníky, studentské balíčky a dokonce i způsoby, jak získat poukaz na bezplatný certifikát. Tuto stránku si určitě uložte do záložek a pravidelně ji kontrolujte, protože obsah se mění každý měsíc.

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

Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" ve většině kapitol. Jedná se o novou výzvu, kterou můžete dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent ještě nepoužívali, je schopen nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další.

📣 Oznámení - Nový projekt na tvorbu pomocí generativní AI

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

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

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

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

• Lekce pokrývající 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 učením témat, jako jsou:

• Tvorba a optimalizace 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é, přidali jsme několik návrhů, jak využít toto kurikulum. Budeme rádi za vaši zpětnou vazbu v našem diskuzním fóru!

Studenti, u každé lekce začněte přednáškovým kvízem a pokračujte čtením materiálů, plněním různých aktivit a ověřte si své znalosti pomocí kvízu po přednášce.

Pro zlepšení vašeho vzdělávacího zážitku se spojte se svými 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, aby odpověděl na vaše otázky.

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

📋 Nastavení vašeho prostředí

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

Vytvořte svůj repozitář

Abyste si mohli snadno uložit svou práci, doporučujeme vytvořit si vlastní kopii tohoto repozitáře. Můžete to udělat 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 podle těchto kroků:

1. Forkněte 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 tohoto repozitáře, kterou jste vytvořili, klikněte na tlačítko Code a vyberte Open with Codespaces. Tím se 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í tohoto kurikula lokálně na vašem počítači 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 mohli vybrat, co vám nejlépe vyhovuje.

Naše doporučení je použít Visual Studio Code jako váš editor, který má také vestavěný Terminál. Visual Studio Code si můžete stáhnout zde.

1. Naklonujte svůj repozitář na svůj počítač. 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, kde <your-repository-url> nahradíte URL, kterou jste právě zkopírovali:

   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í pro Visual Studio Code:

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

📂 Každá lekce obsahuje:

• volitelný sketchnote
• volitelné doplňkové video
• zahřívací kvíz před lekcí
• písemnou lekci
• u lekcí založených na projektech podrobné návody, jak projekt vytvořit
• kontrolu znalostí
• výzvu
• doplňkové čtení
• úkol
• kvíz po lekci

Poznámka ke kvízům: Všechny kvízy jsou obsaženy ve složce Quiz-app, celkem 48 kvízů, každý obsahuje tři otázky. Jsou dostupné zde a aplikaci kvízů lze spustit lokálně nebo nasadit na Azure; postupujte podle pokynů ve složce quiz-app.

🗃️ Lekce

	Název projektu	Učené koncepty	Cíle učení	Odkaz na lekci	Autor
01	Začínáme	Úvod do programování a nástroje pro vývojáře	Naučte se základní principy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům v jejich práci	Úvod do programovacích jazyků a nástrojů pro vývojáře	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í logického toku aplikace	Funkce a metody	Jasmine a Christopher
06	Základy JS	Rozhodování v JavaScriptu	Naučte se vytvářet podmínky ve vašem kódu pomocí metod rozhodování	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	Terárium	HTML v praxi	Vytvořte HTML pro online terárium, zaměřte se na vytvoření rozvržení	Úvod do HTML	Jen
09	Terárium	CSS v praxi	Vytvořte CSS pro stylizaci online terária, zaměřte se na základy CSS včetně vytvoření responzivní stránky	Úvod do CSS	Jen
10	Terárium	Uzávěry v JavaScriptu, manipulace s DOM	Vytvořte JavaScript, aby terárium fungovalo jako rozhraní drag/drop, zaměřte se na uzávěry a manipulaci s DOM	Uzávěry v JavaScriptu, manipulace s DOM	Jen
11	Hra na psaní	Vytvořte hru na psaní	Naučte se používat události klávesnice k řízení logiky vaší JavaScript aplikace	Programování řízené událostmi	Christopher
12	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í pro prohlížeč	O prohlížečích	Jen
13	Rozšíření pro prohlížeč	Vytvoření formuláře, volání API a ukládání proměnných do lokálního úložiště	Vytvořte JavaScript prvky vašeho rozšíření pro prohlížeč, které volají 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	Rozšíření pro prohlížeč	Procesy na pozadí v prohlížeči, výkon webu	Použijte procesy na pozadí prohlížeče k řízení ikony rozšíření; naučte se o výkonu webu a některých optimalizacích	Úkoly na pozadí a výkon	Jen
15	Vesmírná hra	Pokročilý vývoj her s JavaScriptem	Naučte se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub, jako přípravu na tvorbu hry	Úvod do pokročilého vývoje her	Chris
16	Vesmírná hra	Kreslení na plátno	Naučte se o API Canvas, které se používá k vykreslování prvků na obrazovku	Kreslení na plátno	Chris
17	Vesmírná hra	Pohyb prvků po obrazovce	Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a API Canvas	Pohyb prvků	Chris
18	Vesmírná hra	Detekce kolizí	Naučte se, jak prvky mohou kolidovat a reagovat na sebe pomocí stisků kláves a jak zajistit funkci cooldown pro výkon hry	Detekce kolizí	Chris
19	Vesmírná hra	Počítání skóre	Provádějte matematické výpočty na základě stavu hry a jejího výkonu	Počítání skóre	Chris
20	Vesmírná hra	Ukončení a restartování hry	Naučte se, jak ukončit a restartovat hru, včetně vyčištění prostředků a resetování hodnot proměnných	Podmínky ukončení	Chris
21	Bankovní aplikace	HTML šablony a trasy ve webové aplikaci	Naučte se, jak vytvořit strukturu architektury vícestránkového webu pomocí tras a HTML šablon	HTML šablony a trasy	Yohan
22	Bankovní aplikace	Vytvoření přihlašovacího a registračního formuláře	Naučte se, jak vytvářet formuláře a zpracovávat validační rutiny	Formuláře	Yohan
23	Bankovní aplikace	Metody získávání a používání dat	Jak data proudí do vaší aplikace a z ní, jak je získávat, 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 ho programově spravovat	Správa stavu	Yohan
25	Prohlížeč/VScode kód	Práce s VScode	Naučte se používat editor kódu	Použití editoru kódu VScode	Chris
26	AI asistenti	Práce s AI	Naučte se vytvořit vlastního AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogika

Náš vzdělávací program 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 příležitost získat praktické zkušenosti vytvořením hry na psaní, virtuálního terária, ekologického rozšíření pro prohlížeč, hry ve stylu Space Invaders a bankovní aplikace pro firmy. Na konci série studenti získají pevné základy webového vývoje.

🎓 Prvních několik lekcí tohoto kurzu můžete absolvovat jako učební cestu na Microsoft Learn!

Zajištěním toho, že obsah odpovídá projektům, je proces pro studenty více poutavý a zlepšuje se jejich schopnost si koncepty zapamatovat. Také jsme vytvořili několik úvodních lekcí o základech JavaScriptu, které představují koncepty, doplněné videem ze série "Beginners Series to: JavaScript" sbírky video tutoriálů, jejichž někteří autoři přispěli k tomuto kurzu.

Navíc nízkostresový kvíz před hodinou nastaví záměr studenta na učení daného tématu, zatímco druhý kvíz po hodině zajistí další zapamatování. Tento vzdělávací program byl navržen tak, aby byl flexibilní a zábavný, a lze ho absolvovat celý nebo jen jeho část. Projekty začínají malými úkoly a postupně se stávají složitějšími během 12týdenního cyklu.

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. Dalším dobrým krokem po dokončení tohoto kurzu by bylo naučit se o Node.js prostřednictvím jiné sbírky videí: "Beginner Series to: Node.js".

Navštivte naše Pravidla chování a pokyny pro Přispívání. Uvítáme vaši konstruktivní zpětnou vazbu!

🧭 Offline přístup

Tuto dokumentaci můžete spustit offline pomocí Docsify. Forkněte tento repozitář, nainstalujte Docsify na svůj lokální počítač a poté v kořenové složce tohoto repozitáře zadejte docsify serve. Webová stránka bude spuštěna na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF všech lekcí najdete zde.

🎒 Další kurzy

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

Azure / Edge / MCP / Agents

---

Série Generativní AI

---

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

---

Série Copilot

Získání pomoci

Pokud narazíte na problém nebo máte otázky ohledně vytváření AI aplikací, připojte se:

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. Podrobnosti najdete v souboru LICENSE.

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. Ačkoli 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 původní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. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.