29 KiB

Raw Blame History

Vývoj webu pre začiatočníkov - Učebný plán

Naučte sa základy vývoja webu s naším 12-týždňovým komplexným kurzom 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!

Pridajte sa do komunity Azure AI Foundry na Discorde

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

Forknite repozitár: Kliknite na
Klonujte repozitár: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Pridajte sa do Azure AI Foundry Discord a stretnite sa s odborníkmi a ďalšími vývojármi

🌐 Podpora viacerých jazykov

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

Ak si želáte podporu ďalších jazykov, zoznam podporovaných jazykov nájdete tu

🧑‍🎓 Ste študent?

Navštívte stránku Student Hub, kde nájdete zdroje pre začiatočníkov, balíčky pre študentov a dokonca aj spôsoby, ako získať bezplatný certifikát. Túto stránku si určite uložte do záložiek a pravidelne ju kontrolujte, pretože obsah sa každý mesiac mení.

📣 Oznámenie - Nový projekt na vytvorenie pomocou generatívnej AI

Práve bol pridaný nový projekt AI Assistant, pozrite si ho projekt

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

Nezmeškajte náš nový učebný plán 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, pripravili sme niekoľko návrhov, ako tento učebný plán využiť. Radi by sme počuli vašu spätnú väzbu v našom diskusnom fóre!

Študenti, pri každej lekcii začnite kvízom pred prednáškou, pokračujte čítaním materiálov z prednášky, dokončite rôzne aktivity a overte si svoje pochopenie kvízom po prednáške.

Aby ste si zlepšili zážitok z učenia, spojte sa so svojimi rovesníkmi a pracujte 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 dôrazne odporúčame preskúmať Microsoft Learn pre ďalšie študijné materiály.

📋 Nastavenie vášho prostredia

Tento učebný plán má pripravené vývojové prostredie! Keď začnete, môžete si vybrať, či chcete spustiť učebný plán v Codespace (prostredie založené na prehliadači, bez potreby inštalácie), alebo lokálne na svojom počítači pomocou textového editora, ako je Visual Studio Code.

Vytvorte si svoj repozitár

Aby ste si mohli jednoducho 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 Use this template v hornej časti stránky. Tým sa vo vašom účte GitHub vytvorí nový repozitár s kópiou učebného plánu.

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 učebného plánu 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 pre vás vytvorí nový Codespace, v ktorom môžete pracovať.

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

Ak chcete tento učebný plán spustiť lokálne na svojom 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 do svojho počítača. Môžete to urobiť kliknutím na tlačidlo Code a skopírovaním URL:

CodeSpace

Potom otvorte Terminál vo vnútri Visual Studio Code a spustite nasledujúci príkaz, pričom <your-repository-url> nahradíte práve skopírovanou URL:
```
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 rýchlejšie písanie kódu

📂 Každá lekcia obsahuje:

voliteľnú sketchnote
voliteľné doplnkové video
kvíz na zahriatie pred lekciou
písaná lekcia
pre lekcie založené na projektoch, podrobné návody na vytvorenie projektu
kontrolné otázky
výzva
doplnkové čítanie
zadanie
kvíz po lekcii

Poznámka ku kvízom: Všetky kvízy sú uložené v priečinku Quiz-app, celkovo 48 kvízov, každý s tromi otázkami. Sú dostupné tu. 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 používané v praxi	Naučte sa základné princípy väčšiny programovacích jazykov a softvér, ktorý pomáha profesionálnym vývojárom pri práci	Ú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óde	Ú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 v 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 responzívneho dizajnu	Úvod do CSS	Jen
10	Terárium	Uzávery v JavaScripte, manipulácia DOM	Vytvorte JavaScript na funkčnosť terária ako rozhrania drag/drop, zamerajte sa na uzávery a manipuláciu DOM	Uzávery v JavaScripte, manipulácia 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, webový výkon	Použite procesy na pozadí prehliadača na správu ikony rozšírenia; naučte sa o webovom výkone a niektorých optimalizáciách	Ú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	Objavte, 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í	Urobte, aby sa prvky zrážali a reagovali 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	Počítanie skóre	Vykonávajte matematické výpočty na základe stavu a výkonu hry	Počítanie 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 aktív 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 o vytváraní formulárov a spracovaní validačných rutín	Formuláre	Yohan
23	Banková aplikácia	Metódy 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 vaša aplikácia uchováva stav a ako ho programovo spravovať	Správa stavu	Yohan
25	Prehliadač/VScode Editor	Práca s VScode	Naučte sa používať editor kódu	Použitie VScode Editoru	Chris
26	AI Asistenti	Práca s AI	Naučte sa vytvoriť vlastného AI asistenta	Projekt AI Asistent	Chris

🏫 Pedagogika

Náš učebný plán je navrhnutý s 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 používané dnešnými webovými vývojármi. Š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 vziať ako učebnú cestu 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, spárovaných s videom zo série "Začiatočnícka séria: JavaScript" kolekcie video tutoriálov, ktorých niektorí autori prispeli k tomuto učebnému plánu.

Okrem toho nízko-stresový kvíz pred hodinou nastavuje úmysel študenta na učenie sa témy, zatiaľ čo druhý kvíz po hodine zabezpečuje ďalšie uchovanie. Tento učebný plán bol navrhnutý tak, aby bol flexibilný a zábavný a mohol 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 JavaScriptových rámcov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred prijatím rámca, dobrým ďalším krokom po dokončení tohto učebného plánu by bolo učenie sa o Node.js prostredníctvom ďalšej kolekcie videí: "Začiatočnícka séria: Node.js".

Navštívte naše Pravidlá správania a Pokyny na 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 vašom lokálnom počítači a potom v koreňovom priečinku tohto repozitára zadajte docsify serve. Webová stránka bude spustená na porte 3000 na vašom localhoste: localhost:3000.

📘 PDF

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

🎒 Ďalšie kurzy

Náš tím vytvára ďalšie kurzy! Pozrite si:

Získanie pomoci

Ak sa zaseknete alebo máte otázky ohľadom budovania AI aplikácií, pridajte sa:

Ak máte spätnú väzbu k produktu alebo narazíte na chyby počas vývoja, navštívte:

Licencia

Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore LICENSE.

Upozornenie:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, upozorňujeme, ž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. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

29 KiB Raw Blame History