33 KiB

Raw Blame History

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 vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključujte se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte pomnjenje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes!

Pridružite se skupnosti Azure AI Foundry Discord

Sledite tem korakom za začetek z uporabo teh virov:

Razvezi 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 druge razvijalce

🌐 Podpora za več jezikov

Podprto preko GitHub Action (avtomatizirano in vedno posodobljeno)

Raje lokalno klonirati?

Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Za kloniranje 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 prejeli 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 Student Hub stran, kjer boš našel začetne vire, študentske pakete in celo načine, kako pridobiti brezplačen bon za certifikat. To je stran, ki si jo želiš zaznamovati in občasno preverjati, saj vsak mesec osvežujemo vsebino.

📣 Obvestilo - Novi izzivi z uporabo načina GitHub Copilot Agent, ki jih je treba dokončati!

Dodali smo nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, da ga dokončate z uporabo GitHub Copilot in načina Agent. Če še nisi uporabljal načina Agent, je ta zmožen ne samo generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.

📣 Obvestilo - Novi projekt za izdelavo z uporabo generativne AI

Dodali smo nov AI Asistent projekt, oglej si projekt

📣 Obvestilo - Nov učni načrt o generativni AI za JavaScript je pravkar izšel

Ne zamudite našega novega učnega načrta za generativno AI!

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

Lekcije pokrivajo vse od osnov do RAG.
Interaktivno sodelovanje z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo.
Zabavna in vključujoča pripoved, potovali boste skozi čas!

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

Pozivi in načrtovanje pozivov
Generiranje aplikacij z besedilom in slikami
Iskalne aplikacije

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

🌱 Začetek

Učitelji, vključili smo nekaj predlogov, kako uporabljati ta učni načrt. Veseli bomo vaših povratnih informacij v naši diskusijski skupini!

Učni udeleženci, za vsako lekcijo začnite s predpredavanjem kviza in sledite z branjem gradiva predavanja ter izpolnjevanjem različnih dejavnosti in preverjajte svoje razumevanje s kvizom po predavanju.

Za izboljšanje učne izkušnje se povežite s svojimi vrstniki in sodelujte pri projektih! Razprave so vabljene v naši diskusijski skupini, kjer bo naša skupina moderatorjev na voljo za odgovore na vaša vprašanja.

Za dodatno izobraževanje močno priporočamo raziskovanje Microsoft Learn za dodatna učna gradiva.

📋 Nastavitev okolja

Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izberete, da zaženete učni načrt v Codespace (okolje, ki temelji na brskalniku, brez potrebe po nameščanju), ali lokalno na svojem računalniku z urejevalnikom besedila, kot je Visual Studio Code.

Ustvari svoj repozitorij

Da bi lahko enostavno shranjevali svoje delo, je priporočljivo, da ustvarite svoj lasten izvod tega repozitorija. To lahko storite s klikom na gumb Use this template na vrhu strani. S tem boste ustvarili nov repozitorij v svojem računu GitHub s kopijo učnega načrta.

Sledite tem korakom:

Razvezi repozitorij: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.
Kloniraj repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Zagon učnega načrta v Codespace

V svojem izvajanju tega repozitorija, ki ste ga ustvarili, kliknite gumb Code in izberite Open with Codespaces. S tem bo za vas ustvarjen nov Codespace za delo.

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

Da zaženete ta učni načrt lokalno na svojem računalniku, boste potrebovali urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, Uvod v programske jezike in orodja obrti, vas bo vodila skozi različne možnosti za vsak od teh pripomočkov, da izberete tisto, kar vam najbolj ustreza.

Priporočamo uporabo 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 tako, da kliknete gumb Code in kopirate URL:

CodeSpace

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 storite tako, da kliknete File > Open Folder in izberete mapo, ki ste jo pravkar klonirali.

Priporočeni dodatki za Visual Studio Code:

Live Server - za predogled HTML strani znotraj Visual Studio Code

Copilot - da vam pomaga hitreje pisati kodo

📂 Vsaka lekcija vključuje:

neobvezno skiciranje
neobvezni dodatni video
predpripravljalni kviz pred lekcijo
pisno lekcijo
za lekcije, ki temeljijo na projektih, korak za korakom vodiče, kako zgraditi projekt
preverjanja znanja
izziv
dodatno branje
nalogo
kviz po lekciji

