33 KiB

Raw Blame History Unescape Escape

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

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í proniká do JavaScriptu, CSS a HTML prostřednictvím praktických projektů, jako jsou 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 uchování znalostí díky naší efektivní pedagogice založené na projektech. Začněte svou cestu kódová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:

Vytvořte fork repozitáře: Klikněte na
Naklonujte repozitář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Připojte se k Azure AI Foundry Discordu a setkejte se s experty a kolegy vývojáři

🌐 Podpora více jazyků

Podporováno přes GitHub Action (automatizováno a vždy aktuální)

Raději klonovat lokálně?

Tento repozitář obsahuje více než 50 jazykových překladů, 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"
Tento způsob vám poskytne vše potřebné ke zvládnutí kurzu s mnohem rychlejším stažením.

Pokud si přejete podporu dalších překladových jazyků, jsou uvedeny 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 voucher na bezplatný certifikát. Tuto stránku si chcete uložit do záložek a občas jí kontrolovat, protože obsah měníme každý měsíc.

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

Nová výzva přidána, hledejte "GitHub Copilot Agent Challenge 🚀" v většině kapitol. Je to nová výzva pro dokončení pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent dosud 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ý AI Assistant projekt, podívejte se na projekt

📣 Oznámení - Nový kurz o Generativní AI pro JavaScript byl právě zveřejněn

Nezmeškejte náš nový kurz Generativní AI!

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

Lekce pokrývají 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 provedou tématy jako:

Promptování a tvorba promptů (prompt engineering)
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ěkteré návrhy, jak tento plán kurzu používat. Budeme rádi za vaši zpětnou vazbu v našem diskuzním fóru!

Studenti, pro každou lekci začněte přednáškovým kvízem a pokračujte čtením výukového materiálu, plněním různých aktivit a ověřte si své porozumění pomocí popřednáškového kvízu.

Pro zlepšení vašeho studijního zážitku se spojte s kolegy a pracujte společně na projektech! Diskuze jsou podporovány v našem diskuzním fóru, kde je k dispozici tým moderátorů, aby zodpověděl vaše dotazy.

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

📋 Nastavení vašeho prostředí

Tento plán kurzu má připravené vývojové prostředí! Na začátku si můžete vybrat, zda budete kurz spouštět v Codespace (prohlížečové prostředí bez nutnosti instalací) nebo lokálně na vašem počítači s použitím textového editoru, jako je Visual Studio Code.

Vytvořte svůj repozitář

Pro snadné ukládání své práce se doporučuje vytvořit si vlastní kopii tohoto repozitáře. To můžete 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í kurzu.

Postupujte podle těchto kroků:

Vytvořte fork repozitáře: Klikněte na tlačítko "Fork" v pravém horním rohu této stránky.
Naklonujte repozitář: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Spuštění kurzu v Codespace

Ve vaší kopii tohoto repozitáře 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í kurzu lokálně na vašem počítači

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

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

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 URL, kterou jste právě zkopírovali:
```
git clone <your-repository-url>
```
Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na Soubor > Otevřít složku 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 – pro rychlejší psaní kódu

📂 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 projektech krok za krokem návody, jak projekt vybudovat
ověřování znalostí
výzvu
doplňující čtení
úkol
kvíz po lekci

Poznámka ke kvízům: Všechny kvízy jsou umístěny ve složce Quiz-app, celkem 48 kvízů se třemi otázkami každý. Jsou dostupné zde, aplikaci s kvízy lze spustit lokálně nebo publikovat na Azure; řiďte se pokyny ve složce quiz-app.

🗃️ Lekce

	Název projektu	Naučené koncepty	Výukové cíle	Propojená lekce	Autor
