32 KiB

Raw Blame History Unescape Escape

Spletni razvoj za začetnike – učni načrt

Naučite se osnov spletnega razvoja z našim obsežnim 12-tedenskim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka izmed 24 lekcij poglobi znanje JavaScript-a, CSS-a in HTML-a skozi praktične projekte, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključuje kvize, razprave in praktične naloge. Izboljšajte svoje spretnosti in optimizirajte zadrževanje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodojersko pot še danes!

Pridružite se skupnosti Azure AI Foundry Discord

Sledite tem korakom, da začnete uporabljati te vire:

Razvezi repozitorij: Kliknite
Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce

🌐 Podpora več jezikov

Podprto prek GitHub Action (avtomatizirano in vedno posodobljeno)

Raje klonirate lokalno?

Ta repozitorij vsebuje več kot 50 prevodov jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite 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):
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 z veliko hitrejšim prenosom.

Če želite, da so podprti dodatni jeziki prevodov, so navedeni tukaj

🧑‍🎓 Si študent?

Obišči stran študentskega središča, kjer najdeš začetne vire, študentske pakete in celo načine, kako pridobiti brezplačen potrdilni bon. To je stran, ki jo želiš shraniti med zaznamke in jo občasno preverjati, saj mesečno menjamo vsebino.

📣 Napoved – nove izzive načinov GitHub Copilot Agenta za dokončanje!

Dodan je nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga moraš dokončati z uporabo GitHub Copilot-a in načina Agent. Če prej nisi uporabljal načina Agent, je ta zmožen ne samo generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.

📣 Napoved – nov projekt za gradnjo z generativno AI

Novi AI Assistant projekt je pravkar dodan, poglej projekt

📣 Napoved – nov učni načrt o generativni AI za JavaScript je pravkar izšel

Ne zamudite naš novi učni načrt o generativni AI!

Obišči https://aka.ms/genai-js-course, da začneš!

Lekcije pokrivajo vse od osnov do RAG (retrieval-augmented generation).
Interakcija z zgodovinskimi osebami preko GenAI in naše spremljevalne aplikacije.
Zabavno in privlačno pripovedovanje zgodb, kot da potuješ skozi čas!

Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem kot so:

Uporaba pozivov in inženiring pozivov
Generiranje aplikacij za besedilo in slike
Aplikacije za iskanje

Obišči https://aka.ms/genai-js-course, da začneš!

🌱 Začetek

Učitelji, vključili smo nekaj predlogov, kako uporabljati ta učni načrt. Veseli bomo vaših povratnih informacij v našem forumu za razprave!

Učenci, za vsako lekcijo začnite s predavanjem in kvizom ter nadaljujte z branjem predavanjskega gradiva, izpolnjevanjem različnih aktivnosti in preverjanjem razumevanja s kvizom po predavanju.

Za izboljšanje učenja se povežite s sovrstniki in skupaj delajte na projektih! Razprave so dobrodošle v našem diskusijskem forumu, kjer vam bodo na voljo naši moderatorji za odgovore na vaša vprašanja.

Za nadaljnje izobraževanje močno priporočamo raziskovanje Microsoft Learn za dodatne študijske materiale.

📋 Namestitev razvojnega okolja

Ta učni načrt že ima pripravljeno razvojno okolje! Ko začnete, se lahko odločite, ali boste učni načrt izvajali v Codespace (okolje, ki deluje v brskalniku in ne zahteva namestitev), ali lokalno na svojem računalniku z urejevalnikom besedila, kot je Visual Studio Code.

Ustvarite svoj repozitorij

Da boste lahko enostavno shranjevali svoje delo, vam priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb Uporabi ta predlogo na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.

Sledite tem korakom:

Razvezi repozitorij: Kliknite na gumb "Razvezi" (Fork) zgoraj desno na tej strani.
Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Izvajanje učnega načrta v Codespace

V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb Code in izberite Open with Codespaces. To bo ustvarilo nov Codespace za delo.

Izvajanje učnega načrta lokalno na svojem računalniku

Za izvajanje tega učnega načrta lokalno na svojem računalniku boste potrebovali urejevalnik besedila, brskalnik in orodje ukazne vrstice. Naša prva lekcija, Uvod v programske jezike in orodja stroke, vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete, kaj vam najbolj ustreza.

