Ovo je repozitorij nastavnog programa za podučavanje osnova web razvoja početnicima. Nastavni plan i program je sveobuhvatan tečaj u trajanju od 12 tjedana koji su razvili Microsoft Cloud Advocates, a sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ovo je repozitorij s obrazovnim planom i programom za podučavanje osnova web razvoja početnicima. Plan i program je sveobuhvatan tečaj u trajanju od 12 tjedana koji su razvili Microsoft Cloud Advocates, sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Nastavni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, Igra tipkanja, Proširenje za preglednik, Svemirska igra, Bankarska aplikacija, Code Editor i AI Chat asistent
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja svaki (procjena prije i nakon lekcije)
- **Višestruka podrška jezika**: Automatski prijevodi na 50+ jezika putem GitHub Actions
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, Igra tipkanja, Proširenje preglednika, Svemirska igra, Bankovna aplikacija, Uređivač koda i AI pomoćnik za chat
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja (procjena prije i nakon lekcije)
- **Višejezična podrška**: Automatski prijevodi na više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Edukativni repozitorij sa strukturom baziranom na lekcijama
- Obrazovni repozitorij s lekcijski organiziranom strukturom
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u posebnim direktorijima (quiz-app, razni projektni lekcijski direktoriji)
- Sustav prevođenja pomoću GitHub Actions (co-op-translator)
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projektni lekcijski folderi)
- Sustav prijevoda preko GitHub Actions (co-op-translator)
- Dokumentacija poslužena putem Docsify i dostupna kao PDF
## Komande za postavljanje
Ovaj repozitorij je primarno namijenjen za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
Ovaj repozitorij prvenstveno služi za konzumaciju obrazovnog sadržaja. Za rad s određenim projektima:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučeno za učenike
- Dodatni tečajevi: Generativni AI, znanost o podacima, ML, IoT planovi i programi
### Rad s određenim projektima
Za detaljne upute o pojedinačnim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bankarska aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre bazirane na canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
Za detaljne upute o pojedinačnim projektima pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kvizove
- `7-bank-project/README.md` - Bankovna aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja preglednika
- `6-space-game/README.md` - Razvoj igre na canvasu
- `9-chat-project/README.md` - AI pomoćnik za chat
### Struktura Monorepo repozitorija
### Struktura monorepoa
Iako nije tradicionalni monorepo, repozitorij sadrži više nezavisnih projekata:
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Rad na pojedinačnim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za potpuno iskustvo nastavnog programa
- Radite na pojedinačnim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za cjelokupno iskustvo plana i programa
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
**Izjava o odricanju od odgovornosti**:
Ovaj je dokument preveden pomoću AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati greške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati autoritativnim izvorištem. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Naučite osnove web razvoja s našim opsežnim tečajem od 12 tjedana koji vode Microsoft Cloud zagovaratelji. Svaka od 24 lekcija detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte kao što su terariji, proširenja preglednika i igre u svemiru. Uključite se u kvizove, rasprave i praktične zadatke. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja našom učinkovitošću pedagoškog pristupa zasnovanog na projektima. Započnite svoje kodiranje danas!
Naučite osnove web razvoja uz naš sveobuhvatni 12-tjedni tečaj koji vode Microsoft Cloud zagovornici. Svaka od 24 lekcije detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, ekstenzija za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja pomoću naše učinkovite pedagoške metode temeljene na projektima. Započnite svoje programersko putovanje danas!
Pridružite se Azure AI Foundry Discord zajednici
Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere.
> Ovo spremište uključuje prevode na 50+ jezika što znatno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> Ovaj repozitorij uključuje više od 50 prijevoda, što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda koristite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,44 +48,44 @@ Slijedite ove korake za početak korištenja ovih resursa:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ovo vam daje sve što je potrebno za dovršavanje tečaja uz mnogo brže preuzimanje.
> Ovo vam pruža sve što je potrebno za dovršetak tečaja uz znatno brže preuzimanje.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite dodati podršku za dodatne jezike, popis podržanih jezika nalazi se [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ako želite dodatne prijevode, podržani jezici su navedeni ovdje. [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći resurse za početnike, studentske pakete pa čak i načine za dobivanje besplatnog vaučera za certifikat. Ovo je stranica koju biste trebali označiti i povremeno provjeravati jer redovito mijenjamo sadržaj.
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći resurse za početnike, studentske pakete i čak načine kako za dobiti besplatnu potvrdu. Ovo je stranica koju želite označiti i povremeno provjeravati jer se sadržaj redovito mijenja.
### 📣 Najava - Novi izazovi u GitHub Copilot Agent modu za dovršiti!
### 📣 Najava - Novi izazovi u GitHub Copilot Agent načinu rada!
Dodani su novi izazovi, pogledajte "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate dovršiti koristeći GitHub Copilot i Agent mod. Ako do sada niste koristili Agent mod, on ne samo da može generirati tekst, već i stvarati i uređivati datoteke, pokretati naredbe i više.
Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate dovršiti koristeći GitHub Copilot i Agent način rada. Ako do sada niste koristili Agent način, on nije samo za generiranje teksta već može i kreirati te uređivati datoteke, izvršavati naredbe i još mnogo toga.
### 📣 Najava - _Novi projekt za izgraditi koristeći Generativnu AI_
### 📣 Najava - _Novi projekt za izgradnju uz Generativnu AI_
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
Dodali smo novi AI Assistant projekt, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Najava - _Novi Nastavni plan_o Generativnoj AI za JavaScript upravo je objavljen
### 📣 Najava - _Novi Nastavni plan_za Generativnu AI za JavaScript je upravo objavljen
Ne propustite naš novi nastavni plan o Generativnoj AI!
Ne propustite naš novi kurikulum za Generativnu AI!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme kao što su:
- Promptanje i inženjering prompta
- Generiranje tekstualnih i slikovnih aplikacija
- Pretraživačke aplikacije
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi u učenju tema poput:
- Promptiranje i inženjering prompta
- Generiranje aplikacija za tekst i slike
- Aplikacije za pretraživanje
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
@ -93,37 +93,37 @@ Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za po
## 🌱 Početak rada
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) kako koristiti ovaj nastavni plan. Voljeli bismo vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) o tome kako koristiti ovaj nastavni plan. Voljeli bismo dobiti vaše povratne informacije [u našem forumu za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učeći](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s predpredavanjem kvizom i nastavite s čitanjem materijala predavanja, dovršavanjem raznih aktivnosti i provjerite svoje razumijevanje s postpredavačkim kvizom.
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s predpredavanjem kvizom, a zatim nastavite čitanjem nastavnog materijala, dovršite različite aktivnosti i provjerite svoje razumijevanje putem kviza nakon predavanja.
Kako biste poboljšali svoje iskustvo učenja, povežite se sa svojim vršnjacima da zajedno radite na projektima! Rasprave su poticane na našem [forum za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.
Za bolje iskustvo učenja, povežite se sa svojim kolegama radi zajedničkog rada na projektima! Rasprave su poticane na našem [forum za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će tim moderatora biti dostupni za odgovore na vaša pitanja.
Za daljnje obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne materijale za učenje.
### 📋 Postavljanje vašeg okruženja
Ovaj nastavni plan ima razvojno okruženje spremno za upotrebu! Kad započnete, možete odabrati za pokretanje nastavnog plana u [Codespaceu](https://github.com/features/codespaces/) (_okruženje temeljeno na pregledniku, bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći uređivač teksta kao što je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ovaj nastavni plan ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespaceu](https://github.com/features/codespaces/) (_okruženju u pregledniku bez potrebe za instalacijom_), ili lokalno na vašem računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Izradite svoje spremište
Kako biste si olakšali spremanje vašeg rada, preporučuje se da napravite vlastitu kopiju ovog spremišta. To možete napraviti klikom na gumb **Use this template** na vrhu stranice. Time ćete stvoriti novo spremište na vašem GitHub računu s kopijom nastavnog plana.
#### Kreirajte svoj repozitorij
Kako biste lakše spremili svoj rad, preporuča se da napravite svoju kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Ovo će stvoriti novi repozitorij na vašem GitHub računu s kopijom nastavnog plana.
Slijedite ove korake:
1. **Razvucite spremište**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
U svojoj kopiji ovog spremišta koju ste napravili, kliknite na gumb **Code** i odaberite **Open with Codespaces**. To će stvoriti novi Codespace u kojem možete raditi.
U svojoj kopiji repozitorija koju ste napravili, kliknite gumb **Code** i odaberite **Open with Codespaces**. Ovo će stvoriti novi Codespace za rad.
#### Pokretanje nastavnog plana lokalno na vašem računalu
#### Pokretanje kurikuluma lokalno na vašem računalu
Za pokretanje ovog nastavnog plana lokalno na vašem računalu, potreban vam je uređivač teksta, preglednik i alat naredbene linije. Naša prva lekcija, [Uvod u programske jezike i alate struke](../../1-getting-started-lessons/1-intro-to-programming-languages), pokazat će vam različite opcije za svaki od ovih alata kako biste mogli odabrati ono što vam najbolje odgovara.
Za pokretanje kurikuluma lokalno na vašem računalu trebat će vam uređivač teksta, preglednik i alat naredbenog retka. Naša prva lekcija, [Uvod u programske jezike i alate](../../1-getting-started-lessons/1-intro-to-programming-languages), vodi vas kroz različite opcije za svaki od ovih alata kako biste mogli odabrati ono što vam najviše odgovara.
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivača, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoje računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivača, koji ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png)
@ -133,148 +133,148 @@ Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.co
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Code-u. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
2. Otvorite mapu u Visual Studio Codeu. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
> Preporučeni Visual Studio Code dodaci:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Code-a
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Codea
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za brže pisanje koda
## 📂 Svaka lekcija uključuje:
- opcionalni sketchnote
- opcionalni dodatni video
- opcionalnu skicu
- opcionlani dodatni video
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektima, vodiče korak-po-korak o izradi projekta
- za lekcije temeljene na projektima, detaljne vodiče za izgradnju projekta
- provjere znanja
- izazov
- dodatnu literaturu
- dodatno čitanje
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova s po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/); aplikacija za kviz može se pokrenuti lokalno ili postaviti na Azure; slijedite upute u mapi `quiz-app`.
> **Napomena o kvizovima**: Svi kvizovi se nalaze u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), aplikacija za kviz se može pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi `quiz-app`.
## 🗃️ Lekcije
| | Naziv projekta | Pojmovi koji se uče | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak rada | Uvod u programiranje i alati struke | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate struke](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipovi podataka | Osnove JavaScript tipova podataka | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Učite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako kreirati uvjete u svom kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima korištenjem nizova i petlji u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za online terarij, fokusirajući se na izradu rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izradite JavaScript da terarij funkcionira kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-a | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izgradnja igre tipkanja | Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako napraviti osnove proširenja za preglednik | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Izrada forme, pozivanje API-ja i pohranjivanje varijabli u lokalnu pohranu | Izradite JavaScript elemente za vaše proširenje preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnoj pohrani | [API, forme i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju kao i Pub/Sub obrazac, kao pripremu za izgradnju igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu | Naučite o Canvas API-ju koji se koristi za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Saznajte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Omogućite da se elementi sudaraju i međusobno reagiraju koristeći tipke te pružite funkciju hladnog vremena radi performansi | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje varijabli | [Uvjeti završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako napraviti kostur arhitekture višestranične web stranice koristeći routanje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja forme za prijavu i registraciju | Naučite o izradi formi i postupanju s rutama validacije | [Forme](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze u aplikaciju i izlaze iz nje, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code preglednik/VScode](../../8-code-editor) | Rad s VScode | Naučite koristiti uređivač koda| [Korištenje VScode uređivača koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s umjetnom inteligencijom | Naučite kako izraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Naziv projekta | Pojmovi koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak | Uvod u programiranje i alati trgovine | Naučite osnovne temeljne pojmove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate trgovine](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u svom projektu, kako surađivati s drugima na bazi koda | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Tipovi podataka u JavaScriptu | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvarati uvjete u svom kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za izradu online terarija, s naglaskom na izgradnju izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, s naglaskom na osnove CSS-a uključujući prilagođavanje stranice za različite uređaje | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript kako bi terarij funkcionirao kao sučelje za povlačenje i ispuštanje, s naglaskom na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izgradnja igre tipkanja | Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako napraviti osnovne elemente proširenja preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu | Izgradite JavaScript elemente svog proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonama proširenja; naučite o web performansama i nekim optimizacijama za poboljšanje učinka | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra svemira](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra svemira](./6-space-game/solution/README.md) | Crtanje na canvasu | Naučite o Canvas API-ju, koji se koristi za iscrtavanje elemenata na zaslonu | [Crtanje na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra svemira](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra svemira](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i reagiraju jedni na druge koristeći pritiske tipki i pružite funkciju hlađenja radi osiguranja performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra svemira](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune na temelju statusa i učinka igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra svemira](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli| [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti osnovu arhitekture višestranih web stranica koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izgradnji obrazaca i rukovanju rutinama provjere podataka | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, spremiti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako njime upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Preglednik/Kôd VScode](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda| [Korištenje uređivača koda VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s umjetnom inteligencijom | Naučite kako izgraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš kurikulum je osmišljen s dva ključna pedagoška principa na umu:
* učenje temeljeno na projektima
Naš nastavnički program je osmišljen s dva ključna pedagoška principa na umu:
* učenje temeljem projekata
* česti kvizovi
Program podučava osnove JavaScript-a, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja za preglednike, igre u stilu space-invadera i bankovne aplikacije za poduzeća. Na kraju serije, studenti će imati solidno razumijevanje web razvoja.
Program podučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje danas koriste web programeri. Polaznici će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja preglednika, igre u stilu invazije svemira i bankarske aplikacije za tvrtke. Do kraja serije studenti će imati solidno razumijevanje razvoja weba.
> 🎓 Prve lekcije ovog kurikuluma možete pohađati kao [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije ovog nastavnog plana možete slijediti kao [Stazu učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Osiguravanjem usklađenosti sadržaja s projektima proces je zanimljiviji za studente i povećava zadržavanje pojmova. Također smo napisali nekoliko početnih lekcija o osnovama JavaScript-a kako bismo uveli koncepte, uparene s videozapisom iz kolekcije "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", od kojih su neki autori pridonijeli ovom kurikulumu.
Osiguravanjem usklađenosti sadržaja s projektima, proces učenja postaje zanimljiviji za učenike i pojačava zadržavanje pojmova. Također smo napisali nekoliko osnovnih lekcija iz JavaScripta za uvođenje pojmova, upareno s videom iz zbirke "[Serija za početnike u: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", od kojih su neki autori doprinijeli ovom nastavnom programu.
Uz to, nizak-rizik kviz prije nastave postavlja namjeru studenta za učenje teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje. Ovaj je kurikulum dizajniran da bude fleksibilan i zabavan te se može pohađati u cijelosti ili djelomično. Projekti počinju jednostavno, a do kraja 12-tjednog ciklusa postaju sve složeniji.
Osim toga, kviz s malim ulozima prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje znanja. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te se može pohađati u cijelosti ili djelomično. Projekti počinju jednostavni i postaju sve složeniji do kraja 12-tjednog ciklusa.
Iako smo namjerno izbjegavali uvođenje JavaScript okvira da bismo se usredotočili na osnovne vještine potrebne kao web programer prije usvajanja okvira, dobar sljedeći korak nakon završetka ovog kurikuluma bio bi naučiti o Node.js kroz drugu kolekciju videozapisa: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Dok smo namjerno izbjegavali uvođenje JavaScript okvira kako bismo se usredotočili na osnovne vještine potrebne web programeru prije usvajanja okvira, dobar sljedeći korak u završetku ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videa: "[Serija za početnike u: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Veselimo se vašim konstruktivnim povratnim informacijama!
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinošenja](CONTRIBUTING.md). Rado ćemo primiti vaše konstruktivne povratne informacije!
## 🧭 Pristup bez interneta
## 🧭 Offline pristup
Ovu dokumentaciju možete prikazati offline koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svoje lokalno računalo, i zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će biti poslužena na portu 3000 na vašem localhostu: `localhost:3000`.
Ovu dokumentaciju možete pokrenuti offline koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svoje lokalno računalo, a zatim u korijenskoj mapi ovog repozitorija unesite `docsify serve`. Web stranica će se poslužiti na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
PDF svih lekcija može se pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Ostali Tečajevi
## 🎒 Ostali tečajevi
Naš tim proizvodi i druge tečajeve! Pogledajte:
Naš tim izrađuje i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Generativnog AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Serija Generativne AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ako zapnete ili imate pitanja o izradi AI aplikacija, pridružite se drugim učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica u kojoj su pitanja dobrodošla, a znanje se slobodno dijeli.
Ako zapnete ili imate bilo kakvih pitanja o izradi AI aplikacija, pridružite se kolegama učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla i znanje se slobodno dijeli.
Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovaj repozitorij licenciran je pod MIT licencom. Za više informacija pogledajte datoteku [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
**Odricanje od odgovornosti**:
Ovaj dokument preveden je pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvornik dokumenta na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazumevanja ili pogrešne interpretacije koje proizađu iz korištenja ovog prijevoda.
## 🎥 Video
## [Kviz prije predavanja](../../../lesson-template/quiz-url)
> Dodajte ugrađeni video ili poveznicu na lekciju ovdje.
[Opišite što ćemo naučiti]
---
## Kviz prije predavanja
> Dodajte poveznicu na kviz ovdje kada bude dostupan.
---
Dajte kratak pregled onoga što će učenici naučiti u ovoj lekciji.
---
### Uvod
Opišite što će biti obuhvaćeno
Dajte kratak uvod koji opisuje što će biti obrađeno u ovoj lekciji.
> Bilješke
---
### Preduvjeti
Koji koraci su trebali biti obuhvaćeni prije ove lekcije?
Navedite pojmove ili teme s kojima bi učenici trebali biti upoznati prije početka ove lekcije.
---
### Priprema
Pripremni koraci za početak ove lekcije
Navedite korake postavljanja ili alate potrebne prije početka lekcije.
---
[Prođite kroz sadržaj u blokovima]
### Sadržaj
Koračajte kroz sadržaj lekcije u strukturiranim odjeljcima.
---
## [Tema 1]
## Tema 1
### Zadatak:
Radite zajedno kako biste postupno unaprijedili svoj kodni repozitorij i izgradili projekt sa zajedničkim kodom:
Radite zajedno kako biste postupno unaprijedili svoju bazu koda za izgradnju projekta s dijeljenim kodom:
```html
code blocks
```
✅ Provjera znanja - iskoristite ovaj trenutak za proširenje znanja učenika otvorenim pitanjima
✅ Provjera znanja
Iskoristite ovaj trenutak za produbljivanje znanja učenika putem otvorenih pitanja.
## [Tema 2]
## Tema 2
## Tema 3
## [Tema 3]
🚀 Izazov
Dodajte suradnički izazov za učenike kako bi unaprijedili projekt.
🚀 Izazov: Dodajte izazov za učenike kako bi surađivali u razredu na unapređenju projekta
Opcionalno: Dodajte snimku zaslona sučelja dovršene lekcije ako je prikladno.
Opcionalno: dodajte snimku zaslona korisničkog sučelja dovršene lekcije ako je prikladno
## Kviz nakon predavanja
## [Kviz nakon predavanja](../../../lesson-template/quiz-url)
Dodajte poveznicu na kviz ovdje nakon završetka lekcije.
## Pregled i samostalno učenje
**Rok za zadatak [MM/GG]**: [Naziv zadatka](assignment.md)
**Zadatak do [MM/GG]**: [Naziv zadatka](assignment.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku smatra se službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja proizašla iz korištenja ovog prijevoda.
To je učni učni načrt za poučevanje osnov spletnega razvoja za začetnike. Učni načrt je obsežen 12-tedenski tečaj, ki so ga razvili Microsoft Cloud Advocates, in vsebuje 24 praktičnih lekcij o JavaScriptu, CSS in HTML.
To je izobraževalni kurikulum repozitorij za poučevanje osnov spletnega razvoja začetnikom. Kurikulum je obsežen 12-tedenski tečaj, razvit s strani Microsoft Cloud Advocates, ki vsebuje 24 praktičnih lekcij, ki zajemajo JavaScript, CSS in HTML.
### Ključne sestavine
### Ključne komponente
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v modulih na osnovi projektov
- **Praktični projekti**: Terarij, Tipkovniška igra, Razširitev brskalnika, Vesoljska igra, Bančna aplikacija, Urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s 3 vprašanji vsak (pred in po lekciji)
- **Podpora za več jezikov**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v modulih, temelječih na projektih
- **Praktični projekti**: Terrarium, igra tipkanja, razširitev brskalnika, igra v vesolju, bančna aplikacija, urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred/po lekciji)
- **Večjezična podpora**: Samodejni prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Učni skladišče z strukturo na osnovi lekcij
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija,postrežena preko Docsify in dostopna kot PDF
- Izobraževalni repozitorij z organizacijo po lekcijah
- Vsaka mapa lekcije vsebuje README, primeri kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija strežena preko Docsify in dostopna kot PDF
## Ukazi za nastavitev
To skladišče je primarno namenjeno za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
Ta repozitorij je namenjen predvsem za porabo izobraževalne vsebine. Za delo s specifičnimi projekti:
Za podrobna navodila o posameznih projektih glej README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve brskalnika
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI klepetalnega pomočnika
Za podrobna navodila glede posameznih projektov glej README datoteke v:
- `quiz-app/README.md` - Vue 3 kviz aplikacija
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve brskalnika
- `6-space-game/README.md` - Razvoj igre na platnu (canvas)
- `9-chat-project/README.md` - AI klepetalni pomočnik
### Struktura monorepo
### Struktura monorepa
Čeprav ni tradicionalni monorepo, to skladišče vsebuje več samostojnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Kloniraj celotno skladišče za celotno učni izkušnjo
Čeprav ni klasični monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na ostale
- Kloniraj celoten repozitorij za celotno kurikulum izkušnjo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 točnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nesporazume ali nepravilne interpretacije, ki izhajajo iz uporabe tega prevoda.
Ta dokument je bil preveden z uporabo storitve za AI prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba šteti za avtoritativni vir. Za ključne informacije je priporočljivo uporabiti strokovni človeški prevod. Nismo odgovorni za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
Naučite se osnov spletnega razvoja s 12-tedenskim podrobnim tečajem, ki ga pripravljajo Microsoft Cloud Advocates. Vsaj ena od 24 lekcij poglobi znanje JavaScripta, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje sposobnosti in optimizirajte zadrževanje znanja s pomočjo naše učinkovite projektno usmerjene pedagogike. Začnite svojo kodo danes!
Naučite se osnov spletnega razvoja z našim obsežnim 12-tedenskim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka izmed 24 lekcij poglobi znanje JavaScript-a, CSS-a in HTML-a skozi praktične projekte, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključuje kvize, razprave in praktične naloge. Izboljšajte svoje spretnosti in optimizirajte zadrževanje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodojersko pot še danes!
#### Podprto preko GitHub akcije (samodejno in vedno ažurno)
> **Raje klonirate lokalno?**
>
> Ta repozitorij vsebuje več kot 50 prevodov jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> Ta repozitorij vključuje več kot 50 prevodov, kar znatno poveča velikost prenosa. Za kloniranje brez prevodov uporabite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,92 +31,78 @@ Sledite tem korakom, da začnete uporabljati te vire:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Tako boste imeli vse, kar potrebujete za dokončanje tečaja z veliko hitrejšim prenosom.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Če želite, da so podprti dodatni jeziki prevodov, so navedeni [tukaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> Tako boste dobili vse, kar potrebujete, da zaključite tečaj, z veliko hitrejšim prenosom.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**Če želite dodatne prevode, so podprti jeziki tu. [tukaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _Si študent?_
#### 🧑🎓 _Ste študent?_
Obišči [**stran študentskega središča**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer najdeš začetne vire, študentske pakete in celo načine, kako pridobiti brezplačen potrdilni bon. To je stran, ki jo želiš shraniti med zaznamke in jo občasno preverjati, saj mesečno menjamo vsebino.
Obiščite [**Student Hub stran**](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 možnosti za brezplačni certifikatni kupon. To je stran, ki si jo želite shraniti med zaznamke in redno preverjati, saj vsebine mesečno osvežujemo.
### 📣 Napoved – nove izzive načinov GitHub Copilot Agenta za dokončanje!
### 📣 Obvestilo - Novi izzivi režima GitHub Copilot Agent za dokončanje!
Dodan je nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga moraš dokončati z uporabo GitHub Copilot-a in načina Agent. Če prej nisi uporabljal načina Agent, je ta zmožen ne samo generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.
Dodali smo nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga dokončate z uporabo GitHub Copilot in režima Agent. Če režima Agent še niste uporabljali, zmore ne le generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.
### 📣 Napoved –_nov projekt za gradnjo z generativno AI_
### 📣 Obvestilo - _Nov projekt za izdelavo z uporabo Generativne AI_
Novi AI Assistant projekt je pravkar dodan, poglej [projekt](./9-chat-project/README.md)
Novo projekt AI asistenta je pravkar dodan, poglejte [projekt](./9-chat-project/README.md)
### 📣 Napoved –_nov učni načrt_ o generativni AI za JavaScript je pravkar izšel
### 📣 Obvestilo - _Novi učni načrt_ o Generativni AI za JavaScript je pravkar izdan
Ne zamudite naš novi učni načrt o generativni AI!
Ne zamudite našega novega učnega načrta o Generativni AI!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), da začneš!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem kot so:
- Uporaba pozivov in inženiring pozivov
Vsaka lekcija vsebuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Uporaba navodil in inženiring navodil
- Generiranje aplikacij za besedilo in slike
- Aplikacije za iskanje
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), da začneš!
- Iskalne aplikacije
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
## 🌱 Začetek
> **Učitelji**, vključili smo [nekaj predlogov](for-teachers.md), kako uporabljati 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čitelji**, vključili smo [nekaj predlogov](for-teachers.md), kako uporabiti ta učni načrt. Z veseljem sprejemamo vaše povratne informacije [na 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 predavanjem in kvizom ter nadaljujte z branjem predavanjskega gradiva, izpolnjevanjem različnih aktivnosti in preverjanjem razumevanja s kvizom po predavanju.
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s predpredavanjsko vajo in sledite gradivu predavanja, opravite različne dejavnosti in preverite svoje razumevanje s po-predavanjsko vajo.
Za izboljšanje učenja se povežite s sovrstniki in skupaj delajte na projektih! Razprave so dobrodošle v našem [diskusijskem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer vam bodo na voljo naši moderatorji za odgovore na vaša vprašanja.
Za izboljšanje vaše učne izkušnje se povežite s sovrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem [forumu za razprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer je naša ekipa moderatorjev na voljo za vaša vprašanja.
Za nadaljnje izobraževanje močno priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne študijske materiale.
Za nadaljnjo izobrazbo priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne študijske materiale.
### 📋 Namestitev razvojnega okolja
### 📋 Nastavitev vašega okolja
Ta učni načrt že ima pripravljeno razvojno okolje! Ko začnete, se lahko odločite, ali boste učni načrt izvajali v [Codespace](https://github.com/features/codespaces/) (_okolje, ki deluje v brskalniku in ne zahteva namestitev_), ali lokalno na svojem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ta učni načrt že vsebuje razvojno okolje! Ko začnete, lahko izberete zagon učnega načrta v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po namestitvi_), ali lokalno na svojem računalniku z urejevalnikom besedil, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Ustvarite svoj repozitorij
Da boste lahko enostavno shranjevali svoje delo, vam priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Uporabi ta predlogo** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.
Da boste lahko zlahka shranjevali svoje delo, je priporočljivo, da ustvarite svojo kopijo tega repozitorija. To lahko naredite s klikom na gumb **Use this template** zgoraj na strani. S tem se bo ustvaril nov repozitorij na vašem GitHub računu s kopijo učnega načrta.
Sledite tem korakom:
1. **Razvezi repozitorij**: Kliknite na gumb "Razvezi" (Fork) zgoraj desno na tej strani.
1. **Razvejite repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za delo.
V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite na gumb **Code** in izberite **Open with Codespaces**. Tako boste ustvarili nov Codespace, v katerem boste delali.
#### Izvajanje učnega načrta lokalno na svojem računalniku
Za izvajanje tega učnega načrta lokalno na svojem računalniku boste potrebovali urejevalnik besedila, brskalnik in orodje ukazne vrstice. Naša prva lekcija, [Uvod v programske jezike in orodja stroke](../../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.
#### Zagon učnega načrta lokalno na vašem računalniku
Priporočamo uporabo [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).
Za zagon tega učnega načrta lokalno na računalniku boste potrebovali urejevalnik besedil, brskalnik in orodje ukazne vrstice. Naša prva lekcija, [Uvod v programske jezike in orodja](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo popeljala skozi različne možnosti za vsako od teh orodij, da izberete tisto, kar vam najbolj ustreza.
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete na gumb **Code** in kopirate URL:
Priporočamo uporabo [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 svoj 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) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
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 `<your-repository-url>` zamenjate z URL-jem, ki ste ga pravkar kopirali:
```bash
git clone <your-repository-url>
```
2. Odprite mapo v Visual Studio Code. To lahko storite tako, da kliknete **File** > **Open Folder** in izberete mapo, ki ste jo pravkar klonirali.
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 Visual Studio Code:
@ -143,71 +112,72 @@ Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_i
## 📂 Vsaka lekcija vključuje:
- neobvezno skiciranje
- neobvezno skicirkno beležko
- neobvezni dodatni video
- ogrevalni kviz pred lekcijo
- predhodni kviz za ogrevanje pred lekcijo
- pisno lekcijo
- pri lekcijah, temelječih na projektih, vodnike korak za korakom za izdelavo projekta
- za projektno usmerjene lekcije, vodnike korak za korakom za izdelavo projekta
- preverjanja znanja
- izziv
- dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/)
> **Opomba o kvizih**: Vsi kvizi so zbrani v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), kviz aplikacijo lahko zaženete lokalno ali objavite na Azure; sledite navodilom v mapi `quiz-app`.
> **Opomba o kvizih**: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov s po tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), kviz aplikacijo je mogoče zagnati lokalno ali jo namestiti na Azure; sledite navodilom v mapi `quiz-app`.
## 🗃️ Lekcije
| | Ime projekta | Poučeni koncepti | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in orodja poklica | Naučite se osnov, na katerih temeljijo večina programskih jezikov, in o programski opremi, ki pomaga profesionalnim razvijalcem | [Uvod v programske jezike in orodja poklica](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHub, vključuje delo 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 | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Osnove | Tipi podatkov v JavaScript | Osnove tipov podatkov v JavaScript | [Tipi podatkov](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Osnove | Funkcije in metode | Naučite se o funkcijah in metodah za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | JS Osnove | Sprejemanje odločitev v JS | Naučite se, kako ustvariti pogoje v kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Osnove | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScript | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na izdelavo postavitve | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS v praksi | Naredite CSS za oblikovanje spletnega terrarija, osredotočite se na osnove CSS in odzivno oblikovanje strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript sklope, manipulacija DOM | Naredite JavaScript, da bo terrarij deloval kot vmesnik za povleci/spusti, osredotočite se na sklope in manipulacijo DOM | [JavaScript sklope, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izdelava igre tipkanja | Naučite se uporabljati dogodke tipkovnice za upravljanje logike vaše JavaScript aplikacije | [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni brskalnik dodatek](./5-browser-extension/solution/README.md) | Delo z brskalniki | Naučite se, kako brskalniki delujejo, njihova zgodovina in kako pripraviti prve elemente brskalniškega dodatka | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni brskalnik dodatek](./5-browser-extension/solution/README.md) | Izdelava obrazca, klic API-ja in shranjevanje spremenljivk v lokalno shrambo | Naredite JavaScript elemente vašega brskalniškega dodatka za klic API-ja, ki uporablja spremenljivke shranjene v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni brskalnik dodatek](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, spletna zmogljivost | Uporabite ozadinske procese brskalnika za upravljanje ikone dodatka; spoznajte spletno zmogljivost in nekatere optimizacije | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra vesolja](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScript | Naučite se o dedovanju z uporabo razredov in kompozicije ter o vzorcu Pub/Sub, kot priprava na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra vesolja](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra vesolja](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Spoznajte, kako lahko elementi pridobijo gibanje z uporabo kartiznih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra vesolja](./6-space-game/solution/README.md) | Zaznavanje trkov | Poskrbite, da se elementi trkajo in odzivajo drug na drugega s pritiski tipk in dodajte funkcijo za ohlajanje za boljšo zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra vesolja](./6-space-game/solution/README.md) | Vodenje rezultatov | Izvedite matematične izračune na podlagi stanja in zmogljivosti igre | [Vodenje rezultatov](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra vesolja](./6-space-game/solution/README.md) | Zaključevanje in ponovni zagon igre | Spoznajte, kako zaključiti in znova zagnati igro, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | [Pogoj za zaključek](./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 ustvariti osnovno arhitekturo večstranične spletne strani z uporabo poti 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) | Izdelava prijavnega in registracijskega obrazca | Naučite se izdelovati obrazce in upravljati validacijske rutine | [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 programsko 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 VScode urejevalnika kode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| | Ime projekta | Proučevani koncepti | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in osnovna orodja | Spoznajte osnovne temelje večine programskih jezikov in programske opreme, ki pomaga profesionalnim razvijalcem opravljati delo | [Uvod v programske jezike in orodja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHub-a, delo v skupini | 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 | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScript | Osnove podatkovnih tipov v JavaScript | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike 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 odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Polja in zanke | Delo s podatki z uporabo polj in zank v JavaScript | [Polja in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Ustvarite HTML za spletni terarij, osredotočite se na izdelavo postavitve | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Ustvarite CSS za oblikovanje spletnega terarija, osredotočite se na osnove CSS in odzivnost strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, manipulacija DOM | Izdelajte JavaScript za delovanje terarija z vmesnikom povleci-in-spusti, osredotočeno na closures in manipulacijo DOM | [JavaScript closures, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Izdelava igre 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 | [Zeleni brskalniški vtičnik](./5-browser-extension/solution/README.md) | Delo z brskalniki | Naučite se, kako brskalniki delujejo, njihovo zgodovino in kako pripraviti prvi 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, klic API-ja in shranjevanje spremenljivk v lokalno shrambo | Izdelajte JavaScript elemente brskalniškega vtičnika za klic API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | [API, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni brskalniški vtičnik](./5-browser-extension/solution/README.md) | Ozadnji procesi v brskalniku, spletna zmogljivost | Uporabite ozadnje procese brskalnika za upravljanje ikone vtičnika; spoznajte spletno zmogljivost in nekatere optimizacije | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra v vesolju](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScript | Spoznajte dedovanje z uporabo razredov in sestave ter vzorec Pub/Sub, v pripravah na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra v vesolju](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra v vesolju](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako lahko elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API-ja | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da elementi trkajo in medsebojno reagirajo z uporabo pritiskov tipk in zagotovite funkcijo ohlajevanja za večjo zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Beleženje rezultatov | Izvedite matematične izračune glede na stanje in uspešnost igre | [Beleženje rezultatov](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaključek in ponovni začetek igre | Spoznajte zaključek in ponovni začetek igre, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoj zaključka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Naučite se ustvariti ogrodje večstranske spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izdelava obrazca za prijavo in registracijo | Spoznajte izdelavo obrazcev in obravnavo validacijskih rutin | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska 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 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Koda brskalnika/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba urejevalnika VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z umetno inteligenco | Naučite se izdelati svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naš učni načrt je zasnovan z dvema ključnima pedagoškima načeloma:
* učenje, usmerjeno v projekte
Naš kurikulum je oblikovan z dvema ključnima pedagoškima načeloma v mislih:
* učenje na podlagi projektov
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS ter najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Učenci bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijaznega brskalniškega dodatka, igre v slogu Space Invaders in bančne aplikacije za podjetja. Ob koncu serije bodo udeleženci pridobili trdno razumevanje spletnega razvoja.
Program uči osnove JavaScript, HTML in CSS, pa tudi 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 vtičnika, igre v slogu vesoljskih osvajačev in bančne aplikacije za podjetja. Ob koncu serije bodo pridobili trdno razumevanje spletnega razvoja.
> 🎓 Prve lekcije tega kurikuluma lahko opravite kot [učno pot](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije tega učnega načrta lahko opravite kot [Pot učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Z zagotavljanjem usklajenosti vsebine s projekti je proces za študente bolj zanimiv, prav tako se izboljša zadrževanje konceptov. Poleg tega smo napisali več uvodnih lekcij o osnovah JavaScript, ki uvajajo pojme, povezane z videoposnetkom iz zbirke "[Serija za začetnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", katere avtorji so prispevali k temu kurikulumu.
S tem, ko vsebina sovpada s projekti, je proces za učence bolj zanimiv in krepi zapomnitev konceptov. Prav tako smo napisali več začetnih lekcij o osnovah JavaScript-a, ki uvajajo koncepte, skupaj z videoposnetkom iz zbirke "[Serija za začetnike: 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 nizkorizični kviz pred razredom usmerja namen študenta k učenju teme, medtem ko drugi kviz po pouku zagotavlja nadaljnjo zadržnost. Ta kurikulum je zasnovan kot prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postopoma postajajo bolj zapleteni do konca 12-tedenskega cikla.
Poleg tega nizkobetno kviz pred razredom usmeri pozornost študenta na učenje teme, medtem ko drugi kviz po razredu zagotovi dodatno pomnjenje. Ta učni načrt je zasnovan tako, da je prilagodljiv in zabaven, ter ga je mogoče opraviti v celoti ali delno. Projekti so na začetku majhni in postajajo po 12-tedenskem ciklu vse bolj kompleksni.
Čeprav smo namerno izpustili uvajanje ogrodij JavaScript, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak po dokončanju tega kurikuluma učenje Node.js preko druge zbirke videoposnetkov: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Čeprav smo namerno opustili uvajanje JavaScript okvirov, da se osredotočimo na osnovne spretnosti, potrebne kot spletni razvijalec pred uporabo okvira, bi bil dober naslednji korak za zaključek tega učnega načrta učenje o Node.js preko druge video zbirke: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Oglejte si naše smernice [Kodeksa ravnanja](CODE_OF_CONDUCT.md) in [Prispevkov](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
> Oglejte si naše [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
To dokumentacijo lahko zaženete brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejajte ta repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svojem lokalnem računalniku, nato pa v korenski mapi tega repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvežite ta repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svojo lokalno napravo, nato pa v osnovni mapi tega repozitorija vnesite `docsify serve`. Spletna stran bo na voljo na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
## 📘 PDF
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -215,7 +185,7 @@ PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Be
## 🎒 Drugi tečaji
Naša ekipa pripravlja še druge tečaje! Oglejte si:
Naša ekipa pripravlja tudi druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -224,56 +194,56 @@ Naša ekipa pripravlja še druge tečaje! Oglejte si:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentje
### Azure / Edge / MCP / Agenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generativni AI serija
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Serija Generativna AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot serija
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Če se zataknete ali imate kakršnakoli vprašanja o ustvarjanju AI aplikacij. Pridružite se drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je podpirajoča skupnost, kjer so vprašanja dobrodošla in se znanje prosto deli.
Če naletite na težave ali imate vprašanja o ustvarjanju AI aplikacij, se pridružite drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je podpirajoča skupnost, kjer so vprašanja dobrodošla in kjer se znanje prosto deli.
Ta repozitorij je licenciran pod licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
To skladišče je licencirano pod licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvirnem jeziku velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Ne odgovarjamo za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot glavni vir. Za ključne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
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 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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v maternem jeziku je treba šteti kot pooblaščeni vir. Za ključne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
Ово је репозиторијум едукативног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватан курс у трајању од 12 недеља, развијен од стране Microsoft Cloud Advocates-а, који садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
Ово је репозиторијум образовног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватан курс од 12 недеља који су развили Microsoft Cloud Advocates, и садржи 24 практична часа покривајући JavaScript, CSS и HTML.
### Кључне компоненте
- **Едукативни садржај**: 24 структурисане лекције организованеу модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки екстензија, Свемирска игра, Банкарска апликација, Уређивач кода и AI чат асистент
- **Интерактивни квизови**: 48 квизова са по 3 питања (пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Технолошки стек**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
- **Образовни садржај**: 24 структурирана часа организованау модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Typing Game, Browser Extension, Space Game, Banking App, Code Editor и AI Chat Assistant
- **Интерактивни квизови**: 48 квизова са по 3 питања (процена пре и после часа)
- **Подршка за више језика**: Аутоматски преводи за 50+ језика преко GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Архитектура
- Едукативни репозиторијум са структуром заснованом на лекцијама
- Свако говорно место садржи README, примере кода и решења
- Самостални пројекти упосебним директивама (quiz-app, разни пројекти лекција)
- Образовни репозиторијум са структуром базираном на часовима
- Свакa фасцикла часа садржи README, примере кода и решења
За детаљна упутства о појединачним пројектима погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој прегледачких екстензија
- `6-space-game/README.md` - Canvas заснована игра
- `9-chat-project/README.md` - AI асистент за ћаскање
За детаљна упутства о појединачним пројектима, погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 quiz апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентикацијом
- `5-browser-extension/README.md` - Развој browser extension-а
- `6-space-game/README.md` - Развој игре базиране на Canvas-у
- `9-chat-project/README.md` - AI chat асистент пројекат
### Структура монорепозиторијума
### Монорепо структура
Иако није традиционални монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свaka лекција је самостална
Иако није традиционални монорепо, овај репозиторијум садржи више независних пројеката:
- Свaki час је самосталан
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на остале
- Клонирајте цео репозиторијум за пуну курикулумску комплетност
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за пун курс курикулума
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за машински превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде прецизан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетом. За критичне информације препоручује се професионални превод који изводи стручни преводилац. Нисмо одговорни за било какве неспоразуме или погрешне тумачења која могу настати коришћењем овог превода.
**Ограничење одговорности**:
Овај документ је преведен помоћу AI преводилачке услуге [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, имајте у виду да аутоматски преводи могу садржати грешке или неточности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални, људски превод. Нисмо одговорни за било какве неспоразуме или неправилна тумачења настала коришћењем овог превода.
Научите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улази у JavaScript, CSS и HTML кроз пројекте попут тераријума, проширења за прегледаче и свемирских игара. Учествујте у квизовима, дискусијама и практичним задацима. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогју засновану на пројектима. Започните своје кодирање већ данас!
Научите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Свакa од 24 лекције дубоко истражује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења прегледача и свемирске игре. Укључите се кроз квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања ефективном педагогијом заснованом на пројектима. Започните своје кодерско путовање данас!
Придружите се Azure AI Foundry Discord заједници
Придружите се Azure AI Foundry Discord-у и упознајте стручњаке и друге програмере.
> Овај репозиторијум укључује преко 50 превода што значајно повећава величину преузимања. Да бисте клонирали без превода користите sparse checkout:
>
@ -48,233 +48,233 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ово вам даје све што вам треба да завршите курс са знатно бржим преузимањем.
> Ово Вам даје све што Вам је потребно за завршетак курса са много бржим преузимањем.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ако желите да буду подржани додатни језици превода, они су наведени [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Уколико желите додатне преводе, подржани језици су наведени овде. [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Да ли сте студент?_
Посетите [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете наћи ресурсе за почетнике, Student пакете па чак и начине да добијете бесплатан сертификат. Ово је страница коју треба да обележите и са времена на време проверите како бисте пратити новине јер месечно мењамо садржај.
Посетите [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете пронаћи ресурсе за почетнике, студентске пакете па чак и начине да добијете бесплатан ваучер за сертификат. Ово је страница коју желите да означите и повремено проверите јер ми месечно мењамо садржај.
### 📣 Објава – Нови изазови у GitHub Copilot Agent режиму!
### 📣 Објава - НОВИ изазови за GitHub Copilot Agent мод за завршавање!
Додат је нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он није способан само да генерише текст, већ и да креира и уређује фајлове, извршава команде и још много тога.
Додат је нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он није само за генерисање текста већ може и креирати и уређивати датотеке, извршавати команде и још много тога.
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води у учењу тема као што су:
- Креирање упита и инжењеринг упита
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води кроз теме као што су:
- Формулисање упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претрагу
- Претрага апликација
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да бисте почели!
## 🌱 Почетак рада
## 🌱 Како почети
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) о томе како да користите овај наставни програм. Волео би да добијемо ваше повратне информације [на нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) о томе како користити овај наставни план. Волео/ла бих да добијемо ваше повратне информације [на нашем форуму за дискусије](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, започните квизом пре предавања и наставите читањем материјала, обављањем различитих активности и проверите разумевање након предавања уз пост-лекцијски квиз.
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију започнитеса квизом пре предавања и наставите читањем материјала, извођењем различитих активности и проверавањем разумевања кроз квиз након предавања.
Да бисте побољшали своје искуство учења, повежите сеса вршњацима и радите на пројектима заједно! Подстицајемо дискусију у нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
Да бисте побољшали своје учење, повежите сеса својим вршњацима да радите на пројектима заједно! Дискусије су охрабрене у нашем [форуму за дискусије](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће тим модератора бити доступан да одговори на ваша питања.
Да бисте додатно унапредили своје образовање, препоручујемо вам да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне студијске материјале.
Да бисте даље усавршавали образовање, топло препоручујемо да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатни материјал за учење.
### 📋 Постављање окружења
### 📋 Подешавање вашег окружења
Овај наставни програм има спремно окружење за развој! Када почнете, можете да изаберете да покренете наставни програм у [Codespace-у](https://github.com/features/codespaces/) (_окружење засновано на претраживачу без потребе за инсталацијом_) или локално на свом рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Овај наставни план има спремно развојно окружење! Када почнете, можете изабрати да курс покренете у [Codespace-у](https://github.com/features/codespaces/) (_окружење које ради у прегледачу без потребе за инсталацијом_), или локално на вашем рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Креирајте свој репозиторијум
Да бисте лако сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. То ће направити нови репозиторијум у вашем GitHub налогу са копијом наставног програма.
Да бисте лакше сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нови репозиторијум на вашем GitHub налогу са копијом наставног плана.
Пратите ове кораке:
1. **Форкујте репозиторијум**: Кликните на дугме "Fork" у горњем десном углу ове странице.
1. **Форк репозиторијум**: Кликните на дугме "Fork" у горњем десном углу ове странице.
У својој копији овог репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. То ће створити нови Codespace за рад.
У својој копији овог репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће вам креирати нови Codespace за рад.
#### Покретање наставног програма локално на рачунару
#### Локално покретање наставног плана на вашем рачунару
Да бисте покренули овај наставни програм локално на рачунару, потребан вам је уређивач текста, прегледач и алатка командне линије. Наша прва лекција, [Увод у програмске језике и алате заната](../../1-getting-started-lessons/1-intro-to-programming-languages), водиће вас кроз различите опције за сваки од ових алата како бисте изабрали оно што вам највише одговара.
Да бисте локално покренули овај курс на вашем рачунару, биће вам потребан уређивач текста, прегледач и командна линија. Наша прва лекција, [Увод у програмске језике и алате](../../1-getting-started-lessons/1-intro-to-programming-languages), биће вам водич кроз различите опције за сваки од ових алата да изаберете оно што вам највише одговара.
Наш предлог је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као свој уређивач, који такође има уграђени [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете учинити кликом на дугме **Code** и копирањем URL-а:
Препоручујемо коришћење [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као вашег уређивача, који уједно има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем URL-а:
[CodeSpace](./images/createcodespace.png)
Затим, отворите [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>` URL-ом који сте управо копирали:
Затим, отворите [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>`саURL-ом који сте управо копирали:
```bash
git clone <your-repository-url>
```
2. Отворите фасциклу у Visual Studio Code-у. То можете учинити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
2. Отворите фасциклу у Visual Studio Code-у. То можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
> Препоручене Visual Studio Code екстензије:
> Препоручени Visual Studio Code додаци:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code-а
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за брже писање кода
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помоћ у бржем писању кода
## 📂 Свaка лекција укључује:
## 📂 Свака лекција укључује:
- опционалну скетчноту
- опционални додатни видео
- квиз за загревање пре лекције
- опциони оловкрис
- опциони додатни видео
- припремни квиз пре лекције
- писану лекцију
- за пројектно оријентисане лекције, корак-по-корак упутства како направити пројекат
- за лекције засноване на пројектима, корак-по-корак приручнике како изградити пројекат
- провере знања
- изазов
- додатно читање
- задатак
- [квиз након лекције](https://ff-quizzes.netlify.app/web/)
> **Напомена о квизовима**: Сви квизови се налазе уфасцикли Quiz-app, укупно 48 квизова са по три питања сваки. Доступни су [овде](https://ff-quizzes.netlify.app/web/), апликација за квизове може се покренути локално или објавити на Azure; следите упутства у`quiz-app` фасцикли.
> **Напомена о квизовима**: Сви квизови се налазе у Quiz-app фасцикли, укупно 48 квизова са по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), апликацију за квизове можете покренути локално или је објавити на Azure; следите упутства у`quiz-app` фасцикли.
## 🗃️ Лекције
| | Назив пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима у њиховом раду | [Увод у програмске језике и алате](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Јасмин |
| 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у пројекту, како сарађивати са другима на основу кода | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Флор |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Кристофер |
| 04 | JS Основе | Типови података у JavaScript | Основе типова података у JavaScript | [Типови података](./2-js-basics/1-data-types/README.md) | Јасмин |
| 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Јасмин и Кристофер |
| 06 | JS Основе | Одлучивање у JS | Научите како да користите услове у кодирању користећи методе одлучивања | [Одлучивање](./2-js-basics/3-making-decisions/README.md) | Јасмин |
| 07 | JS Основе | Низови и петље | Рад са подацима користећи низове и петље у JavaScript | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Јасмин |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Направите HTML за онлайн тераријум, фокусирајући се на изградњу распореда| [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Џен |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стилизовање онлајн тераријума, фокус на основама CSS-а укључујући и прилагођавање странице | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Џен |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript закључци, манипулација DOM-ом | Направите JavaScript који омогућава превлачење тераријума, фокусирајући се на закључке и рад са DOM-ом | [JavaScript закључци, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Џен |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Направити игру куцања | Научите како да користите догађаје са тастатуре за вођење логике у вашој JavaScript апликацији | [Програмска логика заснована на догађајима](./4-typing-game/typing-game/README.md) | Кристофер |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како направити прве елементе проширења прегледача| [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Џен |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Израда форме, позив API-ја и чување података у локалном складишту | Направите JavaScript елементе вашег проширења за позивање API-ја користећи варијабле у локалном складишту | [API-ји, форме и локално складиште](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Џен |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом проширења; научите ооптимизацијама и перформансама веба | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Џен |
| 15 | [Space Game](./6-space-game/solution/README.md) | Напреднија израда игара са JavaScript | Научите о наслеђивању користећи и класе и композицију и Pub/Sub обрасце, као припрему за прављење игре | [Увод у напреднију израду игара](./6-space-game/1-introduction/README.md) | Крис |
| 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на canvas-у | Научите о Canvas API-ју који се користи за цртање елемената на екрану|[Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Крис |
| 17 | [Space Game](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање коришћењем декартових координата и Canvas API-ја | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Крис |
| 18 | [Space Game](./6-space-game/solution/README.md) | Препознавање судара | Направите да се елементи сударају и реагују једни на друге користећи притиске тастера и обезбедите cooldown функцију за перформансе игре | [Препознавање судара](./6-space-game/4-collision-detection/README.md) | Крис |
| 19 | [Space Game](./6-space-game/solution/README.md) | Бодовање | Извршите математичке прорачуне на основу статуса и перформанси игре | [Бодовање](./6-space-game/5-keeping-score/README.md) | Крис |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Крис |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како направити скелет вишестраначне архитектуре вебсајта коришћењем рутирања и HTML шаблона | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Јохан |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Израда форме за пријаву и регистрацију | Научите о изградњи форми и руковању валидирањем | [Форми](./7-bank-project/2-forms/README.md) | Јохан |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података | Како подаци улазе и излазе из ваше апликације, како их преузети, чувати и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Јохан |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како апликација чува стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Јохан |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са Visual Studio Code | Научите како користити уређивач кода | [Коришћење VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Крис |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како да направите свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Крис |
| | Назив пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| 01 | Почетак | Увод у програмирање и алате струке | Научите основне основе које стоје иза већине програмских језика и о софтверу који помаже професионалним програмерима да раде | [Увод у програмске језике и алате струке](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак | Основе GitHub-а, укључујући рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на коду | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак | Приступачност| Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | ЈС основе | Типови података у JavaScript-у| Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | ЈС основе | Функције и методе| Научите о функцијама и методама које управљају логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | ЈС основе | Доношење одлука са JS | Научите како да креирате услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | ЈС основе | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML у пракси | Израдите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS у пракси | Израдите CSS за стилизовање онлајн тераријума, фокусирајући се на основе CSS укључујући прилагођавање странице | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript затварања, рад са DOM-ом | Израдите JavaScript за функционисање тераријума као drag/drop интерфејса, са фокусом на затварања и рад са DOM-ом | [JavaScript затварања, рад са DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Креирање игре куцања | Научите како да користите догађаје са тастатуре за управљање логиком JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како направити прве елементе проширења за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Креирање форме, позивање API-ја и чување променљивих у локалној меморији | Израдите JavaScript елементе проширења прегледача за позивање API-ја користећи променљиве чуване у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом проширења; научите овеб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Напреднији развој игара са JavaScript-ом | Научите о наследству користећи класе и композицију и публиковање/поверене образац, за припрему израде игре | [Увод у напредни развој игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на canvas-у| Научите о Canvas API-ју, који се користи за цртање елемената на екрану | [Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Премештање елемената око екрана | Откријте како елементи добијају покрет коришћењем декартових координата и Canvas API-ја | [Премештање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Детекција судара | Учините да се елементи сударају и реагују једни на друге користећи притиске тастера и обезбедите cooldown функцију ради перформанси | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Вођење резултата | Изведите математичке прорачуне на основу статуса и перформанси игре | [Вођење резултата](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завршавање и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање променљивих вредности | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како да креирате структуру више страница веб сајта коришћењем рутирања и HTML шаблона | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Креирање форме за пријаву и регистрацију | Научите о креирању форми и руковању валидацијом | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методе дохватања и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, чувати и одбацити | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како се оно управља програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са VScode | Научите како да користите едитор кода | [Коришћење VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како да направите свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагошка метода
## 🏫 Педагошија
Наш наставни план је дизајниран уз два кључна педагошка принципа:
* учење кроз пројекте
* чести квизови
Наш наставни програм је дизајниран са два кључна педагошка принципа на уму:
* учење засновано на пројектима
* честе провере знања
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које користе данашњи веб програмери. Студенти ће имати прилику да стекну практично искуство кроз прављење игре куцања, виртуелног тераријума, еколошки прихватљивог проширења прегледача, игре у стилу освајача свемира и банковне апликације за послове. На крају серије, студенти ће имати чврсто разумевање веб развоја.
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство кроз креирање игре куцања, виртуелног тераријума, еколошки прихватљивог проширења прегледача, игре у стилу свемирског нападача и банкарске апликације за пословне кориснике. До краја серије, студенти ће стећи чврсто разумевање веб развоја.
> 🎓 Прве неколико лекција из овог програма можете проћи као [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Прве неколико лекција у овом курикулуму можете узети као [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Обезбеђивањем упаривања садржаја са пројектима, процес је занимљивији за студенте и повећава задржавање концепата. Такође смо написали неколико уводних лекција о основама JavaScript-аи пар њих повезали са видео серјом "[Беџинер серија за: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чији су неки аутори допринели овом курикулуму.
Обезбеђујући да садржај буде усклађен са пројектима, процес је за студенте занимљивији, а задржавање појмова ће бити појачано. Такође смо написали неколико уводних лекција о основама JavaScript-ада бисмо представили концепте, у пару са видео записом из колекције видео туторијала "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", од којих су неки аутори допринели овом наставном плану.
Поред тога, ниско-притисни квиз пре часа поставља намјеру студента према учењу теме, док други квиз након часа осигурава даље задржавање. Овај курикулум је дизајниран да буде флексибилан и забаван и може се проћи у целини или делимично. Пројекти почињу мали и постају све комплекснији до краја 12-недељног циклуса.
Поред тога, неутежани квиз пре часа поставља студентову намеру за учење теме, док други квиз након часа осигурава даље задржавање. Овај наставни програм је дизајниран да буде флексибилан и забаван и може се пратити целина или делимично. Пројекти почињу једноставни и постају све сложенији током 12-недељног циклуса.
Иако смо намерно избегли увод у JavaScript оквире да бисмо се концентрисали на основне вештине потребне као веб програмер пре прихватања оквира, добар следећи корак у завршетку овог курикулума био би учење о Node.js преко друге серије видеа: "[Беџинер серија за: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Иако смо намерно избегли увођење JavaScript оквира да бисмо се концентрисали на основне вештине потребне веб програмеру пре усвајања оквира, добар следећи корак након завршетка овог курикулума било би учење о Node.js кроз другу колекцију видео записа: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетите наша упутства о [Коду понашања](CODE_OF_CONDUCT.md) и [Прилози](CONTRIBUTING.md). Добродошли су ваши конструктивни коментари!
> Посетите наше смернице о [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошла је ваша конструктивна повратна информација!
## 🧭 Оффлине приступ
## 🧭 Приступ ван мреже
Ову документацију можете користити оффлине уз помоћ [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на свом рачунару, а затим у коренском фолдеру репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 локално на вашем рачунару: `localhost:3000`.
Ову документацију можете покренути ван мреже користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на свом локалном рачунару, и онда у главној фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем localhost-u: `localhost:3000`.
## 📘 PDF
PDF svih lekcija možete pronaћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF svih lekcija možete pronaћи [ovde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Остали курсеви
## 🎒 Ostali kursevi
Наш тим производи и друге курсеве! Погледајте:
Naš tim proizvodi i druge kurseve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Агенти
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія генеративног АИ
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Serija Generativne AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основно учење
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ако запнете или имате питања о прављењу AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели.
Ako zapnete ili imate bilo kakva pitanja u vezi pravljenja AI aplikacija. Pridružite se ostalim učenicima i iskusnim programerima u diskusijama o MCP. To je podržavajuća zajednica gde su pitanja dobrodošla, a znanje se slobodno deli.
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
Ovaj repozitorijum je licenciran pod MIT licencom. Više informacija potražite u [LICENSE](../../LICENSE) fajlu.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање од одговорности**:
Овај документ је преведен помоћу AI сервиса за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом материњем језику треба сматрати ауторитетним извором. За критичне информације препоручује сепрофесионални људски превод. Не сносимо одговорност за било каква неразумевања или погрешне интерпретације настале употребом овог превода.
Овај документ је преведен коришћењем AI сервиса за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Док тежимо тачности, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом оригиналном језику треба сматрати ауторитетним извором. За критичне информације препоручује сестручни људски превод. Нисмо одговорни за било каква неразумевања или погрешне интерпретације које произлазе из коришћења овог превода.
## 🎥 Видео
## [Квиз пре предавања](../../../lesson-template/quiz-url)
> Додајте уграђени видео или линк ка лекцији овде.
[Опис онога што ћемо научити]
---
## Пре-лекцијски квиз
> Додајте линк ка квизу овде када буде доступан.
---
Презентујте кратак преглед онога што ће студенти научити на овој лекцији.
---
### Увод
Опис онога што ће бити обухваћено
Унесите кратак увод који описује шта ће бити покривено у овој лекцији.
> Белешке
### Предуслови
---
### Предзнање
Који кораци су требали бити обрађени пре ове лекције?
Наведите појмове или теме које студенти треба да већ познају пре почетка ове лекције.
---
### Припрема
Припремни кораци за почетак ове лекције
Наведите кораке за припрему или алате потребне пре почетка лекције.
---
[Прођите кроз садржај у блоковима]
### Садржај
Пролазите кроз садржај лекције у структурираним одељцима.
---
## [Тема 1]
## Тема 1
### Задатак:
Радите заједно на постепеном унапређивању вашег кода како бисте изградили пројекат са заједничким кодом:
Заједно радите на постепеном унапређењу вашег кода како бисте направили пројекат са заједничким кодом:
```html
code blocks
```
✅ Провера знања - искористите овај тренутак да проширите знање студената отвореним питањима
✅ Провера знања
Искористите овај тренутак да проверите знање студената кроз отворена питања.
## [Тема 2]
## Тема 2
## Тема 3
## [Тема 3]
🚀 Изазов
Додајте заједнички изазов за студенте да унапреде пројекат.
🚀 Изазов: Додајте изазов за студенте да раде заједно у настави на унапређивању пројекта
Опционо: Додајте снимак екрана готовог корисничког интерфејса ове лекције ако је прикладно.
Опционо: додајте снимак екрана корисничког интерфејса завршене лекције ако је прикладно
## После-лекцијски квиз
## [Квиз после предавања](../../../lesson-template/quiz-url)
Додајте линк ка квизу овде након завршетка лекције.
## Преглед и самостално учење
## Ревизија и самосталан рад
**Рок за предају [MM/YY]**: [Назив задатка](assignment.md)
**Рок за задатак [MM/YY]**: [Назив задатка](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
Овај документ је преведен коришћењем АИ сервиса за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Док тежимо прецизности, молимо вас да имате у виду да аутоматизовани преводи могу садржати грешке или нетачности. Изворни документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуме или погрешне тумачења која могу произићи из коришћења овог превода.
localizeflow[bot]
2 weeks ago