|
|
5 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 4 weeks ago | |
| 2-js-basics | 3 months ago | |
| 3-terrarium | 3 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 3 months ago | |
| 9-chat-project | 3 months ago | |
| 10-ai-framework-project | 3 months ago | |
| Git-Basics | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 3 months ago | |
| quiz-app | 3 months ago | |
| .co-op-translator.json | 5 days ago | |
| AGENTS.md | 5 days ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 3 weeks ago | |
| Roadmap.md | 3 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 3 months ago | |
README.md
Web Development pre začiatočníkov - Kurz
Naučte sa základy webového vývoja v rámci nášho 12-týždňového komplexného kurzu od Microsoft Cloud Advocates. Každá z 24 lekcií skúma JavaScript, CSS a HTML prostredníctvom praktických projektov ako teráriá, rozšírenia pre prehliadače a vesmírne hry. Zúčastnite sa kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si udržanie vedomostí s našou efektívnou projektovo orientovanou pedagogikou. Začnite svoju programátorskú cestu ešte dnes!
Pridajte sa do komunity Azure AI Foundry Discord
Nasledujte tieto kroky, aby ste začali používať tieto zdroje:
- Vytvorte Fork úložiska: Kliknite na
- Naklonujte úložisko:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pridajte sa do Azure AI Foundry Discord a spoznajte odborníkov a ostatných vývojárov
🌐 Podpora viacerých jazykov
Podporované cez GitHub Action (automatizované a vždy aktuálne)
Radšej klonovať lokálne?
Toto úložisko obsahuje viac ako 50 jazykových prekladov, ktoré výrazne zväčšujú veľkosť sťahovania. Pre klonovanie bez prekladov použite 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):** > ```cmd 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áto možnosť vám umožní získať všetko potrebné na dokončenie kurzu s oveľa rýchlejším sťahovaním.
Ak chcete pridať ďalšie prekladové jazyky, podporované jazyky nájdete tu
🧑🎓 Ste študent?
Navštívte Student Hub stránku, kde nájdete zdroje pre začiatočníkov, balíčky pre študentov a dokonca možnosti získať bezplatný certifikát. Túto stránku si uložíte do záložiek a občas skontrolujte, pretože každý mesiac meníme obsah.
📣 Oznámenie - Nové výzvy GitHub Copilot Agent módu na dokončenie!
Pridaná nová výzva, nájdete ju pod názvom "GitHub Copilot Agent Challenge 🚀" v niektorých kapitolách. Ide o novú výzvu, ktorú môžete splniť použitím GitHub Copilot a Agent módu. Ak ste Agent mód ešte nepoužili, vie nielen generovať text, ale aj vytvárať a upravovať súbory, spúšťať príkazy a ďalšie.
📣 Oznámenie - Nový projekt na vývoj pomocou generatívnej AI
Práve bol pridaný nový projekt AI asistenta, pozrite si ho projekt
📣 Oznámenie - Nový kurz o generatívnej AI pre JavaScript práve vydaný
Nezmeškajte náš nový kurz o generatívnej AI!
Navštívte https://aka.ms/genai-js-course a začnite!
- Lekcie pokrývajú všetko od základov až 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, test vedomostí a výzvu, ktorá vás prevedie témami ako:
- Vytváranie promptov 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 a začnite!
🌱 Začíname
Učitelia, pripravili sme niekoľko návrhov na používanie tohto kurikula. Budeme radi za vaše pripomienky v našom diskusnom fóre!
Študenti, ku každej lekcii začnite kvízom pred prednáškou, prečítajte si prednáškový materiál, dokončite rôzne aktivity a overte si porozumenie pomocou kvízu po prednáške.
Pre lepší zážitok z učenia sa spojte so svojimi rovesníkmi a pracujte na projektoch spoločne! Diskusie sú vítané v našom diskusnom fóre, kde sú dostupní naši moderátori, ktorí vám radi zodpovedia otázky.
Pre ďalšie štúdium vám vrelo odporúčame preskúmať Microsoft Learn pre doplnkové študijné materiály.
📋 Nastavenie prostredia
Tento kurz má pripravené vývojové prostredie! Na začiatku si môžete vybrať spustenie kurzu v prostredí Codespace (prostredie v prehliadači bez potreby inštalácie), alebo lokálne na vašom počítači pomocou textového editora ako je Visual Studio Code.
Vytvorte si vlastné úložisko
Pre jednoduché ukladanie vašej práce sa odporúča vytvoriť si vlastnú kópiu tohto úložiska. Môžete to spraviť kliknutím na tlačidlo Použiť túto šablónu v hornej časti stránky. Takto sa vytvorí nové úložisko vo vašom GitHub konte s kópiou kurikula.
Postupujte podľa týchto krokov:
- Vytvorte Fork úložiska: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
- Naklonujte úložisko:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Spustenie kurzu v Codespace
Vo vašej kópii úložiska kliknite na tlačidlo Code a vyberte Open with Codespaces. Týmto vytvoríte nový Codespace, v ktorom môžete pracovať.
Spustenie kurzu lokálne na počítači
Na spustenie kurzu lokálne 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 tieto nástroje, aby ste si mohli vybrať, čo vám najviac vyhovuje.
Odporúčame použiť Visual Studio Code ako editor, ktorý obsahuje aj zabudovaný Terminál. Visual Studio Code si môžete stiahnuť tu.
-
Naklonujte si svoj repozitár do počítača. Môžete to urobiť kliknutím na tlačidlo Code a skopírovaním URL:
Potom otvorte Terminál v rámci 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 File > Open Folder a výberom práve naklonovaného priečinka.
Odporúčané rozšírenia pre Visual Studio Code:
- Live Server - na náhľad HTML stránok priamo vo Visual Studio Code
- Copilot - na rýchlejšie písanie kódu
📂 Každá lekcia obsahuje:
- voliteľnú skicovaciu poznámku
- voliteľné doplnkové video
- rozcvičku pred lekciou formou kvízu
- písanú lekciu
- pre lekcie založené na projektoch, 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ú uložené v priečinku Quiz-app, celkovo 48 kvízov so štyrmi otázkami každý. Sú dostupné 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.
🗃️ Lekcie
| Názov projektu | Konzepte vyučované | Ciele učenia | Prepojená lekcia | Autor | |
|---|---|---|---|---|---|
| 01 | Začínáme | Úvod do programovania a nástroje remesla | Naučte sa základné princípy väčšiny programovacích jazykov a o softvéri, ktorý pomáha profesionálnym vývojárom pri práci | Úvod do programovacích jazykov a nástrojov | Jasmine |
| 02 | Začínáme | Základy GitHubu, vrátane práce v tíme | Ako používať GitHub vo svojom projekte, ako spolupracovať s inými na kóde | Úvod do GitHubu | Floor |
| 03 | Začínáme | Prístupnosť | Naučte sa základy prístupnosti webu | Základy prístupnosti | Christopher |
| 04 | Základy JS | Typy dát v JavaScript | Základy typov dát v JavaScript | Typy dát | 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 | Tvorba rozhodnutí v JS | Naučte sa vytvárať podmienky vo svojom kóde pomocou rozhodovacích metód | Tvorba rozhodnutí | Jasmine |
| 07 | Základy JS | Polia a cykly | Práca s dátami pomocou polí a cyklov v JavaScript | Polia a cykly | Jasmine |
| 08 | Terrárium | HTML v praxi | Vytvorte HTML pre online terrárium, zamerajte sa na tvorbu rozloženia | Úvod do HTML | Jen |
| 09 | Terrárium | CSS v praxi | Vytvorte CSS pre štýlovanie online terrária, naučte sa základy CSS vrátane responzívneho návrhu stránky | Úvod do CSS | Jen |
| 10 | Terrárium | Uzávierky JavaScriptu, manipulácia s DOMom | Vytvorte JavaScript, ktorý umožní terráriu fungovať ako drag/drop rozhranie, zamerajte sa na uzávierky a manipuláciu s DOMom | Uzávierky JavaScriptu, manipulácia s DOMom | Jen |
| 11 | Hra na písanie | Vytvorte hru na písanie | Naučte sa používať udalosti klávesnice na riadenie logiky vašej JavaScriptovej aplikácie | Programovanie založené na udalostiach | Christopher |
| 12 | Rozšírenie pre prehliadač Green | Práca s prehliadačmi | Naučte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť základné prvky rozšírenia prehliadača | O prehliadačoch | Jen |
| 13 | Rozšírenie pre prehliadač Green | Vytvorenie formulára, volanie API a uchovávanie premenných v lokálnom úložisku | Vytvorte JavaScriptové prvky 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 pre prehliadač Green | Systémové procesy na pozadí v prehliadači, výkon webu | Použite systémové procesy prehliadača na správu ikony rozšírenia; učte sa o výkone webu a niektorých optimalizáciách | Úlohy na pozadí a výkon | Jen |
| 15 | Hra v priestore | Pokročilý vývoj hier v JavaScripte | Naučte sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, ako prípravu na tvorbu hry | Úvod k pokročilému vývoju hier | Chris |
| 16 | Hra v priestore | Kreslenie na plátno | Naučte sa o Canvas API používanom na kreslenie prvkov na obrazovku | Kreslenie na plátno | Chris |
| 17 | Hra v priestore | Pohyb prvkov po obrazovke | Objavte, ako môžu prvky získať pohyb pomocou kartézskych súradníc a Canvas API | Pohyb prvkov | Chris |
| 18 | Hra v priestore | Detekcia kolízií | Urobte, aby sa prvky zrážali a reagovali na seba pomocou stlačenia kláves a zabezpečte funkciu cooldown pre výkon hry | Detekcia kolízií | Chris |
| 19 | Hra v priestore | Uchovávanie skóre | Vykonávajte matematické výpočty na základe stavu a výkonu hry | Uchovávanie skóre | Chris |
| 20 | Hra v priestore | Ukončenie a reštart hry | Naučte sa o ukončení a reštarte hry vrátane čistenia zdrojov a resetovania premenných | Podmienka ukončenia | Chris |
| 21 | Banková aplikácia | HTML šablóny a routovanie vo webovej aplikácii | Naučte sa vytvoriť kostru viacstránkovej webovej architektúry pomocou routovania a HTML šablón | HTML šablóny a routovanie | 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 používania dát | Ako dáta prúdia dovnútra a von z vašej aplikácie, 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 ho programovo spravovať | Správa stavu | Yohan |
| 25 | Prehliadač/VScode Kód | Práca s VScode | Naučte sa používať kódový editor | Použitie VScode kódového editora | Chris |
| 26 | AI asistenti | Práca s AI | Naučte sa vytvoriť vlastného AI asistenta | Projekt AI asistenta | Chris |
🏫 Pedagogika
Naše učebné osnovy sú navrhnuté so dvoma kľúčovými pedagogickými princípmi:
- 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ť príležitosť získať praktické skúsenosti tým, že vyvinú hru na písanie, virtuálne terárium, ekologické rozšírenie prehliadača, hru v štýle vesmírneho dobyvateľa a bankovú aplikáciu pre podniky. Na konci série budú mať pevné pochopenie webového vývoja.
🎓 Prvé lekcie tohto kurzu môžete absolvovať ako Learn Path na Microsoft Learn!
Zabezpečením zladenia obsahu s projektmi je proces pre študentov pútavejší a uchovávanie konceptov sa zlepší. Tiež sme napísali niekoľko úvodných lekcií v základoch JavaScriptu, ktoré predstavujú koncepty, sprevádzané videom zo série "Začiatočnícka séria: JavaScript", ktorého niektorí autori prispeli do týchto osnov.
Okrem toho nízko náročný kvíz pred triedou nastavuje študentovi zámer učiť sa danú tému, zatiaľ čo druhý kvíz po hodine zabezpečuje ďalšie uchovanie vedomostí. Tento kurz bol navrhnutý tak, aby bol flexibilný a zábavný a môže byť absolvovaný celý alebo čiastočne. Projekty začínajú jednoducho a do 12-týždňového cyklu sú čoraz zložitejšie.
Zatiaľ čo 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 prijatím frameworku, dobrým ďalším krokom po dokončení tohto kurzu by bolo naučiť sa Node.js prostredníctvom inej kolekcie videí: "Začiatočnícka séria: Node.js".
Navštívte naše pravidlá správania Code of Conduct a zásady prispievania Contributing. Vitajte vašu konštruktívnu spätnú väzbu!
🧭 Prístup offline
Môžete spustiť túto dokumentáciu offline pomocou Docsify. Forknite tento repozitár, nainštalujte Docsify na svojom lokálnom počítači 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 so všetkými lekciami nájdete tu.
🎒 Iné kurzy
Náš tím produkuje aj iné kurzy! Pozrite si:
LangChain
Azure / Edge / MCP / Agenti
Generatívna AI séria
Základné učenie
Copilot séria
Získanie pomoci
Ak sa zaseknete alebo máte otázky ohľadom budovania AI aplikácií. Pridajte sa k ostatným študentom a skúseným vývojárom v diskusiách o MCP. Je to podporná komunita, kde sú otázky vítané a vedomosti sa slobodne zdieľajú.
Ak máte spätnú väzbu k produktu alebo narazíte na chyby pri vývoji, navštívte:
Licencia
Táto 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 AI prekladateľskej služby Co-op Translator. Aj keď sa snažíme o presnosť, berte prosím na vedomie, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Originálny 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. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.