Opomba o kvizih: Vsi kvizi so v mapi Quiz-app, skupno 48 kvizov s tremi vprašanji vsak. Dostopni so tukaj, aplikacijo kvizov lahko zaženete lokalno ali jo objavite 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 razvojna orodja	Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri njihovem delu	Uvod v programske jezike in razvojna orodja	Jasmine
02	Začetek	Osnove GitHub, vključno z delom v ekipi	Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na izvorni kodi	Uvod v GitHub	Floor
03	Začetek	Dostopnost	Naučite se osnov spletne dostopnosti	Osnove dostopnosti	Christopher
04	Osnove JS	JavaScript podatkovni tipi	Osnove podatkovnih tipov JavaScript	Podatkovni tipi	Jasmine
05	Osnove JS	Funkcije in metode	Spoznajte funkcije in metode za upravljanje logike aplikacije	Funkcije in metode	Jasmine in Christopher
06	Osnove JS	Sprejemanje odločitev z JS	Naučite se ustvarjati pogoje v svoji kodi z uporabo metod odločanja	Sprejemanje odločitev	Jasmine
07	Osnove JS	Tabele in zanke	Delo s podatki z uporabo tabel in zank v JavaScript	Tabele in zanke	Jasmine
08	Terrarium	HTML v praksi	Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na postavitev	Uvod v HTML	Jen
09	Terrarium	CSS v praksi	Zgradite CSS za stilizacijo spletnega terrarija, osredotočite se na osnove CSS in prilagodljivost strani	Uvod v CSS	Jen
10	Terrarium	JavaScript zaprtja, manipulacija DOM	Zgradite JavaScript, da ustvari funkcionalno terrarijsko povleci in spusti vmesnik, osredotočite se na zaprtja in manipulacijo DOM	JavaScript zaprtja, manipulacija DOM	Jen
11	Igra tipkanja	Zgradi igro tipkanja	Naučite se uporabljati dogodke s tipkovnice za upravljanje logike vaše JavaScript aplikacije	Dogodkovno usmerjeno programiranje	Christopher
12	Zeleni brskalniški dodatek	Delo z brskalniki	Spoznajte, kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika	O brskalnikih	Jen
13	Zeleni brskalniški dodatek	Izgradnja obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi	Zgradite JavaScript elemente svoje brskalniške razširitve za klic API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi	API-ji, obrazci in lokalna shramba	Jen
14	Zeleni brskalniški dodatek	Ozadinski procesi v brskalniku, zmogljivost spletnih strani	Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; spoznajte zmogljivost spletnih strani in nekatere optimizacije za izboljšanje	Ozadna opravila in zmogljivost	Jen
15	Igra v vesolju	Naprednejši razvoj iger z JavaScript	Naučite se o dediščini z uporabo razredov in kompozicije ter vzorca Pub/Sub, kot priprava za 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 elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API	Premikanje elementov	Chris
18	Igra v vesolju	Zaznavanje trkov	Poskrbite, da se elementi trčijo in medsebojno odzivajo z uporabo pritiskov tipk ter zagotovite funkcijo ohlajevanja za boljšo zmogljivost igre	Zaznavanje trkov	Chris
19	Igra v vesolju	Spremljanje rezultata	Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre	Spremljanje rezultata	Chris
20	Igra v vesolju	Zaključevanje in ponovni začetek igre	Spoznajte o zaključevanju in ponovnem zagonu igre, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk	Pogoj konca	Chris
21	Bančniška aplikacija	HTML predloge in poti v spletni aplikaciji	Naučite se, kako ustvariti osnovno arhitekturo večstraničnega spletišča z uporabo usmerjanja in HTML predlog	HTML predloge in poti	Yohan
22	Bančniška aplikacija	Ustvari obrazec za prijavo in registracijo	Spoznajte gradnjo obrazcev in upravljanje validacij	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 aplikacija ohranja stanje in kako ga programsko upravljati	Upravljanje stanja	Yohan
25	Urejanje kode brskalnik/VScode	Delo z VScode	Naučite se uporabljati urejevalnik kode	Uporaba urejevalnika kode VScode	Chris
26	AI pomočniki	Delo z AI	Naučite se izdelati lastnega AI pomočnika	Projekt AI pomočnika	Chris

🏫 Pedagogika

Naš učni načrt temelji na dveh ključnih pedagoških načelih:

učenje preko projektov
pogosti kvizi

Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji razvijalci spletnih strani. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne brskalniške razširitve, igre v slogu invazije vesoljcev in bančne aplikacije za podjetja. Ob koncu serije bodo študenti pridobili trdno razumevanje razvoja spletnih strani.

🎓 Prvih nekaj lekcij tega učnega načrta lahko opravite kot pot učenja na Microsoft Learn!

Z zagotavljanjem, da vsebina ustreza projektom, je postopek za študente bolj zanimiv in se bo povečalo zadrževanje konceptov. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, ob njih pa je video iz zbirke "Beginners Series to: JavaScript" video vodičev, katerih nekateri avtorji so prispevali k temu učnemu načrtu.

Poleg tega kviz z nizkim vložkom pred razredom usmeri študentovo namero k učenju teme, medtem ko drugi kviz po pouku zagotovi nadaljnje zadrževanje. Ta učni načrt 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 zapleteni do konca 12-tedenskega cikla.

Medtem ko smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodij, bi bil dober naslednji korak za dokončanje tega učnega načrta spoznavanje Node.js prek druge zbirke videov: "Beginner Series to: Node.js".

Obiščite naše smernice Kodeksa obnašanja in Prispevkov. Veselimo se vaših konstruktivnih povratnih informacij!

🧭 Dostop brez povezave

To dokumentacijo lahko uporabljate brez povezave z uporabo Docsify. Razvejte ta repozitorij, namestite Docsify na svoj lokalni računalnik in nato v root mapi tega repozitorija zaženite docsify serve. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: localhost:3000.

📘 PDF

PDF vseh lekcij je na voljo tukaj.

🎒 Drugi tečaji

Naša ekipa ustvarja tudi druge tečaje! Oglejte si:

LangChain

Azure / Edge / MCP / Agenti

Serija generativne umetne inteligence

Osnovno učenje

Serija Copilot

Pridobivanje pomoči

Če se zataknete ali imate vprašanja o ustvarjanju 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 in kjer si znanje svobodno delimo.

Če imate povratne informacije o izdelku ali napake pri razvoju, obiščite:

Licenca

Ta repozitorij ima 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, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v matičnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.

33 KiB Raw Blame History