29 KiB

Raw Blame History

Web Development for Beginners - 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í 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 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:

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

🌐 Podpora více jazyků

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

Pokud chcete přidat další překlady, seznam podporovaných jazyků najdete zde

🧑‍🎓 Jste student?

Navštivte Student Hub stránku, 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ě jsme přidali nový projekt AI asistenta, podívejte se na něj projekt

📣 Oznámení - Nový kurikulum o generativní AI pro JavaScript byl právě vydán

Nezmeškejte náš 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í 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é, přidali jsme několik návrhů, jak tento 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 s ostatními studenty a pracujte na projektech společně! Diskuse jsou vítány v našem diskusní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í

Tento 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 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ů:

Forkněte repozitář: 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í 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 editor, který má také vestavěný Terminál. Visual Studio Code si můžete stáhnout zde.

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, kde <your-repository-url> nahradí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 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 přímo ve Visual Studio Code

Copilot - pro rychlejší psaní kódu

📂 Každá lekce obsahuje:

volitelný sketchnote
volitelný doplňkový video materiál
kvíz na zahřátí před lekcí
psaná lekce
pro lekce založené na projektech, podrobné návody krok za krokem, jak projekt vytvořit
kontrolní otázky
výzva
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ý se třemi otázkami. Jsou dostupné zde. 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	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í logického toku 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í 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 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ší JavaScriptové aplikace	Programování řízené událostmi	Christopher
12	Rozšíření pro zelený 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 zelený 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 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 zelený 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čilejší 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í	Umožněte prvkům kolidovat a reagovat na sebe pomocí stisků kláves a poskytněte 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 trasy ve webové aplikaci	Naučte se, jak vytvořit strukturu architektury vícestránkového webu pomocí trasování 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 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í 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 udržuje 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áš učební 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 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 vesmírných invazí a bankovní aplikace pro firmy. Na konci série studenti získají solidní porozumění webovému vývoji.

🎓 První lekce tohoto učebního plánu 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 uchová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" sbírky video tutoriálů, jejichž někteří autoři přispěli k tomuto učebnímu plánu.

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ší uchování. Tento učební plán byl navržen tak, aby byl flexibilní a zábavný, a lze jej absolvovat celý nebo jen jeho část. Projekty začínají malé a postupně se stávají složitějšími na konci 12týdenního cyklu.

Zatímco jsme se záměrně 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 dokončení tohoto učebního plánu 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 vašem lokálním počítači 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áří další kurzy! Podívejte se na:

Získání pomoci

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

Pokud máte zpětnou vazbu k produktu nebo narazíte na chyby při tvorbě, navštivte:

Licence

Tento repozitář je licencován pod licencí MIT. Podrobnosti 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 doporučujeme 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.

29 KiB Raw Blame History