Ovo je edukativni repozitorij za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatni 12-tjedni tečaj razvijen od strane Microsoft Cloud Advocates, koji obuhvaća 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ovo je repozitorij obrazovnog kurikuluma za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan tečaj u trajanju od 12 tjedana, razvijen od strane Microsoft Cloud Advocates, sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja svaki (procjene prije i nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi na više od 50 jezika putem GitHub Actions
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje preglednika, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja (procjena prije/nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi za više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Edukativni repozitorij s lekcijama
- Obrazovni repozitorij s lekcijsko-temeljnom strukturom
- 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, različiti projekti lekcija)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna putem Docsify i kao PDF
## Komande za postavljanje
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
Ovaj repozitorij je prvenstveno za konzumaciju obrazovnog sadržaja. Za rad sa specifičnim projektima:
Za detaljne upute za pojedine projekte, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 quiz aplikacija
Za detaljne upute o pojedinim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kvizove
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre na canvas-u
- `5-browser-extension/README.md` - Razvoj proširenja preglednika
- `6-space-game/README.md` - Razvoj igre u Canvasu
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura monorepoa
### Struktura monorepa
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
- Klonirajte cijeli repozitorij za cjelokupni kurikulum iskustvo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI usluge prevođenja [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 njegovom izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni prijevod čovjeka. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
Naučite osnove web razvoja uz naš opsežni 12-tjedni tečaj od Microsoft Cloud zagovornika. Svaka od 24 lekcije produbljuje znanje JavaScripta, CSS-a i HTML-a kroz praktične projekte poput terarija, proširenja za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu pedagogiju baziranu na projektima. Započnite svoje putovanje kodiranja već danas!
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!
> Ovaj repozitorij uključuje preko 50 prijevoda jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> **Radije klonirati lokalno?**
>
> Ovaj repozitorij uključuje više od 50 prijevoda što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> 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.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite da dodatni prijevodi jezika budu podržani, navedeni su [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći početničke izvore, studentske pakete i čak načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer mijenjamo sadržaj mjesečno.
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.
### 📣 Najava - Novi izazovi za GitHub Copilot Agent mode!
### 📣 Objavljeno - Novi izazovi uz GitHub Copilot Agent mode!
Dodan je novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov za vas za dovršiti koristeći GitHub Copilot i Agent mode. Ako ranije niste koristili Agent mode, on može ne samo generirati tekst, već i stvarati i uređivati datoteke, izvršavati naredbe i još mnogo toga.
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.
### 📣 Najava - _Novi projekt za izgradnju koristeći Generativni AI_
### 📣 Objavljeno - _Novi projekt za izgradnju korištenjem generativne AI_
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
Upravo dodat novi AI Assistant projekt, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Najava - _Novi Kurikulum_ o Generativnom AI za JavaScript upravo je objavljen
### 📣 Objavljeno - _Novi nastavni plan_ o generativnoj AI za JavaScript upravo je objavljen
Ne propustite naš novi Generativni AI kurikulum!
Ne propustite naš novi nastavni plan o generativnoj AI!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Izrada upita i inženjerstvo promptova
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za učenje tema poput:
- Promptanje i prompt inženjering
- Generiranje tekstualnih i slikovnih aplikacija
- Aplikacije za pretraživanje
- Pretraživačke aplikacije
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
## 🌱 Početak rada
## 🌱 Početak
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) o tome kako koristiti ovaj kurikulum. Voljeli bismo vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) 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)!
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s predpredavanjem kvizom i nastavite čitanjem nastavnog materijala, dovršavanjem različitih aktivnosti te provjerite svoje razumijevanje postpredavanjem kvizom.
**[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.
Za poboljšanje iskustva učenja, povežite se sa svojim kolegama i zajedno radite na projektima! Rasprave su dobrodošle na našem [forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje je naš tim moderatora dostupan za odgovore na vaša pitanja.
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.
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 studijske materijale.
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 okruženja
### 📋 Postavljanje vašeg okruženja
Ovaj kurikulum već ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespace-u](https://github.com/features/codespaces/) (_browserskom okruženju bez potrebe za instalacijom_), ili lokalno na svom računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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).
#### Kreirajte svoj repozitorij
Da biste lakše spremili svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time ćete kreirati novi repozitorij u svom GitHub računu s kopijom kurikuluma.
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.
Slijedite ove korake:
1. **Fork Repozitorija**: Kliknite gumb "Fork" u gornjem desnom kutu ove stranice.
U svojoj kopiji repozitorija koju ste kreirali kliknite gumb **Code** i odaberite **Open with Codespaces**. Time ćete kreirati novi Codespace u kojem ćete raditi.
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.
#### Pokretanje kurikuluma lokalno na svom računalu
Za pokretanje ovog kurikuluma lokalno na vašem računalu, trebat će vam uređivač teksta, preglednik i alat naredbenog retka. Naša prva lekcija, [Uvod u programske jezike i alate zanata](../../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.
Naša preporuka je korištenje [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).
#### 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.
1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
Naša preporuka je da koristite [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivač koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte vaš repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[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:
```bash
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **Datoteka** > **Otvori mapu** i odabirom mape koju ste upravo klonirali.
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
> Preporučeni Visual Studio Code dodaci:
> Preporučeni dodaci za Visual Studio Code:
>
> * [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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Codea
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
## 📂 Svaka lekcija uključuje:
- opcionalnu sketchnote
- opcionalni dodatni video
- neobaveznu skicu
- neobavezni dodatni video
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektu, korak-po-korak vodiče kako izgraditi projekt
- za lekcije temeljene na projektima, korak-po-korak vodiče za izgradnju projekta
- provjere znanja
- izazov
- dodatno štivo
- dodatno čitanje
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), aplikacija kvizova može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi `quiz-app`.
> **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`.
## 🗃️ Lekcije
| | Naziv Projekta | Koncepti Koje Se Podučavaju | Ciljevi Učenja | Povezana Lekcija | Autor |
| 01 | Početak | Uvod u programiranje i alate zanata | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u radu | [Uvod u programske jezike i alate zanata](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript Tipovi Podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvarati uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za stvaranje online terarija, fokusirajući se na izgradnju rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./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 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućuje terariju funkciju drag/drop sučelja, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md)| Izrada igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente proširenja preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu | Izgradite JavaScript elemente vašeg proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu 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 (canvas) | Naučite o Canvas API-ju, korištenom 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 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 reagiraju jedni na druge koristeći pritiske tipki i osigurajte funkciju hlađenja radi performansi igre| [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvodite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti okvir arhitekture višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i upotrebe podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako 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 | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Naziv projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak rada | Uvod u programiranje i alate trgovine | Naučite osnovne temelje iza većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na bazi koda | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipovi podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje tokom logike aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka u JS | Naučite kako kreirati uvjete u vašem kodu koristeći metode za donošenje odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za online terarij, fokusirajući se na izradu rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući responsivni dizajn stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript closures, manipulacija DOM-om | Izgradite JavaScript koji omogućava funkcionalnost terarija kao povuci-i-ispusti sučelja, fokusirajući se na closures i DOM | [JavaScript closures, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izradite igru tipkanja | Naučite koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako izgraditi prve elemente ekstenzije preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu | Izradite JavaScript elemente vaše ekstenzije za preglednik za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom ekstenzije; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Naprednija izrada igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrascu, kao pripremu za izradu igre | [Uvod u naprednu izradu igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu | Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i međusobno reagiraju korištenjem pritisaka tipki i izvedite funkciju cooldown za osiguranje performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune temeljene na statusu igre i izvedbi | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završetak i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako napraviti arhitekturu višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izrada obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju procedurama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i odbaciti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI projekt asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš nastavni plan dizajniran je s dvije ključne pedagoške smjernice na umu:
Naš kurikulum je dizajniran s dvije ključne pedagoške smjernice:
* učenje temeljeno na projektima
* česti kvizovi
* učestali kvizovi
Program poučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku razvijati praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja preglednika, igre u stilu space-invadera i bankarske aplikacije za tvrtke. Na kraju serije studenti će steći solidno razumijevanje web razvoja.
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.
> 🎓 Prve lekcije ovog kurikuluma možete proći kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 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!
Osiguravanjem usklađenosti sadržaja s projektima proces je angažiraniji za studente, a zadržavanje koncepata će se pojačati. Također smo napisali nekoliko uvodnih lekcija o osnovama JavaScripta za uvođenje koncepata, uparene s videom iz zbirke "[Serija za početnike u: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", čiji su neki autori dali doprinos ovom kurikulumu.
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.
Nadalje, kviz s niskim ulogom prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje gradiva. Ovaj kurikulum je osmišljen kao fleksibilan i zabavan i može se pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja ciklusa od 12 tjedana.
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.
Iako smo namjerno izbjegavali uvođenje JavaScript frameworka kako bismo se posvetili osnovnim vještinama potrebnim web programeru prije usvajanja frameworka, dobar sljedeći korak nakon ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videozapisa: "[Serija za početnike u: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Posjetite naše smjernice za [Kodeks 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). Dobrodošli su vaši konstruktivni komentari!
## 🧭 Pristup bez interneta
## 🧭 Pristup izvan mreže
Ovu dokumentaciju možete pokrenuti offline koristeći [Docsify](https://docsify.js.org/#/). Razgranajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na lokalni stroj, a zatim u korijenskoj mapi ovog repozitorija unesite `docsify serve`. Web stranica će biti dostupna na portu 3000 na vašem localhostu: `localhost:3000`.
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`.
## 📘 PDF
PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Ostali tečajevi
## 🎒 Drugi tečajevi
Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -232,7 +241,7 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
---
### Osnovno Učenje
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,21 +260,21 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
## Dobivanje pomoći
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se kolegama učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
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.
Ovaj repozitorij je licenciran pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovo spremište licencirano je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju odgovornosti**:
Ovaj dokument preveden je pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
**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.
To je repozitorij izobraževalnega kurikuluma za poučevanje osnov spletnega razvoja za začetnike. Kurikulum je obsežen 12-tedenski tečaj, ki ga je razvila ekipa Microsoft Cloud Advocates, in obsega 24 praktičnih lekcij o JavaScriptu, CSS-u in HTML-u.
To je učni učni načrt za poučevanje osnov razvoja spletnih strani 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.
### Ključne sestavine
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, razporejenih v modulih s projekti
- **Praktični projekti**: Terrarium, Igra tipkanja, Razširitev za brskalnik, Vesoljska igra, Bančniška aplikacija, Urejevalnik kode in AI Chat asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Avtomatski prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module na osnovi projektov
- **Praktični projekti**: Terrarium, Tipkovniška igra, Razširitev brskalnika, Vesoljska igra, Bančniški pripomoček, Urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (ocenjevanje pred/nad lekcijo)
- **Podpora več jezikom**: Avtomatski prevodi za več kot 50 jezikov prek GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij z lekcijsko strukturo
- Vsaka lekcija ima mapo s README-jem, primeri kode in rešitvami
- Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija dostopna preko Docsify in PDF-ja
- Izobraževalno skladišče z strukturo po lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekciji)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija dostopna prek Docsify in kot PDF
## Ukazi za nastavitev
Ta repozitorij je primarno za potrošnjo izobraževalnih vsebin. Za delo s specifičnimi projekti:
To skladišče je primarno namenjeno za uporabo izobraževalne vsebine. Za delo s specifičnimi projekti:
- [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
### Delo s specifičnimi projekti
Za podrobna navodila posameznih projektov glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančniška aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve za brskalnik
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI chat asistenta
Za podrobna navodila o posameznih projektih glej README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve brskalnika
- `6-space-game/README.md` - Razvoj igre na Canvasu
- `9-chat-project/README.md` - AI klepetalni pomočnik
### Struktura Monorepo
### Struktura monorepo
Čeprav ne gre za tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Klonirajte celoten repozitorij za celotno kurikularno izkušnjo
Čeprav ni tradicionalni monorep, to skladišče vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Kloniraj celotno skladišče za polno učni izkušnjo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za zanesljiv vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni prevod, ki ga opravi človek. Nismo odgovorni za morebitna nesporazumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
Naučite se osnov spletnega razvoja z našim 12-tedenskim obsežnim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij poglobljeno obravnava JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje 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 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!
> Ta repozitorij vsebuje prevode v več kot 50 jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> **Raje lokalno klonirati?**
>
> Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Za kloniranje brez prevodov uporabite sparse checkout:
> 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.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Če želite podpreti dodatne prevodne jezike, so na voljo na [tej strani](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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ste študent?_
#### 🧑🎓 _Si študent?_
Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli začetne vire, pakete za študente in celo načine za pridobitev brezplačnega bona za certifikat. To je stran, ki si jo želite zaznamovati in občasno preverjati, saj vsebine mesečno osvežujemo.
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.
### 📣 Obvestilo - Novi izzivi GitHub Copilot Agent mode za dokončanje!
### 📣 Obvestilo - Novi izzivi z uporabo načina GitHub Copilot Agent, ki jih je treba dokončati!
Dodan je nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga lahko zaključite z uporabo GitHub Copilota in Agent mode. Če Agent mode še niste uporabljali, je sposoben ne samo ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
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č.
### 📣 Obvestilo - _Novi projekt za izdelavo z Generativno AI_
### 📣 Obvestilo - _Novi projekt za izdelavo z uporabo generativne AI_
Pravkar dodan nov projekt AI asistenta, preverite [projekt](./9-chat-project/README.md)
Dodali smo nov AI Asistent projekt, oglej si [projekt](./9-chat-project/README.md)
### 📣 Obvestilo - _Nov učni načrt_ o Generativni AI za JavaScript pravkar izdan
### 📣 Obvestilo - _Nov učni načrt_ o generativni AI za JavaScript je pravkar izšel
Ne zamudite našega novega učnega načrta o Generativni AI!
Ne zamudite našega novega učnega načrta za generativno AI!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
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 vas vodi pri učenju tem, kot so:
- Postavljanje vprašanj in oblikovanje vprašanj
- Ustvarjanje aplikacij za besedilo in slike
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ščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!
## 🌱 Začetek
> **Učitelji**, pripravili smo [nekaj predlogov](for-teachers.md), kako uporabiti ta učni načrt. Veseli bomo vaših povratnih informacij [v našem diskusijskem forumu](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ši diskusijski skupini](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s kvizom pred predavanjem in nadaljujte z branjem učnega gradiva, dokončanjem različnih aktivnosti ter preverjanjem razumevanja s kvizom po predavanju.
**[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.
Da izboljšate svojo učne izkušnje, 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 bo na voljo naša ekipa moderatorjev za odgovore na vprašanja.
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 nadaljnje izobraževanje priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatno študijsko gradivo.
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.
### 📋 Nastavitev vašega okolja
### 📋 Nastavitev okolja
Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izbirate med poganjanjem učnega načrta v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po namestitvah_) ali lokalno na vašem 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 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).
#### Ustvarite svoj repozitorij
Da boste enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.
#### Ustvari svoj repozitorij
Da bi lahko enostavno shranjevali svoje delo, je priporočljivo, da ustvarite svoj lasten izvod tega repozitorija. To lahko storite s klikom na gumb **Use this template** na vrhu strani. S tem boste ustvarili nov repozitorij v svojem računu GitHub s kopijo učnega načrta.
Sledite tem korakom:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
V svoji kopiji repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za vaše delo.
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.
#### Zagon učnega načrta lokalno na vašem računalniku
#### Zagon učnega načrta lokalno na svojem računalniku
Za zagon učnega načrta lokalno na vašem računalniku potrebujete urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete, kar vam najbolj ustreza.
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.
Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png)
Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) znotraj [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
```bash
git clone <your-repository-url>
```
2. Odprite mapo v Visual Studio Code. To lahko storite tako, da kliknete **Datoteka** > **Odpri mapo** in izberete mapo, ki ste jo pravkar klonirali.
2. Odprite mapo v Visual Studio Code. To storite tako, da kliknete **File** > **Open Folder** in izberete mapo, ki ste jo pravkar klonirali.
> Priporočene razširitve Visual Studio Code:
> Priporočeni dodatki za Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoč pri hitrejšem pisanju kode
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - da vam pomaga hitreje pisati kodo
## 📂 Vsaka lekcija vključuje:
- neobvezno skicirno beležko
- neobvezno skiciranje
- neobvezni dodatni video
- predhodni kviz za ogrevanje pred lekcijo
- pisni del lekcije
- za lekcije, ki temeljijo na projektih, vodnike po korakih, kako zgraditi projekt
- preverjanje znanja
- predpripravljalni kviz pred lekcijo
- pisno lekcijo
- za lekcije, ki temeljijo na projektih, korak za korakom vodiče, kako zgraditi projekt
- preverjanja znanja
- izziv
- dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/)
> **Opomba o kvizih**: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov, vsak s tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), kviz aplikacijo lahko zaženete lokalno ali jo namestite na Azure; sledite navodilom v mapi `quiz-app`.
> **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`.
## 🗃️ Lekcije
| | Ime projekta | Poučene koncepte | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in orodja stroke | Spoznajte osnovna načela večine programskih jezikov in programske opreme, ki pomaga profesionalnim razvijalcem pri delu | [Uvod v programske jezike in orodja stroke](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v skupini | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScriptu | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScriptu | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, s poudarkom na postavitvi | [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 oblikovanje spletnega terarija, s poudarkom na osnovah CSS in prilagajanju strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprte funkcije, manipulacija DOM | Zgradite JavaScript, da terarij deluje kot vmesnik za povleci-in-spusti, s poudarkom na zaprtih funkcijah in manipulaciji DOM | [JavaScript zaprte funkcije, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za poganjanje logike vaše JavaScript aplikacije | [Dogodkovno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Gradnja obrazca, klic API in shranjevanje spremenljivk v lokalno shrambo | Zgradite JavaScript elemente razširitve brskalnika za klic API z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, spletna zmogljivost | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; naučite se o spletni zmogljivosti in nekaterih optimizacijah | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra vesolja](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScriptom | Spoznajte dediščino z uporabo tako razredov kot kompozicije in vzorec Pub/Sub, kot pripravo na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra vesolja](./6-space-game/solution/README.md) | Risanje na canvas | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra vesolja](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra vesolja](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da elementi trčijo in medsebojno reagirajo z uporabo pritiskov tipk ter zagotovite funkcijo počitka za zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra vesolja](./6-space-game/solution/README.md) | Beleženje točk | Izvedite matematične izračune na podlagi stanja in zmogljivosti igre | [Beleženje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra vesolja](./6-space-game/solution/README.md) | Zaključek in ponovni začetek igre | Spoznajte, kako zaključiti in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoji zaključka](./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 | Spoznajte, kako ustvariti ogrodje večstranske spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Zgradite obrazec za prijavo in registracijo | Spoznajte izdelavo obrazcev in obdelavo validacijskih rutin | [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 vstopajo in izstopajo iz 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 | Spoznajte, kako aplikacija ohranja stanje in kako ga programatsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brskalnik/urejevalnik kode VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode| [Uporaba urejevalnika VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se zgraditi svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Ime projekta | Naučeni koncepti | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in razvojna orodja | Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri njihovem delu | [Uvod v programske jezike in razvojna orodja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHub, vključno z delom v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na izvorni kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v svoji kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScript | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na postavitev | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za stilizacijo spletnega terrarija, osredotočite se na osnove CSS in prilagodljivost strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprtja, manipulacija DOM | Zgradite JavaScript, da ustvari funkcionalno terrarijsko povleci in spusti vmesnik, osredotočite se na zaprtja in manipulacijo DOM | [JavaScript zaprtja, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradi igro tipkanja | Naučite se uporabljati dogodke s tipkovnice za upravljanje logike vaše JavaScript aplikacije | [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Izgradnja obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente svoje brskalniške razširitve za klic API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, zmogljivost spletnih strani | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; spoznajte zmogljivost spletnih strani in nekatere optimizacije za izboljšanje | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra v vesolju](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScript | Naučite se o dediščini z uporabo razredov in kompozicije ter vzorca Pub/Sub, kot priprava za izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra v vesolju](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra v vesolju](./6-space-game/solution/README.md) |Premikanje elementov po zaslonu | Odkrijte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaznavanje trkov | Poskrbite, da se elementi trčijo in medsebojno odzivajo z uporabo pritiskov tipk ter zagotovite funkcijo ohlajevanja za boljšo zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Spremljanje rezultata | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre | [Spremljanje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaključevanje in ponovni začetek igre | Spoznajte o zaključevanju in ponovnem zagonu igre, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | [Pogoj konca](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Naučite se, kako ustvariti osnovno arhitekturo večstraničnega spletišča z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Ustvari obrazec za prijavo in registracijo | Spoznajte gradnjo obrazcev in upravljanje validacij | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako aplikacija ohranja stanje in kako ga programsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Urejanje kode brskalnik/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode| [Uporaba urejevalnika kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI pomočniki](./9-chat-project/README.md) | Delo z AI | Naučite se izdelati lastnega AI pomočnika | [Projekt AI pomočnika](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naš učni program je zasnovan z dvema ključnima pedagoškima principoma v mislih:
Naš učni načrt temelji na dveh ključnih pedagoških načelih:
* učenje preko projektov
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z gradnjo igre tipkanja, virtualnega terarija, okolju prijazne razširitve brskalnika, igre v stilu Space Invader in bančne aplikacije za podjetja. Ob koncu serije bodo imeli trdno razumevanje spletnega razvoja.
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.
> 🎓 Prve lekcije tega učnega programa lahko opravite kot [Učni poti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 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 se vsebina ujema s projekti, postane proces bolj zanimiv za študente in se poveča zadrževanje konceptov. Prav tako smo napisali nekaj začetnih lekcij o osnovah JavaScript, da predstavimo koncepte, skupaj z videom 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 programu.
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.
Poleg tega nizkorizični kviz pred poukom usmerja študenta k učenju teme, medtem ko drugi kviz po pouku zagotavlja nadaljnje zadrževanje znanja. Ta učni program je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in do konca 12-tedenskega cikla postanejo vse bolj kompleksni.
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.
Čeprav smo namenoma se izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega učnega programa učenje o Node.js prek druge zbirke videoposnetkov: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Ogledate si lahko naša [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
> Obiščite naše smernice [Kodeksa obnašanja](CODE_OF_CONDUCT.md) in [Prispevkov](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejite to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na vaš lokalni računalnik in nato v korenski mapi te repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem strežniku: `localhost:3000`.
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`.
## 📘 PDF
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF vseh lekcij je na voljo [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečaji
Naša ekipa izdeluje tudi druge tečaje! Oglejte si:
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija generativne umetne inteligence
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnove učenja
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Če se zataknete ali imate kakršna koli vprašanja o izdelavi AI aplikacij, se pridružite drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je prijazna skupnost, kjer so vprašanja dobrodošla in se znanje medsebojno prostovoljno deli.
Č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.
To skladišče je licencirano pod licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
Ta repozitorij ima licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
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 natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvorni jezik velja za avtoritativni vir. Za pomembne informacije priporočamo profesionalni človeški prevod. Za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v matičnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
Ово је репозиторијум за образовни програм за подучавање основа веб развоја почетницима. Програм је обухватан 12-недељни курс развијен од стране Microsoft Cloud Advocates, који садржи 24 практичне лекције које покривају JavaScript, CSS и HTML.
Ово је репозиторијум образовног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватни курс од 12 недеља развијен од стране Microsoft Cloud Advocates-а, који садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
### Кључне компоненте
- **Образовни садржај**: 24 структуиране лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки додатак, Свемирска игра, Банкарска апликација, Едитор кода и AI асистент за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања (процена пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Образовни садржај**: 24 структуриране лекције организоване у модуле базиране на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Проширење прегледача, Свемирска игра, Банкарска апликација, Уредник кода и AI помоћник за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања сваки (пре/после-лекцијске процене)
- **Подршка за више језика**: Аутоматски преводи на 50+ језика преко GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Архитектура
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свако фасцикло лекције садржи README, примере кода и решења
- Самостални пројекти упосебним директоријумима (quiz-app, разни пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација послужена преко Docsify и доступна као PDF
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свакa фасцикла лекције садржи README, примере кода и решења
За детаљна упутства о појединачним пројектима погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој прегледачких додатака
- `6-space-game/README.md` - Развој Canvas игре
- `9-chat-project/README.md` - AI асистент за чет
За детаљна упутства о појединачним пројектима, погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој проширења прегледача
- `6-space-game/README.md` - Развој Canvas основе за игру
- `9-chat-project/README.md` - AI асистент за чет пројекат
### Монорепозиторијум структура
### Монорепо структура
Иако није класичан монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свака лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за пун утисак образовног програма
Иако није традиционално монорепо, овај репозиторијум садржи више независних пројеката:
- Свaka лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум ради пуног искуства курикулума
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање одговорности**:
Овај документ је преведен уз помоћ АИ сервиса за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом матичном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или погрешна тумачења која произилазе из коришћења овог превода.
**Ограничење одговорности**:
Овај документ је преведен помоћу AI преводилачке услуге [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо имајте у виду да аутоматизовани преводи могу садржати грешке или нетачности. Изворни документ на његовом оригиналном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква непоразумевања или погрешне тумачења која произилазе из коришћења овог превода.
Научите основе веб развоја уз наш свеобухватни 12-недељни курс који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко истражује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, прегледачки екстензије и свемирске игре. Укључите сеу квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје кодирање данас!
Нauчите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улазе у JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења за прегледаче и свемирске игре. Укључите сеу квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну методологију засновану на пројектима. Почните своје путовање у програмирање већ данас!
Придружите се Azure AI Foundry Discord заједници
Пратите ове кораке да бисте почели да користите ове ресурсе:
> Овај репозиторијум садржи преко 50 превода језика што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> **Претпочитате да клонирате локално?**
>
> Овај репозиторијум садржи 50+ превода на језике што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ово вам даје све што вам треба за завршетак курса са много бржим преузимањем.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ако желите да додатне језике за превод подржимо, они су наведени [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://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) где ћеш пронаћи ресурсе за почетнике, студенске пакете па чак и начине да добијеш бесплатан сертификатски ваучер. Ову страницу треба да додаш у обележиваче и повремено проверавате јер месечно мењамо садржај.
### 📣 Обзнање - Нови GitHub Copilot Agent изазови за завршетак!
### 📣 Обавештење - Нови изазови GitHub Copilot Agent мода за завршетак!
Додат нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Ово је нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он може не само да генерише текст већ и да креира и уређује фајлове, извршава команде и још много тога.
Додат јенови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршите коришћењем GitHub Copilot и Agent мода. Ако раније нисте користили Agent мод, он није само за генерисање текста већ може и да креира и уређује фајлове, извршава команде и још много тога.
### 📣 Обзнање - _Нови пројекат за израду помоћу генеративне АИ_
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас оспособљава за учење тема као што су:
- Израда упита и инжењеринг упита
Свака лекција укључује задатак за завршетак, проверу знања и изазов који ће вас усмеравати у учењу тема као што су:
- Писање упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претрагу
@ -60,131 +90,131 @@
## 🌱 Почетак рада
## 🌱 Почетак
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) како користити овај наставни план. Волео бих да добијемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Наставници**, дали смо [неке предлоге](for-teachers.md) како користити овај наставни план. Волео би да добијемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учећи](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, започните са квизом пре предавања и наставите читањем материјала предавања, завршите различите активности и проверите своје разумевање квизом након предавања.
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, почните са предавачким квизом, затим прочитајте материјал са предавања, завршите различите активности и проверите своје разумевање уз пост-квиз.
Да бисте побољшали своје искуство учења, повежите сесавршњацима да радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
Да бисте побољшали своје искуство учења, повежите сесасвојим вршњацима и радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
Задаље образовање, топло препоручујемо истраживање [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне материјале за учење.
Заунапређење образовања топло препоручујемо да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне студијске материјале.
### 📋 Постављање окружења
Овај наставни план има спремно развојно окружење! Пошто почнете, можете изабрати да покренете наставни план у [Codespace-у](https://github.com/features/codespaces/) (_прегледачком окружењу без потребе за инсталацијама_), или локално на вашем рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Овај наставни план има развојно окружење спремно за коришћење! Када почнете, можете изабрати да покренете наставни план у [Codespace](https://github.com/features/codespaces/) (_окружење засновано на прегледачу без потребе за инсталацијом_), или локално на свом рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Креирање свог репозиторијума
Да бисте лако сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нови репозиторијум у вашем GitHub налогу са копијом наставног плана.
Да бисте лако сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нов репозиторијум у вашем GitHub налогу са копијом наставног плана.
Пратите ове кораке:
1. **Направите форк репозиторијума**: Кликните на дугме „Fork“у горњем десном углу ове странице.
1. **Форкујте репозиторијум**: Кликните на дугме "Fork"у горњем десном углу ове странице.
У својој копији овог репозиторијума коју сте креирали, кликните на дугме **Code** и одаберите **Open with Codespaces**. Ово ће креирати нови Codespace у коме ћете радити.
У својој копији репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити.
#### Покретање наставног плана локално на вашем рачунару
Да бисте покренули овај курс локално на рачунару, потребан вам је уређивач текста, прегледач и алат командне линије. Наша прва лекција, [Увод у програмске језике и алате струке](../../1-getting-started-lessons/1-intro-to-programming-languages), упознаће вас са различитим опцијама за сваки од ових алата да бисте одабрали шта вам највише одговара.
Да бисте локално покренули овај наставни план на вашем рачунару, потребан вам је уређивач текста, прегледач и алат за командну линију. Наша прва лекција, [Увод у програмске језике и алате рада](../../1-getting-started-lessons/1-intro-to-programming-languages), водиће вас кроз разне опције за сваки од ових алата тако да изаберете шта вам највише одговара.
Препорука нам је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као уређивач, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем URL-а:
Наш савет је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као уређивач, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем УРЛ-а:
[CodeSpace](./images/createcodespace.png)
Онда отворите [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>` URL-ом који сте управо копирали:
Затим отворите [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>` УРЛ-ом који сте управо копирали:
```bash
git clone <your-repository-url>
```
2. Отворите фасциклу у Visual Studio Code-у. Ово можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
2. Отворите фасциклу у Visual Studio Code-у. То можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
> Препоручене Visual Studio Code екстензије:
> Препоручени додаци за Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code-а
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - да вам помогне да пишете код брже
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница директно у Visual Studio Code-у
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помоћ у бржем писању кода
## 📂 Свака лекција укључује:
- опциони скичнот
- опциони додатни видео
- квиз за загревање пре лекције
- опционалну скицноту
- опционални додатни видео
- припремни квиз пре лекције
- писану лекцију
- за пројектно засноване лекције, корак по корак упутства како направити пројекат
- за лекције засноване на пројекту, корак по корак упутства како изградити пројекат
- провере знања
- изазов
- додатну литературу
- додатно читање
- задатак
- [квиз након лекције](https://ff-quizzes.netlify.app/web/)
- [квиз после лекције](https://ff-quizzes.netlify.app/web/)
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова од по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), квиз апликација може да се покрене локално или објави на Azure; пратите упутства у фасцикли `quiz-app`.
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова са по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), квиз апликација се може покренути локално или дистрибуирати на Azure; пратите упутства у фасцикли `quiz-app`.
## 🗃️ Лекције
| | Назив пројекта | Концепти који се уче | Образовни циљеви | Повезана лекција | Аутор |
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима да обаве свој посао | [Увод у програмске језике и алате заната](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак рада | Основе GitHub-а, укључујући рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на коду | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основе | JavaScript типови података | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Основе | Одлучивање уз помоћ JS | Научите како правити услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Направите HTML за креирање онлајн тераријума, са фокусом на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стилизовање онлајн тераријума, са фокусом на основе CSS-а укључујући и респонсивност странице | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript closures, DOM манипулација | Направите JavaScript који чини тераријум интерактивним помоћу "drag/drop", са фокусом на closure и DOM манипулацију | [JavaScript closures, DOM манипулација](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како користити догађајесатастатуре за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како започети развој додатка за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Израда форме, позив API-ја и чување променљивих у local storage | Направите JavaScript елементе ваше додатке за прегледачем који позива API користећи променљиве сачуване у локалну меморију | [API, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, перформансе веба | Употребите позадинске процесе прегледача за управљање иконицом додатка; научите о перформансама и оптимизацијама за учинак | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Напреднија развој игара са JavaScript-ом | Научите о наслеђивању користећи класе и композицију и Pub/Sub шаблон, припрема за развој игре | [Увод у напредан развој игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на Canvas | Научите о Canvas API-ју који се користи за цртање елемената на екрану | [Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи координате и Canvas API | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Детекција судара | Учините елементе да се сударе и реагују један на другог користећи притиске тастера и обезбедите cooldown функцију за перформансе | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Вођење резултата | Извршите математичке калкулације на основу статуса и учинка игре | [Вођење резултата](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завршавање и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и рутирање у веб апликацији | Научите како креирати основну архитектуру са више страница користећи руте и HTML шаблоне | [HTML шаблони и рутирање](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како градити форме и руковати валидирањем | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података | Како подаци улазе и излазе из апликације, како их преузимати, чувати и одлагати | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како гауправљати програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са VScode | Научите како користити едитор кода | [Користите VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог АИ асистента | [Пројекат АИ асистента](./9-chat-project/README.md) | Chris |
| | Назив пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| 01 | Почетак рада | Увод у програмирање и алатке струке | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима у раду | [Увод у програмске језике и алатке струке](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другим на кодној бази | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основе | Врсте података у JavaScript-у | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Сазнајте о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | JS Основе | Доношење одлука у JS-у | Научите како да користите услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима помоћу низова и петљи у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стил тераријума, фокусирајући се на основе CSS-а укључујући додавање респонзивности страницама | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript затварања, манипулација DOM-ом | Направите JavaScript да тераријум функционише као drag/drop интерфејс, фокусирајући се на затварања и манипулацију DOM-ом | [JavaScript затварања, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра куцања](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како да искористите тастатурне догађаје за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Сазнајте како прегледачи раде, њихову историју и како створити прве елементе проширења за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Креирање форме, позивање API-ја и складиштење променљивих у локалну меморију | Направите JavaScript елементе ваше екстензије за позивање API користећи променљиве у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом екстензије; научите о веб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напреднија израда игре у JavaScript-у | Научите о наследству користећи и класе и композицију и Pub/Sub образац, као припрему за израду игре | [Увод у напредну израду игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну (canvas) | Научите о Canvas API-ју, који се користи за цртање елемената на екрану| [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Премештање елемената по екрану | Откријте како елементи добијају кретање користећи картизне координате и Canvas API | [Премештање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Учини да се елементи сударају и реагују један на други користећи притиске тастера и обезбедите функцију хладног периода за глaдко функционисање игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Водити резултат | Обављај математичке операције на основу статуса и перформанси игре | [Води резултат](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и рутеу веб апликацији | Научите како направити структуру више страница у вебсајту користећи рутирање и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како изградити форме и руковати валидацијом | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Начини дохвата и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, складиштити и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем (state management) | Научите како ваша апликација задржава стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Прегледач/VScode кôд](../../8-code-editor) | Рад са VScode-ом | Научите како користити уређивач кôда | [Употреба VScode уређивача кôда](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI асистенти](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогија
Наш наставни план и програм дизајнирани суса два кључна педагошка принципа на уму:
Наш наставни план и програм једизајниран са два кључна педагошка принципа у виду:
* учење засновано на пројектима
* чести квизови
Програм учи основе 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 основама за упознавање концепата, упарених са видео снимком из серије "[Beginners Series to: 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 помоћу друге колекције видео записа: "[Beginner Series to: 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](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошли су ваши конструктивни предлози!
## 🧭 Оффлајн приступ
## 🧭 Приступ без мреже
Ову документацију можете покренути оффлајн користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репо, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на локалну машину и затиму коренској фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем localhost-у: `localhost:3000`.
Можете покренути ову документацију без мреже користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на свом локалном уређају, а ондау коренској фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем локалном хосту: `localhost:3000`.
## 📘 PDF
PDF svih lekcija можете пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF свих лекција може се пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Други курсеви
## 🎒 Остали курсеvi
Наш тим производи и друге курсеве! Погледајте:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -194,7 +224,7 @@ PDF свих лекција може се пронаћи [овде](https://micr
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / агенти
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -202,7 +232,7 @@ PDF свих лекција може се пронаћи [овде](https://micr
---
### Серия генеративне AI
### Серти генеративног AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -221,29 +251,29 @@ PDF свих лекција може се пронаћи [овде](https://micr
---
### Серия Copilot
### Серти Копилот
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ако запнете или имате питања о креирању AI апликација. Придружите се другим учесницима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели.
Ако застакнете или имате било каквих питања у вези са прављењем AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP-у. Тоје подршка заједница где су питања добродошла и знање се слободно дели.
Овај репозиторјум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
---
<!-- 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). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуми или неправилна тумачења проистекла из коришћења овог превода.