Naučte sa základy webového vývoja s naším komplexným 12-týždňovým kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa zameriava na JavaScript, CSS a HTML prostredníctvom praktických projektov ako teráriá, rozšírenia pre prehliadače a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si zapamätanie vedomostí pomocou našej efektívnej projektovo orientovanej pedagogiky. Začnite svoju cestu kódovania už dnes!
Pridajte sa do komunity Azure AI Foundry na Discorde
Nasledujte tieto kroky, aby ste mohli začať používať tieto zdroje:
- Vytvorte fork repozitára: Kliknite na
- Naklonujte repozitár:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pridajte sa do Azure AI Foundry Discordu a stretnite expertov a ďalších vývojárov
Uprednostňujete lokálne klonovanie?
Tento repozitár obsahuje viac ako 50 jazykových prekladov, čo výrazne zvyšuje veľkosť sťahovania. Ak chcete klonovať bez prekladov, použite sparse checkout:
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'Tým získate všetko, čo potrebujete na absolvovanie kurzu s oveľa rýchlejším sťahovaním.
Ak chcete, aby boli podporované ďalšie jazyky prekladov, nájdete ich tu
Navštívte študentskú stránku, kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca spôsoby, ako získať bezplatný certifikát. Toto je stránka, ktorú si chcete uložiť do záložiek a občas si ju pozrieť, pretože obsah sa mení každý mesiac.
Pridaná nová výzva, hľadajte "GitHub Copilot Agent Challenge 🚀" v najväčšine kapitol. To je nová výzva na dokončenie pomocou GitHub Copilot a režimu Agent. Ak ste režim Agent ešte nepoužili, dokáže nielen generovať text, ale aj vytvárať a upravovať súbory, spúšťať príkazy a ďalšie.
Práve bol pridaný nový projekt AI asistenta, pozrite si projekt
Nezmeškajte náš nový učebný plán o generatívnej AI!
Navštívte https://aka.ms/genai-js-course, aby ste mohli začať!
- Lekcie pokrývajú všetko od základov po RAG.
- Interagujte s historickými postavami pomocou GenAI a našej doplnkovej aplikácie.
- Zábavný a pútavý príbeh, budete cestovať časom!
Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí a výzvu, ktoré vás prevedú témami ako:
- Promptovanie a prompt engineering
- Generovanie textových a obrazových aplikácií
- Vyhľadávacie aplikácie
Navštívte https://aka.ms/genai-js-course, aby ste mohli začať!
Učitelia, pridali sme niekoľko návrhov, ako používať tento učebný plán. Radi uvítame vaše pripomienky v našom diskusnom fóre!
Študenti, pre každú lekciu začnite kvízom pred prednáškou, pokračujte čítaním prednáškového materiálu, dokončite rôzne aktivity a overte si svoje porozumenie pomocou kvízu po prednáške.
Pre zlepšenie vášho učenia sa spojte so svojimi rovesníkmi a pracujte spoločne na projektoch! Diskusie sú vítané v našom diskusnom fóre, kde vám bude k dispozícii náš tím moderátorov na zodpovedanie otázok.
Pre rozšírenie vašich vedomostí dôrazne odporúčame preskúmať Microsoft Learn pre ďalšie študijné materiály.
Tento učebný plán má pripravené vývojové prostredie! Keď začnete, môžete si vybrať spustenie kurzu v Codespace (prostredie v prehliadači, ktoré nevyžaduje inštaláciu), alebo lokálne na vašom počítači pomocou textového editora ako Visual Studio Code.
Pre jednoduché uloženie vašej práce sa odporúča vytvoriť si vlastnú kópiu tohto repozitára. Môžete to urobiť kliknutím na tlačidlo Použiť túto šablónu v hornej časti stránky. Tým sa vytvorí nový repozitár vo vašom GitHub účte s kópiou učebného plánu.
Postupujte podľa týchto krokov:
- Vytvorte fork repozitára: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
- Naklonujte repozitár:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Vo vašej kópii repozitára, ktorú ste vytvorili, kliknite na tlačidlo Code a vyberte Open with Codespaces. Tým sa pre vás vytvorí nový Codespace na prácu.
Na spustenie tohto kurzu lokálne potrebujete textový editor, prehliadač a nástroj príkazového riadka. Naša prvá lekcia, Úvod do programovacích jazykov a nástrojov remesla, vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si vybrali, čo vám najviac vyhovuje.
Odporúčame použiť Visual Studio Code ako editor, ktorý má tiež zabudovaný Terminál. Visual Studio Code si môžete stiahnuť tu.
-
Naklonujte svoj repozitár do počítača. Môžete to urobiť kliknutím na tlačidlo Code a skopírovaním URL:
CodeSpace Potom otvorte Terminál vo Visual Studio Code a spustite nasledujúci príkaz, pričom
<your-repository-url>nahraďte URL, ktorú ste práve skopírovali:git clone <your-repository-url>
-
Otvorte priečinok vo Visual Studio Code. Môžete to urobiť kliknutím na Súbor > Otvoriť priečinok a vybratím priečinka, ktorý ste práve naklonovali.
Odporúčané rozšírenia Visual Studio Code:
- Live Server - na náhľad HTML stránok priamo vo Visual Studio Code
- Copilot - na pomoc pri rýchlejšom písaní kódu
- voliteľnú sketchnotku
- voliteľné doplnkové video
- rozcvičku pred lekciou formou kvízu
- napísanú lekciu
- pre projektové lekcie krok za krokom návody, ako projekt vybudovať
- kontroly vedomostí
- výzvu
- doplnkové čítanie
- zadanie
- kvíz po lekcii
Poznámka o kvízoch: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkovo 48 kvízov po troch otázkach. Nájdete ich tu. Kvízová aplikácia môže byť spustená lokálne alebo nasadená na Azure; postupujte podľa inštrukcií v priečinku
quiz-app.
| Názov projektu | Prebrané koncepty | Ciele učenia | Prepojená lekcia | Autor | |
|---|---|---|---|---|---|
| 01 | Začíname | Úvod do programovania a nástroje remesla | Naučte sa základné princípy väčšiny programovacích jazykov a o softvéri pomáhajúcom profesionálnym vývojárom | Úvod do programovacích jazykov a nástrojov remesla | Jasmine |
| 02 | Začíname | Základy GitHub, vrátane práce v tíme | Ako používať GitHub vo vašom projekte, ako spolupracovať s ostatnými na kóde | Úvod do GitHub | Floor |
| 03 | Začíname | Prístupnosť | Naučte sa základy prístupnosti na webe | Základy prístupnosti | Christopher |
| 04 | Základy JS | Dátové typy JavaScriptu | Základy dátových typov v JavaScripte | Dátové typy | Jasmine |
| 05 | Základy JS | Funkcie a metódy | Naučte sa o funkciách a metódach na riadenie logiky aplikácie | Funkcie a metódy | Jasmine a Christopher |
| 06 | Základy JS | Rozhodovanie v JS | Naučte sa, ako vytvárať podmienky vo vašom kóde pomocou rozhodovacích metód | Rozhodovanie | Jasmine |
| 07 | Základy JS | Polia a cykly | Práca s dátami pomocou polí a cyklov v JavaScripte | Polia a cykly | Jasmine |
| 08 | Terrárium | HTML v praxi | Postavte HTML pre online terrárium, zamerané na tvorbu rozloženia stránky | Úvod do HTML | Jen |
| 09 | Terrárium | CSS v praxi | Postavte CSS na štýlovanie online terrária, zamerajte sa na základy CSS vrátane responzívneho dizajnu | Úvod do CSS | Jen |
| 10 | Terrárium | JavaScript Closure, manipulácia s DOM | Vybudujte JavaScript, ktorý umožní drag/drop rozhranie terrária, zamerajte sa na closure a manipuláciu s DOM | JavaScript Closure, manipulácia s DOM | Jen |
| 11 | Hra na písanie | Vytvorenie hry na písanie | Naučte sa používať udalosti klávesnice na riadenie logiky JavaScriptovej aplikácie | Programovanie riadené udalosťami | Christopher |
| 12 | Zelené rozšírenie prehliadača | Práca s prehliadačmi | Naučte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť základy rozšírenia prehliadača | O prehliadačoch | Jen |
| 13 | Zelené rozšírenie prehliadača | Vytváranie formulára, volanie API a ukladanie premenných | Vytvorte JavaScriptové prvky rozšírenia prehliadača, ktoré volajú API a používajú premenné uložené v lokálnom úložisku | API, formuláre a lokálne úložisko | Jen |
| 14 | Zelené rozšírenie prehliadača | Pozadie procesov v prehliadači, webový výkon | Použite pozadné procesy prehliadača na správu ikony rozšírenia; naučte sa o webovom výkone a optimalizáciách | Pozadné úlohy a výkon | Jen |
| 15 | Hra vo vesmíre | Pokročilejšie vývoj hier v JavaScripte | Naučte sa o dedičnosti cez triedy aj kompozíciu a o vzore Pub/Sub, v príprave na vytvorenie hry | Úvod do pokročilého vývoja hier | Chris |
| 16 | Hra vo vesmíre | Kreslenie na canvas | Naučte sa o Canvas API, ktoré sa používa na kreslenie prvkov na obrazovku | Kreslenie na Canvas | Chris |
| 17 | Hra vo vesmíre | Pohyb prvkov na obrazovke | Objavte, ako môžu prvky získať pohyb pomocou kartézskych súradníc a Canvas API | Pohyb prvkov | Chris |
| 18 | Hra vo vesmíre | Detekcia kolízií | Urobte, aby sa prvky zrážali a reagovali navzájom pomocou stlačení klávesov; pridajte cooldown funkciu na zabezpečenie výkonu | Detekcia kolízií | Chris |
| 19 | Hra vo vesmíre | Udržiavanie skóre | Vykonávajte matematické výpočty na základe stavu a výkonu hry | Udržiavanie skóre | Chris |
| 20 | Hra vo vesmíre | Ukončenie a reštart hry | Naučte sa o ukončení a reštartovaní hry vrátane čistenia zdrojov a resetovania premenných | Podmienka ukončenia | Chris |
| 21 | Banková aplikácia | HTML šablóny a trasy vo webovej aplikácii | Naučte sa vytvoriť kostru viacstránkovej webovej architektúry pomocou routovania a HTML šablón | HTML šablóny a trasy | Yohan |
| 22 | Banková aplikácia | Vytvorenie prihlasovacieho a registračného formulára | Naučte sa vytvárať formuláre a spracovávať validačné rutiny | Formuláre | Yohan |
| 23 | Banková aplikácia | Spôsoby získavania a využívania dát | Ako do vašej aplikácie vstupujú a z nej vychádzajú dáta, ako ich získavať, ukladať a likvidovať | Dáta | Yohan |
| 24 | Banková aplikácia | Koncepty správy stavu | Naučte sa, ako si vaša aplikácia udržiava stav a ako s ním manažovať programovo | Správa stavu | Yohan |
| 25 | Kód prehliadača/VScode | Práca s VScode | Naučte sa používať editor kódu | Použitie VScode Editora | Chris |
| 26 | AI asistenti | Práca s AI | Naučte sa vytvoriť vlastného AI asistenta | Projekt AI asistenta | Chris |
Náš učebný plán je navrhnutý s ohľadom na dve kľúčové pedagogické princípy:
- učenie založené na projektoch
- časté kvízy
Program učí základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky používané dnešnými webovými vývojármi. Študenti budú mať možnosť získať praktické skúsenosti tvorbou hry na písanie, virtuálneho terrária, ekologického rozšírenia prehliadača, hry typu space invaders a bankovej aplikácie pre podniky. Na konci série získajú študenti pevné základy vo webovom vývoji.
🎓 Môžete absolvovať prvé lekcie tohto učebného plánu ako Learn Path na Microsoft Learn!
Zaradením obsahu do projektov sa celý proces stáva pre študentov atraktívnejším a zvyšuje sa udržanie naučených konceptov. Tiež sme pripravili niekoľko úvodných lekcií o základoch JavaScriptu, ktoré vysvetľujú koncepty, doplnených videom z kolekcie "Séria pre začiatočníkov: JavaScript", ktorých niektorí autori prispeli k tomuto učebnému plánu.
Okrem toho nízko-stresový kvíz pred vyučovaním nastaví študentovi zámer učiť sa tému, zatiaľ čo druhý kvíz po vyučovaní zabezpečuje ďalšie upevnenie vedomostí. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný, a dá sa absolvovať celý alebo čiastočne. Projekty začínajú malé a na konci 12-týždňového cyklu sú čoraz zložitejšie.
Aj keď sme zámerne vynechali zavedenie JavaScriptových frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred osvojením frameworku, ďalším dobrým krokom po dokončení tohto učebného plánu je naučiť sa o Node.js pomocou ďalšej video kolekcie: "Séria pre začiatočníkov: Node.js".
Navštívte naše Pravidlá správania a pokyny k Príspevkom. Vaša konštruktívna spätná väzba je vítaná!
Túto dokumentáciu môžete spustiť offline pomocou Docsify. Vytvorte si fork tohoto repozitára, nainštalujte Docsify na svoj lokálny stroj a potom v koreňovom priečinku tohto repozitára zadajte príkaz docsify serve. Webová stránka bude dostupná na porte 3000 na localhoste: localhost:3000.
PDF so všetkými lekciami nájdete tu.
Náš tím vytvára aj iné kurzy! Pozrite sa na:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Ak sa zaseknete alebo máte akékoľvek otázky ohľadom tvorby AI aplikácií, pripojte sa ku komunite študentov a skúsených vývojárov k diskusiám o MCP. Je to podporná komunita, kde sú otázky vítané a zdieľanie vedomostí je voľné.
Ak máte spätnú väzbu k produktu alebo ste narazili na chyby počas vývoja, navštívte:
Tento repozitár je licencovaný pod licenciou MIT. Pre viac informácií pozrite súbor LICENSE.
Výhrada:
Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Hoci sa snažíme o presnosť, uvedomte si, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.