|
|
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
Spletni razvoj za začetnike - Učni načrt
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 za brskalnik 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 usmerjeno pedagogiko. Začnite svojo pot kodiranja še danes!
🧑🎓 Ste študent?
Obiščite stran Student Hub, kjer boste našli vire za začetnike, pakete za študente in celo načine za pridobitev brezplačnega certifikata. To je stran, ki jo želite dodati med zaznamke in občasno preveriti, saj vsebino mesečno posodabljamo.
📣 Obvestilo - Nov učni načrt o generativni umetni inteligenci za JavaScript je pravkar izšel
Ne zamudite našega novega učnega načrta o generativni umetni inteligenci!
Obiščite https://aka.ms/genai-js-course in začnite!
- 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
- Aplikacije za iskanje
Obiščite https://aka.ms/genai-js-course in začnite!
🌱 Začetek
Učitelji, vključili smo nekaj predlogov, kako uporabiti 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 kvizom pred predavanjem, nato preberite gradivo za predavanje, dokončajte različne aktivnosti in preverite svoje razumevanje s kvizom po predavanju.
Za izboljšanje učne izkušnje se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem forumu 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 dodatno študijsko gradivo.
📋 Priprava okolja
Ta učni načrt ima pripravljeno razvojno okolje! Ko začnete, lahko izberete, ali želite učni načrt izvajati v Codespace (okolje, ki temelji na brskalniku in ne zahteva namestitev) ali lokalno na svojem računalniku z uporabo urejevalnika besedila, kot je Visual Studio Code.
Ustvarite svoje repozitorij
Da boste svoje delo enostavno shranili, 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 učnega načrta.
Sledite tem korakom:
- Forkajte repozitorij: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.
- Klonirajte repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Zagon 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, v katerem lahko delate.
Zagon učnega načrta lokalno na vašem računalniku
Za zagon tega učnega načrta 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 urejevalnik, ki ima tudi vgrajen Terminal. Visual Studio Code lahko prenesete tukaj.
-
Klonirajte svoj repozitorij na svoj računalnik. To lahko storite s klikom na gumb Code in kopiranjem URL-ja:
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 s klikom na File > Open Folder in izbiro mape, 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 hitrejše pisanje kode
📂 Vsaka lekcija vključuje:
- neobvezno sketchnote
- neobvezni dopolnilni video
- kviz za ogrevanje pred lekcijo
- pisno lekcijo
- za projektno usmerjene lekcije, vodnike po korakih za izdelavo projekta
- preverjanje znanja
- izziv
- dopolnilno branje
- nalogo
- kviz po lekciji
Opomba o kvizih: Vsi kvizi so v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji. Povezani so znotraj lekcij, aplikacijo za kvize pa je mogoče zagnati lokalno ali namestiti na Azure; sledite navodilom v mapi
quiz-app. Postopoma jih lokaliziramo.
🗃️ Lekcije
| Ime projekta | Naučene vsebine | Učni cilji | 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 kako sodelovati z drugimi na kodi | Uvod v GitHub | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | Osnove dostopnosti | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScriptu | 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 | Zaprtja v JavaScriptu, manipulacija DOM | Zgradite JavaScript za delovanje terarija kot vmesnika za povleci/spusti, osredotočite se na zaprtja in manipulacijo DOM | Zaprtja v JavaScriptu, manipulacija DOM | Jen |
| 11 | Igra tipkanja | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije | Programiranje, ki temelji na dogodkih | Christopher |
| 12 | Green Browser Extension | Delo z brskalniki | Naučite se, kako delujejo brskalniki, njihovo zgodovino in kako postaviti prve elemente razširitve za brskalnik | O brskalnikih | Jen |
| 13 | Green Browser Extension | Izdelava obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente svoje razširitve za brskalnik za klicanje API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | API-ji, obrazci in lokalna shramba | Jen |
| 14 | Green Browser Extension | Ozadni procesi v brskalniku, spletna zmogljivost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno zmogljivost in nekaj optimizacij | Ozadne naloge in zmogljivost | Jen |
| 15 | Space Game | 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 | Space Game | Risanje na platno | Spoznajte API za platno (Canvas API), ki se uporablja za risanje elementov na zaslon | Risanje na platno | Chris |
| 17 | Space Game | Premikanje elementov po zaslonu | Odkrijte, kako lahko elementi pridobijo gibanje z uporabo kartezičnih koordinat in API-ja za platno | Premikanje elementov | Chris |
| 18 | Space Game | Zaznavanje trkov | Poskrbite, da se elementi zaletijo in reagirajo drug na drugega z uporabo pritiskov na tipke ter dodajte funkcijo za ohlajanje | Zaznavanje trkov | Chris |
| 19 | Space Game | Beleženje točk | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre | Beleženje točk | Chris |
| 20 | Space Game | Končanje in ponovni zagon igre | Naučite se, kako končati in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | Pogoji za konec | Chris |
| 21 | Banking App | HTML predloge in poti v spletni aplikaciji | Naučite se, kako ustvariti osnovo arhitekture večstranske spletne strani z uporabo usmerjanja in HTML predlog | HTML predloge in poti | Yohan |
| 22 | Banking App | Izdelava obrazca za prijavo in registracijo | Spoznajte izdelavo obrazcev in upravljanje rutine za preverjanje veljavnosti | Obrazci | Yohan |
| 23 | Banking App | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v vašo aplikacijo in iz nje, kako jih pridobiti, shraniti in odstraniti | Podatki | Yohan |
| 24 | Banking App | Koncepti upravljanja stanja | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programersko upravljati | Upravljanje stanja | Yohan |
🏫 Pedagogika
Naš učni načrt temelji na dveh ključnih pedagoških načelih:
- 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 za tipkanje, virtualnega terarija, okolju prijazne razširitve za brskalnik, igre v slogu vesoljskih napadalcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
🎓 Prve lekcije tega učnega načrta lahko opravite kot učno pot na Microsoft Learn!
Z zagotavljanjem, da vsebina ustreza projektom, je proces za študente bolj privlačen, hkrati pa se izboljša tudi pomnjenje konceptov. Poleg tega smo napisali več začetnih lekcij o osnovah JavaScripta za uvod v koncepte, skupaj z videoposnetkom iz zbirke "Serija za začetnike: JavaScript", katere avtorji so prispevali k temu učnemu načrtu.
Poleg tega nizko tvegan kviz pred predavanjem usmeri pozornost študenta na učenje teme, medtem ko drugi kviz po predavanju zagotavlja nadaljnje pomnjenje. 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 zapleteni do konca 12-tedenskega cikla.
Čeprav smo se namerno izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne za spletnega razvijalca pred uporabo ogrodja, bi bil naslednji korak po zaključku tega učnega načrta učenje o Node.js prek druge zbirke videoposnetkov: "Serija za začetnike: Node.js".
Obiščite naša pravila obnašanja 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 svoj lokalni računalnik in nato v korenski mapi tega repozitorija vnesite docsify serve. Spletna stran bo na voljo na vratih 3000 na vašem lokalnem računalniku: localhost:3000.
PDF vseh lekcij najdete tukaj.
🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
- Generativna umetna inteligenca za začetnike
- Generativna umetna inteligenca za začetnike .NET
- Generativna umetna inteligenca z JavaScriptom
- Generativna umetna inteligenca z Javo
- Umetna inteligenca za začetnike
- Podatkovna znanost za začetnike
- Strojno učenje za začetnike
- Kibernetska varnost za začetnike
- Spletni razvoj za začetnike
- IoT za začetnike
- XR razvoj za začetnike
- Obvladovanje GitHub Copilota za agentno uporabo
- Obvladovanje GitHub Copilota za razvijalce C#/.NET
- Izberite svojo pustolovščino s Copilotom
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 izvirnem 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.