26 KiB

Raw Blame History

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

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!

🧑‍🎓 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é 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 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 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 podporová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 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 mohli snadno ukládat 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.

!Codespace./images/createcodespace.png)

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.

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, nahraďte <your-repository-url> 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
zahřívací kvíz 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 ke kvízům: Všechny kvízy jsou obsaženy ve složce Quiz-app, celkem 48 kvízů po třech otázkách. 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ástrojů	Naučte se základní principy většiny programovacích jazyků a o softwaru, 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ódové základně	Ú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ě vytvoření responzivní stránky	Úvod do CSS	Jen
10	Terrarium	JavaScript Closures, manipulace s DOM	Vytvořte JavaScript, který umožní teráriu fungovat jako rozhraní pro přetahování, se zaměřením na uzávěry a manipulaci s DOM	JavaScript Closures, manipulace s DOM	Jen
11	Typing Game	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	Green Browser Extension	Práce s prohlížeči	Naučte se, jak fungují prohlížeče, jejich historii a jak vytvořit první prvky rozšíření prohlížeče	O prohlížečích	Jen
13	Green Browser Extension	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í prohlížeč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	Green Browser Extension	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	Space Game	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	Space Game	Kreslení na plátno	Naučte se o Canvas API, které se používá 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í	Umožněte prvkům kolidovat a reagovat na sebe pomocí stisků kláves a přidejte funkci cooldown pro zajištění výkonu hry	Detekce kolizí	Chris
19	Space Game	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	Space Game	Ukončení a restartování hry	Naučte se o ukončení a restartování hry, včetně vyčištění prostředků a resetování hodnot proměnných	Podmínka ukončení	Chris
21	Banking App	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	Banking App	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	Banking App	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	Banking App	Koncepty správy stavu	Naučte se, jak vaše aplikace uchovává stav a jak jej programově spravovat	Správa stavu	Yohan

🏫 Pedagogika

Náš vzdělávací program je navržen s ohledem na dvě 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 získají praktické zkušenosti při tvorbě hry na psaní, 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 studenti získají pevné základy webového vývoje.

🎓 První lekce tohoto vzdělávacího programu si můžete vyzkoušet jako Learn Path 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, na jejichž tvorbě se podíleli někteří autoři tohoto vzdělávacího programu.

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í 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í jednoduše 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 jiné série 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áří další kurzy! Podívejte se na:

Licence

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

Prohlášení:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické 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.

26 KiB Raw Blame History