[](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) [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [](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 Azure AI Foundry Discordu in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4) # 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 za brskalnike in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte svoje znanje z našo učinkovito projektno pedagogiko. Začnite svojo pot kodiranja še danes! #### 🧑‍🎓 _Ste študent?_ Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli vire za začetnike, študentske pakete in celo načine za pridobitev brezplačnega potrdila. To je stran, ki jo želite dodati med zaznamke in občasno preveriti, saj vsebino mesečno posodabljamo. ### 📣 Obvestilo - _Nov kurikulum_ o generativni umetni inteligenci za JavaScript je pravkar izšel Ne zamudite našega novega kurikuluma o generativni umetni inteligenci! Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!  - 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](https://aka.ms/genai-js-course) za začetek! ## 🌱 Začetek > **Učitelji**, [vključili smo nekaj predlogov](for-teachers.md) o tem, kako uporabiti ta kurikulum. 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, 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 dobrodošle v našem [forumu 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 okolja Ta kurikulum ima pripravljeno razvojno okolje! Ko začnete, lahko izberete, ali želite kurikulum zagnati v [Codespace](https://github.com/features/codespaces/) (_okolje, ki temelji na brskalniku, brez potrebnih namestitev_) ali lokalno na svojem 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 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 kurikuluma. Sledite tem korakom: 1. **Forkajte repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani. 2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Zagon kurikuluma 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. [!Codespace](../..)./images/createcodespace.png) #### Zagon kurikuluma lokalno na vašem računalniku Za zagon tega kurikuluma 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, kaj vam najbolj ustreza. Naše priporočilo je uporaba [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnika, 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: - opcijski sketchnote - opcijski dopolnilni video - kviz za ogrevanje pred lekcijo - pisno lekcijo - za projektno usmerjene lekcije, vodnike po korakih za gradnjo projekta - preverjanje znanja - izziv - dopolnilno branje - nalogo - [kviz po lekciji](https://ff-quizzes.netlify.app/web/) > **Opomba o kvizih**: Vsi kvizi so v mapi Quiz-app, skupaj 48 kvizov s po 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 | Pojmi, ki se učijo | Učni cilji | Povezana lekcija | Avtor | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | Začetek dela | Uvod v programiranje in orodja za delo | Naučite se osnovnih temeljev večine programskih jezikov in o programski opremi, ki pomaga profesionalnim razvijalcem pri delu | [Uvod v programske jezike in orodja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | Začetek dela | Osnove GitHuba, vključno z delom v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Začetek dela | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | Osnove JS | Podatkovni tipi v JavaScriptu | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | Osnove JS | Funkcije in metode | Naučite se o funkcijah in metodah 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 ustvarjati pogoje v kodi z uporabo metod za sprejemanje odločitev | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | Osnove JS | Tabele in zanke | Delo 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 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zapiranja, manipulacija DOM-a | Ustvarite JavaScript, ki omogoča delovanje terarija kot vmesnika za povleci/spusti, s poudarkom na zapiranjih in manipulaciji DOM-a | [JavaScript zapiranja, manipulacija DOM-a](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Ustvarite igro tipkanja | 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 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Naučite se, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ustvarjanje obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni pomnilnik | Ustvarite JavaScript elemente razširitve brskalnika 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 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ozadni procesi v brskalniku, spletna zmogljivost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; naučite se o spletni zmogljivosti in optimizacijah | [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 | Naučite se o dedovanju z uporabo razredov in kompozicije ter o vzorcu Pub/Sub, kot pripravo na ustvarjanje 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 | Naučite se o API-ju 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 | Odkrijte, kako lahko elementi pridobijo gibanje z uporabo kartezičnih 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 zaletijo in reagirajo drug na drugega z uporabo pritiskov tipk ter dodajte 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 igre in zmogljivosti | [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 | Naučite se o končanju in ponovnem zagonu igre, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | [Pogoji za konec igre](./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 | Naučite se, kako ustvariti zasnovo arhitekture večstranske 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) | Ustvarjanje obrazca za prijavo in registracijo | Naučite se o ustvarjanju obrazcev in upravljanju 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 | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programatično upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | 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-a in CSS-a ter najnovejša orodja in tehnike, ki jih uporabljajo sodobni spletni razvijalci. Študenti bodo pridobili praktične izkušnje z ustvarjanjem igre tipkanja, virtualnega terarija, okolju prijazne razširitve brskalnika, 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 [Learn Path](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, koncepti pa se bolje ohranijo. Poleg tega smo pripravili 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)", katere avtorji so prispevali k temu učnemu načrtu. Poleg tega nizko-stresni kviz pred predavanjem usmeri pozornost študenta na učenje teme, medtem ko drugi kviz po predavanju zagotavlja boljše 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 zapleteni do konca 12-tedenskega cikla. Čeprav smo se namerno izognili uvajanju JavaScript ogrodij, da se osredotočimo 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 [Kodeks ravnanja](CODE_OF_CONDUCT.md) in [Smernice za 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 tega repozitorija 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 ustvarja tudi druge tečaje! Oglejte si: - [Generativna AI za začetnike](https://aka.ms/genai-beginners) - [Generativna AI za začetnike .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Generativna AI z JavaScriptom](https://github.com/microsoft/generative-ai-with-javascript) - [Generativna 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 Copilota za agentno uporabo](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [Obvladovanje GitHub Copilota za razvijalce C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) - [Izberite svojo Copilot pustolovščino](https://github.com/microsoft/CopilotAdventures) ## Licenca Ta repozitorij je licenciran pod licenco MIT. Več informacij najdete v datoteki [LICENSE](../../LICENSE). --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [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 morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.