|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 2 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 1 month ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Web Development for Beginners - Kurikulum
Naučte sa základy webového vývoja prostredníctvom nášho 12-týždňového komplexného kurzu od Microsoft Cloud Advocates. Každá z 24 lekcií sa zaoberá JavaScriptom, CSS a HTML prostredníctvom praktických projektov, ako sú teráriá, rozšírenia prehliadača 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!
Pripojte sa k Azure AI Foundry Discord komunite
Postupujte podľa týchto krokov, aby ste mohli začať používať tieto zdroje:
- Forknite repozitár: Kliknite
- Klonujte repozitár:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pripojte sa k Azure AI Foundry Discord a stretnite sa s odborníkmi a ostatnými vývojármi
🌐 Podpora viacerých jazykov
Podporované prostredníctvom GitHub Action (Automatizované a vždy aktuálne)
Arabčina | Bengálčina | Bulharčina | Barmčina (Mjanmarsko) | Čínština (zjednodušená) | Čínština (tradičná, Hongkong) | Čínština (tradičná, Macao) | Čínština (tradičná, Taiwan) | Chorvátčina | Čeština | Dánčina | Holandčina | Estónčina | Fínčina | Francúzština | Nemčina | Gréčtina | Hebrejčina | Hindčina | Maďarčina | Indonézčina | Taliančina | Japončina | Kórejčina | Litovčina | Malajčina | Maráthčina | Nepálčina | Nórčina | Perzština (Farsí) | Poľština | Portugalčina (Brazília) | Portugalčina (Portugalsko) | Pandžábčina (Gurmukhi) | Rumunčina | Ruština | Srbčina (cyrilika) | Slovenčina | Slovinčina | Španielčina | Swahilčina | Švédčina | Tagalog (Filipínčina) | Tamilčina | Thajčina | Turečtina | Ukrajinčina | Urdu | Vietnamčina
Ak si želáte ďalšie preklady, podporované jazyky sú uvedené tu
🧑🎓 Ste študent?
Navštívte stránku Student Hub, kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca aj spôsoby, ako získať poukaz na bezplatný certifikát. Táto stránka je ideálna na uloženie do záložiek a pravidelné kontrolovanie, pretože obsah sa mení každý mesiac.
📣 Oznámenie - Nové výzvy s režimom GitHub Copilot Agent na dokončenie!
Pridaná nová výzva, hľadajte "GitHub Copilot Agent Challenge 🚀" vo väčšine kapitol. To je nová výzva, ktorú môžete dokončiť pomocou GitHub Copilot a režimu Agent. Ak ste režim Agent ešte nepoužívali, je schopný nielen generovať text, ale aj vytvárať a upravovať súbory, spúšťať príkazy a ďalšie.
📣 Oznámenie - Nový projekt na vytvorenie pomocou generatívnej AI
Práve pridaný nový projekt AI Assistant, pozrite si projekt
📣 Oznámenie - Nový kurikulum o generatívnej AI pre JavaScript bol práve vydaný
Nezmeškajte náš nový kurikulum o generatívnej AI!
Navštívte https://aka.ms/genai-js-course a začnite!
- Lekcie pokrývajúce všetko od základov po RAG.
- Interakcia s historickými postavami pomocou GenAI a našej sprievodnej aplikácie.
- Zábavný a pútavý príbeh, budete cestovať v čase!
Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí a výzvu, ktorá vás prevedie učením tém, ako sú:
- Tvorba a optimalizácia promptov
- Generovanie textových a obrazových aplikácií
- Vyhľadávacie aplikácie
Navštívte https://aka.ms/genai-js-course a začnite!
🌱 Začíname
Učitelia, zahrnuli sme niekoľko návrhov na to, ako používať tento kurikulum. Radi by sme počuli váš názor v našom diskusnom fóre!
Študenti, pre každú lekciu začnite kvízom pred prednáškou a pokračujte čítaním materiálu prednášky, dokončením rôznych aktivít a overte si svoje porozumenie kvízom po prednáške.
Na zlepšenie vášho vzdelávacieho zážitku sa spojte s vašimi rovesníkmi, aby ste pracovali na projektoch spoločne! Diskusie sú vítané v našom diskusnom fóre, kde bude náš tím moderátorov k dispozícii na zodpovedanie vašich otázok.
Na ďalšie vzdelávanie vám dôrazne odporúčame preskúmať Microsoft Learn pre ďalšie študijné materiály.
📋 Nastavenie vášho prostredia
Tento kurikulum má pripravené vývojové prostredie! Keď začnete, môžete si vybrať, či chcete kurikulum spustiť v Codespace (prostredie založené na prehliadači, bez nutnosti inštalácie), alebo lokálne na vašom počítači pomocou textového editora, ako je Visual Studio Code.
Vytvorte si svoj repozitár
Aby ste si mohli ľahko uložiť svoju prácu, odporúčame vám vytvoriť si vlastnú kópiu tohto repozitára. Môžete to urobiť kliknutím na tlačidlo Použiť túto šablónu na vrchu stránky. Tým sa vytvorí nový repozitár vo vašom GitHub účte s kópiou kurikula.
Postupujte podľa týchto krokov:
- Forknite repozitár: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
- Klonujte repozitár:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Spustenie kurikula v Codespace
Vo vašej kópii tohto repozitára, ktorú ste vytvorili, kliknite na tlačidlo Code a vyberte Open with Codespaces. Tým sa vytvorí nový Codespace, v ktorom môžete pracovať.
Spustenie kurikula lokálne na vašom počítači
Ak chcete spustiť tento kurikulum lokálne na vašom počítači, budete potrebovať textový editor, prehliadač a nástroj príkazového riadku. Naša prvá lekcia, Úvod do programovacích jazykov a nástrojov, vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si mohli vybrať, čo vám najviac vyhovuje.
Naše odporúčanie je použiť Visual Studio Code ako váš editor, ktorý má tiež zabudovaný Terminál. Visual Studio Code si môžete stiahnuť tu.
-
Klonujte svoj repozitár na váš počítač. Môžete to urobiť kliknutím na tlačidlo Code a skopírovaním URL:
Potom otvorte Terminál vo Visual Studio Code a spustite nasledujúci príkaz, pričom
<your-repository-url>nahradí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 File > Open Folder a výberom priečinka, ktorý ste práve klonovali.
Odporúčané rozšírenia pre Visual Studio Code:
- Live Server - na náhľad HTML stránok vo Visual Studio Code
- Copilot - na pomoc pri rýchlejšom písaní kódu
📂 Každá lekcia obsahuje:
- voliteľné sketchnote
- voliteľné doplnkové video
- kvíz na rozohriatie pred lekciou
- písomnú lekciu
- pre lekcie založené na projektoch, podrobné návody na vytvorenie projektu
- kontrolu znalostí
- výzvu
- doplnkové čítanie
- úlohu
- kvíz po lekcii
Poznámka ku kvízom: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkovo 48 kvízov, každý s tromi otázkami. Sú dostupné tu a aplikáciu kvízov je možné spustiť lokálne alebo nasadiť na Azure; postupujte podľa pokynov v priečinku
quiz-app.
🗃️ Lekcie
| Názov projektu | Učené koncepty | Ciele učenia | Prepojená lekcia | Autor | |
|---|---|---|---|---|---|
| 01 | Začíname | Úvod do programovania a nástroje pre vývojárov | Naučte sa základné princípy väčšiny programovacích jazykov a softvér, ktorý pomáha profesionálnym vývojárom vykonávať ich prácu | Úvod do programovacích jazykov a nástrojov | Jasmine |
| 02 | Začíname | Základy GitHubu, vrátane práce v tíme | Ako používať GitHub vo vašom projekte, ako spolupracovať s ostatnými na kódovej základni | Úvod do GitHubu | Floor |
| 03 | Začíname | Prístupnosť | Naučte sa základy webovej prístupnosti | Základy prístupnosti | Christopher |
| 04 | Základy JS | Dátové typy v JavaScripte | 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 logického toku aplikácie | Funkcie a metódy | Jasmine a Christopher |
| 06 | Základy JS | Rozhodovanie s JS | Naučte sa vytvárať podmienky vo vašom kóde pomocou metód rozhodovania | 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 | Terárium | HTML v praxi | Vytvorte HTML na vytvorenie online terária, zamerajte sa na vytvorenie rozloženia | Úvod do HTML | Jen |
| 09 | Terárium | CSS v praxi | Vytvorte CSS na štýlovanie online terária, zamerajte sa na základy CSS vrátane vytvorenia responzívnej stránky | Úvod do CSS | Jen |
| 10 | Terárium | Uzávery v JavaScripte, manipulácia s DOM | Vytvorte JavaScript na to, aby terárium fungovalo ako rozhranie drag/drop, zamerajte sa na uzávery a manipuláciu s DOM | Uzávery v JavaScripte, 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 vašej JavaScript aplikácie | Programovanie riadené udalosťami | Christopher |
| 12 | Rozšírenie prehliadača Green | Práca s prehliadačmi | Naučte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť prvé prvky rozšírenia prehliadača | O prehliadačoch | Jen |
| 13 | Rozšírenie prehliadača Green | Vytvorenie formulára, volanie API a ukladanie premenných do lokálneho úložiska | Vytvorte JavaScript prvky vášho rozšírenia prehliadača na volanie API pomocou premenných uložených v lokálnom úložisku | API, formuláre a lokálne úložisko | Jen |
| 14 | Rozšírenie prehliadača Green | Procesy na pozadí v prehliadači, výkon webu | Použite procesy na pozadí prehliadača na správu ikony rozšírenia; naučte sa o výkone webu a niektorých optimalizáciách na zlepšenie | Úlohy na pozadí a výkon | Jen |
| 15 | Vesmírna hra | Pokročilý vývoj hier s JavaScriptom | Naučte sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, ako prípravu na vytvorenie hry | Úvod do pokročilého vývoja hier | Chris |
| 16 | Vesmírna hra | Kreslenie na plátno | Naučte sa o API plátna, ktoré sa používa na kreslenie prvkov na obrazovku | Kreslenie na plátno | Chris |
| 17 | Vesmírna hra | Pohyb prvkov po obrazovke | Zistite, ako môžu prvky získať pohyb pomocou karteziánskych súradníc a API plátna | Pohyb prvkov | Chris |
| 18 | Vesmírna hra | Detekcia kolízií | Umožnite prvkom zrážať sa a reagovať na seba pomocou stlačení klávesov a poskytnite funkciu cooldown na zabezpečenie výkonu hry | Detekcia kolízií | Chris |
| 19 | Vesmírna hra | Udržiavanie skóre | Vykonávajte matematické výpočty na základe stavu a výkonu hry | Udržiavanie skóre | Chris |
| 20 | Vesmírna hra | Ukončenie a reštartovanie hry | Naučte sa o ukončení a reštartovaní hry, vrátane čistenia zdrojov a resetovania hodnôt premenných | Podmienka ukončenia | Chris |
| 21 | Banková aplikácia | HTML šablóny a trasy vo webovej aplikácii | Naučte sa, ako vytvoriť štruktúru architektúry webovej stránky s viacerými stránkami pomocou trasovania 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ť rutiny validácie | Formuláre | Yohan |
| 23 | Banková aplikácia | Metódy získavania a používania dát | Ako dáta prúdia do vašej aplikácie a z nej, ako ich získavať, ukladať a spracovávať | Dáta | Yohan |
| 24 | Banková aplikácia | Koncepty správy stavu | Naučte sa, ako vaša aplikácia uchováva stav a ako ho programovo spravovať | Správa stavu | Yohan |
| 25 | Prehliadač/VScode kód | Práca s VScode | Naučte sa používať editor kódu | Použitie editora kódu VScode | Chris |
| 26 | AI asistenti | Práca s AI | Naučte sa vytvoriť vlastného AI asistenta | Projekt AI asistenta | Chris |
🏫 Pedagogika
Náš učebný plán je navrhnutý s ohľadom na dva 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, ktoré používajú dnešní weboví vývojári. Študenti budú mať možnosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terária, ekologického rozšírenia prehliadača, hry v štýle vesmírnych invázií a bankovej aplikácie pre podniky. Na konci série študenti získajú solídne pochopenie webového vývoja.
🎓 Prvé lekcie tohto učebného plánu si môžete prejsť ako Learn Path na Microsoft Learn!
Zabezpečením, že obsah je v súlade s projektmi, sa proces stáva pre študentov pútavejším a zlepšuje sa uchovávanie konceptov. Napísali sme tiež niekoľko úvodných lekcií o základoch JavaScriptu na predstavenie konceptov, spojených s videom zo série "Beginners Series to: JavaScript" kolekcie video tutoriálov, ktorých autori prispeli k tomuto učebnému plánu.
Okrem toho, nízko stresový kvíz pred hodinou nastaví úmysel študenta na učenie sa témy, zatiaľ čo druhý kvíz po hodine zabezpečí ďalšie uchovanie. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný a môže byť absolvovaný ako celok alebo čiastočne. Projekty začínajú malé a postupne sa stávajú zložitejšími na konci 12-týždňového cyklu.
Aj keď sme sa zámerne vyhli zavádzaniu JavaScript frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred prijatím frameworku, dobrým ďalším krokom po dokončení tohto učebného plánu by bolo učenie sa o Node.js prostredníctvom inej kolekcie videí: "Beginner Series to: Node.js".
Navštívte naše Pravidlá správania a pokyny pre Prispievanie. Uvítame vašu konštruktívnu spätnú väzbu!
🧭 Offline prístup
Túto dokumentáciu môžete spustiť offline pomocou Docsify. Forknite tento repozitár, nainštalujte Docsify na váš lokálny počítač a potom v koreňovom priečinku tohto repozitára zadajte docsify serve. Webová stránka bude dostupná na porte 3000 na vašom localhoste: localhost:3000.
PDF všetkých lekcií nájdete tu.
🎒 Ďalšie kurzy
Náš tím vytvára aj ďalšie kurzy! Pozrite si:
Azure / Edge / MCP / Agents
Generatívna AI séria
Základné učenie
Séria Copilot
Získanie pomoci
Ak sa zaseknete alebo máte otázky ohľadom vytvárania AI aplikácií, pridajte sa:
Ak máte spätnú väzbu k produktom alebo narazíte na chyby pri vývoji, navštívte:
Licencia
Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore LICENSE.
Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.


