33 KiB

Raw Blame History

Webový vývoj pre začiatočníkov - učebný plán

Naučte sa základy webového vývoja s naším 12-týždňovým komplexným kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií ponorí do JavaScriptu, CSS a HTML cez praktické projekty ako teráriá, rozšírenia prehliadača a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zdokonaľte svoje zručnosti a optimalizujte si uchovávanie vedomostí s našou efektívnou projektovo riadenou pedagogikou. Začnite svoju programátorskú cestu ešte dnes!

Pridajte sa k komunite Azure AI Foundry na Discorde

Postupujte podľa týchto krokov, aby ste mohli začať využívať tieto zdroje:

Forknite si repozitár: Kliknite
Naklonujte si repozitár: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Pridajte sa k Azure AI Foundry Discord a stretnite expertov a ďalších vývojárov

🌐 Podpora viacerých jazykov

Podporované cez GitHub Action (automatické a vždy aktuálne)

Radšej by ste klonovali lokálne?

Tento repozitár obsahuje viac ako 50 jazykových prekladov, čo výrazne zväčšuje veľkosť stiahnutia. 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'
Toto vám poskytne všetko potrebné na dokončenie kurzu s oveľa rýchlejším sťahovaním.

Ak chcete podporu ďalších prekladových jazykov, sú uvedené tu

🧑‍🎓 Ste študent?

Navštívte Student Hub stránku, kde nájdete začiatočnícke zdroje, študentské balíčky a aj možnosti, ako získať bezplatný certifikátový poukaz. Toto je stránka, ktorú si určite uložte medzi záložky a občas ju skontrolujte, pretože obsah sa mení každý mesiac.

📣 Oznámenie - Nové výzvy režimu GitHub Copilot Agent na dokončenie!

Pridaná nová výzva, hľadajte "GitHub Copilot Agent Challenge 🚀" v väčšine kapitol. Ide o novú výzvu, ktorú dokončíte použitím GitHub Copilot a režimu Agent. Ak ste režim Agent ešte nepoužili, je schopný nielen generovať text, ale tiež vytvárať a upravovať súbory, spúšťať príkazy a viac.

📣 Oznámenie - Nový projekt na vybudovanie s použitím Generatívnej AI

Práve pridaný nový AI asistent projekt, pozrite si projekt

📣 Oznámenie - Nový učebný plán o Generatívnej AI pre JavaScript práve vydaný

Nezmeškajte náš nový učebný plán Generatívnej AI!

Začnite na https://aka.ms/genai-js-course!

Lekcie pokrývajú 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ť časom!

Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí aj výzvu, ktoré vás prevedú učením tém ako:

Promptovanie a inžinierstvo 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, pripravili sme niekoľko návrhov, ako tento učebný plán používať. Radi by sme mali vašu spätnú väzbu na 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, plnením rôznych aktivít a overte si svoje pochopenie kvízom po prednáške.

Aby ste si zlepšili vzdelávací zážitok, spojte sa s rovesníkmi a pracujte spolu na projektoch! Diskusie sú vítané na našom diskusnom fóre, kde je tím moderátorov pripravený vám pomôcť zodpovedať otázky.

Na ďalšie vzdelávanie vám vrelo odporúčame preskúmať Microsoft Learn pre doplnkové študijné materiály.

📋 Nastavenie vášho vývojového prostredia

Tento učebný plán má pripravené vývojové prostredie! Môžete si vybrať, či kurz spustíte v Codespace (prostredie bežiace v prehliadači bez nutnosti inštalácií) alebo lokálne na vašom počítači pomocou textového editora ako je Visual Studio Code.

Vytvorte si vlastný repozitár

Pre jednoduché uloženie svojej práce sa odporúča vytvoriť si vlastnú kópiu tohto repozitára. Urobíte to kliknutím na tlačidlo Použiť šablónu v hornej časti stránky. Tým sa vytvorí nový repozitár vo vašom účte GitHub s kópiou tohto učebného plánu.

Postupujte podľa krokov:

Forknite repozitár: 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

Spustenie učebného plánu v Codespace

Vo vašej skopírovanej verzii repozitára kliknite na tlačidlo Code a vyberte Open with Codespaces. Toto vytvorí nový Codespace, kde budete pracovať.

Spustenie učebného plánu lokálne na počítači

