|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 1 week ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 1 week ago | |
| Git-Basics | 1 week ago | |
| docs | 1 week ago | |
| lesson-template | 1 week ago | |
| memory-game | 1 week ago | |
| quiz-app | 1 week ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 1 week ago | |
| CONTRIBUTING.md | 1 week ago | |
| README.md | 1 week ago | |
| SECURITY.md | 1 week ago | |
| SUPPORT.md | 1 week ago | |
| _404.md | 1 week ago | |
| for-teachers.md | 1 week ago | |
README.md
Spletni razvoj za začetnike - kurikulum
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga pripravljajo Microsoft Cloud Advocates. Vsaka izmed 24 lekcij se poglobi v JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito metodologijo, ki temelji na projektih. Začnite svojo kodirno pot danes!
Pridružite se skupnosti Azure AI Foundry na Discordu
Sledite tem korakom, da začnete uporabljati te vire:
- Razvejite repozitorij: Kliknite
- Klonirajte repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pridružite se Azure AI Foundry Discordu in spoznajte strokovnjake ter razvijalce
🌐 Podpora več jezikov
Podprto preko GitHub Action (samodejno 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 klonirate lokalno?
Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite 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 boste imeli vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
Če želite podpreti dodatne jezike prevodov, so ti navedeni tukaj
🧑🎓 Ste študent?
Obiščite Student Hub stran, kjer boste našli začetniške vire, študentske pakete in tudi možnosti za pridobitev brezplačnega certifikatnega bona. To je stran, ki si jo želite shraniti med zaznamke in občasno preverjati, saj vsak mesec menjamo vsebine.
📣 Napoved - Novi izzivi z načinom GitHub Copilot Agent za dokončanje!
Dodali smo nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, ki ga dokončate z uporabo GitHub Copilot in Agent načina. Če Agent načina še niste uporabljali, zmore ne le ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.
📣 Napoved - Novi projekt za gradnjo z uporabo Generativne AI
Dodali smo nov projekt AI asistenta, oglejte si projekt
📣 Napoved - Nov kurikulum o Generativni AI za JavaScript je pravkar izšel
Ne zamudite našega novega kurikuluma o Generativni AI!
Obiščite https://aka.ms/genai-js-course in začnite!
- Lekcije pokrivajo vse od osnov do RAG.
- Komunicirajte s historičnimi osebami z uporabo GenAI in naše spremljevalne aplikacije.
- Zabavna in zanimiva zgodba, potovali boste skozi čas!
Vsaka lekcija vključuje domačo nalogo, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Spodbujanje in inženiring pozivov
- Generiranje aplikacij za besedilo in slike
- Iskalne aplikacije
Obiščite https://aka.ms/genai-js-course in začnite!
🌱 Začetek
Učitelji, vključili smo nekaj predlogov, kako uporabljati ta kurikulum. Radi bi prejeli vašo povratno informacijo v naši razpravi!
Učenci, za vsako lekcijo začnite s predpredavanjem kvizom in nadaljujte z branjem učne snovi, izpolnjujte različne aktivnosti in preverite svoje razumevanje s popredavanjem kvizom.
Za boljšo izkušnjo učenja se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem razpravnem forumu, kjer bo na voljo naša ekipa moderatorjev za odgovore na vaša vprašanja.
Za nadaljnje izobraževanje priporočamo raziskovanje Microsoft Learn za dodatne študijske materiale.
📋 Nastavitev okolja
Ta kurikulum ima že pripravljeno razvojno okolje! Ko začnete, lahko kurikulum zaženete v Codespace (brskalniško okolje brez potrebe po nameščanju), ali lokalno na vašem računalniku z urejevalnikom besedila, kot je Visual Studio Code.
Ustvarite svoj repozitorij
Da boste lahko enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb Use this template na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo kurikuluma.
Sledite tem korakom:
- Razvejite repozitorij: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
- Klonirajte repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Zagon kurikuluma v Codespace-u
V vaši kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb Code in izberite Open with Codespaces. To bo ustvarilo nov Codespace, v katerem lahko delate.
Zagon kurikuluma lokalno na vašem računalniku
Za lokalni zagon kurikuluma na vašem računalniku boste potrebovali urejevalnik besedila, brskalnik in ukazno orodje. Naša prva lekcija, Uvod v programske jezike in orodja stroke, vam bo predstavila različne možnosti za vsako od teh orodij, da boste lahko izbrali, kar vam najbolj ustreza.
Naše priporočilo je uporaba Visual Studio Code kot urejevalnika, ki ima tudi vgrajen Terminal. Visual Studio Code lahko prenesete tukaj.
-
Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb Code in kopirate URL:
CodeSpace Potem 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 Datoteka > Odpri mapo in izberete mapo, ki ste jo pravkar klonirali.
Priporočeni razširitve Visual Studio Code:
- Live Server - za predogled HTML strani v Visual Studio Code
- Copilot - za pomoč pri hitrejšem pisanju kode
📂 Vsaka lekcija vključuje:
- neobvezno skico
- neobvezni dodatni video
- ogrevalni kviz pred lekcijo
- pisno lekcijo
- pri lekcijah na osnovi projektov, vodnike korak za korakom za izdelavo projekta
- preverjanja znanja
- izziv
- dodatno branje
- kviz po lekciji
Opomba o kvizih: Vsi kvizi so zbrani v mapi Quiz-app, skupno 48 kvizov s po tremi vprašanji. Na voljo so tukaj, aplikacijo za kvize je mogoče zagnati lokalno ali namestiti na Azure; sledite navodilom v mapi
quiz-app.
🗃️ Lekcije
| Ime projekta | Koncepti, ki se učijo | Cilji učenja | Povezana lekcija | Avtor | |
|---|---|---|---|---|---|
| 01 | Začetek | Uvod v programiranje in orodja poklica | Spoznajte osnovna izhodišča večine programskih jezikov in o programski opremi, ki strokovnim razvijalcem pomaga opravljati delo | Uvod v programske jezike in orodja poklica | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na kodi | Uvod v GitHub | Floor |
| 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | Osnove dostopnosti | Christopher |
| 04 | Osnove JS | JavaScript tipi podatkov | Osnove tipov podatkov v JavaScript | Tipi podatkov | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Naučite se o funkcijah in metodah za upravljanje z logiko aplikacije | Funkcije in metode | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod za sprejemanje odločitev | Sprejemanje odločitev | Jasmine |
| 07 | Osnove JS | Polja in zanke | Delo s podatki z uporabo polj in zank v JavaScript | Polja in zanke | Jasmine |
| 08 | Terrarij | HTML v praksi | Ustvarite HTML za spletni terrarij, osredotočeno na izdelavo postavitve | Uvod v HTML | Jen |
| 09 | Terrarij | CSS v praksi | Ustvarite CSS za stiliziranje spletnega terrarija, osnove CSS vključno z ustvarjanjem odzivne strani | Uvod v CSS | Jen |
| 10 | Terrarij | Zapiranje JavaScript, manipulacija DOM | Napišite JavaScript, da terrarij deluje kot vmesnik povleci in spusti, s poudarkom na zapiranju in manipulaciji DOM | Zapiranje JavaScript, manipulacija DOM | Jen |
| 11 | Igra tipkanja | Ustvarjanje igre tipkanja | Naučite se uporabljati dogodke tipkovnice za vodenje logike vaše JavaScript aplikacije | Dogodkovno usmerjeno programiranje | Christopher |
| 12 | Zelena razširitev brskalnika | Delo z brskalniki | Spoznajte kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | O brskalnikih | Jen |
| 13 | Zelena razširitev brskalnika | Ustvarjanje obrazca, klic API-ja in shranjevanje spremenljivk v lokalni shrambi | Napišite JavaScript elemente razširitve brskalnika za klic API-ja z uporabo spremenljivk shranjenih v lokalni shrambi | API-ji, obrazci in lokalna shramba | Jen |
| 14 | Zelena razširitev brskalnika | Ozadni procesi v brskalniku, spletna učinkovitost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno učinkovitost in nekatere optimizacije za izboljšanje delovanja | Ozadna opravila in učinkovitost | Jen |
| 15 | Igra v vesolju | Naprednejši razvoj iger z JavaScript | Naučite se o dedovanju z uporabo tako razredov kot kompozicije in vzorca Pub/Sub, v pripravi na izdelavo igre | Uvod v napredni razvoj iger | Chris |
| 16 | Igra v vesolju | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | Risanje na platno | Chris |
| 17 | Igra v vesolju | Premikanje elementov po zaslonu | Odkrijte, kako lahko elementi pridobijo gibanje s pomočjo kartezičnih koordinat in Canvas API | Premikanje elementov | Chris |
| 18 | Igra v vesolju | Zaznavanje trkov | Naredite, da se elementi trčijo in medsebojno odzivajo z uporabo tipk ter zagotovite funkcijo za časovno zakasnitev, da ohranite učinkovitost igre | Zaznavanje trkov | Chris |
| 19 | Igra v vesolju | Štetje točk | Izvedite matematične izračune na podlagi stanja in učinkovitosti igre | Štetje točk | Chris |
| 20 | Igra v vesolju | Konec in ponovni zagon igre | Naučite se o zaključevanju in ponovnem zagonu igre, vključno z čiščenjem virov in ponastavitvijo vrednosti spremenljivk | Pogoj za zaključek | Chris |
| 21 | Bančniška aplikacija | HTML predloge in usmeritve v spletni aplikaciji | Naučite se ustvariti ogrodje arhitekture večstranične spletne strani z uporabo usmerjevalnikov in HTML predlog | HTML predloge in usmeritve | Yohan |
| 22 | Bančniška aplikacija | Ustvarjanje prijavnega in registracijskega obrazca | Naučite se o izdelavi obrazcev in obravnavi preverjanj veljavnosti | 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 ohranja stanje in kako ga programsko upravljati | Upravljanje stanja | Yohan |
| 25 | Koda brskalnika/VScode | Delo z VScode | Naučite se uporabljati urejevalnik kode | Uporaba VScode Code Editor | Chris |
| 26 | AI asistenti | Delo z AI | Naučite se izdelati svojega AI asistenta | Projekt AI asistenta | Chris |
🏫 Pedagogika
Naš kurikulum je zasnovan z dvema ključnima pedagoškima načeloma:
- učenje na osnovi projektov
- pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskih vdiralcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
🎓 Prve nekaj lekcij tega kurikuluma lahko opravite kot Učni načrt na Microsoft Learn!
Z zagotavljanjem, da je vsebina usklajena s projekti, je proces za študente bolj zanimiv in zadrževanje konceptov bo izboljšano. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, skupaj z videom iz zbirke "Začetniška serija za: JavaScript" video vodičev, nekateri avtorji katerih so prispevali k temu kurikulumu.
Poleg tega nizkotsenčni kviz pred razredom postavi namen študenta za učenje teme, medtem ko drugi kviz po razredu zagotavlja nadaljnjo zadržanost. Ta kurikulum je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo vse bolj zahtevni do konca 12-tedenskega cikla.
Čeprav smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega kurikuluma učenje o Node.js preko druge zbirke videov: "Začetniška serija za: 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 offline z uporabo Docsify. Razvežite to repozitorij, namestite Docsify na svoj lokalni računalnik in nato v korenski mapi te repozitorija vnesite docsify serve. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: localhost:3000.
PDF vseh lekcij je na voljo tukaj.
🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
LangChain
Azure / Edge / MCP / Agentje
Serija Generativna AI
Osnovno učenje
Serija Copilot
Pridobivanje pomoči
Če se zataknete ali imate kakršnakoli vprašanja glede izdelave AI aplikacij. Pridružite se sošolcem in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla, znanje pa se prosto deli.
Če imate povratne informacije o izdelku ali napake pri izdelavi, obiščite:
Licenca
To skladišče je licencirano pod licenco MIT. Za več informacij glejte datoteko LICENSE.
Opozorilo:
Ta dokument je bil preveden z uporabo AI prevajalske storitve Co-op Translator. Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvoru jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazuma ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.


