|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | ||
| docs | ||
| lesson-template | ||
| memory-game | ||
| quiz-app | ||
| AGENTS.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| README.md | 1 month ago | |
| SECURITY.md | ||
| SUPPORT.md | ||
| _404.md | ||
| for-teachers.md | 1 month ago | |
README.md
Spletni razvoj za začetnike - Pouk
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem Microsoft Cloud Advocates. Vsaka izmed 24 lekcij poglobi znanje JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključuje kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodo danes!
Pridružite se skupnosti Azure AI Foundry Discord
Sledite tem korakom, da začnete uporabljati te vire:
- Razveji Repozitorij: Kliknite
- Kloniraj Repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pridruži se Azure AI Foundry Discord in spoznaj strokovnjake ter ostale razvijalce
🌐 Podpora več jezikov
Podprto preko GitHub Action (Avtomatizirano in vedno posodobljeno)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Raje kloniraš lokalno?
Ta repozitorij vsebuje prevode v več kot 50 jezikov, kar močno poveča velikost prenosa. Če želiš klonirati brez prevodov, uporabi 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'Tako dobiš vse, kar potrebuješ za dokončanje tečaja, z veliko hitrejšim prenosom.
Če želiš dodatno podporo za prevodne jezike, so našteti tukaj
🧑🎓 Si študent?
Obišči Student Hub stran, kjer najdeš vire za začetnike, študentske pakete in celo načine za pridobitev brezplačnega potrdila. To stran si shrani med priljubljene in jo občasno preverjaj, saj vsebino mesečno posodabljamo.
📣 Obvestilo - Novi izzivi GitHub Copilot Agent načina za dokončanje!
Dodali smo nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga lahko opraviš z uporabo GitHub Copilot in Agent načina. Če agent načina še nisi uporabljal, zna ne samo generirati besedila, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
📣 Obvestilo - Nov projekt za izgradnjo z uporabo Generativne AI
Pravkar smo dodali nov AI Assistant projekt, oglej si ga projekt
📣 Obvestilo - Nov kurikulum o Generativni AI za JavaScript je pravkar izšel
Ne zamudi našega novega kurikuluma o Generativni AI!
Obišči https://aka.ms/genai-js-course za začetek!
- Lekcije obsegajo vse od osnov do RAG.
- Komuniciraj z zgodovinskimi liki s pomočjo GenAI in naše spremljevalne aplikacije.
- Zabavna in privlačna pripoved, potoval boš skozi čas!
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem, kot so:
- Spodbujanje in inženiring spodbude
- Generiranje besedilnih in slikovnih aplikacij
- Iskalne aplikacije
Obišči https://aka.ms/genai-js-course za začetek!
🌱 Začetek
Učitelji, vključili smo nekaj predlogov o tem, kako uporabljati ta kurikulum. Veseli bomo vaših povratnih informacij v našem forumu za razprave!
Učenci, za vsako lekcijo začnite s predpredavanjem kviza in nadaljujte z branjem predavanj, dokončanjem različnih aktivnosti in preverjanjem razumevanja s post-predavanjem kviza.
Za izboljšanje učne izkušnje se povežite s sošolci in skupaj delajte na projektih! Spodbujamo razprave v našem forumu za razprave, kjer je na voljo naša ekipa moderatorjev za odgovore na vaša vprašanja.
Za nadaljnje izobraževanje močno priporočamo raziskovanje Microsoft Learn za dodatne študijske materiale.
📋 Nastavitev okolja
Ta kurikulum ima pripravljeno razvojno okolje! Ko začneš, lahko začneš izvajati kurikulum v Codespace (brskalniško okolje brez potrebe po namestitvah) ali lokalno na svojem računalniku z urejevalnikom besedil, kot je Visual Studio Code.
Ustvari svoj repozitorij
Da boste lahko enostavno shranjevali svoje delo, je priporočljivo, da ustvarite svojo kopijo tega repozitorija. To lahko storite s klikom na gumb Uporabi ta vzorec na vrhu strani. S tem bo v vašem GitHub računu ustvarjen nov repozitorij s kopijo kurikuluma.
Sledite tem korakom:
- Razveji Repozitorij: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.
- Kloniraj Repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Izvajanje kurikuluma v Codespace
V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite na gumb Code in izberite Open with Codespaces. To bo ustvarilo nov Codespace za vaše delo.
Izvajanje kurikuluma lokalno na računalniku
Za izvajanje tega kurikuluma lokalno na svojem računalniku boste potrebovali urejevalnik besedil, brskalnik in orodje ukazne vrstice. Naša prva lekcija, Uvod v programske jezike in orodja, vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete, kaj vam najbolj ustreza.
Priporočilo je uporaba Visual Studio Code kot urejevalnika, ki ima tudi vgrajen Terminal. Visual Studio Code lahko prenesete tukaj.
-
Klonirajte svoj repozitorij na računalnik. To lahko storite tako, da kliknete gumb Code in kopirate URL:
CodeSpace Nato odprite Terminal znotraj Visual Studio Code in zaženite naslednji ukaz, pri čemer
<your-repository-url>zamenjajte z URL-jem, ki ste ga pravkar kopirali:git clone <your-repository-url> -
Odprite mapo v Visual Studio Code. To lahko storite tako, da kliknete File > Open Folder in izberete mapo, ki ste jo pravkar klonirali.
Priporočene razširitve za Visual Studio Code:
- Live Server - za predogled HTML strani znotraj Visual Studio Code
- Copilot - za pomoč pri hitrejšem pisanju kode
📂 Vsaka lekcija vsebuje:
- neobvezno skicirno zapiskovanje
- neobvezni dodatni video
- ogrevalni kviz pred lekcijo
- pisno lekcijo
- za lekcije na osnovi projektov, korak za korakom vodiče za izdelavo projekta
- preverjanje znanja
- izziv
- dodatno branje
- nalogo
- kviz po lekciji
Opomba o kvizih: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji vsak. Na voljo so tukaj, aplikacijo za kvize lahko zaženete lokalno ali pa jo namestite v Azure; sledite navodilom v mapi
quiz-app.
🗃️ Lekcije
| Ime projekta | Poučevani koncepti | Cilji učenja | Povezana lekcija | Avtor | |
|---|---|---|---|---|---|
| 01 | Začetek | Uvod v programiranje in orodja poklica | Spoznajte osnovna načela večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri delu | Uvod v programske jezike in orodja poklica | Jasmine |
| 02 | Začetek | Osnove GitHub, vključno z delom v timu | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na izvorni kodi | Uvod v GitHub | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove dostopnosti spletnih strani | Osnove dostopnosti | Christopher |
| 04 | Osnove JS | Tipi podatkov v JavaScript | Osnove tipov podatkov v JavaScript | Tipi podatkov | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje s tokom logike aplikacije | Funkcije in metode | Jasmine in Christopher |
| 06 | Osnove JS | Odločitve v JS | Naučite se ustvarjati pogoje v kodi z uporabo metod odločanja | Ustvarjanje odločitev | Jasmine |
| 07 | Osnove JS | Polja in zanke | Računajte z podatki z uporabo polj in zank v JavaScript | Polja in zanke | Jasmine |
| 08 | Terrarij | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, osredotočite se na postavitev layouta | Uvod v HTML | Jen |
| 09 | Terrarij | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, osredotočite se na osnove CSS in prilagoditev strani | Uvod v CSS | Jen |
| 10 | Terrarij | JavaScript closures, manipulacija DOM | Zgradite JavaScript za delovanje terarija kot vmesnik za povleci-in-spusti, osredotočite se na closures in manipulacijo DOM | JavaScript closures, manipulacija DOM | Jen |
| 11 | Igra tipkanja | Izdelava igre tipkanja | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije | Dogodkovno programiranje | Christopher |
| 12 | Zeleni brskalnik razširitev | Delo z brskalniki | Spoznajte delovanje brskalnikov, njihovo zgodovino in kako sestaviti prve elemente razširitve brskalnika | O brskalnikih | Jen |
| 13 | Zeleni brskalnik razširitev | Izdelava obrazca, klic API in shranjevanje spremenljivk v lokalno shrambo | Pripravite JavaScript elemente razširitve brskalnika za poklic API z uporabo spremenljivk shranjenih v lokalni shrambi | API-ji, obrazci in lokalna shramba | Jen |
| 14 | Zeleni brskalnik razširitev | Ozadni procesi v brskalniku, spletna učinkovitost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno učinkovitost in nekatere optimizacije | Ozadna opravila in učinkovitost | Jen |
| 15 | Igra vesolja | Naprednejši razvoj iger z JavaScript | Spoznajte dediščino s pomočjo razredov in kompozicije ter vzorec Pub/Sub, v pripravi za izdelavo igre | Uvod v napreden razvoj iger | Chris |
| 16 | Igra vesolja | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | Risanje na platno | Chris |
| 17 | Igra vesolja | Premikanje elementov po zaslonu | Spoznajte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | Premikanje elementov | Chris |
| 18 | Igra vesolja | Detekcija trkov | Naredite, da se elementi trčijo in reagirajo med seboj z uporabo pritiskov tipk ter zagotovite funkcijo ohlajevanja za boljšo zmogljivost igre | Detekcija trkov | Chris |
| 19 | Igra vesolja | Vodenje točk | Izvedite matematične izračune na podlagi statusa in zmogljivosti igre | Vodenje točk | Chris |
| 20 | Igra vesolja | Zaključevanje in ponovni zagon igre | Spoznajte, kako zaključiti in ponovno zagnati igro, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | Pogoj za zaključek | Chris |
| 21 | Bančniška aplikacija | HTML predloge in poti v spletni aplikaciji | Naučite se ustvariti ogrodje arhitekture večstranske spletne strani z uporabo usmerjanja in HTML predlog | HTML predloge in poti | Yohan |
| 22 | Bančniška aplikacija | Izdelava obrazca za prijavo in registracijo | Spoznajte izdelavo obrazcev in upravljanje z validacijskimi postopki | Obrazci | Yohan |
| 23 | Bančniška aplikacija | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | Podatki | Yohan |
| 24 | Bančniška aplikacija | Koncepti upravljanja stanja | Naučite se, kako vaša aplikacija shrani stanje in kako ga upravljati programersko | Upravljanje stanja | Yohan |
| 25 | Browser/VScode Koda | Delo z VScode | Naučite se uporabljati urejevalnik kode | Uporaba urejevalnika kode VScode | Chris |
| 26 | AI asistenti | Delo z umetno inteligenco | Naučite se zgraditi lastnega AI asistenta | Projekt AI asistenta | Chris |
🏫 Pedagogika
Naš kurikulum je zasnovan z dvema ključnima pedagoškima načeloma v mislih:
- učenje na osnovi projektov
- pogosti kvizi
Program uči osnove JavaScripta, HTML-ja in CSS-ja, pa tudi najnovejša orodja in tehnike, ki jih danes uporabljajo spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskih napadalcev in bančne aplikacije za podjetja. Ob koncu serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
🎓 Prve lekcije tega kurikuluma lahko opravite kot pot učenja na Microsoft Learn!
Z zagotavljanjem, da vsebina sovpada s projekti, je proces učenja bolj privlačen za študente in bo povečal zadrževanje konceptov. Prav tako smo napisali več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, povezane z videom iz zbirke video vadnic "Serija za začetnike na: JavaScript", katere avtorji so prispevali k temu kurikulumu.
Poleg tega kviz z nizko stopnjo tveganja pred razredom usmerja namen študenta k učenju teme, medtem ko drugi kviz po razredu zagotavlja nadaljnje zadrževanje znanja. Ta kurikulum je zasnovan tako, da je fleksibilen in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo na koncu 12-tedenskega cikla vse bolj kompleksni.
Čeprav smo namerno izpustili uvajanje JavaScript ogrodij, da se osredotočimo na osnovne veščine, potrebne kot spletni razvijalec, preden sprejmemo ogrodje, je dober naslednji korak pri dokončanju tega kurikuluma učenje o Node.js prek druge zbirke videov: "Serija za začetnike na: Node.js".
Obiščite naše Pravila obnašanja in Prispevanje smernice. Veselimo se vaših konstruktivnih povratnih informacij!
🧭 Dostop brez povezave
To dokumentacijo lahko zaženete brez povezave z uporabo Docsify. Forkajte to repozitorij, namestite Docsify na vaš lokalni računalnik in nato v korenski mapi repozitorija vnesite docsify serve. Spletna stran bo na voljo na vratih 3000 na vašem lokalnem strežniku: localhost:3000.
PDF vseh lekcij najdete tukaj.
🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
LangChain
Azure / Edge / MCP / Agentje
Serija generativne umetne inteligence
Osnovno učenje
Serija Copilot
Pomoč
Če zataknete ali imate kakršnakoli vprašanja glede razvoja AI aplikacij, se pridružite drugim učečim in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla in se znanje brezplačno deli.
Če imate povratne informacije o izdelku ali naletite na napake med razvojem, obiščite:
Licenca
Ta repozitorij je licenciran pod licenco MIT. Za več informacij glejte datoteko LICENSE.
Opozarilo: Ta dokument je bil preveden z uporabo storitve za avtomatski prevod Co-op Translator. Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali nepravilnosti. Izvirni dokument v njegovem izvirnem jeziku velja za avtoritativni vir. Za pomembne informacije priporočamo strokoven človeški prevod. Nismo odgovorni za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.