Na spustenie tohto učebného plánu lokálne na vašom počítači budete potrebovať textový editor, prehliadač a príkazový riadok. 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ť ten, ktorý 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 si svoj repozitár do počítača. Urobíte to 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 adresou, 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 výberom priečinka, ktorý ste práve sklonovali.

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

📂 Každá lekcia obsahuje:

voliteľnú náčrtnú poznámku
voliteľné doplnkové video
kvíz na rozohriatie pred lekciou
písanú lekciu
pri lekciách založených na projektoch, podrobné návody ako projekt zostaviť
kontrolné otázky
výzvu
doplnkové čítanie
úlohu
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. Sú dostupné tu, aplikáciu kvízu možno spustiť lokálne alebo nasadiť na Azure; postupujte podľa inštrukcií v priečinku quiz-app.

🗃️ Lekcie

	Názov projektu	Preberané koncepty	Ciele učenia	Prepojená lekcia	Autor
01	Začíname	Úvod do programovania a pracovné nástroje	Naučiť sa základné princípy väčšiny programovacích jazykov a softvéru, ktorý profesionálnym vývojárom pomáha v práci	Úvod do programovacích jazykov a pracovných 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 inými na kóde	Úvod do GitHubu	Floor
03	Začíname	Prístupnosť	Naučiť sa základy webovej prístupnosti	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čiť sa o funkciách a metódach na riadenie logiky aplikácie	Funkcie a metódy	Jasmine a Christopher
06	Základy JS	Rozhodovanie pomocou JS	Naučiť sa vytvárať podmienky v kóde pomocou rozhodovacích metód	Rozhodovanie	Jasmine
07	Základy JS	Polia a cykly	Pracovať s dátami pomocou polí a cyklov v JavaScripte	Polia a cykly	Jasmine
08	Terrárium	HTML v praxi	Vytvoriť HTML pre online terrárium so zameraním na zostavenie rozloženia	Úvod do HTML	Jen
09	Terrárium	CSS v praxi	Vytvoriť CSS na úpravu štýlu online terrária, so zameraním na základy CSS vrátane responzivity stránky	Úvod do CSS	Jen
10	Terrárium	JavaScript Closures, manipulácia s DOM	Vytvoriť JavaScript pre funkčnosť drag/drop terrária, so zameraním na uzávierky a prácu s DOM	JavaScript Closures, manipulácia s DOM	Jen
11	Hra na písanie	Vytvorenie hry na písanie	Naučiť sa používať klávesové udalosti na ovládanie logiky JavaScript aplikácie	Programovanie riadené udalosťami	Christopher
12	Zelené rozšírenie pre prehliadač	Práca s prehliadačmi	Naučiť sa, ako prehliadače fungujú, ich históriu a ako vytvoriť základné prvky rozšírenia prehliadača	O prehliadačoch	Jen
13	Zelené rozšírenie pre prehliadač	Vytváranie formuláru, volanie API a ukladanie premenných do miestneho uloženia	Vytvoriť JavaScript prvky pre rozšírenie prehliadača na volanie API pomocou premenných uložených v miestnom úložisku	API, formuláre a miestne úložisko	Jen
14	Zelené rozšírenie pre prehliadač	Pozadie procesov v prehliadači, webový výkon	Použiť pozadie procesov pre správu ikony rozšírenia; naučiť sa o webovom výkone a optimalizáciách	Pozadie procesov a výkon	Jen
15	Vesmírna hra	Pokročilejšie tvorenie hier v JavaScriptu	Naučiť sa o dedičnosti pomocou tried a kompozície a vzorec Pub/Sub, príprava na tvorbu hry	Úvod do pokročilého vývoja hier	Chris
16	Vesmírna hra	Kreslenie na plátno	Naučiť sa o Canvas API používanom na kreslenie prvkov na obrazovku	Kreslenie na plátno	Chris
17	Vesmírna hra	Pohyb prvkov na obrazovke	Objaviť, ako prvky získavajú pohyb pomocou karteziánskych súradníc a Canvas API	Pohyb prvkov	Chris
18	Vesmírna hra	Detekcia kolízií	Zabezpečiť kolízie a reakcie prvkov na seba navzájom použitím klávesových stlačení a funkciou cooldown	Detekcia kolízií	Chris
19	Vesmírna hra	Sledovanie skóre	Vykonávať matematické výpočty na základe stavu a výkonu hry	Sledovanie skóre	Chris
20	Vesmírna hra	Ukončenie a reštart hry	Naučiť sa ukončiť a reštartovať hru vrátane čistenia zdrojov a resetovania premenných	Podmienka ukončenia	Chris
21	Banková aplikácia	HTML Šablóny a smerovanie v webovej aplikácii	Naučiť sa vytvárať architektúru viacstránkovej webovej stránky pomocou smerovania a HTML šablón	HTML šablóny a smerovanie	Yohan
22	Banková aplikácia	Vytvorenie prihlasovacieho a registračného formulára	Naučiť sa tvoriť formuláre a spracovávať validačné postupy	Formuláre	Yohan
23	Banková aplikácia	Spôsoby získavania a používania dát	Ako dáta prichádzajú do aplikácie a odchádzajú z nej, ako ich načítať, ukladať a odstraňovať	Dáta	Yohan
24	Banková aplikácia	Koncepty správy stavu	Naučiť sa, ako aplikácia uchováva stav a ako ho programovo riadiť	Správa stavu	Yohan
25	Editor kódu/VSCode	Práca s VSCode	Naučiť sa používať editor kódu	Použitie VSCode editora kódu	Chris
26	AI asistenti	Práca s AI	Naučiť sa vytvoriť vlastného AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagógia

