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:

1. Vytvorte Fork úložiska: Kliknite na
2. Naklonujte úložisko: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 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:

1. Vytvorte Fork úložiska: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
2. 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.

1. Naklonujte si 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 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>
   

2. 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

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.