Web-Dev-For-Beginners/translations/cs

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 na Discord Azure AI Foundry a setkejte se s experty a dalšími vývojáři

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á 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ů, diskusí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si zapamatování znalostí díky našemu efektivnímu přístupu založenému na projektech. Začněte svou cestu kódování ještě dnes!

🌐 Podpora více jazyků

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

Francouzština | Španělština | Němčina | Ruština | Arabština | Perština (Farsi) | Urdu | Čínština (zjednodušená) | Čínština (tradiční, Macao) | Čínština (tradiční, Hongkong) | Čínština (tradiční, Tchaj-wan) | Japonština | Korejština | Hindština | Bengálština | Maráthština | Nepálština | Paňdžábština (Gurmukhi) | Portugalština (Portugalsko) | Portugalština (Brazílie) | Italština | Polština | Turečtina | Řečtina | Thajština | Švédština | Dánština | Norština | Finština | Nizozemština | Hebrejština | Vietnamština | Indonéština | Malajština | Tagalog (Filipínština) | Svahilština | Maďarština | Čeština | Slovenština | Rumunština | Bulharština | Srbština (cyrilice) | Chorvatština | Slovinština | Ukrajinština | Barmština (Myanmar)

Pokud si přejete mít podporu dalších jazyků, 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 způsoby, jak získat voucher na certifikát zdarma. Tuto stránku si uložte do záložek a pravidelně ji kontrolujte, protože obsah měníme každý měsíc.

📣 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 tématy, jako jsou:

• Tvorba promptů a jejich optimalizace
• Generování aplikací pro text a obrázky
• 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 využít. Budeme rádi za vaši zpětnou vazbu v našem diskusním fóru!

Studenti, u každé lekce začněte kvízem před přednáškou, pokračujte čtením materiálů, dokončete různé aktivity a ověřte si své znalosti kvízem 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ě! Diskuse jsou vítány v našem diskusním fóru, kde bude náš tým moderátorů 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 provozovat 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 si 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

Provozová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.

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

Pro provozová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 váš 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, 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. 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
• kvíz na zahřátí před lekcí
• psanou 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 k testům: Všechny testy jsou obsaženy ve složce Quiz-app, celkem 48 testů, každý obsahuje tři otázky. Jsou dostupné zde. Aplikaci pro testy lze spustit lokálně nebo nasadit na Azure; postupujte podle pokynů ve složce quiz-app.

🗃️ Lekce

	Název projektu	Učené koncepty	Výukové cíle	Odkaz na lekci	Autor
01	Začínáme	Úvod do programování a nástroje používané v oboru	Naučte se základní principy většiny programovacích jazyků a 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í logiky 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 tvorbu 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ě responzivního designu	Úvod do CSS	Jen
10	Terárium	Uzávěry v JavaScriptu, manipulace DOM	Vytvořte JavaScript pro funkci terária jako drag/drop rozhraní, zaměřte se na uzávěry a manipulaci DOM	Uzávěry v JavaScriptu, manipulace DOM	Jen
11	Hra na psaní	Vytvořte hru na psaní	Naučte se používat události klávesnice k řízení logiky vaší JavaScriptové 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 JavaScriptové prvky 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í pro správu 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 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í	Vytvořte kolize mezi prvky a jejich reakce pomocí stisků kláves; přidejte funkci cooldown pro zajištění výkonu hry	Detekce kolizí	Chris
19	Vesmírná hra	Počítání skóre	Provádějte matematické výpočty na základě stavu a výkonu hry	Počítání skóre	Chris
20	Vesmírná hra	Ukončení a restartování hry	Naučte se o ukončení a restartování hry, včetně čištění prostředků a resetování hodnot proměnných	Podmínka ukončení	Chris
21	Bankovní aplikace	HTML šablony a směrování ve webové aplikaci	Naučte se, jak vytvořit strukturu architektury vícestránkového webu pomocí 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žívání dat	Jak data proudí dovnitř a ven 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 vaše aplikace uchovává stav a jak jej programově spravovat	Správa stavu	Yohan
25	Prohlížeč/VScode Code	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 dvě klíčové pedagogické principy:

• učení založené na projektech
• časté testy

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 při tvorbě hry na psaní, virtuálního terária, ekologického rozšíření pro prohlížeč, hry ve stylu vesmírných invazí a bankovní aplikace pro firmy. Na konci série získají studenti pevné základy webového vývoje.

🎓 První lekce tohoto vzdělávacího programu můžete absolvovat jako učební cestu na Microsoft Learn!

Díky tomu, že obsah odpovídá projektům, je proces pro studenty poutavější a zlepšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu, které představují koncepty, doplněné videem ze série "Beginners Series to: JavaScript" s video tutoriály, jejichž někteří autoři přispěli k tomuto vzdělávacímu programu.

Navíc nízkostresový test před hodinou nastaví záměr studenta na učení daného tématu, zatímco druhý test po hodině zajistí lepší zapamatování. Tento vzdělávací program byl navržen tak, aby byl flexibilní a zábavný, a lze jej 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. Dobrou další etapou po dokončení tohoto vzdělávacího programu by bylo naučit se o Node.js prostřednictvím další kolekce videí: "Beginner Series to: Node.js".

Navštivte naše Pravidla chování a Pokyny pro přispívání. Uvítáme vaše konstruktivní zpětné vazby!

🧭 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 na:

• Generativní AI pro začátečníky
• Generativní AI pro začátečníky .NET
• Generativní AI s JavaScriptem
• Generativní AI s Javou
• AI pro začátečníky
• Data Science pro začátečníky
• ML pro začátečníky
• Kybernetická bezpečnost pro začátečníky
• Webový vývoj pro začátečníky
• IoT pro začátečníky
• Vývoj XR pro začátečníky
• Ovládnutí GitHub Copilot pro párové programování
• Ovládnutí GitHub Copilot pro vývojáře C#/.NET
• Vyberte si vlastní dobrodružství s Copilotem

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 vytváření, navštivte:

Licence

Tento repozitář je licencován pod licencí MIT. Další informace naleznete v souboru LICENSE.

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. I když 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.