Ovo je edukativni repozitorij za podučavanje temelja web razvoja početnicima. Kurikulum je obuhvatan tečaj u trajanju od 12 tjedana koji je razvijen od strane Microsoft Cloud Advocatesa, a sadrži 24 praktične lekcije pokrivajući JavaScript, CSS i HTML.
Ovo je edukacijski repozitorij za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan tečaj od 12 tjedana koji su razvili Microsoft Cloud zagovornici, sa 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (prije/poslije lekcije)
- **Podrška za više jezika**: Automatski prijevodi za 50+ jezika preko GitHub Actions
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarium, igra tipkanja, ekstenzija za preglednik, svemirska igra, banka aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (evaluacije prije i poslije lekcija)
- **Podrška za više jezika**: Automatizirani prijevodi za 50+ jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Edukativni repozitorij s organizacijom po lekcijama
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav za prijevod koristeći GitHub Actions (co-op-translator)
- Edukacijski repozitorij s lekcijskom strukturom
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna preko Docsify i kao PDF
## Komande za postavljanje
Ovaj repozitorij je prvenstveno namijenjen za konzumaciju edukativnog sadržaja. Za rad na specifičnim projektima:
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s pojedinim projektima:
Za detaljne upute o pojedinačnim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj browser ekstenzije
- `6-space-game/README.md` - Razvoj igre u 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 kviza
- `7-bank-project/README.md` - Bankovna aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj ekstenzije zapreglednik
- `6-space-game/README.md` - Razvoj igre koristeći Canvas
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura Monorepo-a
### Struktura monorepa
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna cjelina
- Projekti ne dijele ovisnosti
- Radite pojedinačno na projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za potpuni kurikulum iskustvo
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje**:
Ovaj dokument preveden je pomoću AI prevoditeljskog servisa [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 izvornom jeziku smatra se službenim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.
**Odricanje od odgovornosti**:
Ovaj dokument preveden je koristeći AI servis za prevođenje [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 autoritativnim 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 uporabe ovog prijevoda.
Naučite osnove web razvoja kroz naš sveobuhvatni 12-tjedni tečaj kojeg vode Microsoft Cloud Advocatei. Svaka od 24 lekcije detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Uključite se u kvizove, rasprave i praktične zadatke. Unaprijedite svoje vještine i optimizirajte usvajanje znanja pomoću naše učinkovite pedagoške metode temeljenje na projektima. Započnite svoje programersko putovanje već danas!
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!
> Ovaj repozitorij uključuje više od 50 prijevoda što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> Ovo spremište uključuje prevode na 50+ jezika što znatno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,42 +48,42 @@ Slijedite ove korake da biste započeli s korištenjem ovih resursa:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ovo vam daje sve što vam treba za dovršetak tečaja s puno bržim preuzimanjem.
> Ovo vam daje sve što je potrebno za dovršavanje tečaja uz mnogo brže preuzimanje.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite da budu podržani dodatni jezici za prijevod, oni su navedeni [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](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 kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer mjesečno mijenjamo sadržaje.
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.
### 📣 Objavljeno - Novi izazovi uz GitHub Copilot Agent mode!
### 📣 Najava - Novi izazovi u GitHub Copilot Agent modu za dovršiti!
Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji možete dovršiti koristeći GitHub Copilot i Agent mode. Ako niste ranije koristili Agent mode, on ne samo da generira tekst već može i kreirati i uređivati datoteke, izvršavati naredbe i još mnogo toga.
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.
### 📣 Objavljeno - _Novi projekt za izgradnju korištenjem generativne AI_
### 📣 Najava - _Novi projekt za izgraditi koristeći Generativnu AI_
Upravo dodat novi AI Assistant projekt, pogledajte [projekt](./9-chat-project/README.md)
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Objavljeno - _Novi nastavni plan_ o generativnoj AI za JavaScript upravo je objavljen
### 📣 Najava - _Novi Nastavni plan_ o Generativnoj AI za JavaScript upravo je objavljen
Ne propustite naš novi nastavni plan o generativnoj AI!
Ne propustite naš novi nastavni plan o Generativnoj 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 za učenje tema poput:
- Promptanje i prompt inženjering
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
@ -91,190 +91,190 @@ Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za po
## 🌱 Početak
## 🌱 Početak rada
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) kako koristiti ovaj nastavni plan. Voljeli bismo vaše povratne informacije [na našem forumu za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **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)!
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s pred-lecture kvizom, zatim pročitajte predavanje, dovršite različite aktivnosti i provjerite svoje razumijevanje pomoću post-lecture kviza.
**[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.
Za povećanje svog iskustva učenja, povezujte se s kolegama i radite projekte zajedno! Poticanje rasprava je u našem [forumu za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje je naš tim moderatora dostupan za odgovaranje na vaša pitanja.
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 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 spremno razvojno okruženje! Kada započnete, možete odabrati pokretanje nastavnog plana u [Codespaceu](https://github.com/features/codespaces/) (_okruženje bazirano na pregledniku bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći tekstualni uređivač poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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).
#### Kreirajte svoj repozitorij
Kako biste jednostavno spremili svoj rad, preporučuje se da kreirate vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time će se u vašem GitHub računu kreirati novi repozitorij s kopijom nastavnog plana.
#### 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.
Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
U vašoj kopiji ovog repozitorija kliknite na gumb **Code** i odaberite **Open with Codespaces**. Time će se kreirati novi Codespace u kojem ćete raditi.
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.
#### Pokretanje nastavnog plana lokalno na vašem računalu
Da biste ovaj nastavni plan pokrenuli lokalno na računalu, trebat će vam tekstualni uređivač, preglednik i alat za naredbenu liniju. Naša prva lekcija, [Uvod u programske jezike i alate](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz različite opcije za svaki od ovih alata kako biste odabrali što vam najviše odgovara.
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.
Naša preporuka je da koristite [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivač 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 vaš repozitorij na 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 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:
[CodeSpace](./images/createcodespace.png)
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>`s URL-om koji ste upravo kopirali:
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` URL-om koji ste upravo kopirali:
```bash
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
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.
> Preporučeni dodaci za Visual Studio Code:
> 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 Codea
> * [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
## 📂 Svaka lekcija uključuje:
- neobaveznu skicu
- neobavezni dodatni video
- opcionalni sketchnote
- opcionalni dodatni video
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektima, korak-po-korak vodiče za izgradnju projekta
- za lekcije temeljene na projektima, vodiče korak-po-korak o izradi projekta
- provjere znanja
- izazov
- dodatno čitanje
- dodatnu literaturu
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi kvizovi su u mapi Quiz-app, ukupno 48 kvizova s po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/); aplikacija kviza može se pokrenuti lokalno ili implementirati u Azure; slijedite upute u mapi `quiz-app`.
> **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`.
## 🗃️ Lekcije
| | Naziv projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak rada | Uvod u programiranje i alate trgovine | Naučite osnovne temelje iza većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u vašem 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 rada | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipovi podataka | Osnove tipova podataka uJavaScriptu | [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 tokom logike aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka u JS | Naučite kako kreirati uvjete u vašem kodu koristeći metode za donošenje odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite 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 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 responsivni dizajn stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript closures, manipulacija DOM-om | Izgradite JavaScript koji omogućava funkcionalnost terarija kao povuci-i-ispusti sučelja, fokusirajući se na closures i DOM | [JavaScript closures, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izradite igru tipkanja | Naučite 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 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako izgraditi prve elemente ekstenzije preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu | Izradite JavaScript elemente vaše ekstenzije za preglednik 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 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom ekstenzije; 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) | Naprednija izrada igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrascu, kao pripremu za izradu igre | [Uvod u naprednu izradu 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 | 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 u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i međusobno reagiraju korištenjem pritisaka tipki i izvedite funkciju cooldown za osiguranje performansi igre | [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 temeljene na statusu igre i izvedbi | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završetak 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 napraviti arhitekturu višestranične web stranice 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) | Izrada obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju procedurama validacije | [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, pohraniti i odbaciti | [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 upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI projekt asistenta](./9-chat-project/README.md) | Chris |
| | 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 |
## 🏫 Pedagogija
Naš kurikulum je dizajniran s dvije ključne pedagoške smjernice:
Naš kurikulum je osmišljen s dva ključna pedagoška principa na umu:
* učenje temeljeno na projektima
* učestali kvizovi
* česti kvizovi
Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku razviti praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljive proširenje za preglednik, igre u stilu space invadera i bankarske aplikacije za poduzeća. Na kraju serije, studenti će imati čvrsto razumijevanje web razvoja.
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.
> 🎓 Prve lekcije ovog kurikuluma možete proći kao [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 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!
Osiguravanjem podudarnosti sadržaja s projektima, proces je angažiraniji za studente i zadržavanje koncepata će biti poboljšano. Također smo napisali nekoliko uvodnih lekcija o osnovama JavaScripta za upoznavanje s konceptima, uparene s videom iz zbirke video tutorijala "[Početnička serija za: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", od kojih su neki autori doprinijeli ovom kurikulumu.
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.
Osim toga, kviz s niskim ulozima prije sata usmjerava namjeru učenika prema učenju teme, dok drugi kviz nakon predavanja osigurava dodatno zadržavanje. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te može se pohađati u cjelini ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.
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.
Iako smo namjerno izbjegavali uvođenje JavaScript frameworka kako bismo se koncentrirali na osnovne vještine potrebne kao web programer prije usvajanja frameworka, dobar sljedeći korak u dovršetku ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videozapisa: "[Početnička serija za: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Veselimo se vašim konstruktivnim povratnim informacijama!
## 🧭 Pristup izvan mreže
## 🧭 Pristup bez interneta
Ovu dokumentaciju možete pokrenuti izvan mreže 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 upišite `docsify serve`. Web stranica će se poslužiti na portu 3000 na vašem localhostu: `localhost:3000`.
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`.
## 📘 PDF
PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF svih lekcija može se pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečajevi
## 🎒 Ostali Tečajevi
Naš tim proizvodi 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 / 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)
### 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)
---
### 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)
### 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)
---
### 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 bilo kakvih pitanja o izradi AI aplikacija, pridružite se ostalim polaznicima i iskusnim developerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
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.
Ovo spremište licencirano je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
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.
To je repozitorij izobraževalnega učnega načrta 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,ki pokrivajo JavaScript, CSS in HTML.
To je repozitorij izobraževalnega kurikuluma za poučevanje osnov spletnega razvoja začetnikom. Kurikulum je obsežen 12-tedenski tečaj, ki ga je razvila skupina Microsoft Cloud Advocates, in vsebuje 24 praktičnih lekcij o JavaScriptu, CSS-ju in HTML-ju.
### Ključne sestavine
### Ključne komponente
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module, ki temeljijo na projektih
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor in AI Chat Assistant
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (ocenjevanje pred/potem lekcije)
- **Večjezična podpora**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions
- **Praktični projekti**: Terrarij, igra tipkanja, razširitev brskalnika, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Samodejni prevodi v več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij z strukturo, ki temelji na lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti)
- Sistem prevajanja, ki uporablja GitHub Actions (co-op-translator)
- Dokumentacija je dostopna preko Docsify in na voljo kot PDF
- Izobraževalni repozitorij z strukturo, osnovano na lekcijah
- Vsaka mapa lekcije vsebuje datoteko README, primerke kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekcije)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija postrežena preko Docsify in na voljo kot PDF
## Ukazi za nastavitev
Ta repozitorij je namenjen predvsem za uporabo izobraževalne vsebine. Za delo s specifičnimi projekti:
Ta repozitorij je namenjen predvsem za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
### Nastavitev glavnega repozitorija
@ -37,11 +37,11 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # Zaženi razvojni strežnik
npm run build # Gradnja za produkcijo
npm run build # Sestavi za produkcijo
npm run lint # Zaženi ESLint
```
### Bank Project API (Node.js + Express)
### Banka Projekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,15 +51,15 @@ npm run lint # Zaženi ESLint
npm run format # Oblikuj s Prettierjem
```
### Projekti za razširitve brskalnika
### Projekti za razširitev brskalnika
```bash
cd 5-browser-extension/solution
npm install
# Sledite navodilom za nalaganje razširitev, specifičnih za brskalnik
# Sledite navodilom za nalaganje razširitev, specifičnim za brskalnik
```
### Projekti igre Space Game
### Projekti vesoljske igre
```bash
cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# Odprite index.html v brskalniku ali uporabite Live Server
```
### Chat projekt (Python Backend)
### Projekt Klepet (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -76,33 +76,33 @@ pip install openai
python api.py
```
## Razvojni potek dela
## Razvojni potek
### Za prispevke vsebin
### Za prispevke k vsebini
1. **Razveji repozitorij** na svoj GitHub račun
2. **Kloniraj svoj razvej** lokalno
3. **Ustvari novo vejo** za svoje spremembe
4. Naredi spremembe v vsebini lekcij ali primerih kode
5. Preizkusi spremembe kode v relevantnih projektnih imenikih
6. Pošlji pull requeste skladno z navodili za prispevke
1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno
3. **Ustvarite novo vejo** za svoje spremembe
4. Izvedite spremembe na vsebini lekcij ali primerih kode
5. Testirajte vse spremembe kode v ustreznih projektnih imenikih
6. Pošljite pull request po smernicah za prispevke
### Za učence
1. Razveji ali kloniraj repozitorij
2. Po vrsti obišči imenike lekcij
3. Preberi README datoteke za vsako lekcijo
4. Izpolni pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delaj skozi primere kode v mapah lekcij
6. Naredi naloge in izzive
7. Reši post-lekcijske kvize
1. Forkajte ali klonirajte repozitorij
2. Postopoma obiščite mape lekcij
3. Preberite datoteke README za vsako lekcijo
4. Opravite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delo z izvorno kodo v mapah lekcij
6. Opravite naloge in izzive
7. Opravite po-lekcijske kvize
### Razvoj v živo
### Živi razvoj
- **Dokumentacija**: zaženi`docsify serve` v korenski mapi (port 3000)
- **Quiz App**: zaženi`npm run dev` v imeniku quiz-app
- **Projekti**: uporabi VS Code Live Server razširitev za HTML projekte
- **API projekti**: zaženi`npm start` v ustreznih API imenikih
- **Dokumentacija**: Zaženite`docsify serve` v korenski mapi (port 3000)
- **Quiz App**: Zaženite`npm run dev` v imeniku quiz-app
- **Projekti**: Uporabite razširitev VS Code Live Server za HTML projekte
- **API Projekti**: Zaženite`npm start` v ustreznih API imenikih
## Navodila za testiranje
@ -110,173 +110,173 @@ python api.py
```bash
cd quiz-app
npm run lint # Preverite težave s slogom kode
npm run build # Preverite, ali se gradnja uspešno zaključi
npm run lint # Preveri morebitne težave s slogom kode
npm run build # Preveri, ali je gradnja uspešna
```
### Testiranje Bank API
### Testiranje Banka API
```bash
cd 7-bank-project/api
npm run lint # Preveri težave s slogom kode
node server.js # Preveri, če strežnik zažene brez napak
npm run lint # Preverite težave s slogom kode
node server.js # Preverite, ali se strežnik zažene brez napak
```
### Splošen pristop k testiranju
### Splošni pristop k testiranju
- To je izobraževalni repozitorij brez celovitih avtomatiziranih testov
- To je izobraževalni repozitorij brez obsežnih samodejnih testov
- Ročno testiranje se osredotoča na:
- Primeri kode se izvajajo brez napak
- Primerke kode tečejo brez napak
- Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno zgradijo
- Primeri sledijo najboljšim praksam
### Preverjanja pred oddajo
### Preverjanje pred oddajo
- Zaženi`npm run lint` v imenikih, kjer je package.json
- Preveri, da so markdown povezave veljavne
- Testiraj primere kode v brskalniku ali Node.js
- Preveri, da prevodi ohranjajo pravilno strukturo
- Zaženite `npm run lint` v imenikih z package.json
- Preverite, da so povezave v markdownu veljavne
- Testirajte primere kode v brskalniku ali Node.js
- Preverite, da prevodi ohranjajo pravilno strukturo
## Smernice za stil kode
### JavaScript
- Uporabi sodobno sintakso ES6+
- Sledi standardnim ESLint konfiguracijam, predvidenim v projektih
- Uporabi smiselna imena spremenljivk in funkcij za jasnost izobraževanja
- Dodaj komentarje, ki pojasnjujejo koncepte za učence
- Formatiraj z uporabo Prettier, kjer je konfigurirano
- Uporabljajte sodobno sintakso ES6+
- Sledite standardnim konfiguracijam ESLint, ki so v projektih
- Upodobite razumljiva imena spremenljivk in funkcij za boljšo izobraževalno jasnost
- Dodajte komentarje za razlago konceptov za učence
- Uporabljajte Prettier kjer je konfiguriran
### HTML/CSS
- Semantični HTML5 elementi
- Principi odzivnega oblikovanja
- Jasne konvencije poimenovanja razredov
- Komentarji, ki pojasnjujejo CSS tehnike za učence
- Semantični elementi HTML5
- Načela odzivne zasnove
- Jasna poimenovanja razredov
- Komentarji, ki pojasnjujejo tehnike CSS za učence
### Python
- Smernice za stil PEP 8
- Smernice sloga PEP 8
- Jasni, izobraževalni primeri kode
- Tipizacije tam, kjer pomagajo pri učenju
### Markdown dokumentacija
- Jasna hierarhija naslovov
- Bloki kode z označevanjem jezika
- Bloki kode z označitvijo jezika
- Povezave do dodatnih virov
- Posnetki zaslona in slike v imenikih `images/`
- Alt besedila za slike za dostopnost
- Posnetki zaslona in slike v mapah `images/`
- Alt besedilo za slike za dostopnost
### Organizacija datotek
- Lekcije so zaporedno oštevilčene (1-getting-started-lessons, 2-js-basics itd.)
- Vsak projekt ima imenike `solution/` in pogosto `start/` ali `your-work/`
- Slike so shranjene v lekcijsko specifičnih mapah `images/`
- Prevodi so v strukturi `translations/{language-code}/`
- Lekcije zaporedno številčene (1-getting-started-lessons, 2-js-basics, itd.)
- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike shranjene v lekcijsko-specifičnih mapah `images/`
- Prevodi v strukturi `translations/{jezikovna-koda}/`
## Gradnja in namestitev
### Namestitev Quiz App (Azure Static Web Apps)
quiz-app je konfiguriran za namestitev v Azure Static Web Apps:
Quiz-app je nastavljen za namestitev na Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Ustvari mapo dist/
# Izvede nameščanje preko GitHub Actions toka dela ob potisku na main
# Izvede namestitev preko GitHub Actions poteka dela ob potisku na main
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence
- Dodatni tečaji: Generativna AI, Data Science, ML, IoT učni načrti na voljo
- Dodatni tečaji: Generativna umetna inteligenca, podatkovna znanost, ML, IoT kurikuli na voljo
### Delo s specifičnimi projekti
### Delo z določenimi projekti
Za podrobna navodila za posamezne projekte 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)
Za podrobna navodila o posameznih projektih si oglejte datoteke README v:
- `quiz-app/README.md` - Vue 3 aplikacija zakvize
- `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 podlagi Canvas
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
### Struktura monorepo
### Struktura Monorepo
Čeprav to ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti si ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Kloniraj celoten repozitorij za celotno izkušnjo učnega načrta
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delajte na posameznih projektih brez vpliva na druge
- Klonite celoten repozitorij za popolno izkušnjo kurikuluma
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za avtomatski prevod [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem matičnem jeziku velja za avtoritativni vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za kakršna koli nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za pravilnost, upoštevajte, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v svojem matičnem jeziku velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključujte se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte pomnjenje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes!
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!
> Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Za kloniranje brez prevodov uporabite sparse checkout:
> Ta repozitorij vsebuje več kot 50 prevodov jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,174 +48,174 @@ Sledite tem korakom za začetek z uporabo teh virov:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Tako boste prejeli vse, kar potrebujete za dokončanje tečaja z veliko hitrejšim prenosom.
> 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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Si študent?_
Obišči [**Student Hub stran**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boš našel začetne vire, študentske pakete in celo načine, kako pridobiti brezplačen bon za certifikat. To je stran, ki si jo želiš zaznamovati in občasno preverjati, saj vsak mesec osvežujemo vsebino.
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.
### 📣 Obvestilo - Novi izzivi z uporabo načina GitHub Copilot Agent, ki jih je treba dokončati!
### 📣 Napoved – nove izzive načinov GitHub Copilot Agenta za dokončanje!
Dodali smo nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, da ga dokončate z uporabo GitHub Copilot in načina Agent. Če še nisi uporabljal načina Agent, je ta zmožen ne samo generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
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č.
### 📣 Obvestilo - _Novi projekt za izdelavo z uporabo generativne AI_
### 📣 Napoved –_nov projekt za gradnjo z generativno AI_
Dodali smo nov AI Asistent projekt, oglej si [projekt](./9-chat-project/README.md)
Novi AI Assistant projekt je pravkar dodan, poglej [projekt](./9-chat-project/README.md)
### 📣 Obvestilo - _Nov učni načrt_ o generativni AI za JavaScript je pravkar izšel
### 📣 Napoved –_nov učni načrt_ o generativni AI za JavaScript je pravkar izšel
Ne zamudite našega novega učnega načrta za generativno AI!
Ne zamudite naš novi učni načrt o generativni AI!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), da začneš!
Vsaka lekcija vključuje domačo nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem, kot so:
- Pozivi in načrtovanje pozivov
- Generiranje aplikacij z besedilom in slikami
- Iskalne aplikacije
Obišči [https://aka.ms/genai-js-course](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
- 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š!
## 🌱 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ši diskusijski skupini](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **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čni udeleženci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s predpredavanjem kviza in sledite z branjem gradiva predavanja ter izpolnjevanjem različnih dejavnosti in preverjajte svoje razumevanje s kvizom po predavanju.
**[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.
Za izboljšanje učne izkušnje se povežite s svojimi vrstniki in sodelujte pri projektih! Razprave so vabljene v naši [diskusijski skupini](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer bo naša skupina moderatorjev na voljo za odgovore na vaša vprašanja.
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 dodatno izobraževanje močno priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatna učna gradiva.
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.
### 📋 Nastavitev okolja
### 📋 Namestitev razvojnega okolja
Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izberete, da zaženete učni načrt v [Codespace](https://github.com/features/codespaces/) (_okolje, ki temelji na brskalniku, brez potrebe po nameščanju_), 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 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).
#### Ustvari svoj repozitorij
Da bi lahko enostavno shranjevali svoje delo, je priporočljivo, da ustvarite svoj lasten izvod tega repozitorija. To lahko storite s klikom na gumb **Use this template** na vrhu strani. S tem boste ustvarili nov repozitorij v svojem računu GitHub s kopijo učnega načrta.
#### 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.
Sledite tem korakom:
1. **Razvezi repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.
V svojem izvajanju tega repozitorija, ki ste ga ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. S tem bo za vas ustvarjen nov Codespace za delo.
V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za delo.
#### Zagon učnega načrta lokalno na svojem računalniku
#### Izvajanje učnega načrta lokalno na svojem računalniku
Da zaženete ta učni načrt lokalno na svojem računalniku, boste potrebovali urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja obrti](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsak od teh pripomočkov, da izberete tisto, kar vam najbolj ustreza.
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.
Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete 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 tako, da kliknete na gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png)
Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) znotraj [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<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) 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:
```bash
git clone <your-repository-url>
```
2. Odprite mapo v Visual Studio Code. To 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 tako, da kliknete **File** > **Open Folder** in izberete mapo, ki ste jo pravkar klonirali.
> Priporočeni dodatki za Visual Studio Code:
> Priporočene razširitve Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - da vam pomaga hitreje pisati kodo
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoč pri hitrejšem pisanju kode
## 📂 Vsaka lekcija vključuje:
- neobvezno skiciranje
- neobvezni dodatni video
- predpripravljalni kviz pred lekcijo
- ogrevalni kviz pred lekcijo
- pisno lekcijo
- za lekcije, ki temeljijo na projektih, korak za korakom vodiče, kako zgraditi projekt
- pri lekcijah, temelječih na projektih, 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 v mapi Quiz-app, skupno 48 kvizov s tremi vprašanji vsak. Dostopni so [tukaj](https://ff-quizzes.netlify.app/web/), aplikacijo kvizov lahko zaženete lokalno ali jo objavite na Azure; sledite navodilom v mapi `quiz-app`.
> **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`.
## 🗃️ Lekcije
| | Ime projekta | Naučeni koncepti | Cilji učenja | Povezana lekcija | Avtor |
| | Ime projekta | Poučeni koncepti | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in razvojna orodja | Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri njihovem delu | [Uvod v programske jezike in razvojna orodja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHub, vključno z delom v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na izvorni kodi | [Uvod v GitHub](./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 |
| 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 svoji kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScript | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na postavitev | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za stilizacijo spletnega terrarija, osredotočite se na osnove CSS in prilagodljivost strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprtja, manipulacija DOM | Zgradite JavaScript, da ustvari funkcionalno terrarijsko povleci in spusti vmesnik, osredotočite se na zaprtja in manipulacijo DOM | [JavaScript zaprtja, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradi igro tipkanja | Naučite se uporabljati dogodke s tipkovnice za upravljanje logike vaše JavaScript aplikacije| [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Izgradnja obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente svoje brskalniške razširitve za klic API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, zmogljivost spletnih strani | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; spoznajte zmogljivost spletnih strani in nekatere optimizacije za izboljšanje | [Ozadna opravila in zmogljivost](./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 | Naučite se o dediščini z uporabo razredov in kompozicije ter vzorca Pub/Sub, kot priprava za izdelavo igre | [Uvod v napredni razvoj iger](./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 elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaznavanje trkov | Poskrbite, da se elementi trčijo in medsebojno odzivajo z uporabo pritiskov tipk ter zagotovite funkcijo ohlajevanja za boljšo zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Spremljanje rezultata | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre | [Spremljanje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaključevanje in ponovni začetek igre | Spoznajte o zaključevanju in ponovnem zagonu igre, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | [Pogoj konca](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Naučite se, kako ustvariti osnovno arhitekturo večstraničnega spletišča z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Ustvari obrazec za prijavo in registracijo | Spoznajte gradnjo obrazcev in upravljanje validacij | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška 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čniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako aplikacija ohranja stanje in kako ga programsko upravljati| [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Urejanje kode brskalnik/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode| [Uporaba urejevalnika kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI pomočniki](./9-chat-project/README.md) | Delo z AI | Naučite se izdelati lastnega AI pomočnika | [Projekt AI pomočnika](./9-chat-project/README.md) | Chris |
| 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 |
| 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 temelji na dveh ključnih pedagoških načelih:
* učenje preko projektov
Naš učni načrt je zasnovan z dvema ključnima pedagoškima načeloma:
* učenje, usmerjeno v projekte
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji razvijalci spletnih strani. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne brskalniške razširitve, igre v slogu invazije vesoljcev in bančne aplikacije za podjetja. Ob koncu serije bodo študenti pridobili trdno razumevanje razvoja spletnih strani.
> 🎓 Prvih nekaj lekcij tega učnega načrta lahko opravite kot [pot učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
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.
Z zagotavljanjem, da vsebina ustreza projektom, je postopek za študente bolj zanimiv in se bo povečalo zadrževanje konceptov. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, ob njih pa je video iz zbirke "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video vodičev, katerih nekateri avtorji so prispevali k temu učnemu načrtu.
> 🎓 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!
Poleg tega kviz z nizkim vložkom pred razredom usmeri študentovo namero k učenju teme, medtem ko drugi kviz po pouku zagotovi nadaljnje zadrževanje. Ta učni načrt je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo vse bolj zapleteni do konca 12-tedenskega cikla.
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.
Medtem ko smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodij, bi bil dober naslednji korak za dokončanje tega učnega načrta spoznavanje Node.js prek druge zbirke videov: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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.
> Obiščite naše smernice [Kodeksa obnašanja](CODE_OF_CONDUCT.md) in [Prispevkov](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
Č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 [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejte ta repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni računalnik in nato v root mapi tega repozitorija zaženite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
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`.
## 📘 PDF
PDF vseh lekcij je na voljo [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
Naša ekipa pripravlja še druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -224,56 +224,56 @@ Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenti
### Azure / Edge / MCP / Agentje
[](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)
---
### Serija generativne umetne inteligence
[](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)
### 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)
---
### Osnovno učenje
[](https://aka.ms/ml-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://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)
---
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
### Copilot serija
[](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 vprašanja o ustvarjanju AI aplikacij. Pridružite se sošolcem in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla in kjer si znanje svobodno delimo.
Če 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.
Ta repozitorij ima licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
Ta repozitorij je licenciran pod licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
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, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v matičnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
**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.
Ово је репозиторијум едукативног наставног плана за подучавање основа веб развоја почетницима. Наставни план је свеобухватан курс од 12 недеља, који су развили Microsoft Cloud Advocates, и садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
Ovo je repozitorijum obrazovnog kurikuluma za podučavanje osnova web razvoja za početnike. Kurikulum je sveobuhvatan 12-nedeljski kurs koji su razvili Microsoft Cloud Advocates, i sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Кључне компоненте
### Ključne komponente
- **Едукативни садржај**: 24 структуриране лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Тераријум, Игра куцања, Прегледачки екстензија, Свемирска игра, Банкарска апликација, Уредник кода и AI асистент за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања (процене пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за 50+ језика путем GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizovane u module zasnovane na projektima
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (testovi pre i posle lekcija)
- **Podrška za više jezika**: Automatski prevodi 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
- Едукативни репозиторијум са структуом по лекцијама
- Свака фасцикла лекције садржи README, примере кода и решења
- Самостални пројекти у посебним директоријумима (quiz-app, различити пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација доступна преко Docsify и у PDF формату
- Obrazovni repozitorijum sa strukturom baziranom na lekcijama
- Svaka fascikla lekcije sadrži README, primere koda i rešenja
- Samostalni projekti u posebnim direktorijumima (quiz-app, različiti projekti lekcija)
- Sistem za prevod koristeći GitHub Actions (co-op-translator)
- Dokumentacija se servisira putem Docsify i dostupna je kao PDF
## Команде за подешавање
## Komande za podešavanje
Овај репозиторијум је првенствено намењен за конзумирање едукативног садржаја. За рад са специфичним пројектима:
Ovaj repozitorijum je prvenstveno za konzumiranje obrazovnog sadržaja. Za rad sa određenim projektima:
За детаљна упутства о појединачним пројектима, погледајте 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 асистента за чет
Za detaljna uputstva o pojedinačnim projektima, pogledajte README fajlove u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
- `7-bank-project/README.md` - Bankarska aplikacija sa autentifikacijom
- `5-browser-extension/README.md` - Razvoj browser ekstenzije
- `6-space-game/README.md` - Razvoj igre bazirane na Canvas-u
- `9-chat-project/README.md` - AI chat asistent projekat
### Монорепо структура
### Struktura monorepozitorijuma
Иако није класично монорепо, овај репозиторијум садржи више независних пројеката:
- Свака лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за потпуно искуство наставног плана
Iako nije tradicionalni monorepo, ovaj repozitorijum sadrži više nezavisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dele zavisnosti
- Radite na pojedinačnim projektima bez uticaja na ostale
- Klonirajte ceo repozitorijum za potpuno iskustvo kurikuluma
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Искључење одговорности**:
Овај документ је преведен помоћу AI сервиса за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразумевања или погрешне интерпретације које произлазе из коришћења овог превода.
**Одрицање**:
Овај документ је превео вештачки преводилац [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом матерњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било какве неспоразуме или погрешне тумачења настала употребом овог превода.
Нauчите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улазеу JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења за прегледаче и свемирске игре. Укључите сеу квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну методологију засновану на пројектима. Почните своје путовање у програмирање већ данас!
Научите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улази у JavaScript, CSS и HTML кроз пројекте попут тераријума, проширења за прегледаче и свемирских игара. Учествујте у квизовима, дискусијама и практичним задацима. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогју засновану на пројектима. Започните своје кодирање већ данас!
> Овај репозиторијум садржи 50+ превода на језике што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> Овај репозиторијум укључује преко 50 превода што значајно повећава величину преузимања. Да бисте клонирали без превода користите sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,41 +48,42 @@
> 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 Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете наћи ресурсе за почетнике, Student пакете па чак и начине да добијете бесплатан сертификат. Ово је страница коју треба да обележите и са времена на време проверите како бисте пратити новинејер месечно мењамо садржај.
### 📣 Обавештење - Нови изазови GitHub Copilot Agent мода за завршетак!
### 📣 Објава – Нови изазови у GitHub Copilot Agent режиму!
Додат је нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршите коришћењем GitHub Copilot и Agent мода. Ако раније нисте користили Agent мод, он није само за генерисање текста већ може и да креира и уређује фајлове, извршава команде и још много тога.
Додат је нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он није способан само да генерише текст, већ и да креира и уређује фајлове, извршава команде и још много тога.
Свака лекција укључује задатак за завршетак, проверу знања и изазов који ће вас усмеравати у учењу тема као што су:
- Писање упита и инжењеринг упита
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води у учењу тема као што су:
- Креирање упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претрагу
@ -90,180 +91,180 @@
## 🌱 Почетак
## 🌱 Почетак рада
> **Наставници**, дали смо [неке предлоге](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" у горњем десном углу ове странице.
У својој копији репозиторијума коју сте направили, кликните на дугме **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) као уређивач, који такође има уграђени [Терминал](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** и копирањем УРЛ-а:
Наш предлогје да користите [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-а:
[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>`УРЛ-ом који сте управо копирали:
Затим, отворите [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) - за помоћ у бржем писању кода
> * [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) - за брже писање кода
## 📂 Свака лекција укључује:
## 📂 Свaка лекција укључује:
- опционалну скицноту
- опционалну скетчноту
- опционални додатни видео
- припремни квиз пре лекције
- квиз за загревање пре лекције
- писану лекцију
- за лекције засноване на пројекту, корак по корак упутства како изградити пројекат
- за пројектно оријентисане лекције, корак-по-корак упутства како направити пројекат
- провере знања
- изазов
- додатно читање
- задатак
- [квиз после лекције](https://ff-quizzes.netlify.app/web/)
- [квиз након лекције](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) | 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 | JS Основе | Врсте података у JavaScript-у | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Сазнајте о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | JS Основе | Доношење одлука у JS-у | Научите како да користите услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима помоћу низова и петљи у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стил тераријума, фокусирајући се на основе CSS-а укључујући додавање респонзивности страницама | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./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 | [Игра куцања](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како да искористите тастатурне догађаје за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Сазнајте како прегледачи раде, њихову историју и како створити прве елементе проширења за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Креирање форме, позивање API-ја и складиштење променљивих у локалну меморију | Направите JavaScript елементе ваше екстензије за позивање API користећи променљиве у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом екстензије; научите о веб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напреднија израда игре у JavaScript-у | Научите о наследству користећи и класе и композицију и Pub/Sub образац, као припрему за израду игре | [Увод у напредну израду игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну (canvas) | Научите о Canvas API-ју, који се користи за цртање елемената на екрану | [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Премештање елемената по екрану | Откријте како елементи добијају кретање користећи картизне координате и Canvas API | [Премештање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Учини да се елементи сударају и реагују један на други користећи притиске тастера и обезбедите функцију хладног периода за глaдко функционисање игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Водити резултат | Обављај математичке операције на основу статуса и перформанси игре | [Води резултат](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре| Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како направити структуру више страница у вебсајту користећи рутирање и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како изградити форме и руковати валидацијом | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Начини дохвата и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, складиштити и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем (state management) | Научите како ваша апликација задржава стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Прегледач/VScode кôд](../../8-code-editor) | Рад са VScode-ом | Научите како користити уређивач кôда | [Употреба VScode уређивача кôда](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI асистенти](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогија
Наш наставни план и програм је дизајниран са два кључна педагошка принципау виду:
* учење засновано на пројектима
| | Назив пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| 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) | Крис |
## 🏫 Педагошка метода
Наш наставни план је дизајниран уз два кључна педагошка принципа:
* учење кроз пројекте
* чести квизови
Програм учи основе 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 основама за упознавање концепата, упарених са видео снимком из серије "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" колекције видео туторијала, чији су аутори допринели овом курикулуму.
Обезбеђивањем упаривања садржаја са пројектима, процес је занимљивији за студенте и повећава задржавање концепата. Такође смо написали неколико уводних лекција оосновама JavaScript-а и пар њих повезали са видео серјом "[Беџинер серија за: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чији су неки аутори допринели овом курикулуму.
Поред тога, квиз са малим улогом пре часа усмерава фокус студента ка учењу теме, док други квиз после часа обезбеђује даље задржавање. Овај курикулум је дизајниран да буде флексибилан и забаван и може сеузети у целини или делимично. Пројекти почињу мали и постају све комплекснији крајем 12 недељног циклуса.
Поред тога, ниско-притисни квиз пре часа поставља намјеру студента према учењу теме, док други квиз након часа осигурава даље задржавање. Овај курикулум је дизајниран да буде флексибилан и забаван и може сепроћи у целини или делимично. Пројекти почињу мали и постају све комплекснији до краја 12-недељног циклуса.
Иако смо намеравано избегли увођење JavaScript фрејмворка како бисмо се концентрисали на основне вештине које су потребне веб програмеру пре него што пређу на неки фрејмворк, добар следећи корак након овог курикулума био би учење о Node.js помоћу друге колекције видео записа: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Иако смо намерно избегли увод у JavaScript оквире да бисмо се концентрисали на основне вештине потребне као веб програмер пре прихватања оквира, добар следећи корак у завршетку овог курикулума био би учење о Node.js преко друге серије видеа: "[Беџинер серија за: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетите наше смернице [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошли су ваши конструктивни предлози!
> Посетите наша упутства о [Коду понашања](CODE_OF_CONDUCT.md) и [Прилози](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:3000`.
## 📘 PDF
PDF svih lekcija можете пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF svih lekcija možete pronaћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Други курсеви
## 🎒 Остали курсеви
Наш тим производи и друге курсеве! Погледајте:
<!-- 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 / 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)
### 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)
---
### Серти генеративног 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://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)
[](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/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-у. Тоје подршка заједница где су питања добродошла и знање се слободно дели.
Ако запнете или имате питања о прављењу AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели.
@ -274,6 +275,6 @@ PDF svih lekcija можете пронаћи [овде](https://microsoft.github
---
<!-- 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). Иако се трудимо да превод буде тачан, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом материњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Не сносимо одговорност за било каква неразумевања или погрешне интерпретације настале употребом овог превода.
localizeflow[bot]
3 months ago