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.
Ovo je repozitorij nastavnog programa za podučavanje osnova web razvoja početnicima. Nastavni plan i program je sveobuhvatan tečaj u trajanju od 12 tjedana koji su razvili Microsoft Cloud Advocates, a sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
### Ključne komponente
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Nastavni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarium, igra tipkanja, ekstenzija za preglednik, svemirska igra, banka aplikacija, uređivač koda i AI chat asistent
- **Praktični projekti**: Terrarij, Igra tipkanja, Proširenje za preglednik, Svemirska igra, Bankarska aplikacija, Code Editor i AI Chat asistent
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (evaluacije prije i poslije lekcija)
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja svaki (procjena prije i nakon lekcije)
- **Podrška za više jezika**: Automatizirani prijevodi za 50+ jezika putem GitHub Actions
- **Višestruka podrška jezika**: Automatski prijevodi na 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
- Edukacijski repozitorij s lekcijskom strukturom
- Edukativni repozitorij sa strukturom baziranom na lekcijama
- 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 posebnim direktorijima (quiz-app, razni projektni lekcijski direktoriji)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Sustav prevođenja pomoću GitHub Actions (co-op-translator)
- Dokumentacija dostupna preko Docsify i kao PDF
- Dokumentacija poslužena putem Docsify i dostupna kao PDF
## Komande za postavljanje
## Komande za postavljanje
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s pojedinim projektima:
Ovaj repozitorij je primarno namijenjen za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
### Postavljanje glavnog repozitorija
### Postavljanje glavnog repozitorija
@ -41,22 +41,22 @@ npm run build # Izgradi za produkciju
npm run lint # Pokreni ESLint
npm run lint # Pokreni ESLint
```
```
### Bankovni projekt API (Node.js + Express)
### Bankarski 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 server
npm start # Pokreni API poslužitelj
npm run lint # Pokreni ESLint
npm run lint # Pokreni ESLint
npm run format # Formatiraj s Prettierom
npm run format # Formatiraj s Prettierom
```
```
### Projekti ekstenzija za preglednik
### Projekti proširenja za preglednik
```bash
```bash
cd 5-browser-extension/solution
cd 5-browser-extension/solution
npm install
npm install
# Slijedite upute za učitavanje proširenja specifične za preglednik
# Slijedite upute za učitavanje ekstenzija specifičnih za preglednik
```
```
### Projekti svemirske igre
### Projekti svemirske igre
@ -72,35 +72,35 @@ npm install
```bash
```bash
cd 9-chat-project/solution/backend/python
cd 9-chat-project/solution/backend/python
pip install openai
pip install openai
# Postavi GITHUB_TOKEN varijablu okoline
# Postavi varijablu okoline GITHUB_TOKEN
python api.py
python api.py
```
```
## Radni tijek razvoja
## Razvojni tijek rada
### 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. Izmijenite sadržaj lekcija ili primjere koda
4. Izvršite promjene u sadržaju lekcija ili primjerima koda
5. Testirajte promjene koda u relevantnim direktorijima projekata
5. Testirajte sve izmjene koda u odgovarajućim projektnim direktorijima
6. Pošaljite pull requestove prateći smjernice za doprinos
6. Pošaljite pull requestove u skladu s uputama za doprinose
### Za učenike
### Za učenike
1. Forkajte ili klonirajte repozitorij
1. Forkajte ili klonirajte repozitorij
2. Redom prolazite kroz direktorije lekcija
2. Navigirajte kroz direktorije lekcija redom
3. Čitajte README datoteke za svaku lekciju
3. Čitajte README datoteke za svaku lekciju
4. Riješite pred-lezijske kvizove na https://ff-quizzes.netlify.app/web/
4. Završite kvizove prije lekcija na https://ff-quizzes.netlify.app/web/
5. Prođite primjere koda u mapama lekcija
5. Riješite primjere koda u mapama lekcija
6. Ispratite zadatke i izazove
6. Završite zadatke i izazove
7. Odgovorite na post-lezijske kvizove
7. Polažite kvizove nakon lekcija
### Aktivni razvoj
### Živi razvoj
- **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Dokumentacija**: Pokrenite `docsify serve` u rootu (port 3000)
- **Quiz App**: Pokrenite `npm run dev` u direktoriju quiz-app
- **Quiz aplikacija**: 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
@ -110,87 +110,87 @@ python api.py
```bash
```bash
cd quiz-app
cd quiz-app
npm run lint # Provjerite ima li problema sa stilom koda
npm run lint # Provjeri probleme sa stilom koda
npm run build # Provjerite je li izgradnja uspješna
npm run build # Provjeri uspješnost izgradnje
```
```
### Testiranje Bank API-ja
### Testiranje Bank API-ja
```bash
```bash
cd 7-bank-project/api
cd 7-bank-project/api
npm run lint # Provjerite probleme sa stilom koda
npm run lint # Provjeri probleme sa stilom koda
node server.js # Provjerite pokreće li se server bez pogrešaka
node server.js # Provjeri da li se poslužitelj pokreće bez grešaka
```
```
### Opći pristup testiranju
### Opći pristup testiranju
- Ovo je edukacijski repozitorij bez sveobuhvatnih automatiziranih testova
- Ovo je edukativni repozitorij bez sveobuhvatnih automatskih testova
- Ručno testiranje fokusira se na:
- Ručno testiranje fokusira se na:
- Primjere koda koji se izvršavaju bez grešaka
- Primjere koda koji se izvršavaju bez pogrešaka
- Ispravnost linkova u dokumentaciji
- Ispravno funkcioniranje linkova u dokumentaciji
- Uspješno dovršen build projekata
- Uspješnu gradnju projekata
- Primjere u skladu s najboljim praksama
- Slijedjenje najboljih praksi u primjerima
### Provjere prije slanja
### 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 da prijevodi održavaju ispravnu strukturu
- Provjerite da prijevodi održavaju pravilnu strukturu
## Smjernice za stil koda
## Smjernice za stil kodiranja
### JavaScript
### JavaScript
- Koristite modernu ES6+ sintaksu
- Koristite modernu ES6+ sintaksu
- Pridržavajte se standardnih ESLint konfiguracija u projektima
- Slijedite standardne ESLint konfiguracije iz projekata
- Koristite značenjem bogate nazive varijabli i funkcija za edukativnu jasnoću
- Koristite smisleno imenovanje varijabli i funkcija radi jasnoće za učenike
- Dodajte komentare koji objašnjavaju koncepte za učenike
- Dodajte komentare koji objašnjavaju koncepte
- Formatirajte kod pomoću Prettiera gdje je konfigurirano
- Formatirajte kod koristeći Prettier gdje je konfigurirano
### HTML/CSS
### HTML/CSS
- Semantički HTML5 elementi
- Semantički HTML5 elementi
- Principi responzivnog dizajna
- Principi responzivnog dizajna
- Jasan sustav imenovanja klasa
- Jasne konvencije imenovanja klasa
- Komentari koji pojašnjavaju CSS tehnike za učenike
- Komentari koji objašnjavaju CSS tehnike za učenike
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 kviza
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bankovna aplikacija s autentikacijom
- `7-bank-project/README.md` - Bankarska aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj ekstenzije za preglednik
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre koristeći Canvas
- `6-space-game/README.md` - Razvoj igre bazirane na canvasu
- `9-chat-project/README.md` - AI chat asistent projekt
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepa
### Struktura Monorepo repozitorija
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
Iako nije tradicionalni monorepo, repozitorij sadrži više nezavisnih projekata:
- Svaka lekcija je samostalna
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Rad na pojedinačnim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
- Klonirajte cijeli repozitorij za potpuno iskustvo nastavnog programa
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
**Odricanje od odgovornosti**:
Ovaj dokument preveden je koristeći AI servis za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku smatra se autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešne interpretacije koje proizlaze iz uporabe ovog prijevoda.
Ovaj dokument je preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
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.
To je učni učni načrt za poučevanje osnov spletnega razvoja za začetnike. Učni načrt je obsežen 12-tedenski tečaj, ki so ga razvili Microsoft Cloud Advocates, in vsebuje 24 praktičnih lekcij o JavaScriptu, CSS in HTML.
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v modulih na osnovi projektov
- **Praktični projekti**: Terrarij, igra tipkanja, razširitev brskalnika, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent
- **Praktični projekti**: Terarij, Tipkovniška igra, Razširitev brskalnika, Vesoljska igra, Bančna aplikacija, Urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Interaktivni kvizi**: 48 kvizov s 3 vprašanji vsak (pred in po lekciji)
- **Večjezična podpora**: Samodejni prevodi v več kot 50 jezikov preko GitHub Actions
- **Podpora za več jezikov**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
### Arhitektura
- Izobraževalni repozitorij z strukturo, osnovano na lekcijah
- Učni skladišče z strukturo na osnovi lekcij
- Vsaka mapa lekcije vsebuje datoteko README, primerke kode in rešitve
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekcije)
- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija postrežena preko Docsify in na voljo kot PDF
- Dokumentacija, postrežena preko Docsify in dostopna kot PDF
## Ukazi za nastavitev
## Ukazi za nastavitev
Ta repozitorij je namenjen predvsem za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
To skladišče je primarno namenjeno za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
- [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 umetna inteligenca, podatkovna znanost, ML, IoT kurikuli na voljo
- Dodatni tečaji: Generativna AI, Data Science, ML, IoT učni načrti na voljo
### Delo z določenimi projekti
### Delo z določenimi projekti
Za podrobna navodila o posameznih projektih si oglejte datoteke README v:
Za podrobna navodila o posameznih projektih glej README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `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 podlagi Canvas
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
- `9-chat-project/README.md` - Projekt AI klepetalnega pomočnika
### Struktura Monorepo
### Struktura monorepo
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
Čeprav ni tradicionalni monorepo, to skladišče vsebuje več samostojnih projektov:
- Vsaka lekcija je samostojna
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Projekti ne delijo odvisnosti
- Delajte na posameznih projektih brez vpliva na druge
- Delo na posameznih projektih brez vpliva na druge
- Klonite celoten repozitorij za popolno izkušnjo kurikuluma
- Kloniraj celotno skladišče za celotno učni izkušnjo
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**:
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za 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.
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za točnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nesporazume ali nepravilne interpretacije, ki izhajajo iz uporabe tega prevoda.
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.
Ово је репозиторијум едукативног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватан курс у трајању од 12 недеља, развијен од стране Microsoft Cloud Advocates-а, који садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
### Ključne komponente
### Кључне компоненте
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizovane u module zasnovane na projektima
- **Едукативни садржај**: 24 структурисане лекције организоване у модуле засноване на пројектима
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки екстензија, Свемирска игра, Банкарска апликација, Уређивач кода и AI чат асистент
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (testovi pre i posle lekcija)
- **Интерактивни квизови**: 48 квизова са по 3 питања (пре/после лекције)
- **Podrška za više jezika**: Automatski prevodi na više od 50 jezika putem GitHub Actions
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Технолошки стек**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Arhitektura
### Архитектура
- Obrazovni repozitorijum sa strukturom baziranom na lekcijama
- Едукативни репозиторијум са структуром заснованом на лекцијама
- Svaka fascikla lekcije sadrži README, primere koda i rešenja
- Свако говорно место садржи README, примере кода и решења
- Samostalni projekti u posebnim direktorijumima (quiz-app, različiti projekti lekcija)
- Самостални пројекти у посебним директивама (quiz-app, разни пројекти лекција)
- Sistem za prevod koristeći GitHub Actions (co-op-translator)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Dokumentacija se servisira putem Docsify i dostupna je kao PDF
- Документација се сервира преко Docsify и доступна је као PDF
## Komande za podešavanje
## Команде за подешавање
Ovaj repozitorijum je prvenstveno za konzumiranje obrazovnog sadržaja. Za rad sa određenim projektima:
Овај репозиторијум је првенствено намењен за коришћење едукативног садржаја. За рад са одређеним пројектима:
- Додатни курсови: Генеративни AI, Наука о подацима, ML, IoT курикулуми
### Rad sa određenim projektima
### Рад са појединачним пројектима
Za detaljna uputstva o pojedinačnim projektima, pogledajte README fajlove u:
За детаљна упутства о појединачним пројектима погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Bankarska aplikacija sa autentifikacijom
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Razvoj browser ekstenzije
- `5-browser-extension/README.md` - Развој прегледачких екстензија
- `6-space-game/README.md` - Razvoj igre bazirane na Canvas-u
- `6-space-game/README.md` - Canvas заснована игра
- `9-chat-project/README.md` - AI chat asistent projekat
- `9-chat-project/README.md` - AI асистент за ћаскање
### Struktura monorepozitorijuma
### Структура монорепозиторијума
Iako nije tradicionalni monorepo, ovaj repozitorijum sadrži više nezavisnih projekata:
Иако није традиционални монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Svaka lekcija je samostalna
- Свaka лекција је самостална
- 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 -->
**Одрицање**:
**Одрицање од одговорности**:
Овај документ је превео вештачки преводилац [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом матерњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било какве неспоразуме или погрешне тумачења настала употребом овог превода.
Овај документ је преведен коришћењем услуге за машински превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде прецизан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетом. За критичне информације препоручује се професионални превод који изводи стручни преводилац. Нисмо одговорни за било какве неспоразуме или погрешне тумачења која могу настати коришћењем овог превода.