|
|
3 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 3 months 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 | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| quiz-app | 3 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.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 for Beginners - Kurz
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 zameriava na JavaScript, 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í s našou efektívnou projektovo orientovanou pedagogikou. Začnite svoju cestu kódovania už dnes!
🧑🎓 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. Toto je stránka, ktorú si chcete uložiť do záložiek a pravidelne kontrolovať, pretože obsah sa mení každý mesiac.
📣 Oznámenie - Nový kurz o Generatívnej AI pre JavaScript bol 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ú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 témami, 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, pridali sme niekoľko návrhov, ako tento kurz 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álu, dokončite rôzne aktivity a overte si svoje vedomosti 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 kurz má pripravené vývojové prostredie! Keď začínate, môžete si vybrať, či budete kurz spúšťať 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 svoje úložisko
Aby ste si mohli jednoducho uložiť svoju prácu, odporúčame vám vytvoriť si vlastnú kópiu tohto úložiska. 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é úložisko s kópiou kurzu.
Postupujte podľa týchto krokov:
- Forknite úložisko: Kliknite na tlačidlo "Fork" v pravom hornom rohu tejto stránky.
- Klonujte úložisko:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Spustenie kurzu v Codespace
Vo svojej kópii tohto úložiska, 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 kurzu lokálne na vašom počítači
Ak chcete tento kurz 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 editor, ktorý má tiež zabudovaný Terminál. Visual Studio Code si môžete stiahnuť tu.
-
Klonujte svoje úložisko do počítača. 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 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ú lekciu
- pre projektovo orientované lekcie, podrobné návody na vytvorenie projektu
- kontrolu vedomostí
- 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, každý s tromi otázkami. Sú prepojené v rámci lekcií a aplikácia kvízov môže byť spustená lokálne alebo nasadená na Azure; postupujte podľa pokynov v priečinku
quiz-app. Postupne sa lokalizujú.
🗃️ Lekcie
| Názov projektu | Učené koncepty | Ciele učenia | Prepojená lekcia | Autor | |
|---|---|---|---|---|---|
| 01 | Začíname | Úvod do programovania a nástrojov | 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číname | Základy GitHubu, vrátane práce v tíme | Ako používať GitHub vo svojom projekte, ako spolupracovať s ostatnými na kódovej báze | Úvod do GitHubu | Floor |
| 03 | Začíname | Prístupnosť | Naučte sa základy prístupnosti webu | 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 svojom 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, zamerané na vytváranie rozloženia | Úvod do HTML | Jen |
| 09 | Terárium | CSS v praxi | Vytvorte CSS na štýlovanie online terária, zamerané na základy CSS vrátane vytvárania responzívnych stránok | Ú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, zamerané na uzávery a manipuláciu s DOM | Uzávery v JavaScripte, manipulácia s DOM | Jen |
| 11 | Hra na písanie | Vytvorte hru 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 | Green Browser Extension | 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 | Green Browser Extension | Vytvorenie formulára, volanie API a ukladanie premenných do lokálneho úložiska | 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 | Green Browser Extension | 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 | Space Game | Pokročilejší 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 | Space Game | Kreslenie na plátno | Naučte sa o API Canvas, ktoré sa používa na kreslenie prvkov na obrazovku | Kreslenie na plátno | Chris |
| 17 | Space Game | Pohyb prvkov po obrazovke | Zistite, ako môžu prvky získať pohyb pomocou karteziánskych súradníc a API Canvas | Pohyb prvkov | Chris |
| 18 | Space Game | Detekcia kolízií | Umožnite prvkom kolidovať a reagovať na seba pomocou stlačení klávesov a poskytnite funkciu cooldown na zabezpečenie výkonu hry | Detekcia kolízií | Chris |
| 19 | Space Game | Počítanie skóre | Vykonávajte matematické výpočty na základe stavu a výkonu hry | Počítanie skóre | Chris |
| 20 | Space Game | 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 | Banking App | 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 | Banking App | 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 | Banking App | Metódy získavania a používania údajov | Ako údaje prúdia do vašej aplikácie a z nej, ako ich získavať, ukladať a likvidovať | Údaje | Yohan |
| 24 | Banking App | Koncepty správy stavu | Naučte sa, ako vaša aplikácia uchováva stav a ako ho programovo spravovať | Správa stavu | Yohan |
🏫 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 Space Invaders a bankovej aplikácie pre podniky. Na konci série študenti získajú pevné základy webového vývoja.
🎓 Prvé lekcie tohto učebného plánu si môžete vyskúšať 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í študentovu pozornosť 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 mohol byť absolvovaný celý alebo len jeho časť. 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 predstaveniu 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 učebného plánu by bolo naučiť sa o Node.js prostredníctvom ďalšej kolekcie videí: "Beginner Series to: Node.js".
Navštívte naše Pravidlá správania a Prispievanie pokyny. 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 svojom 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 všetkých lekcií nájdete tu.
🎒 Ďalšie kurzy
Náš tím vytvára aj ďalšie kurzy! Pozrite si:
- Generatívna AI pre začiatočníkov
- Generatívna AI pre začiatočníkov .NET
- Generatívna AI s JavaScriptom
- Generatívna AI s Javou
- AI pre začiatočníkov
- Data Science pre začiatočníkov
- ML pre začiatočníkov
- Kybernetická bezpečnosť pre začiatočníkov
- Webový vývoj pre začiatočníkov
- IoT pre začiatočníkov
- XR vývoj pre začiatočníkov
- Ovládnutie GitHub Copilot pre agentické použitie
- Ovládnutie GitHub Copilot pre vývojárov C#/.NET
- Vyberte si vlastné dobrodružstvo s Copilotom
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. Aj keď 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. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.