Priporočamo uporabo 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 na gumb Code in kopirate URL:

CodeSpace

Nato odprite Terminal v Visual Studio Code in zaženite naslednji ukaz, pri čemer zamenjajte <your-repository-url> 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 Visual Studio Code:

Live Server - za predogled HTML strani znotraj Visual Studio Code

Copilot - za pomoč pri hitrejšem pisanju kode

📂 Vsaka lekcija vključuje:

neobvezno skiciranje
neobvezni dodatni video
ogrevalni kviz pred lekcijo
pisno lekcijo
pri lekcijah, temelječih na projektih, vodnike korak za korakom za izdelavo projekta
preverjanja znanja
izziv
dodatno branje
nalogo
kviz po lekciji

Opomba o kvizih: Vsi kvizi so zbrani v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji. Na voljo so tukaj, kviz aplikacijo lahko zaženete lokalno ali objavite na Azure; sledite navodilom v mapi quiz-app.

🗃️ Lekcije

	Ime projekta	Poučeni koncepti	Cilji učenja	Povezana lekcija	Avtor
01	Začetek	Uvod v programiranje in orodja poklica	Naučite se osnov, na katerih temeljijo večina programskih jezikov, in o programski opremi, ki pomaga profesionalnim razvijalcem	Uvod v programske jezike in orodja poklica	Jasmine
02	Začetek	Osnove GitHub, 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	JS Osnove	Tipi podatkov v JavaScript	Osnove tipov podatkov v JavaScript	Tipi podatkov	Jasmine
05	JS Osnove	Funkcije in metode	Naučite se o funkcijah in metodah za upravljanje logike aplikacije	Funkcije in metode	Jasmine in Christopher
06	JS Osnove	Sprejemanje odločitev v JS	Naučite se, kako ustvariti pogoje v kodi z uporabo metod odločanja	Sprejemanje odločitev	Jasmine
07	JS Osnove	Tabele in zanke	Delo s podatki z uporabo tabel in zank v JavaScript	Tabele in zanke	Jasmine
08	Terrarij	HTML v praksi	Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na izdelavo postavitve	Uvod v HTML	Jen
09	Terrarij	CSS v praksi	Naredite CSS za oblikovanje spletnega terrarija, osredotočite se na osnove CSS in odzivno oblikovanje strani	Uvod v CSS	Jen
10	Terrarij	JavaScript sklope, manipulacija DOM	Naredite JavaScript, da bo terrarij deloval kot vmesnik za povleci/spusti, osredotočite se na sklope in manipulacijo DOM	JavaScript sklope, manipulacija DOM	Jen
11	Igra tipkanja	Izdelava igre tipkanja	Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije	Dogodkovno usmerjeno programiranje	Christopher
12	Zeleni brskalnik dodatek	Delo z brskalniki	Naučite se, kako brskalniki delujejo, njihova zgodovina in kako pripraviti prve elemente brskalniškega dodatka	O brskalnikih	Jen
13	Zeleni brskalnik dodatek	Izdelava obrazca, klic API-ja in shranjevanje spremenljivk v lokalno shrambo	Naredite JavaScript elemente vašega brskalniškega dodatka za klic API-ja, ki uporablja spremenljivke shranjene v lokalni shrambi	API-ji, obrazci in lokalna shramba	Jen
14	Zeleni brskalnik dodatek	Ozadinski procesi v brskalniku, spletna zmogljivost	Uporabite ozadinske procese brskalnika za upravljanje ikone dodatka; spoznajte spletno zmogljivost in nekatere optimizacije	Ozadna opravila in zmogljivost	Jen
15	Igra vesolja	Naprednejši razvoj iger z JavaScript	Naučite se o dedovanju z uporabo razredov in kompozicije ter o vzorcu Pub/Sub, kot priprava na izdelavo igre	Uvod v napredni 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 lahko elementi pridobijo gibanje z uporabo kartiznih koordinat in Canvas API	Premikanje elementov	Chris
18	Igra vesolja	Zaznavanje trkov	Poskrbite, da se elementi trkajo in odzivajo drug na drugega s pritiski tipk in dodajte funkcijo za ohlajanje za boljšo zmogljivost igre	Zaznavanje trkov	Chris
19	Igra vesolja	Vodenje rezultatov	Izvedite matematične izračune na podlagi stanja in zmogljivosti igre	Vodenje rezultatov	Chris
20	Igra vesolja	Zaključevanje in ponovni zagon igre	Spoznajte, kako zaključiti in znova zagnati igro, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk	Pogoj za zaključek	Chris
21	Bančna aplikacija	HTML predloge in poti v spletni aplikaciji	Naučite se ustvariti osnovno arhitekturo večstranične spletne strani z uporabo poti in HTML predlog	HTML predloge in poti	Yohan
22	Bančna aplikacija	Izdelava prijavnega in registracijskega obrazca	Naučite se izdelovati obrazce in upravljati validacijske rutine	Obrazci	Yohan
23	Bančna 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čna aplikacija	Koncepti upravljanja stanja	Naučite se, kako vaša aplikacija ohranja stanje in kako ga programsko upravljati	Upravljanje stanja	Yohan
25	Brskalnik/VScode Koda	Delo z VScode	Naučite se uporabljati urejevalnik kode	Uporaba VScode urejevalnika kode	Chris
26	AI asistenti	Delo z umetno inteligenco	Naučite se izdelati svojega AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogika

Naš učni načrt je zasnovan z dvema ključnima pedagoškima načeloma:

učenje, usmerjeno v projekte
pogosti kvizi

Program uči osnove JavaScript, HTML in CSS ter najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Učenci bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijaznega brskalniškega dodatka, igre v slogu Space Invaders in bančne aplikacije za podjetja. Ob koncu serije bodo udeleženci pridobili trdno razumevanje spletnega razvoja.

🎓 Prve lekcije tega učnega načrta lahko opravite kot Pot učenja na Microsoft Learn!

S tem, ko vsebina sovpada s projekti, je proces za učence bolj zanimiv in krepi zapomnitev konceptov. Prav tako smo napisali več začetnih lekcij o osnovah JavaScript-a, ki uvajajo koncepte, skupaj z videoposnetkom iz zbirke "Serija za začetnike: JavaScript", katere avtorji so prispevali k temu učnemu načrtu.

Poleg tega nizkobetno kviz pred razredom usmeri pozornost študenta na učenje teme, medtem ko drugi kviz po razredu zagotovi dodatno pomnjenje. Ta učni načrt je zasnovan tako, da je prilagodljiv in zabaven, ter ga je mogoče opraviti v celoti ali delno. Projekti so na začetku majhni in postajajo po 12-tedenskem ciklu vse bolj kompleksni.

Čeprav smo namerno opustili uvajanje JavaScript okvirov, da se osredotočimo na osnovne spretnosti, potrebne kot spletni razvijalec pred uporabo okvira, bi bil dober naslednji korak za zaključek tega učnega načrta učenje o Node.js preko druge video zbirke: "Serija za začetnike: Node.js".

Oglejte si naše Pravila obnašanja in Prispevanje. Veselimo se vaših konstruktivnih povratnih informacij!

🧭 Dostop brez povezave

To dokumentacijo lahko zaženete brez povezave z uporabo Docsify. Razvejajte ta repozitorij, namestite Docsify na svojem lokalnem računalniku, nato pa v korenski mapi tega repozitorija vnesite docsify serve. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: localhost:3000.

📘 PDF

PDF vseh lekcij lahko najdete tukaj.

🎒 Drugi tečaji

Naša ekipa pripravlja še druge tečaje! Oglejte si:

LangChain

Azure / Edge / MCP / Agentje

Generativni AI serija

Osnovno učenje

Copilot serija

Iskanje pomoči

Če se zataknete ali imate kakršnakoli vprašanja o ustvarjanju AI aplikacij. Pridružite se drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je podpirajoča skupnost, kjer so vprašanja dobrodošla in se znanje prosto deli.

Če imate povratne informacije o izdelku ali napake med ustvarjanjem, obiščite:

Licenca

Ta repozitorij je licenciran pod licenco MIT. Za več informacij glejte datoteko LICENSE.

Omejitev odgovornosti: Ta dokument je bil preveden z uporabo AI prevajalske storitve Co-op Translator. Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvirnem jeziku velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Ne odgovarjamo za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.

32 KiB Raw Blame History Unescape Escape