Náš učebný plán je navrhnutý s dvoma kľúčovými pedagogickými princípmi na pamäti:

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é dnes používajú weboví vývojári. Študenti budú mať príležitosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terrária, ekologického rozšírenia pre prehliadač, hry v štýle space invader a bankovej aplikácie pre podniky. Na konci série získajú pevné základy webového vývoja.

🎓 Prvé lekcie tohto kurikula môžete absolvovať ako Learn Path na Microsoft Learn!

Zabezpečením zhody obsahu s projektmi sa proces pre študentov stáva zaujímavejším a dochádza k lepšiemu zapamätaniu konceptov. Tiež sme vytvorili niekoľko úvodných lekcií o základoch JavaScriptu s videom zo série "Začiatočnícka séria: JavaScript", ktorej niektorí autori prispeli k tomuto učebnému plánu.

Navyše kvíz s nízkou záťažou pred hodinou nastavuje študentovi cieľ sa naučiť danú tému, zatiaľ čo druhý kvíz po hodine zaručuje ďalšie upevnenie vedomostí. Tento učebný plán je navrhnutý tak, aby bol flexibilný a zábavný, a je možné ho absolvovať celý alebo len jeho časť. Projekty začínajú jednoducho a do konca 12-týždňového cyklu sa postupne komplikujú.

Hoci sme zámerne vynechali predstavenie JavaScript frameworkov, aby sme sa sústredili na základné schopnosti potrebné pre webového vývojára pred osvojením frameworku, dobrou ďalšou fázou po tomto kurikule je naučiť sa Node.js cez ďalšiu kolekciu videí: "Začiatočnícka séria: Node.js".

Navštívte naše Zásady správania a Príspevky. Vaša konštruktívna spätná väzba je vítaná!

🧭 Prístup offline

Túto dokumentáciu môžete používať offline pomocou Docsify. Vforkujte toto repo, nainštalujte Docsify na svoj lokálny počítač a potom v koreňovom priečinku tohto repozitára zadajte príkaz docsify serve. Webová stránka bude dostupná na porte 3000 na vašom localhoste: localhost:3000.

📘 PDF

PDF všetkých lekcií nájdete tu.

🎒 Iné kurzy

Náš tím vytvára aj ďalšie kurzy! Pozrite sa na:

LangChain

Azure / Edge / MCP / Agents

Generative AI Series

Core Learning

Copilot Series

Získanie pomoci

Ak sa zaseknete alebo máte otázky ohľadom tvorby AI aplikácií, pridajte sa k ostatným študentom a skúseným vývojárom do diskusií o MCP. Je to podporujúca komunita, kde sú otázky vítané a vedomosti sa slobodne zdieľajú.

Ak máte spätnú väzbu k produktu alebo nájdete chyby počas tvorby, navštívte:

Licencia

Toto úložisko je licencované pod licenciou MIT. Viac informácií nájdete v súbore LICENSE.

Vylúčenie zodpovednosti: Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Aj keď usilovne dbáme na presnosť, prosím, vezmite 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. Nezodpovedáme za žiadne nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.

33 KiB Raw Blame History