01	Začínáme	Úvod do programování a nástroje oboru	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ů	Jasmine
02	Začínáme	Základy GitHubu, práce v týmu	Jak používat GitHub ve svém projektu, jak spolupracovat s ostatními na kódu	Úvod do GitHubu	Floor
03	Začínáme	Přístupnost	Naučit se základy přístupnosti webu	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 smyčky	Práce s daty pomocí polí a smyček v JavaScriptu	Pole a smyčky	Jasmine
08	Terrárium	HTML v praxi	Vytvořit HTML pro online terrárium, zaměřit se na tvorbu rozložení	Úvod do HTML	Jen
09	Terrárium	CSS v praxi	Vytvořit CSS pro stylování online terrária, zaměřit se na základy CSS včetně responzivního designu	Úvod do CSS	Jen
10	Terrárium	JavaScriptové uzávěry, manipulace s DOM	Napsat JavaScript, aby terrárium fungovalo jako rozhraní drag/drop, zaměřit se na uzávěry a manipulaci s DOM	JavaScriptové uzávěry, manipulace s DOM	Jen
11	Hra na psaní	Vytvoření hry na psaní	Naučit se používat klávesové události pro řízení logiky ve své JavaScriptové aplikaci	Programování řízené událostmi	Christopher
12	Ekologické rozšíření pro prohlížeč	Práce s prohlížeči	Naučit se, jak fungují prohlížeče, jejich historii a jak vytvořit první prvky rozšíření	O prohlížečích	Jen
13	Ekologické rozšíření pro prohlížeč	Vytváření formuláře, volání API a ukládání proměnných v lokálním úložišti	Napsat JavaScriptové prvky rozšíření pro volání API a ukládání proměnných v lokálním úložišti	API, formuláře a lokální úložiště	Jen
14	Ekologické rozšíření pro prohlížeč	Procesy na pozadí v prohlížeči, webový výkon	Použití procesů na pozadí pro správu ikon rozšíření; poznání webového výkonu a některých optimalizací pro zlepšení	Úlohy na pozadí a výkon	Jen
15	Kosmická hra	Pokročilejší vývoj her v JavaScriptu	Naučit 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	Kosmická hra	Kreslení na plátno	Naučit se o Canvas API používaném pro kreslení prvků na obrazovku	Kreslení na plátno	Chris
17	Kosmická hra	Pohyb prvků po obrazovce	Objevte, jak prvky získávají pohyb pomocí kartézských souřadnic a Canvas API	Pohyb prvků po obrazovce	Chris
18	Kosmická hra	Detekce kolizí	Zajistit kolize a reakce prvků na sebe navzájem pomocí stisknutých kláves a přidat cooldown funkci pro výkon hry	Detekce kolizí	Chris
19	Kosmická hra	Udržování skóre	Provádět matematické výpočty na základě stavu a výkonu hry	Udržování skóre	Chris
20	Kosmická hra	Ukončení a restartování hry	Naučit 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 routování ve webové aplikaci	Naučit se vytvářet kostru vícestránkové webové stránky pomocí routování a HTML šablon	HTML šablony a routování	Yohan
22	Bankovní aplikace	Vytvoření přihlašovacího a registračního formuláře	Naučit se o tvorbě formulářů a zpracování validačních rutin	Formuláře	Yohan
23	Bankovní aplikace	Metody získávání a používání dat	Jak data proudí do aplikace i ven z ní, jak je načítat, ukládat a mažet	Data	Yohan
24	Bankovní aplikace	Koncept správy stavu	Naučit se, jak si aplikace uchovává stav a jak ho programově ovládat	Správa stavu	Yohan
25	Kód prohlížeče/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 dvěma klíčovými pedagogickými principy:

učení založené na projektech
časté kvízy

Program vede 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í pro prohlížeč, hry ve stylu space-invader a bankovní aplikace pro firmy. Na konci série budou mít studenti pevné porozumění webovému vývoji.

🎓 První lekce v tomto kurikulu můžete absolvovat jako Učební cestu na Microsoft Learn!

Díky propojení obsahu s projekty 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, doprovázené videi ze série "Beginners Series to: JavaScript" – někteří autoři těchto videí přispěli do tohoto kurikula.

Navíc nízkorizikový kvíz před lekcí pomáhá studentovi zaměřit se na téma, zatímco kvíz po lekci podpoří další zapamatování. Tento učební plán je navržen flexibilně a zábavně a lze ho absolvovat celý nebo částečně. Projekty začínají jednoduché a postupně se v průběhu 12 týdnů stávají složitějšími.

I když jsme záměrně vynechali zavádění frameworků JavaScriptu, abychom se soustředili na základní dovednosti webového vývojáře před přijetím frameworku, dobrým dalším krokem po dokončení tohoto kurikula je naučit se o Node.js prostřednictvím další série videí: "Beginner Series to: Node.js".

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

🧭 Offline přístup

Tuto dokumentaci můžete používat offline pomocí Docsify. Forkněte si toto repozitář, nainstalujte Docsify na svůj počítač a pak v kořenové složce repozitáře napište docsify serve. Webová stránka bude dostupná na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF všech lekcí lze nalézt zde.

🎒 Další kurzy

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

LangChain

Azure / Edge / MCP / Agenti

Série Generativní AI

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

Série Copilot

Získání pomoci

Pokud budete mít potíže nebo nějaké dotazy ohledně vytváření AI aplikací, připojte se k ostatním studentům a zkušeným vývojářům v diskuzích o MCP. Je to vstřícná 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 při tvorbě, navštivte:

Licence

Toto úložiště je licencováno pod licencí MIT. Pro více informací viz soubor LICENSE.

Zdroj informací:
Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. Přestože usilujeme 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 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. Nejsme odpovědní za jakékoliv nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.

33 KiB Raw Blame History Unescape Escape