[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [](http://makeapullrequest.com) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) # 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 brskalnika in vesoljske igre. Sodelujte v kvizih, razpravah in praktičnih nalogah. Izboljšajte svoje veščine in optimizirajte pomnjenje znanja z našo učinkovito projektno pedagogiko. Začnite svojo pot kodiranja že danes! Pridružite se skupnosti Azure AI Foundry na Discordu [](https://discord.com/invite/ByRwuEEgH4) Sledite tem korakom, da začnete uporabljati te vire: 1. **Forkajte repozitorij**: Kliknite [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Podpora za več jezikov #### Podprto prek GitHub Action (samodejno in vedno posodobljeno) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](./README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) **Če želite dodati dodatne prevode, so podprti jeziki navedeni [tukaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Ste študent?_ Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), 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 vsebino mesečno posodabljamo. ### 📣 Obvestilo - _Nov projekt za izdelavo z uporabo generativne umetne inteligence_ Pravkar dodan nov projekt AI Assistant, preverite [projekt](./09-chat-project/README.md) ### 📣 Obvestilo - _Nov učni načrt_ o generativni umetni inteligenci za JavaScript je bil pravkar objavljen Ne zamudite našega novega učnega načrta o generativni umetni inteligenci! Obiščite [https://aka.ms/genai-js-course](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 - Ustvarjanje aplikacij za besedilo in slike - Iskalne aplikacije Obiščite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), da začnete! ## 🌱 Začetek > **Učitelji**, [vključili smo nekaj predlogov](for-teachers.md) o tem, kako uporabiti ta učni načrt. Veseli bomo vaših povratnih informacij [v našem forumu za razprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! **[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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. Za izboljšanje učne izkušnje se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem [forum za razprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), 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](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatno študijsko gradivo. ### 📋 Nastavitev vašega okolja Ta učni načrt ima razvojno okolje, ki je pripravljeno za uporabo! Ko začnete, lahko izberete, ali želite učni načrt izvajati v [Codespace](https://github.com/features/codespaces/) (_okolje, ki temelji na brskalniku, brez potrebnih namestitev_) ali lokalno na vašem računalniku z uporabo urejevalnika besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### 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 učnega načrta. Sledite tem korakom: 1. **Forkajte repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani. 2. **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, v katerem lahko delate.  #### Izvajanje učnega načrta lokalno na vašem računalniku Za izvajanje 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](../../1-getting-started-lessons/1-intro-to-programming-languages), 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](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Klonirajte svoj repozitorij na računalnik. To lahko storite s klikom na gumb **Code** in kopiranjem URL-ja: [CodeSpace](./images/createcodespace.png) Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) znotraj [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `` z URL-jem, ki ste ga pravkar kopirali: ```bash git clone ``` 2. 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za hitrejše pisanje kode ## 📂 Vsaka lekcija vključuje: - neobvezno sketchnote - neobvezni dopolnilni video - kviz za ogrevanje pred lekcijo - pisna lekcija - za projektno usmerjene lekcije, vodniki korak za korakom, kako zgraditi projekt - preverjanje znanja - izziv - dodatno branje - naloga - [kviz po lekciji](https://ff-quizzes.netlify.app/web/) > **Opomba o kvizih**: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov, vsak s tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), aplikacijo za kvize pa lahko zaženete lokalno ali jo namestite na Azure; sledite navodilom v mapi `quiz-app`. ## 🗃️ Lekcije | | Ime projekta | Naučene 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 njihovem delu | [Uvod v programske jezike in orodja za delo](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | Začetek | Osnove GitHuba, vključno z delom v ekipi | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na kodni bazi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | Osnove JS | JavaScript podatkovni tipi | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logičnega toka aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher | | 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvariti pogoje v vaši kodi z metodami za sprejemanje odločitev | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | Osnove JS | Tabele in zanke | Delajte s podatki z uporabo tabel in zank v JavaScriptu | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [Terarij](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, osredotočite se na postavitev | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [Terarij](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, osredotočite se na osnove CSS, vključno z odzivnostjo strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Terarij](./3-terrarium/solution/README.md) | 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](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Tipkarska igra](./4-typing-game/solution/README.md) | Zgradite tipkarsko igro | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije | [Programiranje na podlagi dogodkov](./4-typing-game/typing-game/README.md) | Christopher | | 12 | [Zeleni brskalniški vtičnik](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako postaviti prve elemente brskalniškega vtičnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Zeleni brskalniški vtičnik](./5-browser-extension/solution/README.md) | Gradnja obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni pomnilnik | Zgradite JavaScript elemente vašega brskalniškega vtičnika za klicanje API-ja z uporabo spremenljivk, shranjenih v lokalnem pomnilniku | [API-ji, obrazci in lokalni pomnilnik](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Zeleni brskalniški vtičnik](./5-browser-extension/solution/README.md) | Ozadni procesi v brskalniku, spletna zmogljivost | Uporabite ozadne procese brskalnika za upravljanje ikone vtičnika; spoznajte spletno zmogljivost in nekatere optimizacije za izboljšanje | [Ozadne naloge in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Vesoljska igra](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScriptom | Spoznajte dedovanje z uporabo razredov in kompozicije ter vzorec Pub/Sub, kot pripravo na gradnjo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris | | 16 | [Vesoljska igra](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte API Canvas, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Vesoljska igra](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Spoznajte, kako lahko elementi pridobijo gibanje z uporabo kartezianskih koordinat in API-ja Canvas | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Vesoljska igra](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da se elementi trčijo in reagirajo drug na drugega z uporabo pritiskov na tipke ter zagotovite funkcijo ohlajanja za zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Vesoljska igra](./6-space-game/solution/README.md) | Beleženje točk | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre | [Beleženje točk](./6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Vesoljska igra](./6-space-game/solution/README.md) | 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](./6-space-game/6-end-condition/README.md) | Chris | | 21 | [Bančna aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Spoznajte, kako ustvariti ogrodje večstranske arhitekture spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Bančna aplikacija](./7-bank-project/solution/README.md) | Gradnja obrazca za prijavo in registracijo | Spoznajte gradnjo obrazcev in upravljanje rutine za validacijo | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan | | 23 | [Bančna aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan | | 24 | [Bančna aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Spoznajte, kako vaša aplikacija ohranja stanje in kako ga programersko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan | | 25 | [Brskalnik/VScode koda](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode| [Uporaba urejevalnika kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se zgraditi svojega AI asistenta | [Projekt AI asistent](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogika Naš učni načrt temelji na dveh ključnih pedagoških načelih: * projektno učenje * pogosti kvizi Program uči 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 gradnjo tipkarske igre, virtualnega terarija, ekološkega brskalniškega vtičnika, igre v slogu vesoljskih napadalcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja. > 🎓 Prvih nekaj lekcij v tem učnem načrtu lahko opravite kot [Učni načrt](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! Z zagotavljanjem, da vsebina ustreza projektom, je proces za študente bolj privlačen, hkrati pa se poveča tudi zadrževanje konceptov. Poleg tega smo napisali več začetnih lekcij o osnovah JavaScripta za uvod v koncepte, skupaj z videoposnetkom iz zbirke "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video vadnic, katerih avtorji so prispevali k temu učnemu načrtu. Poleg tega nizko tvegan kviz pred predavanjem usmeri študentovo pozornost na učenje teme, medtem ko drugi kviz po predavanju zagotavlja nadaljnje zadrževanje. 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. Medtem ko 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 videoposnetkov: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > Obiščite naše smernice [Kodeks ravnanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veseli bomo vaših konstruktivnih povratnih informacij! ## 🧭 Dostop brez povezave To dokumentacijo lahko zaženete brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Forkajte to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na vaš lokalni računalnik, nato pa v korenski mapi te repozitorije vnesite `docsify serve`. Spletna stran bo na voljo na portu 3000 na vašem localhostu: `localhost:3000`. ## 📘 PDF PDF vseh lekcij najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Drugi tečaji Naša ekipa proizvaja druge tečaje! Oglejte si: - [MCP za začetnike](https://aka.ms/mcp-for-beginners) - [Edge AI za začetnike](https://aka.ms/edgeai-for-beginners) - [AI agenti za začetnike](https://aka.ms/ai-agents-beginners) - [Generativni AI za začetnike .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Generativni AI z JavaScriptom](https://github.com/microsoft/generative-ai-with-javascript) - [Generativni AI z Javo](https://github.com/microsoft/Generative-AI-for-beginners-java) - [AI za začetnike](https://aka.ms/ai-beginners) - [Podatkovna znanost za začetnike](https://aka.ms/datascience-beginners) - [ML za začetnike](https://aka.ms/ml-beginners) - [Kibernetska varnost za začetnike](https://github.com/microsoft/Security-101) - [Spletni razvoj za začetnike](https://aka.ms/webdev-beginners) - [IoT za začetnike](https://aka.ms/iot-beginners) - [XR Razvoj za začetnike](https://github.com/microsoft/xr-development-for-beginners) - [Obvladovanje GitHub Copilot za agentno uporabo](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [Obvladovanje GitHub Copilot za C#/.NET razvijalce](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) - [Izberi svojo Copilot pustolovščino](https://github.com/microsoft/CopilotAdventures) ## Pomoč Če se zataknete ali imate kakršna koli vprašanja o gradnji AI aplikacij, se pridružite: [](https://aka.ms/foundry/discord) Če imate povratne informacije o izdelku ali naletite na napake med gradnjo, obiščite: [](https://aka.ms/foundry/forum) ## Licenca Ta repozitorij je licenciran pod MIT licenco. Za več informacij si oglejte datoteko [LICENSE](../../LICENSE). --- **Izjava o omejitvi odgovornosti**: Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/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 morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda.