chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

pull/1781/head
localizeflow[bot] 5 months ago
parent 5229fca32b
commit a7c4aacfb1

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T23:38:18+00:00", "translation_date": "2026-04-06T17:00:55+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "hr" "language_code": "hr"
}, },
@ -516,8 +516,8 @@
"language_code": "hr" "language_code": "hr"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T15:02:12+00:00", "translation_date": "2026-04-06T16:56:27+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "hr" "language_code": "hr"
}, },

@ -2,56 +2,56 @@
## Pregled projekta ## Pregled projekta
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 ### Ključne komponente
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima - **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 - **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 (prije/poslije lekcije) - **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (evaluacije prije i poslije lekcija)
- **Podrška za više jezika**: Automatski prijevodi za 50+ jezika preko GitHub Actions - **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) - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura ### Arhitektura
- Edukativni repozitorij s organizacijom po lekcijama - Edukacijski repozitorij s lekcijskom strukturom
- Svaka mapa lekcije sadrži README, primjere koda i rješenja - Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija) - Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav za prijevod koristeći GitHub Actions (co-op-translator) - Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna preko Docsify i kao PDF - Dokumentacija dostupna preko Docsify i kao PDF
## Komande za postavljanje ## 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:
### Glavno postavljanje repozitorija ### Postavljanje glavnog repozitorija
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Postavljanje Quiz app (Vue 3 + Vite) ### Postavljanje Quiz aplikacije (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Pokreni razvojni server npm run dev # Pokreni razvojni poslužitelj
npm run build # Izgradi za produkciju npm run build # Izgradi za produkciju
npm run lint # Pokreni ESLint npm run lint # Pokreni ESLint
``` ```
### Bank Project API (Node.js + Express) ### Bankovni projekt API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Pokreni API poslužitelj npm start # Pokreni API server
npm run lint # Pokreni ESLint npm run lint # Pokreni ESLint
npm run format # Formatiraj s Prettierom npm run format # Formatiraj s Prettierom
``` ```
### Projekti browser ekstenzija ### Projekti ekstenzija za preglednik
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# Slijedite upute za učitavanje proširenja specifične za preglednik # Slijedite upute za učitavanje proširenja specifične za preglednik
``` ```
### Projekti Space game ### Projekti svemirske igre
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -67,46 +67,46 @@ npm install
# Otvorite index.html u pregledniku ili koristite Live Server # Otvorite index.html u pregledniku ili koristite Live Server
``` ```
### Chat projekt (Python backend) ### Chat projekt (Python Backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Postavite varijablu okoline GITHUB_TOKEN # Postavi GITHUB_TOKEN varijablu okoline
python api.py python api.py
``` ```
## Razvojni tijek rada ## Radni tijek razvoja
### Za suradnike na sadržaju ### Za suradnike na sadržaju
1. **Forkajte repozitorij** na svoj GitHub račun 1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno 2. **Klonirajte svoj fork** lokalno
3. **Napravite novu granu** za svoje promjene 3. **Napravite novu granu** za svoje promjene
4. Izvršite izmjene u sadržaju lekcija ili primjerima koda 4. Izmijenite sadržaj lekcija ili primjere koda
5. Testirajte promjene koda u relevantnim direktorijima projekata 5. Testirajte promjene koda u relevantnim direktorijima projekata
6. Podnesite pull request slijedeći smjernice za doprinos 6. Pošaljite pull requestove prateći smjernice za doprinos
### Za učenike ### Za učenike
1. Forkajte ili klonirajte repozitorij 1. Forkajte ili klonirajte repozitorij
2. Krenite redom kroz mape lekcija 2. Redom prolazite kroz direktorije lekcija
3. Pročitajte README datoteke za svaku lekciju 3. Čitajte README datoteke za svaku lekciju
4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/ 4. Riješite pred-lezijske kvizove na https://ff-quizzes.netlify.app/web/
5. Prođite kroz primjere koda u mapama lekcija 5. Prođite primjere koda u mapama lekcija
6. Završite zadatke i izazove 6. Ispratite zadatke i izazove
7. Riješite kvizove nakon lekcije 7. Odgovorite na post-lezijske kvizove
### Razvoj u stvarnom vremenu ### Aktivni razvoj
- **Dokumentacija**: Pokrenite `docsify serve` u root direktoriju (port 3000) - **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju - **Quiz App**: Pokrenite `npm run dev` u direktoriju quiz-app
- **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte - **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte
- **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima - **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima
## Upute za testiranje ## Upute za testiranje
### Testiranje Quiz app ### Testiranje Quiz aplikacije
```bash ```bash
cd quiz-app cd quiz-app
@ -114,169 +114,169 @@ npm run lint # Provjerite ima li problema sa stilom koda
npm run build # Provjerite je li izgradnja uspješna npm run build # Provjerite je li izgradnja uspješna
``` ```
### Testiranje Bank API ### Testiranje Bank API-ja
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Provjeri probleme sa stilom koda npm run lint # Provjerite probleme sa stilom koda
node server.js # Provjeri da li se server pokreće bez grešaka node server.js # Provjerite pokreće li se server bez pogrešaka
``` ```
### Opći pristup testiranju ### Opći pristup testiranju
- Ovo je edukativni repozitorij bez potpune automatizirane testne pokrivenosti - Ovo je edukacijski repozitorij bez sveobuhvatnih automatiziranih testova
- Ručno testiranje fokusira se na: - Ručno testiranje fokusira se na:
- Primjere koda da se izvršavaju bez grešaka - Primjere koda koji se izvršavaju bez grešaka
- Da linkovi u dokumentaciji rade ispravno - Ispravnost linkova u dokumentaciji
- Da se projekti mogu uspješno buildati - Uspješno dovršen build projekata
- Primjere koji slijede najbolje prakse - Primjere u skladu s najboljim praksama
### Provjere prije podnošenja ### Provjere prije slanja
- Pokrenite `npm run lint` u direktorijima s package.json - Pokrenite `npm run lint` u direktorijima s package.json
- Provjerite valjanost markdown linkova - Provjerite valjanost markdown linkova
- Testirajte primjere koda u pregledniku ili Node.js - Testirajte primjere koda u pregledniku ili Node.js
- Provjerite održavanje strukture u prijevodima - Provjerite da prijevodi održavaju ispravnu strukturu
## Smjernice za stil kodiranja ## Smjernice za stil koda
### JavaScript ### JavaScript
- Koristite modernu ES6+ sintaksu - Koristite modernu ES6+ sintaksu
- Slijedite standardne ESLint konfiguracije iz projekata - Pridržavajte se standardnih ESLint konfiguracija u projektima
- Koristite smisleno imenovanje varijabli i funkcija radi bolje edukativne jasnoće - Koristite značenjem bogate nazive varijabli i funkcija za edukativnu jasnoću
- Dodajte komentare koji objašnjavaju koncepte za učenike - Dodajte komentare koji objašnjavaju koncepte za učenike
- Formatirajte kod koristeći Prettier gdje je konfigurirano - Formatirajte kod pomoću Prettiera gdje je konfigurirano
### HTML/CSS ### HTML/CSS
- Semantički HTML5 elementi - Semantički HTML5 elementi
- Principi responzivnog dizajna - Principi responzivnog dizajna
- Jasne konvencije imenovanja klasa - Jasan sustav imenovanja klasa
- Komentari koji objašnjavaju CSS tehnike za učenike - Komentari koji pojašnjavaju CSS tehnike za učenike
### Python ### Python
- Smjernice za stil PEP 8 - Slijedite PEP 8 stil
- Jasni, edukativni primjeri koda - Jasni, edukativni primjeri koda
- Tipizacija tamo gdje je korisna za učenje - Tipizacija gdje pomaže za učenje
### Markdown dokumentacija ### Markdown dokumentacija
- Jasna hijerarhija naslova - Jasna hijerarhija naslova
- Blokovi koda s označenim jezikom - Blokovi koda s označenim jezikom
- Linkovi na dodatne izvore - Linkovi na dodatne resurse
- Screenshoti i slike u mapama `images/` - Screenshoti i slike u mapama `images/`
- Alt tekst za slike radi pristupačnosti - Alt tekst za slike radi pristupačnosti
### Organizacija datoteka ### Organizacija datoteka
- Lekcije numerirane sekvencijalno (1-getting-started-lessons, 2-js-basics, itd.) - Lekcije numerirane uzlazno (1-getting-started-lessons, 2-js-basics itd.)
- Svaki projekt ima mape `solution/` i često `start/` ili `your-work/` - Svaki projekt sadrži `solution/` i često `start/` ili `your-work/` mape
- Slike pohranjene u lekcijski specifičnim mapama `images/` - Slike pohranjene u mapama `images/` specifičnim za lekciju
- Prijevodi u strukturi `translations/{language-code}/` - Prijevodi u strukturi `translations/{language-code}/`
## Izrada i deploy ## Izgradnja i implementacija
### Deploy Quiz app (Azure Static Web Apps) ### Implementacija Quiz aplikacije (Azure Static Web Apps)
quiz-app je podešen za Azure Static Web Apps deployment: Quiz-app je konfigurirana za implementaciju na Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Stvara mapu dist/ npm run build # Stvara mapu dist/
# Postavlja putem GitHub Actions tijeka rada pri pushanju na main # Raspoređuje putem GitHub Actions workflow-a prilikom push-a na main
``` ```
Konfiguracija Azure Static Web Apps: Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app` - **Lokacija aplikacije**: `/quiz-app`
- **Lokacija izlaza**: `dist` - **Izlazna mapa**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije ### Generiranje PDF dokumentacije
```bash ```bash
npm install # Instalirajte docsify-to-pdf npm install # Instalirajte docsify-to-pdf
npm run convert # Generiraj PDF iz docsa npm run convert # Generirajte PDF iz docsa
``` ```
### Docsify dokumentacija ### Docsify dokumentacija
```bash ```bash
npm install -g docsify-cli # Instalirajte Docsify globalno npm install -g docsify-cli # Globalno instalirajte Docsify
docsify serve # Poslužite na localhost:3000 docsify serve # Poslužite na localhost:3000
``` ```
### Build specifični za projekte ### Svojstvene gradnje projekata
Svaki direktorij projekta može imati svoj build proces: Svaki projekt može imati svoj proces izgradnje:
- Vue projekti: `npm run build` kreira produkcijske bundleove - Vue projekti: `npm run build` kreira produkcijske bundle
- Statički projekti: Nema build koraka, služenje datoteka direktno - Statički projekti: Nema izgradnje, datoteke se serviraju direktno
## Smjernice za pull requestove ## Smjernice za pull request
### Format naslova ### Format naslova
Koristite jasne, opisne naslove koji označavaju područje izmjene: Koristite jasne, opisne naslove koji označavaju područje promjene:
- `[Quiz-app] Dodaj novi kviz za lekciju X` - `[Quiz-app] Dodaj novi kviz za lekciju X`
- `[Lesson-3] Ispravi tipfelere u terrarium projektu` - `[Lesson-3] Ispravi tipfeler u terrarium projektu`
- `[Translation] Dodaj španjolski prijevod za lekciju 5` - `[Translation] Dodaj španjolski prijevod za lekciju 5`
- `[Docs] Ažuriraj upute za postavljanje` - `[Docs] Ažuriraj upute za postavljanje`
### Potrebne provjere ### Potrebne provjere
Prije podnošenja PR-a: Prije slanja PR-a:
1. **Kvaliteta koda**: 1. **Kvaliteta koda**:
- Pokrenite `npm run lint` u pogođenim projekt direktorijima - Pokrenite `npm run lint` u pogođenim direktorijima projekata
- Ispravite sve lint greške i upozorenja - Ispravite sve linting greške i upozorenja
2. **Provjera builda**: 2. **Provjera builda**:
- Pokrenite `npm run build` ako je primjenjivo - Pokrenite `npm run build` ako je primjenjivo
- Osigurajte da nema build grešaka - Provjerite da nema grešaka u buildu
3. **Provjera linkova**: 3. **Validacija linkova**:
- Testirajte sve markdown linkove - Testirajte sve markdown linkove
- Provjerite da reference na slike rade - Provjerite ispravnost referenci na slike
4. **Pregled sadržaja**: 4. **Pregled sadržaja**:
- Provjerite pravopis i gramatiku - Le Korrekture pravopisa i gramatike
- Potvrdite da su primjeri koda točni i edukativni - Osigurajte da su primjeri koda točni i edukativni
- Osigurajte da prijevodi zadržavaju izvornu poruku - Provjerite da prijevodi točno prenose značenje
### Zahtjevi za doprinos ### Zahtjevi za doprinos
- Prihvatite Microsoft CLA (automatska provjera pri prvom PR-u) - Prihvatite Microsoft CLA (automatska provjera kod prvog PR-a)
- Slijedite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Pridržavajte se [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice - Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice
- Referencirajte brojeve issue-a u opisu PR-a ako je primjenjivo - Uključite brojeve problema u opis PR-a ako je primjenjivo
### Proces pregleda ### Proces pregleda
- PR-ove pregledavaju maintaineri i zajednica - PR-ove pregledavaju održavatelji i zajednica
- Prioritet je edukativna jasnoća - Prioritet je edukativna jasnoća
- Primjeri koda trebaju slijediti aktualne najbolje prakse - Primjeri koda trebaju slijediti aktualne najbolje prakse
- Prijevodi se pregledavaju radi točnosti i prikladnosti kulture - Prijevodi se pregledavaju zbog točnosti i kulturne prikladnosti
## Sustav prijevoda ## Sustav prijevoda
### Automatski prijevod ### Automatski prijevod
- Koristi GitHub Actions s co-op-translator workflowom - Koristi GitHub Actions s co-op-translator workflowom
- Automatski prevodi na 50+ jezika - Automatski prevodi na 50+ jezika
- Izvorne datoteke u glavnim direktorijima - Izvorne datoteke u glavnim direktorijima
- Prevedene datoteke u mapama `translations/{language-code}/` - Prevedene datoteke u `translations/{language-code}/` direktorijima
### Dodavanje ručnih poboljšanja prijevoda ### Dodavanje ručnih poboljšanja prijevoda
1. Pronađite datoteku u `translations/{language-code}/` 1. Pronađite datoteku u `translations/{language-code}/`
2. Napravite poboljšanja dok čuvate strukturu 2. Izvršite poboljšanja uz očuvanje strukture
3. Osigurajte da primjeri koda ostaju funkcionalni 3. Provjerite da primjeri koda ostaju funkcionalni
4. Testirajte lokalizirani kviz sadržaj 4. Testirajte lokalizirani sadržaj kvizova
### Metapodaci prijevoda ### Metapodaci prijevoda
Prevedene datoteke sadrže zaglavlje metapodataka: Prevedene datoteke sadrže zaglavlje metapodataka:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
--> -->
``` ```
## Otklanjanje pogrešaka i rješavanje problema ## Debugiranje i rješavanje problema
### Uobičajeni problemi ### Česti problemi
**Quiz app se ne pokreće**: **Quiz aplikacija se ne pokreće**:
- Provjerite verziju Node.js (preporučeno v14+) - Provjerite verziju Node.js (preporuka v14+)
- Izbrišite `node_modules` i `package-lock.json`, zatim pokrenite `npm install` ponovno - Obrišite `node_modules` i `package-lock.json`, pokrenite ponovno `npm install`
- Provjerite konflikt porta (default: Vite koristi port 5173) - Provjerite konflikte portova (zadano: Vite koristi port 5173)
**API server se ne pokreće**: **API server se ne pokreće**:
- Provjerite je li verzija Node.js minimalno node >=10 - Provjerite minimalnu verziju Node.js (node >=10)
- Provjerite koristi li neko drugi već port - Provjerite je li port zauzet
- Osigurajte da su sve ovisnosti instalirane s `npm install` - Osigurajte da su sve ovisnosti instalirane s `npm install`
**Browser ekstenzija se ne učitava**: **Ekstenzija preglednika se ne učitava**:
- Provjerite da je manifest.json pravilno formatiran - Provjerite je li manifest.json ispravno formatiran
- Provjerite konzolu preglednika radi grešaka - Provjerite konzolu preglednika za greške
- Slijedite upute za instalaciju specifične za preglednik - Slijedite upute za instalaciju ekstenzija za konkretan preglednik
**Problemi s Python chat projektom**: **Problemi s chat projektom u Pythonu**:
- Provjerite je li instaliran OpenAI paket: `pip install openai` - Osigurajte da je paket OpenAI instaliran: `pip install openai`
- Provjerite je li varijabla okoline GITHUB_TOKEN postavljena - Provjerite je li postavljena varijabla okoline GITHUB_TOKEN
- Provjerite pristupni token za GitHub modele - Provjerite dozvole pristupa GitHub Models
**Docsify ne prikazuje dokumentaciju**: **Docsify ne prikazuje dokumente**:
- Instalirajte docsify-cli globalno: `npm install -g docsify-cli` - Instalirajte docsify-cli globalno: `npm install -g docsify-cli`
- Pokrenite iz root direktorija repozitorija - Pokrenite iz korijena repozitorija
- Provjerite postoji li `docs/_sidebar.md` - Provjerite postoji li `docs/_sidebar.md`
### Savjeti za razvojno okruženje ### Savjeti za razvojno okruženje
- Koristite VS Code s Live Server ekstenzijom za HTML projekte - Koristite VS Code s Live Server ekstenzijom za HTML projekte
- Instalirajte ESLint i Prettier ekstenzije za konzistentno formatiranje - Instalirajte ESLint i Prettier ekstenzije za dosljedno formatiranje
- Koristite browser DevTools za debugiranje JavaScript-a - Koristite DevTools preglednika za debugiranje JavaScript-a
- Za Vue projekte instalirajte Vue DevTools ekstenziju u preglednik - Za Vue projekte instalirajte Vue DevTools ekstenziju preglednika
### Razmatranja performansi ### Performanse
- Velik broj prevedenih datoteka (50+ jezika) znači velike full clone-ove - Velik broj prevedenih datoteka (50+ jezika) znači da su puni klonovi veliki
- Koristite shallow clone ako radite samo na sadržaju: `git clone --depth 1` - Koristite shallow clone ako radite samo na sadržaju: `git clone --depth 1`
- Isključite prijevode iz pretraživanja kada radite na engleskom sadržaju - Izuzmite prijevode iz pretraživanja prilikom rada na engleskom sadržaju
- Build procesi mogu biti spori pri prvom pokretanju (npm install, Vite build) - Procesi buildanja mogu biti spori pri prvom pokretanju (npm install, Vite build)
## Sigurnosne napomene ## Sigurnosne napomene
### Okolišne varijable ### Varijable okoline
- API ključevi nikada ne smiju biti komitirani u repozitorij - API ključevi se nikada ne smiju komitirati u repozitorij
- Koristite `.env` datoteke (već u `.gitignore`) - Koristite `.env` datoteke (već u `.gitignore`)
- Dokumentirajte potrebne okolišne varijable u README-ima projekata - Dokumentirajte potrebne varijable okoline u README-ima projekata
### Python projekti ### Python projekti
- Koristite virtualna okruženja: `python -m venv venv` - Koristite virtualna okruženja: `python -m venv venv`
- Održavajte ovisnosti ažurnima - Održavajte ovisnosti ažurirane
- GitHub tokeni trebaju imati minimalna potrebna dopuštenja - GitHub tokeni trebaju imati minimalne potrebne dozvole
### Pristup GitHub modelima ### Pristup GitHub Models
- Potrebni su Personal Access Tokens (PAT) za GitHub modele - Za GitHub Models potrebni su Personal Access Tokeni (PAT)
- Tokene treba čuvati kao okolišne varijable - Tokeni se trebaju pohraniti kao varijable okoline
- Nikada nemojte komitirati tokene ili pristupne podatke - Nikad ne komitirajte tokene ili pristupne podatke
## Dodatne napomene ## Dodatne napomene
### Ciljana publika ### Ciljana publika
- Potpuni početnici u web razvoju - Potpuni početnici u web razvoju
- Studenti i samouki učenici - Studenti i samouki učenici
- Nastavnici koji koriste kurikulum u učionicama - Nastavnici koji koriste kurikulum u učionicama
- Sadržaj je dizajniran za pristupačnost i postupno usvajanje vještina - Sadržaj je dizajniran za pristupačnost i postupno izgrađivanje vještina
### Edukativna filozofija ### Edukativna filozofija
- Pristup temeljen na projektima - Projektno učenje
- Česti provjeri znanja (kvizovi) - Česte provjere znanja (kvizovi)
- Praktične vježbe kodiranja - Praktične vježbe kodiranja
- Primjeri primjene u stvarnom svijetu - Primjeri primjene u stvarnom svijetu
- Fokus na temelje prije frameworka - Fokus na osnovama prije frameworka
### Održavanje repozitorija ### Održavanje repozitorija
- Aktivna zajednica učenika i suradnika - Aktivna zajednica učenika i suradnika
- Redovita ažuriranja ovisnosti i sadržaja - Redovna ažuriranja ovisnosti i sadržaja
- Pratiti issue-e i diskusije maintaineri - Problemi i diskusije nadzirani od strane održavatelja
- Ažuriranja prijevoda automatizirana preko GitHub Actions - Ažuriranja prijevoda automatizirana putem GitHub Actions
### Povezani resursi ### Povezani resursi
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) - [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub resursi](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resursi](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučen za učenike - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučen za učenike
- Dodatni tečajevi: Generativni AI, Data Science, ML, IoT kurikulumi dostupni - Dodatni tečajevi: Generative AI, Data Science, ML, IoT kurikulumi dostupni
### Rad sa specifičnim projektima ### Rad s pojedinim projektima
Za detaljne upute o pojedinačnim projektima, pogledajte README datoteke u: Za detaljne upute o pojedinačnim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz - `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom - `7-bank-project/README.md` - Bankovna aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj browser ekstenzije - `5-browser-extension/README.md` - Razvoj ekstenzije za preglednik
- `6-space-game/README.md` - Razvoj igre u canvasu - `6-space-game/README.md` - Razvoj igre koristeći Canvas
- `9-chat-project/README.md` - Projekt AI chat asistenta - `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: Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna cjelina - Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti - Projekti ne dijele ovisnosti
- Radite pojedinačno na projektima bez utjecaja na druge - Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za potpuni kurikulum iskustvo - Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje**: **Odricanje od odgovornosti**:
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. 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Razvoj weba za početnike - Nastavni plan # Web development za početnike - Nastavni plan
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!
Pridružite se Azure AI Foundry Discord zajednici Pridružite se Azure AI Foundry Discord zajednici
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Slijedite ove korake da biste započeli s korištenjem ovih resursa: Slijedite ove korake za početak korištenja ovih resursa:
1. **Forkajte repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **Razvucite spremište**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klonirajte spremište**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere**](https://discord.com/invite/ByRwuEEgH4) 3. [**Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege programere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Podrška za više jezika ### 🌐 Podrška za više jezika
#### Podržano putem GitHub akcija (Automatski i uvijek ažurirano) #### Podržano putem GitHub akcije (Automatski i uvijek ažurno)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](./README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](./README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Radije klonirati lokalno?** > **Radije lokalno klonirati?**
> >
> 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 / macOS / Linux:**
> ```bash > ```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" > 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 --> <!-- 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)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Otvorite%20u%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Jeste li student?_ #### 🧑‍🎓 _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! Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
![Background](../../translated_images/hr/background.148a8d43afde5730.webp) ![Background](../../translated_images/hr/background.148a8d43afde5730.webp)
- Lekcije pokrivaju sve od osnova do RAG-a. - Lekcije koje pokrivaju sve od osnova do RAG-a.
- Interakcija s povijesnim likovima kroz GenAI i našu prateću aplikaciju. - Interakcija s povijesnim likovima koristeći GenAI i našu aplikaciju suputnicu.
- Zabavno i zanimljivo pripovijedanje, putovat ćete kroz vrijeme! - Zabavan i zanimljiv narativ, putovat ćete kroz vrijeme!
![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp)
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za učenje tema poput: Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme kao što su:
- Promptanje i prompt inženjering - Promptanje i inženjering prompta
- Generiranje tekstualnih i slikovnih aplikacija - Generiranje tekstualnih i slikovnih aplikacija
- Pretraživačke aplikacije - 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. 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 ### 📋 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 #### Izradite svoje spremište
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. 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: Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice. 1. **Razvucite spremište**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klonirajte spremište**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pokretanje nastavnog plana u Codespaceu #### Pokretanje nastavnog plana u Codespaceu
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.
![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.webp)
#### Pokretanje nastavnog plana lokalno na vašem računalu #### 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). 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 vaš repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a: 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) [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 ```bash
git clone <your-repository-url> 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 > * [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: ## 📂 Svaka lekcija uključuje:
- neobaveznu skicu - opcionalni sketchnote
- neobavezni dodatni video - opcionalni dodatni video
- kviz za zagrijavanje prije lekcije - kviz za zagrijavanje prije lekcije
- pisanu lekciju - 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 - provjere znanja
- izazov - izazov
- dodatno čitanje - dodatnu literaturu
- zadatak - zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ Lekcije
| | Naziv projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor | | | Naziv projekta | Pojmovi koji se uče | 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 | | 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 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 | | 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 pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine | | 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 | 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 | | 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 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 | | 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 | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/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 | | 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 | | 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 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 | | 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) | 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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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) | 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 | | 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 | | 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 | | 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 | 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 | | 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 temeljene na statusu igre i izvedbi | [Vođenje rezultata](./6-space-game/5-keeping-score/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š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 | | 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 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 | | 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) | Izrada obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju procedurama validacije | [Obrasci](./7-bank-project/2-forms/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 i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i odbaciti | [Podaci](./7-bank-project/3-data/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 upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/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 | [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 | | 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 AI | Naučite kako izgraditi vlastitog AI asistenta | [AI projekt asistenta](./9-chat-project/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 ## 🏫 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č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
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: Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain4j za početnike](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain.js za početnike](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain za početnike](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agents ### Azure / Edge / MCP / Agenti
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![AZD za početnike](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI za početnike](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP za početnike](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) [![AI Agenti za početnike](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Serija Generativne AI ### Serija Generativnog AI
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generativni AI za početnike](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generativni AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generativni AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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 (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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 ### Osnovno učenje
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML za početnike](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science za početnike](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI za početnike](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Cybersecurity za početnike](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Web razvoj za početnike](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT za početnike](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![XR razvoj za početnike](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Serija Copilot ### Serija Copilot
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot za AI uparenog programiranja](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot za C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Avantura](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Dobivanje pomoći ## Dobivanje pomoći
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.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ako imate povratne informacije o proizvodu ili prijavite greške tijekom izrade, posjetite: Ako imate povratne informacije o proizvodu ili greške tijekom izrade, posjetite:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licenca ## Licenca
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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T23:39:15+00:00", "translation_date": "2026-04-06T17:02:14+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "sl" "language_code": "sl"
}, },
@ -516,8 +516,8 @@
"language_code": "sl" "language_code": "sl"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T15:08:28+00:00", "translation_date": "2026-04-06T16:58:40+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "sl" "language_code": "sl"
}, },

@ -2,27 +2,27 @@
## Pregled projekta ## Pregled projekta
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 - **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v projektno usmerjene module
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor in AI Chat Assistant - **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 (ocenjevanje pred/potem lekcije) - **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions - **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) - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura ### Arhitektura
- Izobraževalni repozitorij z strukturo, ki temelji na lekcijah - Izobraževalni repozitorij z strukturo, osnovano na lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve - Vsaka mapa lekcije vsebuje datoteko README, primerke kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti) - Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekcije)
- Sistem prevajanja, ki uporablja GitHub Actions (co-op-translator) - Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija je dostopna preko Docsify in na voljo kot PDF - Dokumentacija postrežena preko Docsify in na voljo kot PDF
## Ukazi za nastavitev ## 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 ### Nastavitev glavnega repozitorija
@ -37,11 +37,11 @@ cd Web-Dev-For-Beginners
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Zaženi razvojni strežnik 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 npm run lint # Zaženi ESLint
``` ```
### Bank Project API (Node.js + Express) ### Banka Projekt API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
@ -51,15 +51,15 @@ npm run lint # Zaženi ESLint
npm run format # Oblikuj s Prettierjem npm run format # Oblikuj s Prettierjem
``` ```
### Projekti za razširitve brskalnika ### Projekti za razširitev brskalnika
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install 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 ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# Odprite index.html v brskalniku ali uporabite Live Server # Odprite index.html v brskalniku ali uporabite Live Server
``` ```
### Chat projekt (Python Backend) ### Projekt Klepet (Python Backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -76,33 +76,33 @@ pip install openai
python api.py python api.py
``` ```
## Razvojni potek dela ## Razvojni potek
### Za prispevke vsebin ### Za prispevke k vsebini
1. **Razveji repozitorij** na svoj GitHub račun 1. **Forkajte repozitorij** na svoj GitHub račun
2. **Kloniraj svoj razvej** lokalno 2. **Klonirajte svoj fork** lokalno
3. **Ustvari novo vejo** za svoje spremembe 3. **Ustvarite novo vejo** za svoje spremembe
4. Naredi spremembe v vsebini lekcij ali primerih kode 4. Izvedite spremembe na vsebini lekcij ali primerih kode
5. Preizkusi spremembe kode v relevantnih projektnih imenikih 5. Testirajte vse spremembe kode v ustreznih projektnih imenikih
6. Pošlji pull requeste skladno z navodili za prispevke 6. Pošljite pull request po smernicah za prispevke
### Za učence ### Za učence
1. Razveji ali kloniraj repozitorij 1. Forkajte ali klonirajte repozitorij
2. Po vrsti obišči imenike lekcij 2. Postopoma obiščite mape lekcij
3. Preberi README datoteke za vsako lekcijo 3. Preberite datoteke README za vsako lekcijo
4. Izpolni pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/ 4. Opravite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delaj skozi primere kode v mapah lekcij 5. Delo z izvorno kodo v mapah lekcij
6. Naredi naloge in izzive 6. Opravite naloge in izzive
7. Reši post-lekcijske kvize 7. Opravite po-lekcijske kvize
### Razvoj v živo ### Živi razvoj
- **Dokumentacija**: zaženi `docsify serve` v korenski mapi (port 3000) - **Dokumentacija**: Zaženite `docsify serve` v korenski mapi (port 3000)
- **Quiz App**: zaženi `npm run dev` v imeniku quiz-app - **Quiz App**: Zaženite `npm run dev` v imeniku quiz-app
- **Projekti**: uporabi VS Code Live Server razširitev za HTML projekte - **Projekti**: Uporabite razširitev VS Code Live Server za HTML projekte
- **API projekti**: zaženi `npm start` v ustreznih API imenikih - **API Projekti**: Zaženite `npm start` v ustreznih API imenikih
## Navodila za testiranje ## Navodila za testiranje
@ -110,173 +110,173 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Preverite težave s slogom kode npm run lint # Preveri morebitne težave s slogom kode
npm run build # Preverite, ali se gradnja uspešno zaključi npm run build # Preveri, ali je gradnja uspešna
``` ```
### Testiranje Bank API ### Testiranje Banka API
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Preveri težave s slogom kode npm run lint # Preverite težave s slogom kode
node server.js # Preveri, če strežnik zažene brez napak 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: - Ročno testiranje se osredotoča na:
- Primeri kode se izvajajo brez napak - Primerke kode tečejo brez napak
- Povezave v dokumentaciji delujejo pravilno - Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno zgradijo - Projekti se uspešno zgradijo
- Primeri sledijo najboljšim praksam - Primeri sledijo najboljšim praksam
### Preverjanja pred oddajo ### Preverjanje pred oddajo
- Zaženi `npm run lint` v imenikih, kjer je package.json - Zaženite `npm run lint` v imenikih z package.json
- Preveri, da so markdown povezave veljavne - Preverite, da so povezave v markdownu veljavne
- Testiraj primere kode v brskalniku ali Node.js - Testirajte primere kode v brskalniku ali Node.js
- Preveri, da prevodi ohranjajo pravilno strukturo - Preverite, da prevodi ohranjajo pravilno strukturo
## Smernice za stil kode ## Smernice za stil kode
### JavaScript ### JavaScript
- Uporabi sodobno sintakso ES6+ - Uporabljajte sodobno sintakso ES6+
- Sledi standardnim ESLint konfiguracijam, predvidenim v projektih - Sledite standardnim konfiguracijam ESLint, ki so v projektih
- Uporabi smiselna imena spremenljivk in funkcij za jasnost izobraževanja - Upodobite razumljiva imena spremenljivk in funkcij za boljšo izobraževalno jasnost
- Dodaj komentarje, ki pojasnjujejo koncepte za učence - Dodajte komentarje za razlago konceptov za učence
- Formatiraj z uporabo Prettier, kjer je konfigurirano - Uporabljajte Prettier kjer je konfiguriran
### HTML/CSS ### HTML/CSS
- Semantični HTML5 elementi - Semantični elementi HTML5
- Principi odzivnega oblikovanja - Načela odzivne zasnove
- Jasne konvencije poimenovanja razredov - Jasna poimenovanja razredov
- Komentarji, ki pojasnjujejo CSS tehnike za učence - Komentarji, ki pojasnjujejo tehnike CSS za učence
### Python ### Python
- Smernice za stil PEP 8 - Smernice sloga PEP 8
- Jasni, izobraževalni primeri kode - Jasni, izobraževalni primeri kode
- Tipizacije tam, kjer pomagajo pri učenju - Tipizacije tam, kjer pomagajo pri učenju
### Markdown dokumentacija ### Markdown dokumentacija
- Jasna hierarhija naslovov - Jasna hierarhija naslovov
- Bloki kode z označevanjem jezika - Bloki kode z označitvijo jezika
- Povezave do dodatnih virov - Povezave do dodatnih virov
- Posnetki zaslona in slike v imenikih `images/` - Posnetki zaslona in slike v mapah `images/`
- Alt besedila za slike za dostopnost - Alt besedilo za slike za dostopnost
### Organizacija datotek ### Organizacija datotek
- Lekcije so zaporedno oštevilčene (1-getting-started-lessons, 2-js-basics itd.) - Lekcije zaporedno številčene (1-getting-started-lessons, 2-js-basics, itd.)
- Vsak projekt ima imenike `solution/` in pogosto `start/` ali `your-work/` - Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike so shranjene v lekcijsko specifičnih mapah `images/` - Slike shranjene v lekcijsko-specifičnih mapah `images/`
- Prevodi so v strukturi `translations/{language-code}/` - Prevodi v strukturi `translations/{jezikovna-koda}/`
## Gradnja in namestitev ## Gradnja in namestitev
### Namestitev Quiz App (Azure Static Web Apps) ### 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 ```bash
cd quiz-app cd quiz-app
npm run build # Ustvari mapo dist/ 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
``` ```
Konfiguracija Azure Static Web Apps: Azure Static Web Apps konfiguracija:
- **Lokacija aplikacije**: `/quiz-app` - **Lokacija aplikacije**: `/quiz-app`
- **Izhodna lokacija**: `dist` - **Izhodna lokacija**: `dist`
- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Delovni potek**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije ### Generiranje PDF dokumentacije
```bash ```bash
npm install # Namestite docsify-to-pdf npm install # Namestite docsify-to-pdf
npm run convert # Ustvarite PDF iz docs npm run convert # Ustvari PDF iz docs
``` ```
### Docsify dokumentacija ### Dokumentacija Docsify
```bash ```bash
npm install -g docsify-cli # Namestite Docsify globalno npm install -g docsify-cli # Namestite Docsify globalno
docsify serve # Strežite na localhost:3000 docsify serve # Strežite na localhost:3000
``` ```
### Gradnja specifičnih projektov ### Projektno-specifične gradnje
Vsak projektni imenik lahko vsebuje svoj gradbeni postopek: Vsak projekt lahko ima lasten proces gradnje:
- Vue projekti: `npm run build` ustvari produkcijske pakete - Vue projekti: `npm run build` ustvarja produkcijske pakete
- Statični projekti: brez gradbenega koraka, streže datoteke neposredno - Statični projekti: brez gradnje, datoteke se postrežejo neposredno
## Navodila za pull requeste ## Smernice za pull requeste
### Oblika naslova ### Oblika naslova
Uporabi jasne, opisne naslove, ki označujejo področje spremembe: Uporabljajte jasne, opisne naslove, ki označujejo področje sprememb:
- `[Quiz-app] Dodaj nov kviz za lekcijo X` - `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi tipkarsko napako v projektu terrarium` - `[Lesson-3] Popravi tipkarsko napako v projektu terrarij`
- `[Translation] Dodaj španski prevod za lekcijo 5` - `[Translation] Dodaja španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za nastavitev` - `[Docs] Posodobitev navodil za nastavitev`
### Zahtevana preverjanja ### Zahtevana preverjanja
Pred oddajo PR: Pred oddajo PR:
1. **Kakovost kode**: 1. **Kakovost kode**:
- Zaženi `npm run lint` v prizadetih imenikih projektov - Zaženite `npm run lint` v prizadetih projektnih imenikih
- Odpravi vse napake in opozorila linterja - Popravite vse napake in opozorila linterja
2. **Preverjanje gradnje**: 2. **Preverjanje gradnje**:
- Zaženi `npm run build`, če je primerno - Zaženite `npm run build`, če je potrebno
- Zagotovi, da ni napak pri gradnji - Zagotovite, da ni napak pri gradnji
3. **Preverjanje povezav**: 3. **Preverjanje povezav**:
- Preizkusi vse markdown povezave - Testirajte vse povezave v markdownu
- Preveri delovanje slikovnih referenc - Preverite, da reference do slik delujejo
4. **Pregled vsebine**: 4. **Pregled vsebine**:
- Preveri pravopis in slovnico - Preverite pravopis in slovnico
- Zagotovi, da so primeri kode pravilni in izobraževalni - Prepričajte se, da so primeri kode pravilni in izobraževalni
- Preveri, da prevodi ohranjajo prvotni pomen - Preverite, da prevodi ohranjajo prvotni pomen
### Zahteve za prispevanje ### Zahteve za prispevek
- Strinjaj se z Microsoft CLA (avtomatska preverba ob prvem PR) - Soglasje z Microsoft CLA (samodejno preverjanje ob prvem PR-ju)
- Sledi [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Sledite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Preberi [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila - Ogled [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila
- V opisu PR po potrebi navedi številke issue-jev - V opis PR vključite številke zadev, če je primerno
### Proces pregleda ### Postopek pregleda
- PR-je pregledujejo vzdrževalci in skupnost - PR-e pregledujejo vzdrževalci in skupnost
- Prioriteta je izobraževalna jasnost - Prioriteta je izobraževalna jasnost
- Primeri kode naj sledijo trenutnim najboljšim praksam - Primeri kode naj sledijo sodobnim najboljšim praksam
- Prevodi se pregledajo za točnost in kulturno ustreznost - Prevodi se pregledajo glede natančnosti in kulturne primernosti
## Sistem prevajanja ## Sistem za prevajanje
### Avtomatiziran prevod ### Samodejni prevod
- Uporablja GitHub Actions z delovnim tokom co-op-translator - Uporablja GitHub Actions z delovnim tokom co-op-translator
- Samodejno prevaja v več kot 50 jezikov - Prevede v več kot 50 jezikov samodejno
- Izvorne datoteke v glavnih imenikih - Izvorne datoteke v glavnih imenikih
- Prevedene datoteke v `translations/{language-code}/` imenikih - Prevedene datoteke v imenikih `translations/{jezikovna-koda}/`
### Dodajanje ročnih izboljšav prevoda ### Dodajanje ročnih izboljšav prevoda
1. Najdi datoteko v `translations/{language-code}/` 1. Poiščite datoteko v `translations/{jezikovna-koda}/`
2. Izvedi izboljšave ob ohranjanju strukture 2. Izvedite izboljšave ob ohranjanju strukture
3. Poskrbi, da primeri kode ostanejo funkcionalni 3. Poskrbite, da primeri kode ostanejo funkcionalni
4. Preizkusi vse lokalizirane vsebine kviza 4. Testirajte vsak lokalizirani kviz
### Metapodatki prevoda ### Metapodatki prevoda
Prevedene datoteke vsebujejo glavo metapodatkov: Prevedene datoteke vsebujejo glavo z metapodatki:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Pogoste težave ### Pogoste težave
**Quiz aplikacija se ne zažene**: **Quiz app se ne zažene**:
- Preveri različico Node.js (priporočeno v14+) - Preverite verzijo Node.js (priporočeno v14+)
- Izbriši `node_modules` in `package-lock.json`, znova zaženi `npm install` - Izbrišite `node_modules` in `package-lock.json`, znova zaženite `npm install`
- Preveri, ali je vrata v uporabi (privzeto Vite uporablja vrata 5173) - Preverite konflikte porte (privzeto: Vite uporablja port 5173)
**API strežnik se ne zažene**: **API strežnik se ne zažene**:
- Preveri, da je različica Node.js ustrezna (node >=10) - Preverite, da verzija Node.js ustreza minimalni zahtevani (node >=10)
- Preveri, če vrata niso že zasedena - Preverite, ali je port že zaseden
- Poskrbi, da so vse odvisnosti nameščene z `npm install` - Preverite, da so vse odvisnosti nameščene z `npm install`
**Razširitev brskalnika se ne naloži**: **Razširitev brskalnika se ne naloži**:
- Preveri pravilno oblikovan manifest.json - Preverite, da je manifest.json pravilno oblikovan
- Preveri konzolo brskalnika za napake - Preverite konzolo brskalnika za napake
- Sledi navodilom za namestitev razširitve specifične za brskalnik - Sledite navodilom za namestitev, specifičnim za brskalnik
**Težave s Python chat projektom**: **Težave s Python klepetalnim projektom**:
- Preveri, da je nameščen paket OpenAI: `pip install openai` - Poskrbite, da je paket OpenAI nameščen: `pip install openai`
- Preveri, da je nastavljena okoljska spremenljivka GITHUB_TOKEN - Preverite, da je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preveri dovoljenja za dostop do GitHub Modelov - Preverite dostopna dovoljenja za GitHub Models
**Docsify ne streže dokumentacije**: **Docsify ne postreže dokumentacije**:
- Namesti docsify-cli globalno: `npm install -g docsify-cli` - Namestite docsify-cli globalno: `npm install -g docsify-cli`
- Zaženi iz korenske mape repozitorija - Zaženite z korenske mape repozitorija
- Preveri, da obstaja `docs/_sidebar.md` - Preverite, da datoteka `docs/_sidebar.md` obstaja
### Nasveti za razvojno okolje ### Nasveti za razvojno okolje
- Uporabi VS Code z razširitvijo Live Server za HTML projekte - Uporabljajte VS Code z razširitvijo Live Server za HTML projekte
- Namesti razširitve ESLint in Prettier za dosledno formatiranje - Namestite razširitve ESLint in Prettier za dosledno oblikovanje
- Uporabi DevTools brskalnika za odpravljanje napak v JavaScriptu - Uporabite orodja brskalnika za odpravljanje napak v JavaScriptu
- Za Vue projekte namesti Vue DevTools brskalniško razširitev - Za Vue projekte namestite Vue DevTools razširitev za brskalnik
### Premisleki glede zmogljivosti ### Razmisleki o zmogljivosti
- Veliko število prevedenih datotek (več kot 50 jezikov) pomeni, da so popolni kloni veliki - Veliko število prevedenih datotek (več kot 50 jezikov) pomeni, da so kloni veliki
- Za delo le z vsebino uporabi plitev klon: `git clone --depth 1` - Za delo samo z vsebino uporabite plitek klon: `git clone --depth 1`
- Prevode izključi iz iskanja pri delu z angleško vsebino - Izključite prevode iz iskanja, ko delate v angleški vsebini
- Gradbeni procesi so lahko počasni ob prvi izvedbi (npm install, Vite build) - Procesi gradnje so lahko počasni pri prvem zagonu (npm install, Vite build)
## Varnostni premisleki ## Varnostni vidiki
### Okoljske spremenljivke ### Okoljske spremenljivke
- Ključi API naj nikoli ne bodo dodani v repozitorij - API ključi se nikoli ne smejo shranjevati v repozitorij
- Uporabljaj `.env` datoteke (že vključene v `.gitignore`) - Uporabljajte `.env` datoteke (že dodane v `.gitignore`)
- Dokumentiraj zahtevane okoljske spremenljivke v README projektov - Dokumentirajte zahtevane okoljske spremenljivke v README-jih projektov
### Python projekti ### Python projekti
- Uporabi virtualna okolja: `python -m venv venv` - Uporabljajte virtualna okolja: `python -m venv venv`
- Redno posodabljaj odvisnosti - Posodabljajte odvisnosti
- GitHub tokeni naj imajo minimalna potrebna dovoljenja - GitHub tokeni naj imajo minimalna potrebna dovoljenja
### Dostop do GitHub Modelov ### Dostop do GitHub Models
- Potrebni so osebni dostopni tokeni (PAT) za GitHub Modelle - Za GitHub Models so potrebni osebni dostopni žetoni (PAT)
- Tokene je treba hraniti kot okoljske spremenljivke - Ti žetoni naj se shranjujejo kot okoljske spremenljivke
- Nikoli ne komitiraj tokenov ali gesel - Žetonov ali poverilnic nikoli ne oddajajte v repozitorij
## Dodatne opombe ## Dodatne opombe
### Ciljna publika ### Ciljna publika
- Popolni začetniki v spletnem razvoju - Popolni začetniki v spletni razvoj
- Študenti in samouki - Študenti in samostojni učenci
- Učitelji, ki uporabljajo učni načrt v razredih - Učitelji, ki uporabljajo kurikulum v razredih
- Vsebina je zasnovana za dostopnost in postopno pridobivanje veščin - Vsebina je zasnovana za dostopnost in postopno nabiranje znanja
### Izobraževalna filozofija ### Izobraževalna filozofija
- Projektno usmerjen način učenja - Pristop učenja na podlagi projektov
- Pogoste preveritve znanja (kvizi) - Pogoste preveritve znanja (kvizi)
- Praktične vaje s kodiranjem - Praktične vaje kodiranja
- Primeri za uporabo v resničnem svetu - Primeri iz resničnega sveta
- Osredotočenost na osnove pred okviri - Osredotočenost na osnove pred okvirji (frameworki)
### Vzdrževanje repozitorija ### Vzdrževanje repozitorija
- Aktivna skupnost učencev in prispevnikov - Aktivna skupnost učencev in prispevkarjev
- Redne posodobitve odvisnosti in vsebine - Redne posodobitve odvisnosti in vsebine
- Spremljanje težav in diskusij s strani vzdrževalcev - Spremljanje zadev in razprav s strani vzdrževalcev
- Posodobitve prevodov avtomatizirane preko GitHub Actions - Prevodi se posodabljajo samodejno preko GitHub Actions
### Povezani viri ### Povezani viri
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) - [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/) - [Student Hub viri](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence - [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: Za podrobna navodila o posameznih projektih si oglejte datoteke README v:
- `quiz-app/README.md` - Vue 3 kviz aplikacija - `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo - `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve brskalnika - `5-browser-extension/README.md` - Razvoj razširitve brskalnika
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas) - `6-space-game/README.md` - Razvoj igre na podlagi Canvas
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta - `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
### Struktura monorepo ### Struktura Monorepo
Čeprav to ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov: Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna - Vsaka lekcija je samostojna
- Projekti si ne delijo odvisnosti - Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge - Delajte na posameznih projektih brez vpliva na druge
- Kloniraj celoten repozitorij za celotno izkušnjo učnega načrta - Klonite celoten repozitorij za popolno izkušnjo kurikuluma
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Spletni razvoj za začetnike - učni načrt # Spletni razvoj za začetnike učni načrt
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključujte se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte pomnjenje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes! 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!
Pridružite se skupnosti Azure AI Foundry Discord Pridružite se skupnosti Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sledite tem korakom za začetek z uporabo teh virov: Sledite tem korakom, da začnete uporabljati te vire:
1. **Razvezi repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **Razvezi repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridruži se Azure AI Foundry Discord in spoznaj strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4) 3. [**Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Podpora za več jezikov ### 🌐 Podpora več jezikov
#### Podprto preko GitHub Action (avtomatizirano in vedno posodobljeno) #### Podprto prek GitHub Action (avtomatizirano in vedno posodobljeno)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](./README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](./README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Raje lokalno klonirati?** > **Raje klonirate lokalno?**
> >
> 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 / macOS / Linux:**
> ```bash > ```bash
@ -48,174 +48,174 @@ Sledite tem korakom za začetek z uporabo teh virov:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > 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 --> <!-- 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)** **Č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)**
[![Odpri v Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Si študent?_ #### 🧑‍🎓 _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š!
![Background](../../translated_images/sl/background.148a8d43afde5730.webp) ![Background](../../translated_images/sl/background.148a8d43afde5730.webp)
- Lekcije pokrivajo vse od osnov do RAG. - Lekcije pokrivajo vse od osnov do RAG (retrieval-augmented generation).
- Interaktivno sodelovanje z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo. - Interakcija z zgodovinskimi osebami preko GenAI in naše spremljevalne aplikacije.
- Zabavna in vključujoča pripoved, potovali boste skozi čas! - Zabavno in privlačno pripovedovanje zgodb, kot da potuješ skozi čas!
![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp)
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 ## 🌱 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 #### Ustvarite 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. 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: Sledite tem korakom:
1. **Razvezi repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani. 1. **Razvezi repozitorij**: Kliknite na gumb "Razvezi" (Fork) zgoraj desno na tej strani.
2. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Zagon učnega načrta v Codespace #### Izvajanje učnega načrta v Codespace
V svojem izvajanju tega repozitorija, ki ste ga ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. S tem bo za vas ustvarjen nov Codespace za delo. V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za delo.
![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp)
#### 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). 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 gumb **Code** in kopirate URL:
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete na gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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 > * [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: ## 📂 Vsaka lekcija vključuje:
- neobvezno skiciranje - neobvezno skiciranje
- neobvezni dodatni video - neobvezni dodatni video
- predpripravljalni kviz pred lekcijo - ogrevalni kviz pred lekcijo
- pisno 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 - preverjanja znanja
- izziv - izziv
- dodatno branje - dodatno branje
- nalogo - nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ 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 | | 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č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 | | 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 | | 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript podatkovni tipi | Osnove podatkovnih tipov JavaScript | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Osnove | Tipi podatkov v JavaScript | Osnove tipov podatkov v JavaScript | [Tipi podatkov](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher | | 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 | 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 | | 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 | 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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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) | 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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č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 | | 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č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 | | 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č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 | | 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č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 | | 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 | [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 | | 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 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 | | 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 ## 🏫 Pedagogika
Naš učni načrt temelji na dveh ključnih pedagoških načelih: Naš učni načrt je zasnovan z dvema ključnima pedagoškima načeloma:
* učenje preko projektov * učenje, usmerjeno v projekte
* pogosti kvizi * 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. 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.
> 🎓 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!
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 ## 🧭 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
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 ## 🎒 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
@ -224,56 +224,56 @@ Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
[![LangChain za začetnike](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain za začetnike](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agenti ### Azure / Edge / MCP / Agentje
[![AZD za začetnike](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![AZD za začetnike](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI za začetnike](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI za začetnike](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP za začetnike](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP za začetnike](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agenti za začetnike](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) [![AI agenti za začetnike](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Serija generativne umetne inteligence ### Generativni AI serija
[![Generativna umetna inteligenca za začetnike](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generativni AI za začetnike](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generativni AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generativni AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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 (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-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 ### Osnovno učenje
[![Strojno učenje za začetnike](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML za začetnike](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Podatkovna znanost za začetnike](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Podatkovna znanost za začetnike](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![Umetna inteligenca za začetnike](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI za začetnike](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Kibernetska varnost za začetnike](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Kibernetska varnost za začetnike](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Spletni razvoj za začetnike](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Spletni razvoj za začetnike](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT za začetnike](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT za začetnike](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR razvoj za začetnike](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![Razvoj XR za začetnike](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Serija Copilot ### Copilot serija
[![Copilot za AI parno programiranje](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot za AI programiranje v paru](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot za C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot za C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Pustolovščina Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot avantura](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Pridobivanje pomoči ## Iskanje pomoči
Če se zataknete ali imate vprašanja o ustvarjanju AI aplikacij. Pridružite se sošolcem in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla in kjer si znanje svobodno delimo. Če 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.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Če imate povratne informacije o izdelku ali napake pri razvoju, obiščite: Če imate povratne informacije o izdelku ali napake med ustvarjanjem, obiščite:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licenca ## Licenca
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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**: **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, 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. 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T23:37:15+00:00", "translation_date": "2026-04-06T16:59:48+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "sr" "language_code": "sr"
}, },
@ -516,8 +516,8 @@
"language_code": "sr" "language_code": "sr"
}, },
"README.md": { "README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536", "original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-03-06T14:55:56+00:00", "translation_date": "2026-04-06T16:54:36+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "sr" "language_code": "sr"
}, },

@ -1,65 +1,65 @@
# AGENTS.md # AGENTS.md
## Преглед пројекта ## Pregled projekta
Ово је репозиторијум едукативног наставног плана за подучавање основа веб развоја почетницима. Наставни план је свеобухватан курс од 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 структуриране лекције организоване у модуле засноване на пројектима - **Obrazovni sadržaj**: 24 strukturirane lekcije organizovane u module zasnovane na projektima
- **Практични пројекти**: Тераријум, Игра куцања, Прегледачки екстензија, Свемирска игра, Банкарска апликација, Уредник кода и AI асистент за чет - **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant
- **Интерактивни квизови**: 48 квизова са по 3 питања (процене пре/после лекције) - **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (testovi pre i posle lekcija)
- **Подршка за више језика**: Аутоматизовани преводи за 50+ језика путем GitHub Actions - **Podrška za više jezika**: Automatski prevodi na više od 50 jezika putem GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте) - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Архитектура ### Arhitektura
- Едукативни репозиторијум са структуом по лекцијама - Obrazovni repozitorijum sa strukturom baziranom na lekcijama
- Свака фасцикла лекције садржи README, примере кода и решења - Svaka fascikla lekcije sadrži README, primere koda i rešenja
- Самостални пројекти у посебним директоријумима (quiz-app, различити пројекти лекција) - Samostalni projekti u posebnim direktorijumima (quiz-app, različiti projekti lekcija)
- Систем превођења користећи GitHub Actions (co-op-translator) - Sistem za prevod koristeći GitHub Actions (co-op-translator)
- Документација доступна преко Docsify и у PDF формату - 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:
### Главно подешавање репозиторијума ### Podešavanje glavnog repozitorijuma
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Подешавање Quiz App (Vue 3 + Vite) ### Podešavanje Quiz aplikacije (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Покрени развојни сервер npm run dev # Покрени сервер за развој
npm run build # Направи за продукцију npm run build # Направи верзију за продукцију
npm run lint # Покрени ESLint npm run lint # Покрени ESLint
``` ```
### API банкарског пројекта (Node.js + Express) ### API Bankarskog projekta (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Покрени API сервер npm start # Покрени API сервер
npm run lint # Покрени ESLint npm run lint # Покрени ESLint
npm run format # Форматирај помоћу Prettier npm run format # Форматирај помоћу Prettier-а
``` ```
### Пројекти прегледачких екстензија ### Projekti za Browser Extension
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Пратите упутства за учитавање екстензија специфична за прегледач # Пратите упутства за учитавање екстензија специфичних за претраживач
``` ```
### Пројекти свемирске игре ### Projekti za Space Game
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -67,216 +67,216 @@ npm install
# Отворите index.html у прегледачу или користите Live Server # Отворите index.html у прегледачу или користите Live Server
``` ```
### Пројекат чет (Python backend) ### Chat projekat (Python backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Поставите променљиву окружења GITHUB_TOKEN # Поставите GITHUB_TOKEN променљиву окружења
python api.py python api.py
``` ```
## Радар развоја ## Razvojni tok rada
### За сараднике на садржају ### Za saradnike na sadržaju
1. **Форкнути репозиторијум** на свој GitHub налог 1. **Forkujte repozitorijum** na svoj GitHub nalog
2. **Клонирати форк** локално 2. **Klonirajte vaš fork** lokalno
3. **Направити нову грану** за измене 3. **Kreirajte novu granu** za vaše izmene
4. Извршити измене у наставном садржају или примерима кода 4. Izmenite sadržaj lekcija ili primere koda
5. Тестирати промене кода у релевантним директоријумима пројеката 5. Testirajte bilo koje izmene koda u relevantnim direktorijumima projekata
6. Послати pull request према правилима доприноса 6. Podnesite pull zahteve u skladu sa smernicama za doprinos
### За ученике ### Za učenike
1. Форкнути или клонирати репозиторијум 1. Forkujte ili klonirajte repozitorijum
2. Ићи кроз фасцикле лекција по реду 2. Posetite direktorijume lekcija redom
3. Читати README датотеке за сваку лекцију 3. Čitajte README fajlove za svaku lekciju
4. Решавати предлессон квизове на https://ff-quizzes.netlify.app/web/ 4. Završite pre-lesson kvizove na https://ff-quizzes.netlify.app/web/
5. Радити на примерима кода у фасциклама лекција 5. Radite kroz primere koda u fasciklama lekcija
6. Завршавати задатке и изазове 6. Završite zadatke i izazove
7. Решавати после-лекционе квизове 7. Uradite post-lesson kvizove
### Ливе развој ### Živi razvoj
- **Документација**: Покренути `docsify serve` у корену (порт 3000) - **Dokumentacija**: Pokrenite `docsify serve` u root direktorijumu (port 3000)
- **Quiz App**: Покренути `npm run dev` у директоријуму quiz-app - **Quiz App**: Pokrenite `npm run dev` u direktorijumu quiz-app
- **Пројекти**: Користити VS Code Live Server екстензију за HTML пројекте - **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte
- **API пројекти**: Покренути `npm start` у одговарајућим API директоријумима - **API Projekti**: Pokrenite `npm start` u odgovarajućim API direktorijumima
## Упутства за тестирање ## Uputstva za testiranje
### Тестирање Quiz App ### Testiranje Quiz aplikacije
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Проверите проблеме стила кода npm run lint # Провери проблеме у стилу кода
npm run build # Проверите да ли градња успева npm run build # Потврди да израда успешно прође
``` ```
### Тестирање Bank API ### Testiranje Bank API-ja
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Проверити проблеме у стилу кода npm run lint # Проверите стил кода за проблеме
node server.js # Проверити да ли сервер почиње без грешака node server.js # Потврдите да сервер покреће без грешака
``` ```
### Општи приступ тестирању ### Opšti pristup testiranju
- Ово је едукативни репозиторијум без свеобухватних аутоматизованих тестова - Ovo je obrazovni repozitorijum bez sveobuhvatnih automatizovanih testova
- Ручно тестирање се фокусира на: - Ručno testiranje se fokusira na:
- Примере кода који се извршавају без грешака - Primere koda koji rade bez grešaka
- Проверу да линкови у документацији исправно раде - Linkove u dokumentaciji koji funkcionišu ispravno
- Успешно компилацију пројеката - Uspešne build procese projekata
- Примере који прате најбоље праксе - Primeri koji slede najbolje prakse
### Провере пре слања ### Provere pre podnošenja
- Покренути `npm run lint` у директоријумима који садрже package.json - Pokrenite `npm run lint` u direktorijumima sa package.json
- Верификовати да су markdown линкови исправни - Proverite da li su markdown linkovi važeći
- Тестирати примере кода у прегледачу или Node.js - Testirajte primere koda u pregledaču ili Node.js
- Проверити да преводи одржавају исправну структуру - Proverite da li prevodi održavaju pravilnu strukturu
## Упутства за стил кода ## Smernice za stil koda
### JavaScript ### JavaScript
- Користити савремен ES6+ синтакс - Koristite modernu ES6+ sintaksu
- Пратити стандардне ESLint конфигурације из пројеката - Pratite standardne ESLint konfiguracije u projektima
- Користити смислене називе променљивих и функција ради едукативне јасноће - Koristite smislene nazive promenljivih i funkcija radi jasnoće u obrazovanju
- Додавати коментаре који објашњавају појмове за ученике - Dodajte komentare koji objašnjavaju koncepte za učenike
- Форматирати код користећи Prettier тамо где је конфигурисан - Formatirajte koristeći Prettier tamo gde je konfigurisano
### HTML/CSS ### HTML/CSS
- Семантички HTML5 елементи - Semantički HTML5 elementi
- Принципи одзивног дизајна - Principi responzivnog dizajna
- Јасне конвенције именовања класа - Jasne konvencije imenovanja klasa
- Коментари који објашњавају CSS технике за ученике - Komentari koji objašnjavaju CSS tehnike za učenike
### Python ### Python
- Пратите PEP 8 стилске смернице - PEP 8 smernice za stil
- Јасни, едукативни примери кода - Jasni, obrazovni primeri koda
- Типска анализа где помаже за учење - Tipizacija gde je korisno za učenje
### Markdown документација ### Markdown dokumentacija
- Јасна хијерархија наслова - Jasna hijerarhija naslova
- Блокови кода са спецификацијом језика - Kod blokovi sa specificiranim jezikom
- Линкови ка додатним ресурсима - Linkovi ka dodatnim resursima
- Снимци екрана и слике у `images/` фасциклама - Snimci ekrana i slike u `images/` direktorijumima
- Alt текст за слике ради приступачности - Alternativni tekst za slike radi pristupačnosti
### Организација фајлова ### Organizacija fajlova
- Лекције нумерисане узастопно (1-getting-started-lessons, 2-js-basics итд.) - Lekcije numerisane sekvencijalno (1-getting-started-lessons, 2-js-basics, itd.)
- Сваки пројекат има директоријуме `solution/` и често `start/` или `your-work/` - Svaki projekat ima `solution/` i često `start/` ili `your-work/` direktorijume
- Слике се чувају у лекцијским `images/` фасциклама - Slike se čuvaju u lekcijsko-specifičnim `images/` fasciklama
- Преводи у структури `translations/{language-code}/` - Prevod u strukturi `translations/{language-code}/`
## Изградња и распоређивање ## Izgradnja i implementacija
### Распоређивање Quiz App (Azure Static Web Apps) ### Implementacija Quiz aplikacije (Azure Static Web Apps)
quiz-app је конфигурисан за распоређивање на Azure Static Web Apps: quiz-app je konfigurisan za implementaciju na Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Креира фолдер dist/ npm run build # Креира фасциклу dist/
# Размещује преко GitHub Actions радног тока при слању на main # Објављује преко GitHub Actions рада на додавање у main грану
``` ```
Конфигурација Azure Static Web Apps: Konfiguracija Azure Static Web Apps:
- **Локација апликације**: `/quiz-app` - **Lokacija aplikacije**: `/quiz-app`
- **Излазна локација**: `dist` - **Output lokacija**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Tok rada**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Генерисање PDF документације ### Generisanje PDF dokumentacije
```bash ```bash
npm install # Инсталирај docsify-to-pdf npm install # Инсталирај docsify-to-pdf
npm run convert # Генериши PDF из докса npm run convert # Генериши PDF из документације
``` ```
### Docsify документација ### Docsify dokumentacija
```bash ```bash
npm install -g docsify-cli # Инсталирајте Docsify глобално npm install -g docsify-cli # Инсталирајте Docsify глобално
docsify serve # Сервирајте на localhost:3000 docsify serve # Пуштајте на localhost:3000
``` ```
### Изградња специфична за пројекте ### Build procesi specifični za projekte
Сваки пројекат може имати свој процес изградње: Svaki direktorijum projekta može imati svoj build proces:
- Vue пројекти: `npm run build` креира продукционе пакете - Vue projekti: `npm run build` kreira produkcione pakete
- Статички пројекти: Нема корака изградње, сервер директно служи фајлове - Statički projekti: Nema koraka izgradnje, fajlovi se direktno serviraju
## Упутства за Pull Request ## Smernice za pull zahteve
### Формат наслова ### Format naslova
Користити јасне, описне наслове који указују на област промене: Koristite jasne, opisne naslove koji ukazuju na oblast izmene:
- `[Quiz-app] Додај нови квиз за лекцију X` - `[Quiz-app] Dodajte novi kviz za lekciju X`
- `[Lesson-3] Исправи типографску грешку у пројекту тераријум` - `[Lesson-3] Ispravka greške u terrarium projektu`
- `[Translation] Додај шпански превод за лекцију 5` - `[Translation] Dodajte španski prevod za lekciju 5`
- `[Docs] Ажурирај упутства за подешавање` - `[Docs] Ažurirajte uputstva za podešavanje`
### Обавезне проверe ### Potrebne provere
Пре слања PR: Pre podnošenja PR:
1. **Квалитет кода**: 1. **Kvalitet koda**:
- Покренути `npm run lint` у директиоријумима погођеним променама - Pokrenite `npm run lint` u pogođenim projekt direktorijumima
- Поправити све lint грешке и упозорења - Ispravite sve lint greške i upozorenja
2. **Провера изградње**: 2. **Provera build-a**:
- Покренути `npm run build` ако је применљиво - Pokrenite `npm run build` ako je potrebno
- Осигурати да нема грешака при изградњи - Osigurajte da nema grešaka u build-u
3. **Валидација линкова**: 3. **Validacija linkova**:
- Тестирати све markdown линкове - Testirajte sve markdown linkove
- Проверити референце слика - Proverite da reference slika funkcionišu
4. **Преглед садржаја**: 4. **Pregled sadržaja**:
- Проверити правопис и граматику - Pročitajte radi pravopisa i gramatike
- Осигурати да су примери кода исправни и образовни - Osigurajte da su primeri koda ispravni i obrazovni
- Верификовати да преводи задржавају оригинално значење - Proverite da prevodi održavaju originalno značenje
### Захтеви за допринос ### Zahtevi za doprinos
- Прихватити Microsoft CLA (аутоматска провера при првом PR) - Prihvatite Microsoft CLA (automatska provera prilikom prvog PR-a)
- Пратити [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Pratite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Погледати [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљне смернице - Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smernice
- Навести бројеве issue-ова у опису PR-а ако је применљиво - Referencirajte brojeve problema u opisu PR-a ako je primenljivo
### Процес прегледа ### Proces revizije
- PR прегледају одржаваоци и заједница - PR-ove pregledaju održavaoci i zajednica
- Јасноћа образовања је приоритет - Prioritet je obrazovna jasnoća
- Примери кода треба да прате најновије добре праксе - Primeri koda treba da slede najnovije najbolje prakse
- Преводи се прегледају ради тачности и културне прикладности - Prevod se proverava za tačnost i kulturnu prikladnost
## Систем превођења ## Sistem za prevod
### Аутоматизовани превод ### Automatski prevod
- Користи GitHub Actions са co-op-translator workflow-ом - Koristi GitHub Actions sa co-op-translator workflow-om
- Преводи на 50+ језика аутоматски - Automatski prevodi na više od 50 jezika
- Изворне датотеке у главним директоријумима - Izvorni fajlovi u glavnim direktorijumima
- Преведене датотеке у структури `translations/{language-code}/` - Prevedeni fajlovi u `translations/{language-code}/` direktorijumima
### Додавање ручних побољшања превода ### Dodavanje manuelnih poboljšanja prevoda
1. Пронађите фајл у `translations/{language-code}/` 1. Pronađite fajl u `translations/{language-code}/`
2. Направите побољшања уз очување структуре 2. Napravite poboljšanja uz očuvanje strukture
3. Осигурајте да примери кода остају функционални 3. Osigurajte da primeri koda ostanu funkcionalni
4. Тестирајте било који локализовани квиз садржај 4. Testirajte lokalizovani sadržaj kvizova
### Мета подаци о преводима ### Metapodaci prevoda
Преведене датотеке укључују заглавље мета података: Prevedeni fajlovi uključuju zaglavlje sa metapodacima:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
--> -->
``` ```
## Решавање проблема и дијагностика ## Debugovanje i rešavanje problema
### Уобичајени проблеми ### Uobičajeni problemi
**Quiz app не почиње**: **Quiz app ne može da se pokrene**:
- Проверите верзију Node.js (препоручено v14+) - Proverite verziju Node.js (preporučena v14+)
- Обришите `node_modules` и `package-lock.json`, па поново покрените `npm install` - Obrišite `node_modules` i `package-lock.json`, zatim pokrenite `npm install`
- Проверите да ли је порт слободан (подразумевано: Vite користи порт 5173) - Proverite sukobe portova (podrazumevano: Vite koristi port 5173)
**API сервер не почиње**: **API server ne može da se pokrene**:
- Проверите да Node.js верзија испуњава минимум (node >=10) - Proverite da li je verzija Node.js minimalna (node >=10)
- Проверите да ли је порт већ у употреби - Proverite da li je port zauzet
- Осигурајте да су све зависности инсталиране преко `npm install` - Uverite se da su svi zavisni paketi instalirani sa `npm install`
**Прегледачки екстензијa не учитава**: **Browser extension se ne učitava**:
- Проверите да je manifest.json исправно форматиран - Proverite da li je manifest.json pravilno formatiran
- Проверите конзолу прегледача за грешке - Proverite konzolu browser-a za greške
- Пратите упутства за инсталацију прегледачких екстензија - Pratite uputstva za instalaciju proširenja specifična za pretraživač
**Проблеми са Python чет пројектом**: **Problemi sa Python chat projektom**:
- Проверите да је пакет OpenAI инсталиран: `pip install openai` - Osigurajte da je instaliran OpenAI paket: `pip install openai`
- Проверите да је постављена GITHUB_TOKEN променљива окружења - Proverite da je postavljena promenljiva okruženja GITHUB_TOKEN
- Проверите дозволе за приступ GitHub моделима - Proverite dozvole za pristup GitHub Models
**Docsify не служи документацију**: **Docsify ne servira dokumentaciju**:
- Инсталирајте docsify-cli глобално: `npm install -g docsify-cli` - Instalirajte docsify-cli globalno: `npm install -g docsify-cli`
- Покрените из корена репозиторијума - Pokrenite iz root direktorijuma repozitorijuma
- Проверите да ли `docs/_sidebar.md` постоји - Proverite da `docs/_sidebar.md` postoji
### Савети за развојно окружење ### Saveti za razvojno okruženje
- Користите VS Code са Live Server екстензијом за HTML пројекте - Koristite VS Code sa Live Server ekstenzijom za HTML projekte
- Инсталирајте ESLint и Prettier екстензије за доследно форматирање - Instalirajte ESLint i Prettier ekstenzije za dosledno formatiranje
- Користите алате прегледача за дебаговање JavaScript-а - Koristite DevTools u pregledaču za debugovanje JavaScript-a
- За Vue пројекте инсталирајте Vue DevTools екстензију за прегледач - Za Vue projekte, instalirajte Vue DevTools ekstenziju za pretraživač
### Примедбе о перформансама ### Razmatranja performansi
- Већи број преведених фајлова (50+ језика) чини пун клон великим - Veliki broj prevedenih fajlova (50+ jezika) znači da su potpuni klonovi veliki
- Користите shallow clone ако радите само на садржају: `git clone --depth 1` - Koristite plitak klon ako radite samo na sadržaju: `git clone --depth 1`
- Изузмите преводе из претрага при раду само на енглеском садржају - Isključite prevode iz pretraga kada radite na engleskom sadržaju
- Процеси изградње могу бити спори при првом покретању (npm install, Vite build) - Build procesi mogu biti spori pri prvom pokretanju (npm install, Vite build)
## Безбедносне препоруке ## Bezbednosna razmatranja
### Променљиве окружења ### Promenljive okruženja
- API кључеви никад не смеју бити снимљени у репозиторијум - API ključevi nikada ne treba da budu commitovani u repozitorijum
- Користите `.env` фајлове (већ у `.gitignore`) - Koristite `.env` fajlove (već u `.gitignore`)
- Документирајте потребне променљиве окружења у README-јима пројеката - Dokumentujte potrebne promenljive okruženja u README fajlovima projekata
### Python пројекти ### Python projekti
- Користите виртуелне енвиронменте: `python -m venv venv` - Koristite virtuelna okruženja: `python -m venv venv`
- Одржавајте зависности ажурним - Držite zavisnosti ažurnim
- GitHub токени треба да имају минималне потребне дозволе - GitHub tokeni treba da imaju minimalne potrebne dozvole
### Приступ GitHub моделима ### Pristup GitHub Models
- Потребни Personal Access Tokens (PAT) за GitHub Моделе - Personal Access Tokens (PAT) su potrebni za GitHub Models
- Токени требa да се чувају као променљиве окружења - Tokeni treba da budu čuvani kao promenljive okruženja
- Никада не комитујте токене или акредитиве - Nikada nemojte commitovati tokene ili lozinke
## Додатне напомене ## Dodatne napomene
### Циљна публика ### Ciljna publika
- Потпуни почетници у веб развоју - Potpuni početnici u web razvoju
- Студенти и самоуки учесници - Studenti i samouci
- Наставници који користе наставни план у учионици - Nastavnici koji koriste kurikulum u učionicama
- Садржај је дизајниран за приступачност и постепено стицање вештина - Sadržaj je dizajniran za pristupačnost i postepeno sticanje veština
### Едукативна филозофија ### Obrazovna filozofija
- Приступ учењу заснован на пројектима - Pristup učenja zasnovan na projektima
- Чести проверавања знања (квизови) - Česte provere znanja (kvizovi)
- Практичне вежбе кодирања - Praktične vežbe programiranja
- Примери из стварног света - Primeri primene u stvarnom svetu
- Фокус на основе пре фронт-енд оквира - Fokus na osnove pre okvira
### Одржавање репозиторијума ### Održavanje repozitorijuma
- Активна заједница ученика и сарадника - Aktivna zajednica učenika i saradnika
- Редовна ажурирања зависности и садржаја - Redovna ažuriranja zavisnosti i sadržaja
- Пратња issue-ова и дискусија од стране одржалаца - Održavaoci prate probleme i diskusije
- Аутоматизовани преводи путем GitHub Actions - Ažuriranja prevoda su automatizovana preko GitHub Actions
### Повезани ресурси ### Povezani resursi
- [Microsoft Learn модули](https://docs.microsoft.com/learn/) - [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub ресурси](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resursi](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручује се за ученике - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučen za učenike
- Додатни курсеви: Generative AI, Data Science, ML, IoT наставни планови доступни - Dodatni kursevi: Generativni AI, Data Science, ML, IoT kurikulumi dostupni
### Рад са специфичним пројектима ### Rad sa određenim projektima
За детаљна упутства о појединачним пројектима, погледајте README фајлове у: Za detaljna uputstva o pojedinačnim projektima, pogledajte README fajlove u:
- `quiz-app/README.md` - Vue 3 квиз апликација - `quiz-app/README.md` - Vue 3 aplikacija za kviz
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом - `7-bank-project/README.md` - Bankarska aplikacija sa autentifikacijom
- `5-browser-extension/README.md` - Развој прегледачких екстензија - `5-browser-extension/README.md` - Razvoj browser ekstenzije
- `6-space-game/README.md` - Развој Canvas игре - `6-space-game/README.md` - Razvoj igre bazirane na Canvas-u
- `9-chat-project/README.md` - Пројекат AI асистента за чет - `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 --> <!-- 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). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом матерњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било какве неспоразуме или погрешне тумачења настала употребом овог превода.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Веб развој за почетнике - Наставни план # Веб развој за почетнике - Наставни програм
Нauчите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улазе у JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења за прегледаче и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну методологију засновану на пројектима. Почните своје путовање у програмирање већ данас! Научите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улази у JavaScript, CSS и HTML кроз пројекте попут тераријума, проширења за прегледаче и свемирских игара. Учествујте у квизовима, дискусијама и практичним задацима. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогју засновану на пројектима. Започните своје кодирање већ данас!
Придружите се Azure AI Foundry Discord заједници Придружите се Azure AI Foundry Discord заједници
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Пратите ове кораке да бисте започели коришћење ових ресурса: Пратите ове кораке да бисте започели коришћење ових ресурса:
1. **Форкујте Репозиторијум**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **Форкујте репозиторијум**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонирајте Репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Придружите се Azure AI Foundry Discord-u и упознајте експерте и друге програмере**](https://discord.com/invite/ByRwuEEgH4) 3. [**Придружите се Azure AI Foundry Discord-у и упознајте стручњаке и колеге програмере**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Подршка за више језика ### 🌐 Подршка за више језика
#### Подржано кроз GitHub Акцију (аутоматски и увек ажурирано) #### Подржано преко GitHub Action (аутоматски и увек ажурирано)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](./README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](./README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Претпочитате да клонирате локално?** > **Претпочитате да клонирате локално?**
> >
> Овај репозиторијум садржи 50+ превода на језике што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout: > Овај репозиторијум укључује преко 50 превода што значајно повећава величину преузимања. Да бисте клонирали без превода користите sparse checkout:
> >
> **Bash / macOS / Linux:** > **Bash / macOS / Linux:**
> ```bash > ```bash
@ -48,41 +48,42 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" > git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ``` > ```
> >
> Ово вам даје све што вам треба за завршетак курса са много бржим преузимањем. > Ово вам даје све што вам треба да завршите курс са знатно бржим преузимањем.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 режим, он није способан само да генерише текст, већ и да креира и уређује фајлове, извршава команде и још много тога.
### 📣 Обавештење - _Нови пројекат за изградњу користећи генеративну вештачку интелигенцију_ ### 📣 Објава _Нови пројекат за израду користећи Генеративну вештачку интелигенцију_
Управо додат нови AI Assistant пројекат, погледајте [пројекат](./9-chat-project/README.md) Нови AI Assistant пројекат је управо додат, погледајте [проект](./9-chat-project/README.md)
### 📣 Обавештење - _Нови наставни план_ о генеративној вештачкој интелигенцији за JavaScript управо је објављен ### 📣 Објава _Нови наставни програм_ о Генеративној AI за JavaScript је управо објављен
Не пропустите наш нови наставни план о генеративној вештачкој интелигенцији! Не пропустите наш нови наставни програм о Генеративној AI!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете! Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да почнете!
![Background](../../translated_images/sr/background.148a8d43afde5730.webp) ![Background](../../translated_images/sr/background.148a8d43afde5730.webp)
- Лекције обухватају све од основа до RAG-а. - Лекције обухватају све од основа до RAG-а.
- Интеракција са историјским ликовима користећи GenAI и нашу пратећу апликацију. - Интеракција са историјским ликовима користећи GenAI и нашу пратећу апликацију.
- Забавна и ангажована прича, путоваћете кроз време! - Забавна и занимљива прича, путоваћете кроз време!
![character](../../translated_images/sr/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/sr/character.5c0dd8e067ffd693.webp)
Свака лекција укључује задатак за завршетак, проверу знања и изазов који ће вас усмеравати у учењу тема као што су:
- Писање упита и инжењеринг упита Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води у учењу тема као што су:
- Креирање упита и инжењеринг упита
- Генерисање апликација за текст и слике - Генерисање апликација за текст и слике
- Апликације за претрагу - Апликације за претрагу
@ -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" у горњем десном углу ове странице. 1. **Форкујте репозиторијум**: Кликните на дугме "Fork" у горњем десном углу ове странице.
2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Покретање наставног плана у Codespace-у #### Покретање наставног програма у Codespace-у
У својој копији репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити. У својој копији овог репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. То ће створити нови Codespace за рад.
![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.webp)
#### Покретање наставног плана локално на вашем рачунару #### Покретање наставног програма локално на рачунару
Да бисте локално покренули овај наставни план на вашем рачунару, потребан вам је уређивач текста, прегледач и алат за командну линију. Наша прва лекција, [Увод у програмске језике и алате рада](../../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). Наш предлог је да користите [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** и копирањем УРЛ-а: 1. Клонирајте свој репозиторијум на рачунар. То можете учинити кликом на дугме **Code** и копирањем URL-а:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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-у > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code-а
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помоћ у бржем писању кода > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за брже писање кода
## 📂 Свака лекција укључује: ## 📂 Свaка лекција укључује:
- опционалну скицноту - опционалну скетчноту
- опционални додатни видео - опционални додатни видео
- припремни квиз пре лекције - квиз за загревање пре лекције
- писану лекцију - писану лекцију
- за лекције засноване на пројекту, корак по корак упутства како изградити пројекат - за пројектно оријентисане лекције, корак-по-корак упутства како направити пројекат
- провере знања - провере знања
- изазов - изазов
- додатно читање - додатно читање
- задатак - задатак
- [квиз после лекције](https://ff-quizzes.netlify.app/web/) - [квиз након лекције](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 | | 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) | Floor | | 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у пројекту, како сарађивати са другима на основу кода | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Флор |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Кристофер |
| 04 | JS Основе | Врсте података у JavaScript-у | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | JS Основе | Типови података у JavaScript | Основе типова података у JavaScript | [Типови података](./2-js-basics/1-data-types/README.md) | Јасмин |
| 05 | JS Основе | Функције и методе | Сазнајте о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher | | 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Јасмин и Кристофер |
| 06 | JS Основе | Доношење одлука у JS-у | Научите како да користите услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | JS Основе | Одлучивање у JS | Научите како да користите услове у кодирању користећи методе одлучивања | [Одлучивање](./2-js-basics/3-making-decisions/README.md) | Јасмин |
| 07 | JS Основе | Низови и петље | Рад са подацима помоћу низова и петљи у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 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) | Jen | | 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) | Jen | | 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 да тераријум функционише као drag/drop интерфејс, фокусирајући се на затварања и манипулацију DOM-ом | [JavaScript затварања, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript закључци, манипулација DOM-ом | Направите JavaScript који омогућава превлачење тераријума, фокусирајући се на закључке и рад са DOM-ом | [JavaScript закључци, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Џен |
| 11 | [Игра куцања](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како да искористите тастатурне догађаје за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Typing Game](./4-typing-game/solution/README.md) | Направити игру куцања | Научите како да користите догађаје са тастатуре за вођење логике у вашој JavaScript апликацији | [Програмска логика заснована на догађајима](./4-typing-game/typing-game/README.md) | Кристофер |
| 12 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Сазнајте како прегледачи раде, њихову историју и како створити прве елементе проширења за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen | | 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како направити прве елементе проширења прегледача | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Џен |
| 13 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Креирање форме, позивање API-ја и складиштење променљивих у локалну меморију | Направите JavaScript елементе ваше екстензије за позивање API користећи променљиве у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Израда форме, позив API-ја и чување података у локалном складишту | Направите JavaScript елементе вашег проширења за позивање API-ја користећи варијабле у локалном складишту | [API-ји, форме и локално складиште](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Џен |
| 14 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом екстензије; научите о веб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом проширења; научите о оптимизацијама и перформансама веба | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Џен |
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напреднија израда игре у JavaScript-у | Научите о наследству користећи и класе и композицију и Pub/Sub образац, као припрему за израду игре | [Увод у напредну израду игара](./6-space-game/1-introduction/README.md) | Chris | | 15 | [Space Game](./6-space-game/solution/README.md) | Напреднија израда игара са JavaScript | Научите о наслеђивању користећи и класе и композицију и Pub/Sub обрасце, као припрему за прављење игре | [Увод у напреднију израду игара](./6-space-game/1-introduction/README.md) | Крис |
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну (canvas) | Научите о Canvas API-ју, који се користи за цртање елемената на екрану | [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на canvas-у | Научите о Canvas API-ју који се користи за цртање елемената на екрану | [Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Крис |
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Премештање елемената по екрану | Откријте како елементи добијају кретање користећи картизне координате и Canvas API | [Премештање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris | | 17 | [Space Game](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање коришћењем декартових координата и Canvas API-ја | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Крис |
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Учини да се елементи сударају и реагују један на други користећи притиске тастера и обезбедите функцију хладног периода за глaдко функционисање игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris | | 18 | [Space Game](./6-space-game/solution/README.md) | Препознавање судара | Направите да се елементи сударају и реагују једни на друге користећи притиске тастера и обезбедите cooldown функцију за перформансе игре | [Препознавање судара](./6-space-game/4-collision-detection/README.md) | Крис |
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Водити резултат | Обављај математичке операције на основу статуса и перформанси игре | [Води резултат](./6-space-game/5-keeping-score/README.md) | Chris | | 19 | [Space Game](./6-space-game/solution/README.md) | Бодовање | Извршите математичке прорачуне на основу статуса и перформанси игре | [Бодовање](./6-space-game/5-keeping-score/README.md) | Крис |
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Chris | | 20 | [Space Game](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Крис |
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како направити структуру више страница у вебсајту користећи рутирање и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Yohan | | 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како направити скелет вишестраначне архитектуре вебсајта коришћењем рутирања и HTML шаблона | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Јохан |
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како изградити форме и руковати валидацијом | [Форме](./7-bank-project/2-forms/README.md) | Yohan | | 22 | [Banking App](./7-bank-project/solution/README.md) | Израда форме за пријаву и регистрацију | Научите о изградњи форми и руковању валидирањем | [Форми](./7-bank-project/2-forms/README.md) | Јохан |
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Начини дохвата и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, складиштити и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Yohan | | 23 | [Banking App](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података | Како подаци улазе и излазе из ваше апликације, како их преузети, чувати и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Јохан |
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем (state management) | Научите како ваша апликација задржава стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan | | 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како апликација чува стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Јохан |
| 25 | [Прегледач/VScode кôд](../../8-code-editor) | Рад са VScode-ом | Научите како користити уређивач кôда | [Употреба VScode уређивача кôда](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 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 асистенти](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Chris | | 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
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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain4j за почетнике](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain.js за почетнике](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain за почетнике](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agents ### Azure / Edge / MCP / Агенти
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![AZD за почетнике](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI за почетнике](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP за почетнике](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) [![AI Agenti за почетнике](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Серти генеративног AI ### Серія генеративног АИ
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Генеративни AI за почетнике](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Генеративни AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Генеративни AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) [![Генеративни AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
--- ---
### Основно учење ### Основно учење
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML за почетнике](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Наука о подацима за почетнике](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI за почетнике](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Компјутерска безбедност за почетнике](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Веб развој за почетнике](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT за почетнике](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![XR развој за почетнике](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Серти Копилот ### Серія Copilot
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot за AI парно програмирање](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot за C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot авантура](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Како добити помоћ ## Како добити помоћ
Ако застакнете или имате било каквих питања у вези са прављењем AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP-у. То је подршка заједница где су питања добродошла и знање се слободно дели. Ако запнете или имате питања о прављењу AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ако имате повратне информације о производу или грешке приликом прављења, посетите: Ако имате повратне информације о производу или грешке током развоја посетите:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -274,6 +275,6 @@ PDF svih lekcija можете пронаћи [овде](https://microsoft.github
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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). Иако се трудимо да превод буде тачан, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом материњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Не сносимо одговорност за било каква неразумевања или погрешне интерпретације настале употребом овог превода.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save