|
2 days ago | |
---|---|---|
.. | ||
1-getting-started-lessons | 6 days ago | |
2-js-basics | 6 days ago | |
3-terrarium | 6 days ago | |
4-typing-game | 6 days ago | |
5-browser-extension | 6 days ago | |
6-space-game | 6 days ago | |
7-bank-project | 6 days ago | |
8-code-editor/1-using-a-code-editor | 6 days ago | |
9-chat-project | 2 days ago | |
docs | 1 week ago | |
lesson-template | 1 week ago | |
quiz-app | 1 week ago | |
CODE_OF_CONDUCT.md | 1 week ago | |
CONTRIBUTING.md | 1 week ago | |
README.md | 6 days ago | |
SECURITY.md | 1 week ago | |
SUPPORT.md | 1 week ago | |
_404.md | 1 week ago | |
for-teachers.md | 1 week ago |
README.md
Sledite tem korakom, da začnete uporabljati te vire:
- Forkajte 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 druge razvijalce
Spletni razvoj za začetnike - Kurikulum
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga ponujajo Microsoftovi Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve brskalnika in vesoljske igre. Sodelujte v kvizih, razpravah in praktičnih nalogah. Izboljšajte svoje veščine in optimizirajte svoje znanje z našo učinkovito projektno pedagogiko. Začnite svojo kodirno pot danes!
🌐 Podpora za več jezikov
Podprto prek GitHub Action (samodejno in vedno posodobljeno)
French | Spanish | German | Russian | Arabic | Persian (Farsi) | Urdu | Chinese (Simplified) | Chinese (Traditional, Macau) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Taiwan) | Japanese | Korean | Hindi | Bengali | Marathi | Nepali | Punjabi (Gurmukhi) | Portuguese (Portugal) | Portuguese (Brazil) | Italian | Polish | Turkish | Greek | Thai | Swedish | Danish | Norwegian | Finnish | Dutch | Hebrew | Vietnamese | Indonesian | Malay | Tagalog (Filipino) | Swahili | Hungarian | Czech | Slovak | Romanian | Bulgarian | Serbian (Cyrillic) | Croatian | Slovenian | Ukrainian | Burmese (Myanmar)
Če želite, da so podprti dodatni jeziki, so navedeni tukaj
🧑🎓 Ste študent?
Obiščite stran Student Hub, kjer boste našli začetne vire, študentske pakete in celo načine za pridobitev brezplačnega certifikata. To je stran, ki jo želite shraniti med zaznamke in občasno preveriti, saj mesečno menjamo vsebino.
📣 Obvestilo - Nov projekt za gradnjo z generativno umetno inteligenco
Pravkar dodan nov projekt AI Assistant, preverite projekt
📣 Obvestilo - Nov kurikulum o generativni umetni inteligenci za JavaScript je bil pravkar objavljen
Ne zamudite našega novega kurikuluma o generativni umetni inteligenci!
Obiščite https://aka.ms/genai-js-course, da začnete!
- Lekcije, ki pokrivajo vse od osnov do RAG.
- Interakcija z zgodovinskimi osebnostmi z uporabo GenAI in naše spremljevalne aplikacije.
- Zabavna in privlačna pripoved, potovali boste skozi čas!
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Oblikovanje pozivov in inženiring pozivov
- Generiranje aplikacij za besedilo in slike
- Iskalne aplikacije
Obiščite https://aka.ms/genai-js-course, da začnete!
🌱 Začetek
Učitelji, vključili smo nekaj predlogov o tem, kako uporabiti ta kurikulum. Veseli bomo vaših povratnih informacij v našem forumu za razprave!
Učenci, za vsako lekcijo začnite s kvizom pred predavanjem, nadaljujte z branjem gradiva predavanja, dokončajte različne aktivnosti in preverite svoje razumevanje s kvizom po predavanju.
Da izboljšate svojo izkušnjo učenja, se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem forum za razprave, kjer bo naša ekipa moderatorjev na voljo za odgovore na vaša vprašanja.
Za nadaljnje izobraževanje toplo priporočamo raziskovanje Microsoft Learn za dodatne študijske materiale.
📋 Nastavitev vašega okolja
Ta kurikulum ima razvojno okolje, ki je pripravljeno za uporabo! Ko začnete, lahko izberete, da kurikulum zaženete v Codespace (okolje, ki temelji na brskalniku, brez potrebnih namestitev), ali lokalno na vašem računalniku z uporabo urejevalnika besedila, kot je Visual Studio Code.
Ustvarite svoj repozitorij
Da boste lahko enostavno shranili svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite s klikom na gumb Use this template na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo kurikuluma.
Sledite tem korakom:
- Forkajte 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
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.
!Codespace./images/createcodespace.png)
Zagon kurikuluma lokalno na vašem računalniku
Da zaženete ta kurikulum lokalno na vašem računalniku, boste potrebovali urejevalnik besedila, brskalnik in orodje za ukazno vrstico. 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 tisto, kar vam najbolj ustreza.
Naše priporočilo je, da uporabite Visual Studio Code kot vaš urejevalnik, ki ima tudi vgrajen Terminal. Visual Studio Code lahko prenesete tukaj.
-
Klonirajte svoj repozitorij na vaš računalnik. To lahko storite s klikom na gumb Code in kopiranjem URL-ja:
Nato odprite Terminal znotraj 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 s klikom na File
Odpri mapo in izberi mapo, ki si jo pravkar kloniral. Priporočene razširitve za Visual Studio Code:
- Live Server - za predogled HTML strani znotraj Visual Studio Code
- Copilot - za hitrejše pisanje kode
📂 Vsaka lekcija vključuje:
- opcijsko sketchnote
- opcijski dopolnilni video
- kviz za ogrevanje pred lekcijo
- pisno lekcijo
- za projektno usmerjene lekcije, vodnik po korakih 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, vsak s tremi vprašanji. Na voljo so tukaj, aplikacijo za kvize pa lahko zaženete lokalno ali jo namestite na Azure; sledite navodilom v mapi
quiz-app
.
🗃️ Lekcije
Ime projekta | Naučeni koncepti | Cilji učenja | Povezana lekcija | Avtor | |
---|---|---|---|---|---|
01 | Začetek | Uvod v programiranje in orodja za delo | Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri delu | Uvod v programske jezike in orodja za delo | Jasmine |
02 | Začetek | Osnove GitHuba, vključno z delom v ekipi | Kako uporabljati GitHub v svojem projektu in sodelovati z drugimi na kodi | Uvod v GitHub | Floor |
03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | Osnove dostopnosti | Christopher |
04 | Osnove JS | JavaScript podatkovni tipi | Osnove podatkovnih tipov v JavaScriptu | Podatkovni tipi | Jasmine |
05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logičnega toka aplikacije | Funkcije in metode | Jasmine in Christopher |
06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z metodami za sprejemanje odločitev | Sprejemanje odločitev | Jasmine |
07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScriptu | Tabele in zanke | Jasmine |
08 | Terarij | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, osredotočite se na postavitev | Uvod v HTML | Jen |
09 | Terarij | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, osredotočite se na osnove CSS, vključno z odzivnostjo strani | Uvod v CSS | Jen |
10 | Terarij | JavaScript zapiranja, manipulacija DOM | Zgradite JavaScript za delovanje terarija kot vmesnika za povleci/spusti, osredotočite se na zapiranja in manipulacijo DOM | JavaScript zapiranja, manipulacija DOM | Jen |
11 | Igra tipkanja | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije | Programiranje na podlagi dogodkov | Christopher |
12 | Zeleni brskalniški dodatek | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente brskalniškega dodatka | O brskalnikih | Jen |
13 | Zeleni brskalniški dodatek | Izdelava obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente brskalniškega dodatka za klicanje API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | API-ji, obrazci in lokalna shramba | Jen |
14 | Zeleni brskalniški dodatek | Procesi v ozadju brskalnika, spletna zmogljivost | Uporabite procese v ozadju brskalnika za upravljanje ikone dodatka; spoznajte spletno zmogljivost in nekatere optimizacije za izboljšanje | Naloge v ozadju in zmogljivost | Jen |
15 | Vesoljska igra | Naprednejši razvoj iger z JavaScriptom | Spoznajte dedovanje z uporabo razredov in kompozicije ter vzorec Pub/Sub, kot pripravo na izdelavo igre | Uvod v napredni razvoj iger | Chris |
16 | Vesoljska igra | Risanje na platno | Spoznajte API Canvas, ki se uporablja za risanje elementov na zaslon | Risanje na platno | Chris |
17 | Vesoljska igra | Premikanje elementov po zaslonu | Spoznajte, kako lahko elementi pridobijo gibanje z uporabo kartezičnih koordinat in API-ja Canvas | Premikanje elementov | Chris |
18 | Vesoljska igra | Zaznavanje trkov | Naredite, da se elementi zaletijo in reagirajo drug na drugega z uporabo tipk ter zagotovite funkcijo ohlajanja za zmogljivost igre | Zaznavanje trkov | Chris |
19 | Vesoljska igra | Beleženje točk | Izvajajte matematične izračune na podlagi stanja igre in zmogljivosti | Beleženje točk | Chris |
20 | Vesoljska igra | Končanje in ponovni zagon igre | Spoznajte, kako končati in ponovno zagnati igro, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | Pogoji za konec | Chris |
21 | Bančna aplikacija | HTML predloge in poti v spletni aplikaciji | Spoznajte, kako ustvariti zasnovo arhitekture večstranske spletne strani z uporabo usmerjanja in HTML predlog | HTML predloge in poti | Yohan |
22 | Bančna aplikacija | Izdelava obrazca za prijavo in registracijo | Spoznajte izdelavo obrazcev in upravljanje rutine za preverjanje | 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 | Spoznajte, kako vaša aplikacija ohranja stanje in kako ga programirati | Upravljanje stanja | Yohan |
25 | Brskalnik/VScode koda | Delo z VScode | Spoznajte uporabo urejevalnika kode | Uporaba urejevalnika kode VScode | Chris |
26 | AI pomočniki | Delo z AI | Spoznajte, kako zgraditi svojega AI pomočnika | Projekt AI pomočnika | Chris |
🏫 Pedagogika
Naš učni načrt je zasnovan z dvema ključnima pedagoškima načeloma:
- učenje na podlagi projektov
- pogosti kvizi
Program poučuje osnove JavaScripta, HTML-ja in CSS-ja ter najnovejša orodja in tehnike, ki jih uporabljajo sodobni spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terarija, okolju prijaznega brskalniškega dodatka, igre v slogu vesoljskih napadalcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
🎓 Prve lekcije v tem učnem načrtu lahko opravite kot učna pot na Microsoft Learn!
Z zagotavljanjem, da vsebina ustreza projektom, je proces za študente bolj privlačen, koncepti pa se bolje ohranijo. Poleg tega smo napisali več začetnih lekcij o osnovah JavaScripta za uvod v koncepte, skupaj z videom iz zbirke "Serija za začetnike: JavaScript", katere avtorji so prispevali k temu učnemu načrtu.
Poleg tega nizko-stresni kviz pred poukom usmeri študentovo pozornost na učenje teme, medtem ko drugi kviz po pouku zagotavlja nadaljnje ohranjanje znanja. Ta učni načrt je bil 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 kompleksni do konca 12-tedenskega cikla.
Čeprav smo se namerno izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred sprejetjem ogrodja, bi bil dober naslednji korak po zaključku tega učnega načrta učenje o Node.js prek druge zbirke videov: "Serija za začetnike: Node.js".
Obiščite naš Kodeks ravnanja in Smernice za prispevanje. Veseli bomo vaših konstruktivnih povratnih informacij!
🧭 Dostop brez povezave
To dokumentacijo lahko zaženete brez povezave z uporabo Docsify. Forkajte to repozitorij, namestite Docsify na svojo lokalno napravo, nato pa v korenski mapi tega repozitorija vnesite docsify serve
. Spletna stran bo na voljo na portu 3000 na vašem localhostu: localhost:3000
.
PDF vseh lekcij je na voljo tukaj.
🎒 Drugi tečaji
Naša ekipa pripravlja tudi druge tečaje! Oglejte si:
- Generativna AI za začetnike
- Generativna AI za začetnike .NET
- Generativna AI z JavaScriptom
- Generativna AI z Javo
- AI za začetnike
- Osnove podatkovne znanosti
- Osnove strojnega učenja
- Osnove kibernetske varnosti
- Osnove spletnega razvoja
- Osnove interneta stvari (IoT)
- Osnove razvoja XR
- Obvladovanje GitHub Copilot za agentno uporabo
- Obvladovanje GitHub Copilot za razvijalce C#/.NET
- Izberi svojo Copilot pustolovščino
Licenca
Ta repozitorij je licenciran pod licenco MIT. Za več informacij si oglejte datoteko LICENSE.
Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.