diff --git a/translations/hr/.co-op-translator.json b/translations/hr/.co-op-translator.json index dae41c3f3..eb7074503 100644 --- a/translations/hr/.co-op-translator.json +++ b/translations/hr/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T09:36:14+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T15:06:23+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "hr" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:45:47+00:00", + "translation_date": "2026-03-06T15:15:01+00:00", "source_file": "AGENTS.md", "language_code": "hr" }, @@ -516,8 +516,8 @@ "language_code": "hr" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:37:09+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T15:02:12+00:00", "source_file": "README.md", "language_code": "hr" }, diff --git a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 8eca221df..68b333745 100644 --- a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,161 +1,161 @@ # Uvod u programske jezike i moderne razvojne alate + +Hej, budući developere! 👋 Mogu li ti reći nešto što mi i dalje izaziva trnce svaki dan? Upravo ćeš otkriti da programiranje nije samo o računalima – radi se o pravim supermoćima kojima možeš ostvariti svoje najluđe ideje! -Bok, budući programeru! 👋 Mogu li ti reći nešto što mi i danas svaki dan izaziva jezu? Upravo ćeš otkriti da programiranje nije samo za računala – to su prave supermoći koje ti omogućuju da oživiš svoje najluđe ideje! +Znaš onaj trenutak kad koristiš svoju omiljenu aplikaciju i sve se savršeno složi? Kad klikneš na gumb i dogodi se nešto čarobno što te natjera da pomisliš "vau, kako su TO napravili?" Pa, netko baš poput tebe – vjerojatno sjedi u svojoj omiljenoj kafiću u 2 ujutro s trećom espresom – napisao je kod koji je stvorio tu čaroliju. I evo što će te oduševiti: na kraju ove lekcije ne samo da ćeš razumjeti kako su to napravili, već ćeš i sam jedva čekati da probaš! -Znaš onaj trenutak kad koristiš svoju omiljenu aplikaciju i sve jednostavno savršeno klikne? Kad dodirneš gumb i dogodi se nešto posve magično zbog čega pomisliš „wow, kako su TO učinili?“ Pa, netko baš poput tebe – vjerojatno sjedi u svom omiljenom kafiću u 2 ujutro s trećim espresom – napisao je kod koji je stvorio tu čaroliju. A ovo će ti izvaditi dah: do kraja ovog sata ćeš ne samo razumjeti kako su to napravili, nego ćeš jedva čekati sam probati! +Pogledaj, u potpunosti razumijem ako ti programiranje sada djeluje zastrašujuće. Kad sam ja počinjao, iskreno sam mislio da moraš biti neki matematički genije ili da kodiraš od pete godine. Ali ovo je ono što mi je sasvim promijenilo pogled: programiranje je točno kao učenje razgovora na novom jeziku. Počneš s "bok" i "hvala", zatim naručuješ kavu, a prije nego što znaš, vodiš duboke filozofske razgovore! Samo što u ovom slučaju razgovaraš s računalima, i iskreno? Oni su najstrpljiviji sugovornici koje ćeš ikada imati – nikad ne osuđuju tvoje pogreške i uvijek su spremni pokušati ponovno! -Pogledaj, potpuno razumijem ako ti se programiranje sada čini zastrašujuće. Kad sam ja počinjao, iskreno sam mislio da trebaš biti neki matematički genij ili da kodaš od pete godine života. Ali evo što mi je u potpunosti promijenilo pogled: programiranje je kao učenje novog jezika komunikacije. Počneš s „bok“ i „hvala“, zatim naručuješ kavu, a prije nego znaš, vodiš duboke filozofske razgovore! Osim što u ovom slučaju razgovaraš s računalima, i iskreno? Oni su najstrpljiviji sugovornici koje možeš imati – nikad ne osuđuju tvoje pogreške i uvijek su spremni ponovno pokušati! - -Danas ćemo istražiti nevjerojatne alate koji čine moderni web razvoj ne samo mogućim, već i ozbiljno zaraznim. Govorim o točno istim uređivačima, preglednicima i radnim procesima koje koriste developeri u Netflixu, Spotifyu i tvom omiljenom indie studiju svaki dan. I evo dijela koji će te natjerati da zaplešeš od sreće: većina ovih profesionalnih, industrijskih alata je potpuno besplatna! +Danas ćemo istražiti nevjerojatne alate koji moderni razvoj weba čine ne samo mogućim, već i ozbiljno zaraznim. Govorim o istim onim uređivačima, preglednicima i radnim procesima koje developeri u Netflixu, Spotifyju i omiljenom neovisnom studiju koriste svaki dan. A evo što će te dodatno razveseliti: većina ovih profesionalnih, industrijskih alata potpuno je besplatna! ![Intro Programming](../../../../translated_images/hr/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Vaše Programersko Putovanje Danas - section Otkrij - Što je programiranje: 5: You - Programski jezici: 4: You - Pregled alata: 5: You - section Istraži - Uređivači koda: 4: You - Preglednici i alati za razvoj: 5: You - Naredbeni redak: 3: You - section Vježbaj - Jezični detektiv: 4: You - Istraživanje alata: 5: You - Povezivanje sa zajednicom: 5: You + title Vaše Putovanje Programiranjem Danas + section Otkrijte + Što je Programiranje: 5: You + Programski Jezici: 4: You + Pregled Alata: 5: You + section Istražite + Uređivači Koda: 4: You + Preglednici i Alati za Razvijatelje: 5: You + Naredbeni Redak: 3: You + section Vježbajte + Detektiv Jezika: 4: You + Istraživanje Alata: 5: You + Povezivanje Zajednice: 5: You ``` -## Pogledajmo što već znaš! +## Vidimo što već znaš! -Prije nego što skočimo na zabavne stvari, zanima me – što već znaš o ovom svijetu programiranja? I slušaj, ako na ova pitanja gledaš misleći „Doslovno nemam pojma ni o čemu od ovoga,“ nije samo u redu, to je savršeno! To znači da se nalaziš na točno pravom mjestu. Razmišljaj o ovom kvizu kao o zagrijavanju prije treninga – samo pripremamo tvoje moždane mišiće! +Prije nego skočimo u zabavne stvari, zanimljivo me što već znaš o ovom programerskom svijetu? I slušaj, ako gledaš ova pitanja i misliš "Doslovno nemam pojma o ničemu od ovoga," nije samo u redu, nego je savršeno! To znači da si na točno pravom mjestu. Razmišljaj o ovom kvizu kao o istezanju prije treninga – samo zagrijavamo moždane mišiće! -[Posloži pred-čas kviz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Prođi kviz prije lekcije](https://ff-quizzes.netlify.app/web/) -## Avantura na koju krećemo zajedno +## Avantura koja nas čeka zajedno -Ok, stvarno sam oduševljen onim što ćemo danas istražiti! Ozbiljno, volio bih vidjeti tvoj izraz lica kad ti neki od ovih pojmova zaista sjednu. Evo nevjerojatnog putovanja na koje krećemo zajedno: +Ok, stvarno sam uzbuđen oko onoga što ćemo danas istražiti! Ozbiljno, volio bih vidjeti tvoj izraz lica kad ti neki od ovih pojmova kliknu. Evo nevjerojatnog putovanja na koje krećemo zajedno: -- **Što je programiranje zapravo (i zašto je to najslađa stvar ikad!)** – Otkrit ćemo kako je kod doslovno nevidljiva čarolija koja pokreće sve oko tebe, od onog alarma koji nekako zna da je ponedjeljak ujutro do algoritma koji savršeno kroji tvoje Netflix preporuke -- **Programski jezici i njihove nevjerojatne osobnosti** – Zamislite da ulaziš na zabavu na kojoj svaka osoba ima potpuno drugačije supermoći i načine rješavanja problema. Tako izgleda svijet programskih jezika, i voljet ćeš ih upoznati! -- **Temeljni gradivni blokovi koji stvaraju digitalnu magiju** – Zamislite ovo kao ultimativni LEGO set za kreativnost. Kad shvatiš kako se ti dijelovi uklapaju, shvatit ćeš da doslovno možeš složiti bilo što što ti mašta zamisli -- **Profesionalni alati koji će ti dati osjećaj kao da si dobio čarobni štapić** – Nije pretjerivanje – ovi alati će te zaista natjerati da se osjećaš kao da imaš supermoći, a najbolji dio? To su isti alati koje koriste profesionalci! +- **Što je programiranje zapravo (i zašto je najcool stvar ikad!)** – Otkrit ćemo kako je kod doslovno nevidljiva čarolija koja pokreće sve oko tebe, od onog alarma koji nekako zna da je ponedjeljak ujutro do algoritma koji savršeno bira tvoje Netflix preporuke +- **Programski jezici i njihove nevjerojatne osobnosti** – Zamislite da uđete na zabavu gdje svaka osoba ima potpuno različite supermoći i načine rješavanja problema. Tako je u svijetu programskih jezika, i svidjet će ti se upoznavanje s njima! +- **Temeljni gradivni blokovi koji pokreću digitalnu magiju** – Razmišljaj o njima kao o ultimativnom kreativnom LEGO setu. Kad shvatiš kako ti dijelovi međusobno funkcioniraju, shvatit ćeš da možeš doslovno izgraditi sve što mašta sanja +- **Profesionalni alati zbog kojih ćeš se osjećati kao da si upravo dobio čarobnjački štapić** – Ne pretjerujem – ovi alati će te zaista natjerati da se osjećaš kao da imaš supermoći, a najbolji dio? To su isti oni koje profesionalci koriste! -> 💡 **Evo u čemu je stvar**: Nemoj ni pomišljati na to da sve danas naučiš napamet! Trenutno želim da osjetiš taj sjaj uzbuđenja zbog mogućnosti. Detalji će se prirodno upamtiti dok vježbamo zajedno – to je pravi način učenja! +> 💡 **Evo što je bitno:** Nemoj ni pomišljati da ćeš danas pamtiti sve napamet! Sada samo želim da osjetiš onu iskru uzbuđenja glede mogućnosti. Detalji će se prirodno učvrstiti dok vježbamo zajedno – tako prava učenja funkcioniraju! -> Ovaj sat možeš proći i na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Lekciju možeš proći na [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Pa što točno *jest* programiranje? +## Pa što je točno *programiranje*? -Ok, uhvatimo se milijun dolara vrijednog pitanja: što je zapravo programiranje? +Ok, uhvatimo milijunsko pitanje: što je programiranje, zapravo? -Ispričat ću ti priču koja mi je potpuno promijenila pogled na ovo. Prošli tjedan sam pokušavao objasniti mami kako se koristi naš novi pametni daljinski za TV. Uhvatim se kako govorim stvari poput „Pritisni crveni gumb, ali ne onaj veliki crveni, mali crveni s lijeve strane... ne, tvoj drugi lijevi... okej, sad ga drž’ dvije sekunde, ne jednu, ne tri...“ Zvuči poznato? 😅 +Ispričat ću ti priču koja mi je u potpunosti promijenila razmišljanje o tome. Prošli tjedan sam pokušavao objasniti mami kako se koristi novi pametni daljinski za TV. Uhvatih se da govorim stvari poput "Pritisni crveni gumb, ali ne onaj veliki crveni, onaj mali crveni s lijeve strane... ne, tvoj drugi lijevi... ok, sada ga drži dvije sekunde, ne jednu, ne tri..." Zvuči poznato? 😅 -To je programiranje! To je umjetnost davanja izuzetno detaljnih, korak-po-korak uputa nečemu što je vrlo moćno, ali treba da sve bude savršeno razjašnjeno. Osim što niješ mami objašnjavao (koja može pitati „koji crveni gumb?!“), nego računalu (koje radi točno ono što kažeš, čak i ako to nije baš ono što si htio). +To je programiranje! To je umjetnost davanja iznimno detaljnih, korak-po-korak uputa nečemu što je vrlo moćno, ali treba da mu se sve precizno objasni. Samo što umjesto da objašnjavaš mami (koja može pitati "koji crveni gumb?!"), objašnjavaš računalu (koje radi točno ono što mu kažeš, čak i ako to nije ono što si stvarno htio). -Evo što me je oduševilo kad sam prvi put naučio ovo: računala su zapravo prilično jednostavna u svojoj srži. Doslovno razumiju samo dvije stvari – 1 i 0, što je u osnovi „da“ i „ne“ ili „uključeno“ i „isključeno.“ To je to! Ali ovdje dolazi čarolija – ne moramo govoriti u 1-icama i 0-icama kao u Matrixu. Tu na scenu stupaju **programski jezici**. Oni su kao najbolji prevoditelj na svijetu koji pretvara tvoje sasvim normalne ljudske misli u računalni jezik. +Što mi je pomaknulo razumijevanje kad sam ovo prvi puta shvatio: računala su zapravo prilično jednostavna u svojoj biti. Doslovno razumiju samo dvije stvari – 1 i 0, što je zapravo samo "da" i "ne" ili "uključeno" i "isključeno." To je to! Ali evo gdje postaje čarobno – ne moramo pričati u 1 i 0 kao da smo u Matrixu. Tu na scenu stupaju **programski jezici**. Oni su kao najbolji svjetski prevoditelj koji uzima tvoje potpuno normalne ljudske misli i pretvara ih u jezik računala. -I evo što mi svakog jutra doslovno izaziva jezu: sve *digitalno* u tvom životu počelo je s nekim kao ti, vjerojatno u pidžami s šalicom kave, tipkajući kod na laptopu. Taj Instagram filter koji te čini besprijekornim? Netko je to kodirao. Preporuka koja te dovela do tvoje nove omiljene pjesme? Netko je izgradio taj algoritam. Aplikacija koja ti pomaže podijeliti račun za večeru s prijateljima? Da, netko je pomislio „ovo je dosadno, sigurno mogu to popraviti“ i... onda je napravio! +I evo što mi i danas daje prave trnce svako jutro kad se probudim: doslovno *sve* digitalno u tvom životu počelo je s nekim baš poput tebe, vjerojatno u pidžami s šalicom kave, tipkajući kod na laptopu. Onaj Instagram filter koji te čini besprijekornim? Netko je to kodirao. Preporuka koja te dovela do tvoje nove omiljene pjesme? Developer je napravio baš taj algoritam. Aplikacija koja ti pomaže da podijeliš račun za večeru s prijateljima? Da, netko je pomislio "ovo je dosadno, sigurno mogu ovo popraviti" i onda... to je i napravio! -Kad naučiš programirati, ne samo da stječeš novu vještinu – postaješ dio ove nevjerojatne zajednice rješavatelja problema koji cijeli dan razmišljaju „Što ako mogu napraviti nešto što će nečiji dan učiniti malo boljim?“ Iskreno, postoji li išta cool od toga? +Kad naučiš programirati, ne samo da učiš novu vještinu – postaješ dio ove nevjerojatne zajednice ljudi koji rješavaju probleme i provode dane razmišljajući, "Što ako napravim nešto što će nečiji dan učiniti barem malo boljim?" Iskreno, postoji li išta bolji osjećaj? -✅ **Zabavni zadatak**: Evo nečega super cool što možeš potražiti kad budeš imao slobodnog vremena – tko misliš da je bio prvi računalni programer na svijetu? Dati ću ti nagovještaj: možda nije osoba koju očekuješ! Priča o toj osobi je apsolutno fascinantna i pokazuje da je programiranje uvijek bilo o kreativnom rješavanju problema i razmišljanju izvan okvira. +✅ **Zabavna potraga za činjenicom**: Evo nečeg superzanimljivog što možeš potražiti kad budeš imao slobodnog trenutka – tko misliš da je bio prvi svjetski programer? Dat ću ti trag: možda nije onaj koga očekuješ! Priča o toj osobi je zaista fascinantna i pokazuje da je programiranje oduvijek bilo o kreativnom rješavanju problema i razmišljanju izvan okvira. ### 🧠 **Vrijeme za provjeru: Kako se osjećaš?** -**Uzeći trenutak za razmišljanje:** -- Ima li sada smisla ideja o „davanju uputa računalima“? -- Možeš li smisliti neku svakodnevnu aktivnost koju bi htio automatizirati programiranjem? -- Koja pitanja ti se vrzmaju po glavi o svemu ovome s programiranjem? +**Odvoji trenutak za razmišljanje:** +- Sad ti ima smisla ideja "davanja uputa računalima"? +- Možeš li zamisliti neki dnevni zadatak koji bi volio automatizirati programiranjem? +- Koja pitanja ti se vrzmaju u glavi o cijeloj toj programskoj stvari? -> **Sjeti se**: potpuno je normalno ako ti neki pojmovi sada djeluju nejasno. Učenje programiranja je kao učenje novog jezika – treba vremena da tvoj mozak izgradi te neuronske veze. Ti to odlično radiš! +> **Zapamti:** Sasvim je normalno ako ti neki pojmovi sada djeluju nejasno. Učenje programiranja je kao učenje novog jezika – treba vremena da tvoj mozak izgradi te neuronske veze. Super si! -## Programsko jezici su kao različiti okusi magije +## Programski jezici su kao različiti okusi magije -Ok, ovo će možda zvučati čudno, ali drži se sa mnom – programski jezici su kao različite vrste glazbe. Razmisli o tome: imaš jazz, koji je gladak i improvizacijski, rock koji je snažan i jednostavan, klasičnu glazbu koja je elegantna i strukturirana, i hip-hop koji je kreativan i izražajan. Svaki stil ima svoj vibe, svoju zajednicu strastvenih obožavatelja i svaki je savršen za različita raspoloženja i prilike. +Ok, ovo će zvučati čudno, ali ostani sa mnom – programski jezici su puno kao različite vrste glazbe. Razmisli o tome: imaš jazz, koji je glatki i improvizacijski, rock koji je snažan i izravan, klasičnu glazbu koja je elegantna i strukturirana, i hip-hop koji je kreativan i izražajan. Svaki stil ima svoj vibe, svoju zajednicu strastvenih fanova, i svaki je savršen za različite raspoloženja i prilike. -Programsko jezici rade potpuno isto! Ne bi koristio isti jezik za izradu zabavne mobilne igre kao za obradu ogromne količine klimatskih podataka, isto kao što ne bi svirao death metal na satu joge (dobro, većinom ne! 😄). +Programski jezici rade na isti način! Ne bi koristio isti jezik za izradu zabavne mobilne igre kao za analizu ogromne količine klimatskih podataka, baš kao što ne bi svirao death metal na satu joge (pa, barem na većini joga sati! 😄). -Ali ovo me svaki put iznova oduševi kad pomislim na to: ti jezici su kao da kraj tebe sjedne najstrpljiviji, briljantni prevoditelj na svijetu. Možeš izraziti svoje ideje na način koji prirodno vidi tvoj ljudski mozak, a oni obavljaju sav nevjerojatno složen posao prevođenja u 1-ice i 0-ke koje računala zapravo razumiju. Kao da imaš prijatelja koji je savršeno tečan u „ljudskoj kreativnosti“ i „računalnoj logici“ – i nikad se ne umori, nikad ne treba pauzu za kavu i nikad ne sudi ako isto pitanje postaviš dvaput! +Ali evo što mi svaki put iznova uzrokuje trnce kad o tome razmišljam: ovi jezici su kao nevjerojatno strpljiv, briljantan prevoditelj koji sjedi tik pored tebe. Možeš izreći svoje ideje na način koji ti je prirodan kao ljudskom mozgu, a oni se brinu za sav izuzetno složeni posao prevođenja toga u 1 i 0 koji računala zapravo razumiju. To je kao da imaš prijatelja koji tečno govori oba jezika – "ljudska kreativnost" i "računalna logika" – i nikad se ne umori, ne treba kavu i nikad te ne osuđuje ako pitaš isto pitanje dvaput! -### Popularni programski jezici i njihova primjena +### Popularni programski jezici i njihova namjena ```mermaid mindmap - root((Programski jezici)) - Web razvoj + root((Programski Jezici)) + Web Razvoj JavaScript - Čarolija frontenda - Interaktivne web stranice + Čarobnjak za Frontend + Interaktivne Web Stranice TypeScript - JavaScript + tipovi - Poslovne aplikacije + JavaScript + Tipovi + Poslovne Aplikacije Podaci i AI Python - Znanost o podacima - Strojno učenje + Znanost o Podacima + Strojno Učenje Automatizacija R Statistika Istraživanje - Mobilne aplikacije + Mobilne Aplikacije Java Android Poslovno Swift iOS - Apple ekosustav + Apple Ekosustav Kotlin - Moderni Android - Višeplatformski - Sustavi i performanse + Moderan Android + Višestruka Platforma + Sustavi i Performanse C++ Igre - Kritično za performanse + Kritično za Performanse Rust - Sigurnost memorije - Sustavsko programiranje + Sigurnost Memorije + Sistemsko Programiranje Go - Cloud servisi - Skalabilni backend + Oblak Usluge + Skalabilni Backend ``` -| Jezik | Najbolje za | Zašto je popularan | +| Jezik | Najbolji za | Zašto je popularan | |----------|----------|------------------| -| **JavaScript** | Web razvoj, korisnička sučelja | Radi u preglednicima i pokreće interaktivne web stranice | -| **Python** | Znanost o podacima, automatizacija, umjetna inteligencija | Jednostavan za čitanje i učenje, moćne biblioteke | -| **Java** | Poslovne aplikacije, Android aplikacije | Neovisan o platformi, robustan za velike sustave | -| **C#** | Windows aplikacije, razvoj igara | Snažna podrška u Microsoftovom ekosustavu | -| **Go** | Cloud usluge, backend sustavi | Brz, jednostavan, dizajniran za moderni računalni svijet | +| **JavaScript** | Web razvoj, korisnička sučelja | Radi u preglednicima i pokreće interaktivne stranice | +| **Python** | Data science, automatizacija, AI | Jednostavan za čitanje i učenje, moćne biblioteke | +| **Java** | Poslovne aplikacije, Android aplikacije | Nezavisan o platformi, robustan za velike sustave | +| **C#** | Windows aplikacije, razvoj igara | Snažna podrška Microsoft ekosustava | +| **Go** | Cloud servisi, backend sustavi | Brz, jednostavan, dizajniran za modernu računalnu tehnologiju | -### Visoko-nivovski vs. nisko-nivovski jezici +### Jezici višeg i nižeg nivoa -Ok, iskreno, ovo je bio pojam koji mi je slomio mozak kad sam počinjao učiti, pa ću ti ispričati analogiju koja mi je napokon sve osvijetlila – i stvarno se nadam da će pomoći i tebi! +Ovo je iskreno bio pojam koji mi je slomio mozak kad sam tek počinjao učiti, pa ću podijeliti analogiju koja mi je konačno pomogla da shvatim – i stvarno se nadam da će i tebi pomoći! -Zamisli da putuješ u zemlju čiji jezik ne znaš i očajno tražiš najbliži WC (svi smo prošli kroz to, zar ne? 😅): +Zamisli da posjećuješ zemlju u kojoj ne govoriš jezik, i hitno ti treba najbliži WC (svi smo bili tamo, zar ne? 😅): -- **Nisko-nivovsko programiranje** je kao da tako dobro naučiš lokalni dijalekt da možeš razgovarati s bakom koja prodaje voće na uglu koristeći kulturne reference, lokalni žargon i interne šale koje razumije samo netko tko je tamo odrastao. Super impresivno i nevjerojatno učinkovito... ako slučajno tečno govoriš! Ali prilično zastrašujuće ako samo pokušavaš pronaći WC. +- **Programiranje niskog nivoa** je kao učenje lokalnog dijalekta toliko dobro da možeš razgovarati s bakom koja prodaje voće na uglu koristeći kulturne reference, lokalni žargon i interne šale koje razumije samo netko tko je tamo odrastao. Super impresivno i iznimno efikasno... ako slučajno govoriš taj jezik! Ali poprilično neodoljivo kad samo tražiš WC. -- **Visoko-nivovsko programiranje** je kao da imaš onog divnog lokalnog prijatelja koji te jednostavno razumije. Možeš reći „Stvarno mi treba WC“ na čistom engleskom, a on prevede sve kulturne nijanse i da ti upute koje tvom nemjestnom mozgu savršeno sjede. +- **Programiranje visokog nivoa** je kao da imaš tog nevjerojatnog lokalnog prijatelja koji te jednostavno razumije. Možeš reći "Stvarno mi treba WC" na običnom engleskom, a on prevede sve kulturne nijanse i da ti upute na način koji savršeno ima smisla tvojoj nelokalnoj glavi. -U programerskim terminima: -- **Nisko-nivovski jezici** (kao Assembly ili C) ti dopuštaju da vodiš izuzetno detaljne razgovore s stvarnim hardverom računala, ali moraš razmišljati kao stroj, što je... pa, recimo da je to prilično velik mentalni skok! -- **Visoko-nivovski jezici** (kao JavaScript, Python ili C#) puštaju te da razmišljaš kao čovjek dok oni rade sav „strojni govor“ u pozadini. I uz to imaju ove nevjerojatno gostoljubive zajednice ljudi koji se sjećaju kako je bilo biti početnik i doista žele pomoći! +U programerskim pojmovima: +- **Jezici niskog nivoa** (kao Assembly ili C) dopuštaju ti iskazivanje vrlo detaljnih razgovora s stvarnom hardverskom strukturom računala, ali trebaš razmišljati kao stroj, što je... pa, recimo, velika mentalna promjena! +- **Jezici visokog nivoa** (kao JavaScript, Python ili C#) dopuštaju ti da razmišljaš kao čovjek dok oni rješavaju sav "strojni" govor iza kulisa. Plus, imaju nevjerojatno dobrodošle zajednice pune ljudi koji se sjećaju kako je bilo biti početnik i stvarno žele pomoći! -Pogodi s kojim ću ti savjetovati da počneš? 😉 Visoko-nivovski jezici su kao pomoćne kotačiće koje zapravo nikad nećeš htjeti skinuti jer iskustvo čine toliko ljepšim! +Pogodi s kojim bih te jezicima predložio da počneš? 😉 Jezici visokog nivoa su kao pomoćne kotačiće za bicikl koje zapravo nikad nećeš htjeti skloniti jer cijeli proces čine toliko ugodnijim! ```mermaid flowchart TB - A["👤 Ljudska misao:
'Želim izračunati Fibonačijeve brojeve'"] --> B{Izaberi razinu jezika} + A["👤 Ljudska misao:
'Želim izračunati Fibonaccijeve brojeve'"] --> B{Odaberi razinu jezika} - B -->|Visoka razina| C["🌟 JavaScript/Python
Jednostavno za čitanje i pisanje"] + B -->|Visoka razina| C["🌟 JavaScript/Python
Lako za čitanje i pisanje"] B -->|Niska razina| D["⚙️ Assembly/C
Izravna kontrola hardvera"] - C --> E["📝 Napiši: fibonacci(10)"] - D --> F["📝 Napiši: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Piši: fibonacci(10)"] + D --> F["📝 Piši: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Računalno razumijevanje:
Prijevodnik rješava složenost"] + E --> G["🤖 Računalno razumijevanje:
Prevoditelj rješava složenost"] F --> G G --> H["💻 Isti rezultat:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Pokažem ti zašto su visoko-nivovski jezici toliko prijateljski +### Pokažem ti zašto su jezici visokog nivoa toliko prijateljskiji -Ok, pokazat ću ti nešto što savršeno pokazuje zašto sam se zaljubio u visoko-nivovske jezike, ali prvo – obećaj mi jednu stvar. Kad vidiš prvi primjer koda, nemoj paničariti! Trebalo bi izgledati zastrašujuće. Upravo to i pokazujem! +Ok, upravo ću ti pokazati nešto što savršeno pokazuje zašto sam zavolio jezike visokog nivoa, ali prvo – moraš mi obećati nešto. Kad vidiš prvi primjer koda, ne paničari! Trebao bi izgledati zastrašujuće. To je točno ono što želim da osjetiš! -Pogledat ćemo isti zadatak napisan u dva potpuno različita stila. Oba stvaraju tzv. Fibonačijev niz – to je prekrasan matematički obrazac gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8, 13... (Zabavna činjenica: ovaj obrazac naći ćeš doslovno svugdje u prirodi – spirale sjemenki suncokreta, obrasci češera, čak i način na koji nastaju galaksije!) +Pogledat ćemo isti zadatak napisan u dva potpuno različita stila. Oba kreiraju tzv. Fibonacci niz – to je prekrasan matematički uzorak u kojem je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8, 13... (Zabavna činjenica: ovaj uzorak doslovno možete naći svugdje u prirodi – spirale sjemenki suncokreta, obrasce češera, pa čak i način na koji se galaksije formiraju!) -Spreman za razliku? Idemo! +Jesi spreman vidjeti razliku? Idemo! -**Visoko-nivovski jezik (JavaScript) – prijateljski ljudima:** +**Jezik visokog nivoa (JavaScript) – Ljudski prijateljski:** ```javascript -// Korak 1: Osnovna postavka Fibonaccija +// Korak 1: Osnovna postavka Fibonaccijevog niza const fibonacciCount = 10; let current = 0; let next = 1; @@ -184,28 +184,28 @@ console.log('Fibonacci sequence:'); ``` **Evo što ovaj kod radi:** -- **Deklarira** konstantu koja određuje koliko Fibonacci brojeva želimo generirati -- **Inicijalizira** dvije varijable za praćenje trenutnog i sljedećeg broja u nizu -- **Postavlja** početne vrijednosti (0 i 1) koje definiraju Fibonačijev obrazac -- **Prikazuje** naslovnu poruku da označimo naš izlaz +- **Deklarira** konstantu kojom određujemo koliko Fibonacci brojeva želimo generirati +- **Inicijalizira** dvije varijable da prati trenutni i sljedeći broj u nizu +- **Postavlja** početne vrijednosti (0 i 1) koje definiraju Fibonacci uzorak +- **Prikazuje** naslovnu poruku kako bi označili naš izlaz ```javascript -// Korak 2: Generirajte niz pomoću petlje +// Korak 2: Generiraj niz pomoću petlje for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Izračunajte sljedeći broj u nizu + // Izračunaj sljedeći broj u nizu const sum = current + next; current = next; next = sum; } ``` -**Objašnjenje što se ovdje događa:** -- **Petlja** kroz svaki položaj u nizu koristeći `for` petlju -- **Prikazuje** svaki broj s njegovom pozicijom koristeći formatiranje predložene niske -- **Izračunava** sljedeći Fibonacci broj zbrajajući tekuće i sljedeće vrijednosti -- **Ažurira** varijable za praćenje kako bi prešao na sljedeću iteraciju +**Evo što se događa dalje:** +- **Petlja** kroz svaku poziciju u nizu koristeći `for` petlju +- **Prikazuje** svaki broj s njegovom pozicijom koristeći predloženi string (template literal) +- **Izračunava** sljedeći Fibonacci broj zbrajanjem trenutnih i sljedećih vrijednosti +- **Ažurira** varijable kako bi prešao na sljedeću iteraciju ```javascript // Korak 3: Moderan funkcionalni pristup @@ -219,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Primjer korištenja +// Primjer upotrebe const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**U gornjem primjeru smo:** -- **Stvorili** funkciju koja se može ponovno koristiti koristeći modernu sintaksu streličaste funkcije -- **Izgradili** niz za pohranu cijelog niza umjesto da prikazujemo broj po broj -- **Koristili** indeksiranje niza kako bismo izračunali svaki novi broj iz prethodnih -- **Vratili** cijeli niz za fleksibilnu uporabu u drugim dijelovima programa +**U gore navedenom smo:** +- **Kreirali** funkciju koju je moguće višekratno koristiti pomoću moderne sintakse arrow funkcija +- **Izgradili** niz koji pohranjuje cijeli slijed, umjesto da ga prikazujemo broj po broj +- **Koristili** indeksiranje niza za izračunavanje svakog novog broja na temelju prethodnih +- **Vratili** cijeli niz za fleksibilnu upotrebu u drugim dijelovima programa -**Nisko-nivovski jezik (ARM Assembly) – prilagođen računalu:** +**Jezik niskog nivoa (ARM Assembly) – Računalu prijateljski:** ```assembly area ascen,code,readonly @@ -257,40 +257,40 @@ back add r0,r1 end ``` -Primijeti kako JavaScript verzija čita gotovo kao upute na engleskom, dok verzija u Assemblyju koristi kriptične naredbe koje izravno kontroliraju procesor računala. Oba ostvaruju isti zadatak, ali je visoko-nivovski jezik puno lakši za ljude za razumjeti, pisati i održavati. +Primijeti kako verzija u JavaScriptu čita gotovo kao upute na engleskom, dok verzija u Assemblyju koristi šifrirane naredbe koje direktno kontroliraju procesor računala. Oba izvršavaju isti zadatak, ali je jezik visokog nivoa mnogo lakši za ljude za razumjeti, pisati i održavati. **Ključne razlike koje ćeš primijetiti:** -- **Čitljivost**: JavaScript koristi opisne nazive poput `fibonacciCount` dok Assembly koristi kriptične oznake poput `r0`, `r1` -- **Komentari**: Visoko razine jezici potiču objašnjavajuće komentare koji kod čine samodokumentirajućim -- **Struktura**: Logički tijek JavaScripta odgovara načinu na koji ljudi razmišljaju o problemima korak po korak +- **Čitljivost**: JavaScript koristi opisna imena poput `fibonacciCount`, dok Assembly koristi kriptične oznake kao `r0`, `r1` +- **Komentari**: Visokonivojski jezici potiču objašnjavajuće komentare koji čine kod samodokumentiranim +- **Struktura**: Logički tok JavaScripta odgovara načinu na koji ljudi razmišljaju o problemima korak po korak - **Održavanje**: Ažuriranje JavaScript verzije za različite zahtjeve je jednostavno i jasno -✅ **O Fibonacci nizu**: Ovaj apsolutno prekrasan brojčani uzorak (gdje je svaki broj zbroj dva prethodna: 0, 1, 1, 2, 3, 5, 8...) pojavljue se doslovno *svugdje* u prirodi! Pronaći ćete ga u spiralama suncokreta, uzorcima češera, načinu na koji se ljuske nautilusa uvijaju, pa čak i u načinu rasta grana na drveću. Prilično je zadivljujuće kako matematika i kod mogu pomoći u razumijevanju i rekreiranju uzoraka kojima priroda stvara ljepotu! +✅ **O Fibonacci nizu**: Ovaj uistinu prekrasan uzorak brojeva (gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8...) pojavljuje se doslovno *posvuda* u prirodi! Naći ćete ga u spiralama suncokreta, obrascima češera, načinu savijanja školjki nautilusa pa čak i u načinu rasta grana drveća. Prilično je zadivljujuće kako nam matematika i kod pomažu razumjeti i ponovno stvarati obrasce koje priroda koristi da stvori ljepotu! -## Gradivni Blokovi Koji Čine Čaroliju Mogućom +## Gradivni elementi koji stvaraju magiju -Dobro, sada kada ste vidjeli kako programski jezici izgledaju u praksi, razložimo osnovne dijelove koji čine doslovno svaki ikada napisan program. Zamislite ih kao ključne sastojke u vašem omiljenom receptu – jednom kad shvatite što svaki od njih radi, moći ćete čitati i pisati kod u gotovo bilo kojem jeziku! +Dobro, sada kad ste vidjeli kako programski jezici izgledaju u akciji, razložimo temeljne dijelove koji čine doslovno svaki napisani program. Zamislite ih kao osnovne sastojke vašeg omiljenog recepta – kada shvatite što svaki od njih radi, moći ćete čitati i pisati kod gotovo u bilo kojem jeziku! -Ovo je nešto poput učenja gramatike programiranja. Sjećate se iz škole kad ste učili o imenima, glagolima i kako sastavljati rečenice? Programiranje ima vlastitu verziju gramatike, i iskreno, to je puno logičnije i opraštajuće nego što je ikada bila engleska gramatika! 😄 +Ovo je nekako kao učenje gramatike programiranja. Sjećate se u školi kada ste učili o imenima, glagolima i kako sastavljati rečenice? Programiranje ima vlastitu verziju gramatike, i iskreno, ona je puno logičnija i popustljivija nego što je ikad bila engleska gramatika! 😄 -### Izjave: Uputstva Korak Po Korak +### Izjave: upute korak po korak -Počnimo s **izjavama** – one su poput pojedinačnih rečenica u razgovoru s vašim računalom. Svaka izjava govori računalu da učini jednu konkretnu stvar, kao da dajete upute: "Skreni lijevo ovdje," "Zaustavi se na crvenom svjetlu," "Parkiraj na tom mjestu." +Počnimo s **izjavama** – one su kao pojedinačne rečenice u razgovoru s vašim računalom. Svaka izjava govori računalu da učini jednu određenu stvar, nešto poput davanja uputa: "Skreni lijevo ovdje," "Zaustavi se na crvenom svjetlu," "Parkiraj na tom mjestu." -Ono što volim kod izjava je koliko su obično čitljive. Pogledajte ovo: +Ono što volim kod izjava jest koliko su obično čitljive. Pogledajte ovo: ```javascript -// Osnovne naredbe koje izvršavaju pojedinačne radnje +// Osnovne naredbe koje izvode pojedinačne radnje const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Evo što ovaj kod radi:** -- **Deklarira** konstantnu varijablu za pohranu imena korisnika -- **Prikazuje** poruku pozdrava na konzolnom izlazu -- **Izračunava** i pohranjuje rezultat matematičke operacije +**Ovo kod radi:** +- **Deklarira** konstantnu varijablu za pohranu korisničkog imena +- **Prikazuje** poruku dobrodošlice na konzolu +- **Računa** i pohranjuje rezultat matematičke operacije ```javascript // Izjave koje komuniciraju s web stranicama @@ -298,19 +298,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Korak po korak, evo što se događa:** -- **Mijenja** naslov web stranice koji se pojavljuje na kartici preglednika +**Korak po korak, ovo se događa:** +- **Mijenja** naslov web stranice koji se prikazuje u kartici preglednika - **Mijenja** boju pozadine cijelog tijela stranice -### Varijable: Memorijski Sustav Vašeg Programa +### Varijable: memorijski sustav vašeg programa -U redu, **varijable** su iskreno jedan od mojih omiljenih koncepata za podučavanje jer su toliko slične stvarima koje već koristite svaki dan! +Ok, **varijable** su iskreno jedan od mojih omiljenih koncepata za podučavanje jer su toliko slične stvarima koje svakodnevno koristite! -Razmislite o svojoj listi kontakata na telefonu na trenutak. Ne pamtite telefonske brojeve svih – umjesto toga, spremite "Mama," "Najbolji prijatelj," ili "Pizzerija koja dostavlja do 2 ujutro" i vaš telefon zapamti stvarne brojeve. Varijable funkcioniraju upravo tako! One su poput označenih spremnika gdje vaš program može pohraniti informacije i kasnije ih dohvatiti koristeći ime koje zapravo ima smisla. +Razmislite o popisu kontakata na vašem telefonu na sekundu. Ne pametite telefonske brojeve svih – umjesto toga, spremate "Mama," "Najbolji prijatelj" ili "Pizzeria koja dostavlja do 2 ujutro" i dopuštate telefonu da zapamti stvarne brojeve. Varijable rade potpuno isto! One su poput označenih spremnika u kojima vaš program može pohraniti informacije i kasnije ih dohvatiti koristeći ime koje zapravo ima smisla. -Evo što je stvarno cool: varijable se mogu mijenjati dok vaš program radi (otuda i ime "varijabla" – vidite što su napravili?). Baš kao što biste mogli ažurirati kontakt pizzerije kad otkrijete nešto još bolje, varijable se mogu mijenjati kako vaš program uči nove informacije ili kako se situacije mijenjaju! +Evo što je stvarno cool: varijable se mogu mijenjati dok program radi (otuda i naziv "varijabla" – vidite što su napravili?). Baš kao što možete ažurirati zapis pizzerije kad otkrijete još bolje mjesto, varijable se mogu ažurirati dok program uči nove informacije ili se situacije mijenjaju! -Evo kako ovo može biti lijepo jednostavno: +Dopustite da vam pokažem koliko to može biti jednostavno: ```javascript // Korak 1: Kreiranje osnovnih varijabli @@ -321,10 +321,10 @@ let isRaining = false; ``` **Razumijevanje ovih koncepata:** -- **Pohranjujte** nepromjenjive vrijednosti u `const` varijable (npr. ime stranice) -- **Koristite** `let` za vrijednosti koje se mogu mijenjati tijekom programa -- **Dodjeljujte** različite tipove podataka: stringove (tekst), brojeve i boolean (true/false) -- **Birajte** opisna imena koja jasno objašnjavaju što svaka varijabla sadrži +- **Spremanje** nepromjenjivih vrijednosti u `const` varijable (poput naziva stranice) +- **Korištenje** `let` za vrijednosti koje se mogu mijenjati tijekom rada programa +- **Dodjeljivanje** različitih tipova podataka: stringovi (tekst), brojevi i booleovi (true/false) +- **Odabir** opisnih imena koja objašnjavaju što svaka varijabla sadrži ```javascript // Korak 2: Rad s objektima za grupiranje povezanih podataka @@ -335,10 +335,10 @@ const weatherData = { }; ``` -**U gornjem primjeru smo:** -- **Kreirali** objekt za grupiranje povezanih informacijama o vremenu +**U gornjem smo:** +- **Kreirali** objekt za grupiranje povezanih vremenskih podataka - **Organizirali** više podataka pod jednim imenom varijable -- **Koristili** parove ključ-vrijednost za jasno označavanje svake informacije +- **Koristili** parove ključ-vrijednost za jasnu oznaku svakog podatka ```javascript // Korak 3: Korištenje i ažuriranje varijabli @@ -351,31 +351,31 @@ temperature = 68; ``` **Razumimo svaki dio:** -- **Prikazuje** informacije koristeći template literale s `${}` sintaksom -- **Pristupa** svojstvima objekta koristeći točkastu notaciju (`weatherData.windSpeed`) -- **Ažurira** varijable deklarirane s `let` za odražavanje promjenjivih uvjeta -- **Kombinira** više varijabli za stvaranje smislenih poruka +- **Prikazivanje** informacija pomoću template literala s `${}` sintaksom +- **Pristup** svojstvima objekta koristeći točkasnu notaciju (`weatherData.windSpeed`) +- **Ažuriranje** varijabli deklariranih s `let` za odražavanje promjenjivih uvjeta +- **Kombiniranje** više varijabli kako bi se stvorile smislenije poruke ```javascript -// Korak 4: Moderna destrukturacija za čišći kod +// Korak 4: Moderno destrukturiranje za čišći kod const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Što trebate znati:** -- **Izvlači** specifična svojstva iz objekata koristeći destrukturiranje -- **Kreira** nove varijable automatski s istim imenima kao ključevi objekta -- **Pojednostavljuje** kod izbjegavajući ponavljanje točkaste notacije +- **Ekstrahirati** specifična svojstva iz objekata koristeći destrukturiranje +- **Stvarati** nove varijable automatski s istim imenima kao ključevi objekta +- **Pojednostaviti** kod izbjegavanjem ponavljajuće točkasne notacije -### Kontrolni Tijek: Podučavanje Vašeg Programa da Razmišlja +### Kontrola toka: učenje vašeg programa da razmišlja -U redu, ovo je mjesto gdje programiranje postaje potpuno nevjerojatno! **Kontrolni tijek** je u osnovi podučavanje vašeg programa kako donositi pametne odluke, baš kao što to vi radite svaki dan, a da toga uopće niste svjesni. +Ok, ovdje programiranje postaje potpuno nevjerojatno! **Kontrola toka** je u osnovi učenje vašeg programa kako donositi pametne odluke, baš kao što to i vi radite svaki dan bez razmišljanja. -Zamislite ovo: jutros ste vjerojatno prošli kroz nešto poput "Ako pada kiša, uzet ću kišobran. Ako je hladno, obući ću jaknu. Ako kasnim, preskočit ću doručak i uzet kavu usput." Vaš mozak prirodno slijedi ovu if-then logiku desetine puta dnevno! +Zamislite ovo: jutros ste vjerojatno prošli kroz nešto poput "Ako pada kiša, uzet ću kišobran. Ako je hladno, obući ću jaknu. Ako kasnim, preskočit ću doručak i kupiti kavu usput." Vaš mozak prirodno slijedi ovu if-then logiku desetke puta svaki dan! -To je ono što čini programe inteligentnima i živima, umjesto da slijede samo dosadan, predvidljiv scenarij. Oni zapravo mogu pogledati situaciju, procijeniti što se događa i reagirati primjereno. To je kao da svom programu date mozak koji može prilagoditi i donositi odluke! +To je ono što programima daje osjećaj da su pametni i živi, a ne da samo prate dosadan, predvidiv skript. Oni zapravo mogu pogledati situaciju, procijeniti što se događa i adekvatno odgovoriti. To je poput davanja vašem programu mozga koji se može prilagoditi i donositi odluke! -Želite li vidjeti kako ovo sjajno funkcionira? Dopustite da vam pokažem: +Želite vidjeti kako to lijepo funkcionira? Dopustite da vam pokažem: ```javascript // Korak 1: Osnovna uvjetna logika @@ -389,11 +389,11 @@ if (userAge >= 18) { } ``` -**Evo što ovaj kod radi:** -- **Provjerava** zadovoljava li korisnik dob za glasanje +**Ovo kod radi:** +- **Provjerava** ispunjava li korisnik godine za glasanje - **Izvršava** različite blokove koda ovisno o rezultatu uvjeta -- **Izračunava** i prikazuje koliko još treba do postanka podobnim za glasanje ako je korisnik mlađi od 18 -- **Pruža** specifične i korisne povratne informacije za svaku situaciju +- **Izračunava** i prikazuje koliko vremena preostaje do kvalifikacije za glasanje ako je ispod 18 +- **Pruža** specifične i korisne povratne informacije za svaki scenarij ```javascript // Korak 2: Više uvjeta s logičkim operatorima @@ -409,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Rasčlanjivanje onoga što se ovdje događa:** +**Razlaganje što se događa:** - **Kombinira** više uvjeta koristeći `&&` (i) operator - **Stvara** hijerarhiju uvjeta koristeći `else if` za više scenarija -- **Rješava** sve moguće slučajeve s konačnim `else` blokom -- **Pruža** jasne, konkretne povratne informacije za različite situacije +- **Obrađuje** sve moguće slučajeve s konačnim `else` iskazom +- **Pruža** jasne i korisne povratne informacije za svaku situaciju ```javascript -// Korak 3: Sažeti uvjet s ternarnim operatorom +// Korak 3: Sažet uvjet s ternarnim operatorom const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Što morate zapamtiti:** +**Što treba zapamtiti:** - **Koristite** ternarni operator (`? :`) za jednostavne uvjete s dvije opcije -- **Napišite** uvjet prvo, zatim `?`, zatim rezultat za true, pa `:`, zatim rezultat za false -- **Primjenjujte** ovaj obrazac kad trebate dodijeliti vrijednosti prema uvjetima +- **Napišite** uvjet prvo, zatim `?`, zatim istinit rezultat, zatim `:`, potom lažni rezultat +- **Primijenite** ovaj obrazac kad trebate dodijeliti vrijednosti na temelju uvjeta ```javascript -// Korak 4: Obrada više specifičnih slučajeva +// Korak 4: Rješavanje više specifičnih slučajeva const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,55 +447,55 @@ switch (dayOfWeek) { } ``` -**Ovaj kod ostvaruje slijedeće:** +**Ovaj kod ostvaruje sljedeće:** - **Uspoređuje** vrijednost varijable s više specifičnih slučajeva -- **Grupira** slične slučajeve (radni dani vs. vikendi) -- **Izvršava** odgovarajući blok koda kad nađe podudaranje +- **Grupira** slične slučajeve zajedno (radni dani vs. vikendi) +- **Izvršava** odgovarajući blok koda kada se nađe podudaranje - **Uključuje** `default` slučaj za neočekivane vrijednosti -- **Koristi** `break` izjave da spriječi nastavak izvođenja sljedećeg slučaja +- **Koristi** `break` izjave za sprječavanje nastavka na sljedeći slučaj -> 💡 **Analogija iz stvarnog svijeta**: Zamislite kontrolni tijek poput najstrpljivijeg GPS-a koji vam daje upute. Možda kaže "Ako ima gužve na Glavnoj cesti, uzmi autocestu. Ako je konstrukcija blokirala autocestu, pokušaj slikoviti put." Programi koriste istu vrstu uvjetne logike da bi inteligentno reagirali na različite situacije i uvijek pružili korisniku najbolje moguće iskustvo. +> 💡 **Analagija iz stvarnog svijeta**: Zamislite kontrolu toka kao najstrpljiviji GPS na svijetu koji vam daje upute. Može reći "Ako je gužva na Glavnoj ulici, umjesto toga idite autocestom. Ako je izgradnja blokirala autocestu, pokušajte slikoviti put." Programi koriste baš takvu uvjetnu logiku da pametno reagiraju na različite situacije i uvijek pruže korisnicima najbolje moguće iskustvo. -### 🎯 **Provjera Koncepta: Majstorija Gradivnih Blokova** +### 🎯 **Provjera koncepata: Majstorstvo gradivnih elemenata** -**Pogledajmo kako stojite s osnovama:** -- Možete li vlastitim riječima objasniti razliku između varijable i izjave? -- Smislite stvarni scenarij u kojem biste koristili if-then odluku (poput primjera glasanja) -- Koja vas je stvar o logici programiranja iznenadila? +**Pogledajmo kako vam ide s temeljnim stvarima:** +- Možete li objasniti razliku između varijable i izjave svojim riječima? +- Smislite stvarni primjer u kojem biste koristili if-then odluku (kao u našem primjeru glasanja) +- Što vas je iznenadilo u logici programiranja? **Brzi poticaj samopouzdanja:** ```mermaid flowchart LR - A["📝 Izjave
(Upute)"] --> B["📦 Varijable
(Pohrana)"] --> C["🔀 Kontrola toka
(Odluke)"] --> D["🎉 Radni program!"] + A["📝 Izjave
(Upute)"] --> B["📦 Varijable
(Pohrana)"] --> C["🔀 Tijek kontrole
(Odluke)"] --> D["🎉 Radni program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Što slijedi**: Imat ćemo pravo veselje zaroniti dublje u ove koncepte dok nastavljamo ovaj nevjerojatan put zajedno! Sada se samo usredotočite na to da osjetite uzbuđenje zbog svih sjajnih mogućnosti koje su pred vama. Specifične vještine i tehnike će se prirodno usaditi kako budemo zajedno vježbali – obećavam da će ovo biti puno zabavnije nego što možda očekujete! +✅ **Što slijedi**: Uskoro ćemo se još dublje uroniti u ove koncepte i zajedno započeti ovo nevjerojatno putovanje! Sad se samo usredotočite na uzbuđenje zbog svih nevjerojatnih mogućnosti koje su pred vama. Specifične vještine i tehnike će se prirodno usaditi kako vježbamo zajedno – obećajem da će ovo biti puno zabavnije nego što možda očekujete! -## Alati Struke +## Alati zanata -U redu, iskreno, ovo je mjesto gdje se toliko uzbudim da se jedva mogu suzdržati! 🚀 Upravo ćemo govoriti o nevjerojatnim alatima koji će vam dati osjećaj kao da ste upravo dobili ključeve digitalnog svemirskog broda. +Dobro, iskreno ovdje se toliko uzbudim da se jedva kontroliram! 🚀 Upravo ćemo govoriti o nevjerojatnim alatima koji će vam učiniti da se osjećate kao da su vam dali ključeve digitalnog svemirskog broda. -Znate kako kuhar ima savršeno uravnotežene noževe koji mu djeluju kao produžetak ruku? Ili kako glazbenik ima onu gitaru koja kao da zapjeva u trenutku kad je dotakne? Pa, programeri imaju vlastitu verziju tih čarobnih alata, i evo što će vam apsolutno iznenaditi – većina njih je potpuno besplatna! +Znate kako kuhar ima te savršeno izbalansirane noževe koji su kao produžetak njegovih ruku? Ili kako glazbenik ima onu gitaru koja kao da pjeva čim je dotakne? Pa, programeri imaju vlastitu verziju tih čarobnih alata, i evo što će vam zbilja oduzeti dah – većina njih je potpuno besplatna! -Skoro se micam u stolici dok razmišljam o tome da vam ovo podijelim jer su potpuno revolucionirali način na koji pravimo softver. Govorimo o AI-pokretanim asistentima za kodiranje koji vam mogu pomoći napisati kod (nisam se šalio!), cloud okružjima gdje možete raditi čitave aplikacije doslovno od bilo kuda s Wi-Fi mrežom, i alatima za otklanjanje pogrešaka toliki sofisticiranim da ih možete usporediti s rendgenskim vidom za vaše programe. +Skoro skakutam na stolici dok razmišljam o tome da vam ovo pokažem jer su potpuno revolucionirali način na koji stvaramo softver. Govorimo o AI-pokretanim asistentima za kodiranje koji vam mogu pomoći napisati kod (ozbiljno!), cloud okruženjima gdje možete izgraditi kompletne aplikacije doslovno iz bilo kojeg mjesta s Wi-Fi-jem, te alatima za otklanjanje pogrešaka toliko sofisticiranim da su kao da imate rendgenski vid za svoje programe. -I evo dijela koji me i dalje oduševi: ovo nisu "alati za početnike" koje ćete prerasti. Ovo su točno isti profesionalni alati koje developeri u Googleu, Netflixu i u onom indie studiju aplikacija kojeg volite koriste baš u ovom trenutku. Osjećat ćete se kao pravi profesionalac koristeći ih! +A evo dijela koji mi i dalje diže kosu na glavi: ovi nisu "alata za početnike" koje ćemo prerasti. Ovo su isti profesionalni alati koje programeri u Googleu, Netflixu i onom indie studiju aplikacija koji volite koriste upravo sada. Osjećat ćete se kao totalni profesionalac koristeći ih! ```mermaid graph TD - A["💡 Vaša Ideja"] --> B["⌨️ Uređivač Koda
(VS Code)"] - B --> C["🌐 Alati za razvoj u pregledniku
(Testiranje i ispravljanje pogrešaka)"] + A["💡 Vaša ideja"] --> B["⌨️ Uređivač koda
(VS Code)"] + B --> C["🌐 Alati preglednika za razvoj
(Testiranje i ispravljanje pogrešaka)"] C --> D["⚡ Naredbeni redak
(Automatizacija i alati)"] D --> E["📚 Dokumentacija
(Učenje i referenca)"] - E --> F["🚀 Izvrsna web aplikacija!"] + E --> F["🚀 Nevjerojatna web aplikacija!"] - B -.-> G["🤖 AI Asistent
(GitHub Copilot)"] + B -.-> G["🤖 AI asistent
(GitHub Copilot)"] C -.-> H["📱 Testiranje uređaja
(Prilagodljiv dizajn)"] - D -.-> I["📦 Upravitelji paketa
(npm, yarn)"] + D -.-> I["📦 Upravljanje paketima
(npm, yarn)"] E -.-> J["👥 Zajednica
(Stack Overflow)"] style A fill:#fff59d @@ -505,106 +505,106 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Uređivači Koda i IDE-i: Vaši Novi Digitalni Najbolji Prijatelji +### Uređivači koda i IDE-ovi: vaši novi digitalni najbolji prijatelji -Razgovarajmo o uređivačima koda – oni su ozbiljno na putu da postanu vaša nova omiljena mjesta za provoditi vrijeme! Zamislite ih kao svoje osobno svetište kodiranja gdje ćete većinu vremena provoditi stvarajući i usavršavajući svoje digitalne kreacije. +Pričajmo o uređivačima koda – oni će stvarno postati vaše novo omiljeno mjesto za druženje! Zamislite ih kao svoje osobno utočište programiranja gdje ćete provesti većinu svog vremena izrađujući i usavršavajući svoje digitalne kreacije. -Ali evo što je apsolutno čarobno kod modernih uređivača: oni nisu samo sjajni uređivači teksta. Oni su kao da imate najsjajnijeg, najpodržavajućeg mentora za kodiranje koji sjedi pored vas 24/7. Uhvatit će vam tipfelere prije nego ih i primijetite, predložiti poboljšanja koja će vas učiniti genijem, pomoći vam da razumijete što svaki dio koda radi, a neki od njih mogu čak i predvidjeti što ćete napisati i ponuditi da dovrše vaše misli! +Ali ono što je apsolutno magično kod modernih uređivača jest da oni nisu samo fini tekstualni uređivači. Oni su poput najsjajnijeg, najpodržavajućeg mentora za kodiranje kraj vas 24 sata na dan, 7 dana u tjednu. Uhvatit će vaše tipfelere prije nego ih uopće primijetite, predložiti poboljšanja koja vas čine genijem, pomoći vam razumjeti što svaki dio koda radi, a neki od njih čak mogu predvidjeti što ćete napisati i ponuditi da dovrše vaše misli! -Sjećam se kad sam prvi put otkrio automatsko dovršavanje – doslovno sam se osjećao kao da živim u budućnosti. Počnete tipkati nešto, a uređivač kaže "Hej, jesi li razmišljao o ovoj funkciji koja radi točno ono što trebaš?" Kao da imate čitača misli kao prijatelja za kodiranje! +Sjećam se kad sam prvi put otkrio automatsko završavanje – doslovno sam se osjećao kao da živim u budućnosti. Počnete tipkati nešto, a uređivač kaže: "Hej, jeste li mislili na ovu funkciju koja radi upravo ono što trebate?" Kao da imate čitača misli kao prijatelja za kodiranje! -**Što ove uređivače čini tako nevjerojatnima?** +**Što ove uređivače čini nevjerojatnima?** -Moderni uređivači koda nude impresivan niz značajki koje vam povećavaju produktivnost: +Moderni uređivači koda nude impresivan niz značajki dizajniranih za povećanje vaše produktivnosti: -| Značajka | Što Radi | Zašto Pomaže | +| Značajka | Što radi | Zašto pomaže | |---------|--------------|--------------| -| **Isticanje Sintakse** | Boji različite dijelove koda | Čini kod lakšim za čitanje i pronalaženje grešaka | -| **Automatsko dovršavanje** | Predlaže kod dok tipkate | Ubrzava kodiranje i smanjuje greške u tipkanju | -| **Alati za Debugging** | Pomaže pronaći i popraviti pogreške | Štedi sate vremena za ispravljanje problema | -| **Proširenja** | Dodaju specijalizirane značajke | Prilagođavaju uređivač za bilo koju tehnologiju | -| **AI Asistenti** | Predlažu kod i objašnjenja | Ubrzavaju učenje i produktivnost | +| **Isticanje sintakse** | Boji različite dijelove vašeg koda | Čini kod lakšim za čitanje i pronalazak grešaka | +| **Automatsko dovršavanje** | Predlaže kod dok tipkate | Ubrzava kodiranje i smanjuje tipfelere | +| **Alati za ispravljanje pogrešaka** | Pomaže vam pronaći i ispraviti greške | Štedi sate na otklanjanju problema | +| **Proširenja** | Dodaju specijalizirane funkcije | Prilagođavaju uređivač bilo kojoj tehnologiji | +| **AI asistenti** | Predlažu kod i objašnjenja | Ubrzavaju učenje i produktivnost | -> 🎥 **Video Resurs**: Želite li vidjeti ove alate u akciji? Pogledajte [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) za sveobuhvatan pregled. +> 🎥 **Video resurs**: Želite vidjeti ove alate u akciji? Pogledajte ovaj [video Alati zanata](https://youtube.com/watch?v=69WJeXGBdxg) za sveobuhvatan pregled. -#### Preporučeni Uređivači za Web Razvoj +#### Preporučeni uređivači za web razvoj -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Besplatno) -- Najpopularniji među web developerima -- Sjajan ekosustav proširenja -- Ugrađena terminal i Git integracija +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (besplatan) +- Najpopularniji među web programerima +- Izvrsna ekosustav proširenja +- Ugrađeni terminal i Git integracija - **Obavezna proširenja**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-pokretani prijedlozi koda - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Suradnja u stvarnom vremenu - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatsko formatiranje koda - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Pronalazi tipkarske pogreške u kodu + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - suradnja u stvarnom vremenu + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - automatsko formatiranje koda + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - pronalaženje tipfelera u kodu -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Plaćeno, besplatno za studente) -- Napredni alati za debugging i testiranje +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (plaćeni, besplatan za studente) +- Napredni alati za otklanjanje grešaka i testiranje - Inteligentno dovršavanje koda -- Ugrađeni sustav kontrole verzija +- Ugrađeno upravljanje verzija -**Cloud IDE-i** (Različite cijene) -- [GitHub Codespaces](https://github.com/features/codespaces) - Cijeli VS Code u vašem pregledniku -- [Replit](https://replit.com/) - Odlično za učenje i dijeljenje koda -- [StackBlitz](https://stackblitz.com/) - Instantni full-stack web razvoj +**Cloud-based IDEs** (Različite cijene) +- [GitHub Codespaces](https://github.com/features/codespaces) - puni VS Code u pregledniku +- [Replit](https://replit.com/) - odličan za učenje i dijeljenje koda +- [StackBlitz](https://stackblitz.com/) - trenutačni full-stack web razvoj -> 💡 **Savjet za početak**: Počnite s Visual Studio Code – besplatan je, široko korišten u industriji, i ima ogromnu zajednicu koja stvara korisne tutorijale i proširenja. +> 💡 **Savjet za početak**: Počnite s Visual Studio Code – besplatan je, široko korišten u industriji i ima ogromnu zajednicu koja stvara korisne tutorijale i proširenja. -### Web Preglednici: Vaš Tajni Laboratorij za Razvoj +### Web preglednici: vaš tajni razvojni laboratorij -U redu, pripremite se da vam se um potpuno razbije! Znate kako ste koristili preglednike za listanje društvenih mreža i gledanje videa? Pa, ispostavilo se da su cijelo to vrijeme skrivali nevjerojatnu tajnu razvojnu laboratoriju, samo čekajući da je otkrijete! +Ok, pripremite se da vam se mozak potpuno raznese! Znate kako koristite preglednike za skrolanje društvenih mreža i gledanje videa? Pa, pokazalo se da su cijelo ovo vrijeme skrivali tajni nevjerojatni razvojni laboratorij, samo čekajući da ga otkrijete! -Svaki put kad kliknete desnim klikom miša na web stranicu i odaberete "Inspect Element", otvarate skriveni svijet razvojnih alata koji su iskreno moćniji od nekog skupog softvera za koji sam nekada plaćao stotine dolara. Kao da otkrivate da je vaša obična kuhinja cijelo vrijeme skrivala profesionalni kuharski laboratorij iza tajnog panela! -Prvi put kad mi je netko pokazao DevTools u pregledniku, proveo sam oko tri sata samo klikajući po svemu i govoreći "ČEKAJ, TO MOGU I TO?!" Doslovno možeš uređivati bilo koju web stranicu u stvarnom vremenu, vidjeti točno koliko brzo se sve učitava, testirati kako tvoja stranica izgleda na različitim uređajima, pa čak i debugirati JavaScript kao pravi profesionalac. Apsolutno je zapanjujuće! +Svaki put kad desnim klikom miša kliknete na web stranicu i odaberete "Inspect Element," otvarate skriveni svijet razvojnih alata koji su iskreno moćniji nego neki skupi softver za koji sam nekad plaćao stotine dolara. Kao da otkrivate da vaša obična kuhinja skriva profesionalni kuharski laboratorij iza tajnog panela! +Prvi put kad mi je netko pokazao DevTools u pregledniku, proveo sam otprilike tri sata samo klikajući okolo i govoreći "ČEKAJ, TO TO MOŽE TAKO?!" Doslovno možeš uređivati bilo koju web stranicu u stvarnom vremenu, vidjeti točno koliko brzo se sve učitava, testirati kako tvoja stranica izgleda na različitim uređajima, pa čak i ispravljati JavaScript kao totalni profesionalac. Potpuno je zapanjujuće! -**Evo zašto su preglednici tvoj tajni adut:** +**Evo zašto su preglednici tvoje tajno oružje:** -Kad stvaraš web stranicu ili web aplikaciju, trebaš vidjeti kako izgleda i ponaša se u stvarnom svijetu. Preglednici ne prikazuju samo tvoj rad, već daju i detaljne povratne informacije o performansama, pristupačnosti i potencijalnim problemima. +Kad stvaraš web stranicu ili web aplikaciju, trebaš vidjeti kako ona izgleda i ponaša se u stvarnom svijetu. Preglednici ne samo da prikazuju tvoj rad, već pružaju i detaljne povratne informacije o performansama, pristupačnosti i potencijalnim problemima. -#### Alati za razvoj u pregledniku (DevTools) +#### Alati za razvoj preglednika (DevTools) -Moderni preglednici uključuju opsežne razvojne alate: +Moderni preglednici uključuju sveobuhvatne razvojne pakete: -| Kategorija alata | Što radi | Primjer uporabe | -|------------------|----------|-----------------| -| **Inspector elemenata** | Pregled i uređivanje HTML/CSS u stvarnom vremenu | Prilagodi stilove i vidi trenutne rezultate | -| **Konzola** | Pregled poruka o greškama i testiranje JavaScripta | Debugiranje problema i eksperimenti s kodom | -| **Mrežni nadzor** | Praćenje učitavanja resursa | Optimizacija performansi i vremena učitavanja | -| **Provjera pristupačnosti** | Testiranje inkluzivnog dizajna | Osiguraj da tvoja stranica funkcionira za sve korisnike | +| Kategorija alata | Što radi | Primjer korištenja | +|------------------|----------|--------------------| +| **Inspektor elemenata** | Pregled i uređivanje HTML/CSS u stvarnom vremenu | Prilagodi stil i odmah vidi rezultate | +| **Konzola** | Pregled poruka o greškama i testiranje JavaScripta | Otklanjanje problema i eksperimentiranje s kodom | +| **Monitor mreže** | Praćenje učitavanja resursa | Optimizacija performansi i vremena učitavanja | +| **Provjera pristupačnosti** | Testiranje uključivog dizajna | Osiguraj da tvoja stranica radi za sve korisnike | | **Simulator uređaja** | Pregled na različitim veličinama zaslona | Testiranje responzivnog dizajna bez više uređaja | #### Preporučeni preglednici za razvoj - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industrijski standard DevTools s opsežnom dokumentacijom - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Izvrsni alati za CSS Grid i pristupačnost -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Izgrađen na Chromiumu uz Microsoftove razvojne resurse +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Izgrađen na Chromiumu s Microsoftovim resursima za razvoj -> ⚠️ **Važan savjet za testiranje**: Uvijek testiraj svoje web stranice u više preglednika! Ono što savršeno radi u Chromeu može izgledati drugačije u Safariju ili Firefoxu. Profesionalni programeri testiraju u svim glavnim preglednicima kako bi osigurali dosljedno korisničko iskustvo. +> ⚠️ **Važan savjet za testiranje**: Uvijek testiraj svoje web stranice u više preglednika! Ono što savršeno radi u Chromeu može izgledati drugačije u Safariju ili Firefoxu. Profesionalni programeri testiraju na svim glavnim preglednicima kako bi osigurali dosljedno korisničko iskustvo. -### Alati naredbenog retka: tvoja vrata u razvojne supermoći +### Alati naredbenog retka: tvoje vrata u supermoći programera -U redu, idemo na potpuno iskren trenutak o naredbenom retku, jer želim da ovo čuješ od nekoga tko stvarno to razumije. Kad sam ga prvi put vidio – samo ovaj zastrašujući crni ekran s trepćućim tekstom – doslovno sam mislio, „Ne, nikako! Ovo izgleda kao nešto iz hacker filma iz 1980-ih i definitivno nisam dovoljno pametan za ovo!“ 😅 +Dobro, budimo potpuno iskreni oko naredbenog retka, jer želim da to čuješ od nekoga tko to stvarno razumije. Kad sam ga prvi put vidio – samo taj zastrašujući crni ekran s trepćućim tekstom – doslovno sam pomislio, "Ne, apsolutno ne! Ovo izgleda kao nešto iz hakerskog filma iz 1980-ih, i definitivno nisam dovoljno pametan za ovo!" 😅 -Ali evo što bih volio da mi je netko tada rekao, i što ti sada govorim: naredbeni redak nije strašan – zapravo je kao da razgovaraš direktno sa svojim računalom. Pomisli na to kao razliku između naručivanja hrane preko neke fancy aplikacije s slikama i jelovnicima (što je fino i jednostavno) i ulaska u svoj omiljeni lokalni restoran gdje kuhar točno zna što voliš i može ti napraviti nešto savršeno samo zato što mu kažeš „iznenadi me s nečim nevjerojatnim.“ +Ali evo što bih želio da mi je netko tada rekao, a što ti sada govorim: naredbeni redak nije strašan – on je zapravo kao da vodiš izravan razgovor sa svojim računalom. Razmisli o tome kao o razlici između naručivanja hrane putem luksuzne aplikacije s slikama i jelovnicima (što je zgodno i jednostavno) nasuprot ulasku u omiljeni lokalni restoran gdje kuhar točno zna što voliš i može ti odmah napraviti nešto savršeno samo ako kažeš "iznenadi me nečim nevjerojatnim." -Naredbeni redak je mjesto gdje programeri osjećaju kao čarobnjaci. Upisuješ nekoliko naizgled magičnih riječi (okej, to su samo naredbe, ali djeluju kao magija!), pritisneš enter i BUM – stvorio si čitave strukture projekta, instalirao moćne alate s cijelog svijeta ili rasporedio svoju aplikaciju na internet da je milijuni ljudi mogu vidjeti. Kad prvi put osjetiš tu moć, iskreno, postaneš ovisan! +Naredbeni redak je mjesto gdje programeri osjećaju da su pravi čarobnjaci. Ukucaš nekoliko naizgled magičnih riječi (okej, to su samo naredbe, ali djeluju kao magija!), pritisneš enter i BUM – stvorio si čitavu strukturu projekta, instalirao moćne alate iz cijelog svijeta ili postavio svoju aplikaciju na internet da je milijuni ljudi vide. Kad jednom okusite tu moć, iskreno je poprilično zarazno! **Zašto će naredbeni redak postati tvoj omiljeni alat:** -Dok su grafička sučelja izvrsna za mnoge zadatke, naredbeni redak briljira u automatizaciji, preciznosti i brzini. Mnogi razvojni alati rade prvenstveno putem naredbenog retka, a učenje njihove učinkovite uporabe može znatno poboljšati tvoju produktivnost. +Iako su grafička sučelja izvrsna za mnoge zadatke, naredbeni redak se ističe u automatizaciji, preciznosti i brzini. Mnogi alati za razvoj primarno rade kroz naredbeni redak, a učenje njihovog učinkovite korištenja može dramatično povećati tvoju produktivnost. ```bash -# Korak 1: Kreirajte i prijeđite u direktorij projekta +# Korak 1: Kreirajte i navigirajte do direktorija projekta mkdir my-awesome-website cd my-awesome-website ``` -**Ovo kod radi:** -- **Stvara** novi direktorij „my-awesome-website“ za tvoj projekt -- **Prelazi** u novo stvoreni direktorij kako bi započeo rad +**Evo što ovaj kod radi:** +- **Stvara** novi direktorij nazvan "my-awesome-website" za tvoj projekt +- **Ulazi** u nedavno kreirani direktorij za početak rada ```bash # Korak 2: Inicijalizirajte projekt s package.json @@ -615,14 +615,14 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Korak po korak, ovako se odvija:** +**Korak po korak, evo što se događa:** - **Inicijalizira** novi Node.js projekt s zadanim postavkama koristeći `npm init -y` -- **Instalira** Vite kao moderan build alat za brzi razvoj i proizvodnju -- **Dodaje** Prettier za automatsko formatiranje koda i ESLint za provjere kvalitete koda -- **Koristi** zastavicu `--save-dev` za označavanje ovih alata kao razvojnih ovisnosti +- **Instalira** Vite kao moderan alat za izgradnju za brzo vrijeme razvoja i proizvodnje +- **Dodaje** Prettier za automatsko formatiranje koda i ESLint za provjeru kvalitete koda +- **Koristi** oznaku `--save-dev` za označavanje kao razvojnih ovisnosti ```bash -# Korak 3: Izradite strukturu projekta i datoteke +# Korak 3: Kreirajte strukturu projekta i datoteke mkdir src assets echo 'My Site

Hello World

' > index.html @@ -630,54 +630,54 @@ echo 'My Site

Hello Wo npx vite ``` -**U gornjem primjeru smo:** +**U gore navedenom smo:** - **Organizirali** projekt stvaranjem zasebnih mapa za izvorni kod i resurse -- **Generirali** osnovnu HTML datoteku s ispravnom strukturom dokumenta -- **Pokrenuli** Vite razvojni server za live reloading i hot module replacement +- **Generirali** osnovnu HTML datoteku s pravilnom strukturom dokumenta +- **Pokrenuli** Vite razvojni server za živo ponovno učitavanje i zamjenu modula u hodu -#### Osnovni alati naredbenog retka za web razvoj +#### Bitni alati naredbenog retka za web razvoj | Alat | Svrha | Zašto ti treba | |------|-------|----------------| -| **[Git](https://git-scm.com/)** | Upravljanje verzijama | Praćenje promjena, suradnja s drugima, sigurnosna kopija rada | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime i upravljanje paketima | Pokretanje JavaScripta izvan preglednika, instalacija modernih razvojnih alata | -| **[Vite](https://vitejs.dev/)** | Build alat i razvojni server | Munjevito brz razvoj s hot module replacementom | +| **[Git](https://git-scm.com/)** | Kontrola verzija | Praćenje promjena, suradnja s drugima, sigurnosna kopija rada | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & upravljanje paketima | Pokretanje JavaScripta izvan preglednika, instalacija modernih razvojnih alata | +| **[Vite](https://vitejs.dev/)** | Alat za izgradnju & razvojni server | Munjevito brz razvoj s hot module replacementom | | **[ESLint](https://eslint.org/)** | Kvaliteta koda | Automatsko pronalaženje i ispravljanje problema u JavaScriptu | -| **[Prettier](https://prettier.io/)** | Formatiranje koda | Održava kod dosljedno formatiranim i čitljivim | +| **[Prettier](https://prettier.io/)** | Formatiranje koda | Drži tvoj kod dosljedno formatiranim i čitljivim | -#### Opcije specifične za platformu +#### Platformno specifične opcije **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan terminal s puno značajki -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Moćno okruženje za skriptiranje +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan, bogat značajkama terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Moćno skriptno okruženje - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradicionalni Windows naredbeni redak **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ugrađena terminalska aplikacija +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ugrađena terminal aplikacija - **[iTerm2](https://iterm2.com/)** - Poboljšani terminal s naprednim značajkama **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standardna Linux ljuska +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standardni Linux shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Napredni terminal emulator -> 💻 = unaprijed instalirano na operativnom sustavu +> 💻 = Pretinstalirano u operativnom sustavu -> 🎯 **Put učenje**: Započni s osnovnim naredbama poput `cd` (promjena direktorija), `ls` ili `dir` (popis datoteka) i `mkdir` (stvaranje mape). Vježbaj s modernim naredbama poput `npm install`, `git status` i `code .` (otvara trenutni direktorij u VS Codeu). Kako budeš sve sigurniji, prirodno ćeš prihvatiti naprednije naredbe i tehnike automatizacije. +> 🎯 **Put učenja**: Počni s osnovnim naredbama poput `cd` (promjena direktorija), `ls` ili `dir` (popis datoteka) i `mkdir` (stvaranje mape). Vježbaj s modernim naredbama kao `npm install`, `git status` i `code .` (otvara trenutni direktorij u VS Codeu). Kako budeš samouvjereniji, prirodno ćeš usvajati naprednije naredbe i tehnike automatizacije. -### Dokumentacija: tvoj mentor učenja uvijek pri ruci +### Dokumentacija: tvoj uvijek dostupan mentor za učenje -Okej, hoću ti otkriti malu tajnu koja će ti pomoći da se osjećaš puno bolje kao početnik: čak i najiskusniji programeri velik dio svog vremena troše na čitanje dokumentacije. I to nije zato što ne znaju što rade – to je zapravo znak mudrosti! +Ok, otkrit ću ti malu tajnu koja će ti pomoći da se osjećaš mnogo bolje kao početnik: čak i najiskusniji programeri provode velik dio svog vremena čitajući dokumentaciju. I to nije zato što ne znaju što rade – to je zapravo znak mudrosti! -Zamisli dokumentaciju kao pristup najstrpljivijim, najupućenijim učiteljima na svijetu koji su ti dostupni 24/7. Zapneš na problem u 2 ujutro? Dokumentacija je tu s toplim virtualnim zagrljajem i točno s odgovorom koji ti treba. Želiš naučiti o nekoj super novoj funkciji o kojoj svi pričaju? Dokumentacija ti je podrška s uputama korak po korak. Pokušavaš shvatiti zašto nešto funkcionira onako kako funkcionira? Pogodi što – dokumentacija je spremna objasniti ti na način koji napokon ima smisla! +Zamisli dokumentaciju kao pristup najstrpljivijim, najiskusnijim učiteljima na svijetu koji su dostupni 24/7. Zapeo si na problemu u 2 ujutro? Dokumentacija je tu s toplim virtualnim zagrljajem i točno odgovorom koji ti treba. Želiš naučiti o nekoj super novoj značajki o kojoj svi pričaju? Dokumentacija te podržava s primjerima korak po korak. Pokušavaš shvatiti zašto nešto radi onako kako radi? Pogodi što – dokumentacija je spremna objasniti to na način koji napokon ima smisla! -Evo što mi je potpuno promijenilo pogled na stvari: svijet web razvoja se nevjerojatno brzo mijenja i nitko (apsolutno nitko!) ne pamti sve napamet. Vidio sam starije programere s 15+ godina iskustva kako traže osnovnu sintaksu, i znaš što? To nije sramota – to je pametno! Nije stvar u savršenom pamćenju; radi se o tome da znaš gdje brzo pronaći pouzdane odgovore i razumjeti kako ih primijeniti. +Evo nešto što mi je potpuno promijenilo pogled: svijet web razvoja se nevjerojatno brzo mijenja i nitko (u potpunosti nitko!) ne pamti sve napamet. Vidio sam starije programere s preko 15 godina iskustva kako traže osnovni sintaksni podatak, i znaš što? To nije sramota – to je pametno! Nije stvar imati besprijekoran memorijski kapacitet; radi se o tome znati gdje brzo pronaći pouzdane odgovore i razumjeti kako ih primijeniti. -**Prava magija se događa ovdje:** +**Prava magija događa se ovdje:** -Profesionalni programeri veliku količinu vremena provode u čitanju dokumentacije – ne zato što ne razumiju što rade, već zato što se područje web razvoja brzo mijenja i praćenje novosti zahtijeva kontinuirano učenje. Dobra dokumentacija pomaže ti shvatiti ne samo *kako* nešto koristiti, već i *zašto* i *kada* to učiniti. +Profesionalni programeri provode značajan dio svog vremena čitajući dokumentaciju – ne zato što ne znaju što rade, već zato što se web razvoj brzo mijenja i da bi ostali u toku, potrebna je kontinuirana edukacija. Dobra dokumentacija pomaže ti razumjeti ne samo *kako* nešto koristiti, već *zašto* i *kada* to upotrijebiti. -#### Ključni izvori dokumentacije +#### Neophodni izvori dokumentacije **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Zlatni standard za dokumentaciju web tehnologija @@ -688,12 +688,12 @@ Profesionalni programeri veliku količinu vremena provode u čitanju dokumentaci **[Web.dev](https://web.dev)** (od Googlea) - Najbolje prakse modernog web razvoja - Vodiči za optimizaciju performansi -- Principi pristupačnosti i inkluzivnog dizajna +- Načela pristupačnosti i uključivog dizajna - Studije slučaja iz stvarnih projekata **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Razvojni resursi za preglednik Edge -- Vodiči za Progressive Web Apps +- Resursi za razvoj u pregledniku Edge +- Vodiči za progresivne web aplikacije - Uvidi u razvoj za više platformi **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** @@ -701,85 +701,85 @@ Profesionalni programeri veliku količinu vremena provode u čitanju dokumentaci - Video tečajevi od stručnjaka iz industrije - Praktične vježbe kodiranja -> 📚 **Strategija učenja**: Nemoj pokušavati naučiti dokumentaciju napamet – umjesto toga, nauči kako učinkovito pretraživati informacije. Dodaj u favorite često korištene izvore i vježbaj korištenje funkcija pretraživanja za brzi pronalazak potrebnih podataka. +> 📚 **Strategija učenja**: Nemoj pokušavati naučiti dokumentaciju napamet – umjesto toga, nauči efikasno nju koristiti. Označi često korištene reference i vježbaj korištenje funkcija pretraživanja za brzo pronalaženje specifičnih informacija. -### 🔧 **Provjera ovladavanja alatima: Što te najviše privlači?** +### 🔧 **Provjera ovladavanja alatima: Što ti rezonira?** **Uzmite trenutak da razmisliš:** -- Koji alat te najviše zanima probati prvo? (Nema pogrešnog odgovora!) -- Osjećaš li se još uvijek intimidirano naredbenim retkom ili si znatiželjan? -- Možeš li zamisliti korištenje DevTools u pregledniku za zavirivanje iza kulisa svojih omiljenih web stranica? +- Koji alat si najviše uzbuđen isprobati prvi? (Ne postoji pogrešan odgovor!) +- Osjećaš li da je naredbeni redak i dalje zastrašujuć ili si znatiželjan prema njemu? +- Možeš li zamisliti korištenje DevTools preglednika da zaviriš iza kulisa omiljenih web stranica? ```mermaid -pie title "Vrijeme programera provedeno s alatima" +pie title "Vrijeme koje programeri provode s alatima" "Uređivač koda" : 40 "Testiranje u pregledniku" : 25 - "Komandna linija" : 15 + "Naredbeni redak" : 15 "Čitanje dokumentacije" : 15 "Otklanjanje pogrešaka" : 5 ``` -> **Zanimljivost:** Većina programera provede oko 40% vremena u svom editoru koda, ali primijeti koliko vremena odlazi na testiranje, učenje i rješavanje problema. Programiranje nije samo pisanje koda – to je stvaranje iskustava! +> **Zabavan uvid**: Većina programera provodi oko 40% svog vremena u uređivaču koda, ali primijeti koliko vremena ide na testiranje, učenje i rješavanje problema. Programiranje nije samo pisanje koda – to je stvaranje iskustava! -✅ **Za razmišljanje:** Evo zanimljive misli – kako misliš da se alati za izradu web stranica (razvoj) razlikuju od alata za dizajn njihovog izgleda (dizajn)? To je kao razlika između arhitekta koji dizajnira prekrasnu kuću i izvođača koji ju zapravo gradi. Oba su ključna, ali im trebaju različiti alati! Ovakav način razmišljanja pomoći će ti da shvatiš širu sliku kako web stranice nastaju. +✅ **Hrana za razmišljanje**: Evo jednog zanimljivog pitanja – kako misliš da su alati za izgradnju web stranica (razvoj) različiti od alata za dizajniranje njihovog izgleda (dizajn)? To je poput razlike između arhitekta koji dizajnira prekrasnu kuću i izvođača koji je zapravo gradi. Oba su ključna, ali traže različite alate! Ovakvo razmišljanje zaista će ti pomoći da vidiš širu sliku o tome kako web stranice dolaze do života. -## Izazov GitHub Copilot Agent 🚀 +## Izazov GitHub Copilot Agenta 🚀 -Koristi Agent način rada da dovršiš sljedeći izazov: +Koristi Agent mod za dovršetak sljedećeg izazova: -**Opis:** Istraži značajke modernog editora koda ili IDE-a i pokaži kako može poboljšati tvoj radni tijek kao web programera. +**Opis:** Istraži značajke modernog uređivača koda ili IDE-a i pokaži kako može poboljšati tvoj radni tijek kao web programera. -**Zadatak:** Odaberi editor koda ili IDE (npr. Visual Studio Code, WebStorm ili cloud-based IDE). Navedi tri značajke ili ekstenzije koje ti pomažu efikasnije pisati, debugirati ili održavati kod. Za svaku daj kratak opis kako koristi tvom radu. +**Zadatak:** Odaberi uređivač koda ili IDE (kao što su Visual Studio Code, WebStorm ili cloud-based IDE). Navedite tri značajke ili ekstenzije koje ti pomažu pisati, ispravljati ili održavati kod učinkovitije. Za svaku daj kratak opis kako koristi tvom radnom tijeku. --- ## 🚀 Izazov -**U redu, detektive, jesi li spreman za svoj prvi slučaj?** +**Dobro, detektive, spreman za svoj prvi slučaj?** -Sad kad imaš sjajne temelje, imam avanturu koja će ti pomoći vidjeti koliko je svijet programiranja zaista raznolik i fascinantan. I slušaj – nije ovo još pisanje koda, tako da nema pritiska! Zamisliti se kao detektiv programskih jezika na svom prvom uzbudljivom slučaju! +Sad kad imaš ovo sjajno znanje, imam avanturu koja će ti pomoći da vidiš koliko je svijet programiranja doista raznolik i fascinantan. I slušaj – ovo još nije o pisanju koda, tako da se ne brini! Zamislite se kao detektiv programskih jezika na svom prvom uzbudljivom zadatku! **Tvoja misija, ako je prihvatiš:** -1. **Postani istraživač jezika**: Izaberi tri programska jezika iz potpuno različitih svjetova – možda jedan za izradu web stranica, jedan za mobilne aplikacije i jedan za znanstvenu obradu podataka. Pronađi primjere iste jednostavne zadaće napisane u svakom od tih jezika. Obećajem ti da ćeš biti potpuno oduševljen koliko mogu izgledati različito dok rade istu stvar! +1. **Postani istraživač jezika**: Odaberi tri programska jezika iz sasvim različitih područja – možda jedan koji gradi web stranice, jedan za mobilne aplikacije i jedan za znanstveno obrađivanje podataka. Pronađi primjere istog jednostavnog zadatka napisanog u svakom jeziku. Obećavam da ćeš biti zapanjen koliko mogu izgledati različito dok rade upravo istu stvar! -2. **Otkrij njihove priče nastanka**: Što svaki jezik čini posebnim? Evo zanimljive činjenice – svaki programski jezik je nastao jer je netko mislio „Znaš što? Mora postojati bolji način za rješavanje ovog konkretno problema.“ Možeš li otkriti koji su to problemi? Neki od tih priča su zaista fascinantni! +2. **Otkrij njihovu priču o nastanku**: Što svaki jezik čini posebnim? Evo kul činjenice – svaki programski jezik nastao je jer je netko mislio: "Znate što? Mora postojati bolji način za rješavanje ovog specifičnog problema." Možeš li otkriti koji su to problemi bili? Neke od tih priča su stvarno fascinantne! -3. **Upoznaj zajednice**: Pogledaj koliko su prijateljski i strastveni članovi svake zajednice. Neke broje milijune programera koji dijele znanje i pomažu jedni drugima, druge su manje ali vrlo povezane i podržavajuće. Voljet ćeš vidjeti različite osobnosti ovih zajednica! +3. **Upoznaj zajednice**: Pogledaj koliko su svaka jezicna zajednica gostoljubiva i strastvena. Neke imaju milijune programera koji dijele znanje i pomažu jedni drugima, druge su manje ali izuzetno povezane i podržavajuće. Sigurno će ti se svidjeti vidjeti različite osobnosti tih zajednica! -4. **Slijedi svoj instinkt**: Koji ti jezik trenutno najpristupačniji? Ne brini se o „savršeno“ donesenoj odluci – samo slušaj svoj osjećaj! Nema pogrešnog odgovora i uvijek možeš istražiti druge kasnije. +4. **Slijedi svoj instinkt**: Koji jezik ti trenutno djeluje najpristupačnije? Ne brini o "savršeno" odabranom jeziku – samo slušaj svoje osjećaje! Ovdje nema pogrešnog odgovora i uvijek možeš kasnije istražiti druge. -**Bonus detektivski zadatak**: Pokušaj saznati koje su glavne web stranice ili aplikacije izgrađene u svakom od tih jezika. Garantiram da ćeš se iznenaditi kad saznaš što pokreće Instagram, Netflix ili onu mobilnu igru koju ne možeš prestati igrati! +**Bonus detektivski zadatak:** Pokušaj saznati koje su glavne web stranice ili aplikacije izgrađene u svakom od tih jezika. Garantiram da ćeš biti iznenađen koje su tehnologije iza Instagrama, Netflixa ili one mobilne igre od koje ne možeš odustati! -> 💡 **Sjeti se**: Danas ne pokušavaš postati ekspert u bilo kojem od ovih jezika. Samo upoznaješ „kvart“ prije nego što odlučiš gdje ćeš se nastaniti. Uzmi si vremena, zabavi se i pusti znatiželji da te vodi! +> 💡 **Zapamti**: Ne pokušavaš danas postati stručnjak ni za jedan od tih jezika. Samo upoznaješ okolicu prije nego odlučiš gdje želiš započeti. Uzmi si vremena, zabavi se i pusti da te znatiželja vodi! -## Proslavimo što si otkrio! +## Proslavimo ono što si otkrio! -Vau, danas si usvojio toliko nevjerojatnih informacija! Stvarno sam uzbuđen vidjeti koliko ti je ovog sjajnog putovanja ostalo u pamćenju. I sjeti se – ovo nije test gdje moraš sve savršeno znati. Ovo je prije proslava svega kul što si naučio o ovom fascinantnom svijetu u koji tek krećeš zaroniti! +Vau, danas si upio toliko nevjerojatnih informacija! Iskreno se radujem vidjeti koliko ti je toga ostalo u glavi nakon ovog fantastičnog putovanja. I zapamti – ovo nije test da sve moraš savršeno znati. Ovo je više kao proslava svih super stvari koje si naučio o ovom fascinantnom svijetu u koji se upravo spremaš zaroniti! -[Uradi kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) -## Pregled i samostalno učenje +[Posjeti kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) -**Uzmi si vremena za istraživanje i zabavu!** +## Pregled & Samostalno učenje -Danas si prešao/la jako puno gradiva i na to možeš biti ponosan/na! Sada dolazi zabavni dio – istraživanje tema koje su probudile tvoju znatiželju. Zapamti, ovo nije domaća zadaća – ovo je avantura! +**Uzmi si vremena za istraživanje i zabavi se!** +Pokrili ste puno toga danas i na to možete biti ponosni! Sada dolazi zabavni dio – istraživanje tema koje su probudile vašu znatiželju. Zapamtite, ovo nije domaća zadaća – ovo je avantura! **Zaronite dublje u ono što vas zanima:** -**Isprobaj programske jezike uživo:** -- Posjeti službene stranice 2-3 jezika koji su ti zapeli za oko. Svatko ima svoju osobnost i priču! -- Isprobaj neke online okruženja za kodiranje poput [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ili [Replit](https://replit.com/). Ne boj se eksperimentirati – ne možeš ništa pokvariti! -- Pročitaj kako je tvoj omiljeni jezik nastao. Ozbiljno, neke od tih priča o nastanku su fascinantne i pomoći će ti razumjeti zašto jezici funkcioniraju onako kako funkcioniraju. +**Isprobajte programske jezike praktično:** +- Posjetite službene web stranice 2-3 jezika koji su vam zapeli za oko. Svaki od njih ima svoju osobnost i priču! +- Isprobajte neke online programske radionice kao što su [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ili [Replit](https://replit.com/). Ne bojte se eksperimentirati – ne možete ništa pokvariti! +- Pročitajte kako je nastao vaš omiljeni jezik. Zaista, neke od tih priča o nastanku su fascinantne i pomoći će vam razumjeti zašto jezici funkcioniraju onako kako funkcioniraju. -**Upoznaj se sa svojim novim alatima:** -- Preuzmi Visual Studio Code ako već nisi – besplatan je i sigurno će ti se svidjeti! -- Provedi nekoliko minuta pregledavajući tržište ekstenzija. To je kao trgovina aplikacijama za tvoj uređivač koda! -- Otvori Alate za programere u svom pregledniku i samo klikaj unaokolo. Ne brini oko shvaćanja svega – samo se upoznaj s time što je dostupno. +**Upoznajte se s novim alatima:** +- Preuzmite Visual Studio Code ako to već niste učinili – besplatan je i sigurno će vam se svidjeti! +- Provedite nekoliko minuta pregledavajući Tržnicu Extensions. To je kao trgovina aplikacijama za vaš uređivač koda! +- Otvorite Alate za razvojne programere u svom pregledniku i samo klikajte. Ne brinite ako sve ne razumijete – samo se upoznajte s time što je dostupno. -**Pridruži se zajednici:** -- Prati neke zajednice programera na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ili [GitHub](https://github.com/). Programerska zajednica izuzetno je otvorena za nove članove! -- Gledaj videozapise za početnike na YouTubeu. Ima toliko sjajnih autora koji se sjećaju kako je biti početnik. -- Razmisli o pridruživanju lokalnim okupljanjima ili online zajednicama. Vjeruj mi, programeri vole pomoći onima koji tek počinju! +**Pridružite se zajednici:** +- Pratite neke zajednice programera na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ili [GitHub](https://github.com/). Zajednica programera izuzetno je otvorena za nove članove! +- Pogledajte neke videozapise za početnike o programiranju na YouTubeu. Postoji mnogo sjajnih kreatora koji se sjećaju kako je krenuti od nule. +- Razmislite o pridruživanju lokalnim susretima ili online zajednicama. Vjerujte mi, programeri vole pomagati novim članovima! -> 🎯 **Slušaj, ovo želim da zapamtiš**: Ne očekuje se da preko noći postaneš majstor programiranja! Sada tek upoznaješ ovaj nevjerojatan novi svijet kojem ćeš pripadati. Uzmi si vremena, uživaj u putovanju i zapamti – svaki programer kojeg se diviš jednom je sjedio točno tamo gdje si ti sada, uzbuđen i možda malo preplavljen. To je potpuno normalno i znači da radiš stvari kako treba! +> 🎯 **Evo što želim da zapamtite**: Ne očekuje se od vas da preko noći postanete majstor programiranja! Trenutno se samo upoznajete s ovim nevjerojatnim novim svijetom kojem ćete pripadati. Uzmite si vremena, uživajte u putovanju i zapamtite – svaki razvojni programer kojeg danas cijenite jednom je sjedio točno tamo gdje ste sada, osjećajući uzbuđenje i možda malo zbunjenosti. To je potpuno normalno i znak je da ste na pravom putu! @@ -787,70 +787,70 @@ Danas si prešao/la jako puno gradiva i na to možeš biti ponosan/na! Sada dola [Reading the Docs](assignment.md) -> 💡 **Mali poticaj za tvoj zadatak**: Volio/voljela bih da istražiš još neke alate koje nismo spomenuli! Preskoči uređivače, preglednike i alate naredbenog retka o kojima smo već pričali – postoji čitav nevjerojatan svijet sjajnih razvojnih alata koji čekaju da budu otkriveni. Potraži one koji su aktivno održavani i imaju živahne, podržavajuće zajednice (oni obično imaju najbolje tutorijale i najviše prijateljskih ljudi koji ti mogu pomoći kad zaglaviš). +> 💡 **Mali poticaj za zadatak**: Jako bih volio vidjeti da istražite neke alate koje još nismo pokrili! Preskočite uređivače, preglednike i alate komandne linije o kojima smo već govorili – postoji cijeli nevjerojatan svijet fantastičnih razvojnih alata koji samo čekaju da budu otkriveni. Tražite one koji su aktivno održavani i imaju živahne, korisne zajednice (oni obično imaju najbolje tutorijale i najpodržavajuće ljude kad zapnete i zatrebate prijateljsku pomoć). --- -## 🚀 Tvoj vremenski plan za programiranje - -### ⚡ **Što možeš napraviti u sljedećih 5 minuta** -- [ ] Označi kao favorite 2-3 web stranice programskih jezika koji su ti zapeli za oko -- [ ] Preuzmi Visual Studio Code ako već nisi -- [ ] Otvori DevTools (F12) u pregledniku i klikaj po bilo kojoj web stranici -- [ ] Pridruži se jednoj programerskoj zajednici (Dev.to, Reddit r/webdev ili Stack Overflow) - -### ⏰ **Što možeš postići u sljedećih sat vremena** -- [ ] Riješi kviz nakon lekcije i razmisli o svojim odgovorima -- [ ] Namjesti VS Code sa ekstenzijom GitHub Copilot -- [ ] Isprobaj primjer "Hello World" u 2 različita programska jezika online -- [ ] Pogledaj video "Dan u životu programera" na YouTubeu -- [ ] Započni svoj detektivski rad o programskom jeziku (iz izazova) - -### 📅 **Tvoja tjedna avantura** -- [ ] Dovrši zadatak i istraži 3 nova razvojna alata -- [ ] Prati 5 programera ili računa vezanih uz programiranje na društvenim mrežama -- [ ] Pokušaj napraviti nešto malo u CodePenu ili Replitu (čak i samo "Hello, [Tvoje ime]!") -- [ ] Pročitaj jedan blog post programera o njegovom putu u kodiranju -- [ ] Pridruži se virtualnom meetup-u ili pogledaj neki programerski govor -- [ ] Započni učiti odabrani jezik uz online tutorijale - -### 🗓️ **Tvoja mjesečna transformacija** -- [ ] Izradi svoj prvi mali projekt (čak i jednostavna web stranica se računa!) -- [ ] Doprinesi open-source projektu (počnite s ispravcima dokumentacije) -- [ ] Mentoriraj nekoga tko tek počinje s programiranjem -- [ ] Napravi svoju web stranicu kao portfelj programera -- [ ] Poveži se s lokalnim zajednicama programera ili studijskim grupama -- [ ] Započni planirati svoj sljedeći cilj u učenju +## 🚀 Vaša vremenska linija programerskog putovanja + +### ⚡ **Što možete učiniti u sljedećih 5 minuta** +- [ ] Spremiti u favorite web stranice 2-3 programska jezika koji su vam zapele za oko +- [ ] Preuzeti Visual Studio Code ako to već niste učinili +- [ ] Otvoriti DevTools u pregledniku (F12) i kliknuti po bilo kojoj web stranici +- [ ] Pridružiti se jednoj programerskoj zajednici (Dev.to, Reddit r/webdev ili Stack Overflow) + +### ⏰ **Što možete postići unutar ovog sata** +- [ ] Završiti kviz nakon lekcije i razmisliti o svojim odgovorima +- [ ] Postaviti VS Code s GitHub Copilot ekstenzijom +- [ ] Isprobati "Hello World" primjer u 2 različita programska jezika online +- [ ] Pogledati video "Dan u životu programera" na YouTubeu +- [ ] Početi detektivski rad o programskim jezicima (iz izazova) + +### 📅 **Vaša tjedna avantura** +- [ ] Završiti zadatak i istražiti 3 nova razvojna alata +- [ ] Pratiti 5 developera ili računa o programiranju na društvenim mrežama +- [ ] Pokušati napraviti nešto malo u CodePenu ili Replitu (čak i samo "Hello, [Vaše ime]!") +- [ ] Pročitati jedan blog post developera o nečijem putu programiranja +- [ ] Pridružiti se virtualnom meetupu ili pogledati programersko predavanje +- [ ] Početi učiti odabrani programski jezik putem online tutorijala + +### 🗓️ **Vaša mjesečna transformacija** +- [ ] Izraditi svoj prvi mali projekt (čak i jednostavna web stranica se računa!) +- [ ] Doprinijeti open-source projektu (počnite s ispravcima dokumentacije) +- [ ] Mentorirati nekoga tko tek započinje svoje programersko putovanje +- [ ] Izraditi vlastitu web stranicu s portfeljom programera +- [ ] Povezati se s lokalnim zajednicama developera ili studijskim grupama +- [ ] Početi planirati sljedeću prekretnicu u učenju ### 🎯 **Završna refleksija** -**Prije nego što kreneš dalje, uzmi trenutak da se pohvališ:** -- Što te danas u programiranju posebno oduševilo? -- Koji alat ili koncept želiš prvo istražiti? -- Kako se osjećaš što počinješ ovo programersko putovanje? -- Koje pitanje bi htio/htjela sada postaviti nekom programeru? +**Prije nego što nastavite, odvojite trenutak za slavlje:** +- Što je jedna stvar u vezi programiranja koja vas je danas posebno oduševila? +- Koji alat ili koncept želite prvo istražiti? +- Kako se osjećate pred početak ovog programerskog putovanja? +- Koje pitanje biste sada htjeli postaviti programeru? ```mermaid journey title Vaše putovanje izgradnje samopouzdanja section Danas - Znatiželjan: 3: You + Radoznao: 3: You Preplavljen: 4: You Uzbuđen: 5: You section Ovaj tjedan - Istraživanje: 4: You - Učenje: 5: You - Povezivanje: 4: You + Istražujem: 4: You + Učim: 5: You + Povezujem se: 4: You section Sljedeći mjesec - Izgradnja: 5: You + Gradim: 5: You Samopouzdan: 5: You - Pomoć drugima: 5: You + Pomažem drugima: 5: You ``` -> 🌟 **Zapamti**: Svaki stručnjak je nekada bio početnik. Svaki iskusni programer je jednom osjećao upravo kao ti sada – uzbuđeno, možda malo preplavljeno i nestrpljivo znati što je moguće. U dobrom si društvu, a ovo putovanje bit će nevjerojatno. Dobrodošao/dobrodošla u prekrasni svijet programiranja! 🎉 +> 🌟 **Zapamtite**: Svaki stručnjak jednom je bio početnik. Svaki stariji programer osjećao se baš kao i vi sada – uzbuđeno, možda malo preplavljeno i definitivno znatiželjno oko svega što je moguće. Nalazite se u sjajnom društvu i ovo putovanje će biti nevjerojatno. Dobro došli u prekrasni svijet programiranja! 🎉 --- -**Napomena**: -Ovaj dokument je preveden korištenjem 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 njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda. +**Odricanje od odgovornosti**: +Ovaj dokument preveden je pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku smatra se službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda. \ No newline at end of file diff --git a/translations/hr/AGENTS.md b/translations/hr/AGENTS.md index 7aba182e3..f738a56dd 100644 --- a/translations/hr/AGENTS.md +++ b/translations/hr/AGENTS.md @@ -2,36 +2,36 @@ ## Pregled projekta -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: -### Glavno postavljanje repozitorija +### Postavljanje glavnog repozitorija ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Postavljanje Quiz App (Vue 3 + Vite) +### Postavljanje Quiz aplikacije (Vue 3 + Vite) ```bash cd quiz-app @@ -48,15 +48,15 @@ cd 7-bank-project/api npm install npm start # Pokreni API poslužitelj npm run lint # Pokreni ESLint -npm run format # Formatiraj s Prettier +npm run format # Formatiraj s Prettierom ``` -### Projekti proširenja za preglednik +### Projekti proširenja preglednika ```bash cd 5-browser-extension/solution npm install -# Slijedite upute za učitavanje proširenja specifične za preglednik +# Slijedite upute za učitavanje proširenja specifična za preglednik ``` ### Projekti svemirske igre @@ -76,77 +76,77 @@ pip install openai python api.py ``` -## Radni proces razvoja +## Radni tok razvoja ### Za suradnike na sadržaju 1. **Forkajte repozitorij** na svoj GitHub račun 2. **Klonirajte svoj fork** lokalno -3. **Kreirajte novu granu** za svoje promjene -4. Izmijenite sadržaj lekcija ili primjere koda -5. Testirajte bilo kakve promjene koda u relevantnim projekt mapama +3. **Kreirajte novu granu** za svoje izmjene +4. Napravite izmjene u sadržaju lekcija ili primjerima koda +5. Testirajte izmjene koda u odgovarajućim direktorijima projekata 6. Pošaljite pull requestove prema smjernicama za doprinos ### Za učenike 1. Forkajte ili klonirajte repozitorij -2. Redom idite u mape lekcija +2. Prolazite kroz direktorije lekcija redom 3. Čitajte README datoteke za svaku lekciju -4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/ +4. Riješite pred-lekcijske kvizove na https://ff-quizzes.netlify.app/web/ 5. Radite kroz primjere koda u mapama lekcija -6. Završite zadatke i izazove -7. Riješite kvizove nakon lekcije +6. Dovršite zadatke i izazove +7. Riješite post-lekcijske kvizove ### Razvoj uživo - **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000) -- **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju +- **Quiz aplikacija**: Pokrenite `npm run dev` u direktoriju quiz-app - **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte - **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima ## Upute za testiranje -### Testiranje Quiz App +### Testiranje Quiz aplikacije ```bash cd quiz-app -npm run lint # Provjerite ima li problema sa stilom koda -npm run build # Provjerite je li gradnja uspjela +npm run lint # Provjerite probleme sa stilom koda +npm run build # Provjerite uspjeh izgradnje ``` -### Testiranje Bank API +### Testiranje Bank API-ja ```bash cd 7-bank-project/api npm run lint # Provjerite probleme sa stilom koda -node server.js # Provjerite pokreće li se poslužitelj bez grešaka +node server.js # Provjerite pokreće li se poslužitelj bez pogrešaka ``` -### Opći pristup testiranju +### Općeniti pristup testiranju -- Ovo je edukativni repozitorij bez sveobuhvatnih automatiziranih testova -- Ručno testiranje fokusira se na: - - Pokretanje primjera koda bez pogrešaka - - Ispravnost linkova u dokumentaciji - - Uspješan završetak build procesa projekata - - Primjeri slijede najbolje prakse +- Ovo je obrazovni repozitorij bez sveobuhvatnih automatiziranih testova +- Ručno testiranje se fokusira na: + - Primjere koda koji rade bez pogrešaka + - Ispravnost poveznica u dokumentaciji + - Uspješan završetak gradnje projekata + - Primjere koji slijede najbolje prakse -### Provjere prije slanja +### Provjere prije predaje - Pokrenite `npm run lint` u direktorijima s package.json -- Provjerite ispravnost markdown linkova +- Provjerite valjanost markdown poveznica - Testirajte primjere koda u pregledniku ili Node.js -- Provjerite da prijevodi održavaju ispravnu strukturu +- Provjerite da prijevodi održavaju pravilnu strukturu ## Smjernice za stil koda ### JavaScript - Koristite modernu ES6+ sintaksu -- Slijedite standardne ESLint konfiguracije u projektima -- Koristite smisleni nazive varijabli i funkcija za edukativnu jasnoću +- Slijedite standardne ESLint konfiguracije zadane u projektima +- Koristite smislen pripad imena varijabla i funkcija radi obrazovne jasnoće - Dodajte komentare koji objašnjavaju koncepte za učenike -- Formatirajte koristeći Prettier gdje je konfigurirano +- Formatirajte pomoću Prettier gdje je konfigurirano ### HTML/CSS @@ -157,47 +157,47 @@ node server.js # Provjerite pokreće li se poslužitelj bez grešaka ### Python -- Smjernice stila PEP 8 -- Jasni, edukativni primjeri koda -- Tipizacije gdje su korisne za učenje +- Smjernice stilskog vodiča PEP 8 +- Jasni, obrazovni primjeri koda +- Tipovi (type hints) gdje pomažu u učenju ### Markdown dokumentacija - Jasna hijerarhija naslova -- Blokovi koda sa specifikacijom jezika -- Linkovi na dodatne resurse -- Screenshoti i slike u direktorijima `images/` +- Blokovi koda s označenim jezikom +- Poveznice na dodatne resurse +- Snimke zaslona i slike u direktorijima `images/` - Alt tekst za slike radi pristupačnosti ### Organizacija datoteka -- Lekcije numerirane redom (1-getting-started-lessons, 2-js-basics, itd.) +- Lekcije numerirane uzastopno (1-getting-started-lessons, 2-js-basics itd.) - Svaki projekt ima `solution/` i često `start/` ili `your-work/` direktorije -- Slike pohranjene u specifičnim `images/` mapama za lekcije +- Slike pohranjene u lekcijskim `images/` mapama - Prijevodi u strukturi `translations/{language-code}/` -## Izgradnja i distribucija +## Izgradnja i postavljanje -### Deploy Quiz App (Azure Static Web Apps) +### Postavljanje Quiz aplikacije (Azure Static Web Apps) -Quiz-app je konfiguriran za distribuciju putem Azure Static Web Apps: +quiz-app je konfiguriran za Azure Static Web Apps: ```bash cd quiz-app -npm run build # Kreira mapu dist/ -# Raspoređuje putem GitHub Actions workflow-a na push u main +npm run build # Stvara mapu dist/ +# Objavljuje putem GitHub Actions tijeka rada pri pushu na main ``` Konfiguracija Azure Static Web Apps: - **Lokacija aplikacije**: `/quiz-app` - **Izlazna lokacija**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Radni tijek**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Generiranje PDF dokumentacije ```bash npm install # Instalirajte docsify-to-pdf -npm run convert # Generirajte PDF iz dokumenata +npm run convert # Generirajte PDF iz docsa ``` ### Docsify dokumentacija @@ -207,76 +207,76 @@ npm install -g docsify-cli # Instalirajte Docsify globalno docsify serve # Poslužite na localhost:3000 ``` -### Buildovi specifični za projekte +### Izgradnja specifičnih projekata -Svaki projekt može imati svoj proces builda: -- Vue projekti: `npm run build` kreira produkcijske paketove -- Statični projekti: nema build koraka, datoteke se služe direktno +Svaki direktorij projekta može imati vlastiti proces izgradnje: +- Vue projekti: `npm run build` za proizvodne pakete +- Statički projekti: Nema koraka izgradnje, posluživanje datoteka direktno ## Smjernice za pull requestove ### Format naslova -Koristite jasne i opisne naslove koji označavaju područje promjene: +Koristite jasne, opisne naslove koji označavaju područje promjene: - `[Quiz-app] Dodaj novi kviz za lekciju X` -- `[Lesson-3] Ispravi tipfelere u terrarij projektu` +- `[Lesson-3] Ispravi tipografsku pogrešku u terrarium projektu` - `[Translation] Dodaj španjolski prijevod za lekciju 5` - `[Docs] Ažuriraj upute za postavljanje` -### Potrebne provjere +### Obavezne provjere Prije slanja PR-a: 1. **Kvaliteta koda**: - - Pokrenite `npm run lint` u zahvaćenim projekt direktorijima - - Ispravite sve linting pogreške i upozorenja + - Pokrenite `npm run lint` u zahvaćenim projektima + - Ispravite sve lint pogreške i upozorenja -2. **Provjera builda**: +2. **Provjera gradnje**: - Pokrenite `npm run build` ako je primjenjivo - - Osigurajte da nema build pogrešaka + - Osigurajte da nema grešaka u gradnji -3. **Provjera linkova**: - - Testirajte sve markdown linkove - - Provjerite ispravnost poveznica na slike +3. **Provjera poveznica**: + - Testirajte sve markdown poveznice + - Provjerite referencirane slike 4. **Pregled sadržaja**: - - Lektura pravopisa i gramatike - - Provjera ispravnosti i edukativnosti primjera koda - - Provjera točnosti prijevoda + - Provjerite pravopis i gramatiku + - Osigurajte da su primjeri koda ispravni i obrazovni + - Provjerite da prijevodi zadržavaju izvorno značenje ### Zahtjevi za doprinos -- Prihvatite Microsoft CLA (automatska provjera kod prvog PR-a) +- Slažete se s Microsoft CLA (automatska provjera pri prvom PR-u) - Slijedite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice -- Referencirajte brojeve problema u opisu PR-a ako je primjenjivo +- Referencirajte broj/e problema u opisu PR-a ako je primjenjivo ### Proces pregleda -- PR-ovi pregledavaju održavatelji i zajednica -- Prioritet je edukativna jasnoća -- Primjeri koda trebaju slijediti važeće najbolje prakse -- Prijevodi se pregledavaju na točnost i kulturološku prikladnost +- PR-ove pregledavaju održavatelji i zajednica +- Prioritet je obrazovna jasnoća +- Primjeri koda trebaju slijediti aktualne najbolje prakse +- Prijevodi se pregledavaju na točnost i kulturnu prikladnost ## Sustav prijevoda ### Automatski prijevod -- Koristi GitHub Actions s co-op-translator workflowom +- Koristi GitHub Actions s co-op-translator workflow - Automatski prevodi na više od 50 jezika - Izvorne datoteke u glavnim direktorijima -- Prijevodne datoteke u `translations/{language-code}/` direktorijima +- Prevedene datoteke u `translations/{language-code}/` direktorijima ### Dodavanje ručnih poboljšanja prijevoda 1. Pronađite datoteku u `translations/{language-code}/` -2. Napravite poboljšanja pritom održavajući strukturu +2. Unesite poboljšanja dok održavate strukturu 3. Osigurajte da primjeri koda ostanu funkcionalni -4. Testirajte lokalizirani kviz sadržaj +4. Testirajte sve lokalizirane kviz sadržaje ### Metapodaci prijevoda -Prijevodne datoteke uključuju zaglavlje metapodataka: +Prevedene datoteke sadrže zaglavlje metapodataka: ```markdown -**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. \ No newline at end of file diff --git a/translations/hr/README.md b/translations/hr/README.md index fa1b92bbc..30ba7d4d7 100644 --- a/translations/hr/README.md +++ b/translations/hr/README.md @@ -10,203 +10,212 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Web razvoj za početnike - Kurikulum +# Razvoj weba za početnike - Nastavni plan -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! Pridružite se Azure AI Foundry Discord zajednici [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Slijedite ove korake da započnete s korištenjem ovih resursa: -1. **Napravite Fork repozitorija**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Pridružite se Azure AI Foundry Discord-u i upoznajte stručnjake i druge developere**](https://discord.com/invite/ByRwuEEgH4) +Slijedite ove korake da biste započeli s korištenjem ovih resursa: +1. **Forkajte repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Višejezična podrška +### 🌐 Podrška za više jezika -#### Podržano putem GitHub Action-a (automatizirano i uvijek ažurno) +#### Podržano putem GitHub akcija (Automatski i uvijek ažurirano) -[Arabijski](../ar/README.md) | [Bengalski](../bn/README.md) | [Bugarski](../bg/README.md) | [Burmanski (Myanmar)](../my/README.md) | [Kineski (pojednostavljeni)](../zh-CN/README.md) | [Kineski (tradicionalni, Hong Kong)](../zh-HK/README.md) | [Kineski (tradicionalni, Macau)](../zh-MO/README.md) | [Kineski (tradicionalni, Tajvan)](../zh-TW/README.md) | [Hrvatski](./README.md) | [Češki](../cs/README.md) | [Danski](../da/README.md) | [Nizozemski](../nl/README.md) | [Estonski](../et/README.md) | [Finski](../fi/README.md) | [Francuski](../fr/README.md) | [Njemački](../de/README.md) | [Grčki](../el/README.md) | [Hebrejski](../he/README.md) | [Hindi](../hi/README.md) | [Mađarski](../hu/README.md) | [Indonezijski](../id/README.md) | [Talijanski](../it/README.md) | [Japanski](../ja/README.md) | [Kannada](../kn/README.md) | [Korejski](../ko/README.md) | [Litvanski](../lt/README.md) | [Malezijski](../ms/README.md) | [Malajalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalski](../ne/README.md) | [Nigerijski pidgin](../pcm/README.md) | [Norveški](../no/README.md) | [Persijski (Farsi)](../fa/README.md) | [Poljski](../pl/README.md) | [Portugalski (Brazil)](../pt-BR/README.md) | [Portugalski (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumunjski](../ro/README.md) | [Ruski](../ru/README.md) | [Srpski (ćirilica)](../sr/README.md) | [Slovački](../sk/README.md) | [Slovenski](../sl/README.md) | [Španjolski](../es/README.md) | [Svahili](../sw/README.md) | [Švedski](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Tajlandski](../th/README.md) | [Turski](../tr/README.md) | [Ukrajinski](../uk/README.md) | [Urdu](../ur/README.md) | [Vijetnamski](../vi/README.md) +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](./README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Preferirate kloniranje lokalno?** - -> 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: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Ovo vam daje sve što vam treba da dovršite tečaj s mnogo bržim preuzimanjem. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> 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. -**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)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Otvorite%20u%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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! ![Background](../../translated_images/hr/background.148a8d43afde5730.webp) -- Lekcije koje pokrivaju sve od osnova do RAG-a. -- Komunicirajte s povijesnim likovima koristeći GenAI i našu pratilac aplikaciju. -- Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme! +- Lekcije pokrivaju sve od osnova do RAG-a. +- Interakcija s povijesnim likovima kroz GenAI i našu prateću aplikaciju. +- Zabavno i zanimljivo pripovijedanje, putovat ćete kroz vrijeme! ![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp) -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. -2. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice. +2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Pokretanje kurikuluma u Codespace-u +#### Pokretanje nastavnog plana u Codespaceu -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. ![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.webp) -#### 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 `` s URL-om koji ste upravo kopirali: ```bash git clone ``` -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: @@ -232,7 +241,7 @@ Naš tim proizvodi i druge tečajeve! Pogledajte: --- -### Osnovno Učenje +### Osnovno učenje [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ako imate povratne informacije o proizvodu ili greške tijekom izrade posjetite: +Ako imate povratne informacije o proizvodu ili prijavite greške tijekom izrade, posjetite: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licenca -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. --- -**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. \ No newline at end of file diff --git a/translations/sl/.co-op-translator.json b/translations/sl/.co-op-translator.json index 8520bdebf..4078b8fd0 100644 --- a/translations/sl/.co-op-translator.json +++ b/translations/sl/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T10:41:52+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T15:12:27+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "sl" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:47:01+00:00", + "translation_date": "2026-03-06T15:16:09+00:00", "source_file": "AGENTS.md", "language_code": "sl" }, @@ -516,8 +516,8 @@ "language_code": "sl" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:39:04+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T15:08:28+00:00", "source_file": "README.md", "language_code": "sl" }, diff --git a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4e16bae2d..f3a70e51c 100644 --- a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Uvod v programske jezike in sodobna razvojna orodja -Živjo, bodoči razvijalec! 👋 Lahko ti povem nekaj, kar mi še vsak dan povzroči mravljince? Pravkar boš odkril, da programiranje ni samo za računalnike – gre za resnične supermoč, da svoje najbolj divje ideje oživiš! +Živjo, bodoči razvijalec! 👋 Lahko ti zaupam nekaj, kar mi vsak dan znova jemlje dih? Pravkar boš spoznal, da programiranje ni samo o računalnikih – gre za pravo supermoč, s katero lahko oživiš svoje najbolj nore ideje! -Poznaš tisti trenutek, ko uporabljaš svojo najljubšo aplikacijo in vse preprosto popolno steče? Ko pritisneš gumb in se zgodi nekaj prav magičnega, da rečeš "vau, kako so TO naredili?" No, nekdo prav tak kot ti – verjetno sedi v svoji najljubši kavarni ob 2. zjutraj s tretjo espressom – je napisal kodo, ki je ustvarila to magijo. In tukaj boš ostal brez besed: do konca te lekcije ne boš le razumel, kako so to naredili, ampak boš komaj čakal, da to tudi sam preizkusiš! +Poznaš tisti trenutek, ko uporabljaš svojo najljubšo aplikacijo in vse popolnoma steče? Ko pritisneš gumb in se zgodi nekaj čarobnega, zaradi česar rečeš "wow, kako so to naredili?" No, nekdo prav takšen kot ti – verjetno sedi v svoji najljubši kavarnici ob 2. zjutraj s tretjo espressom – je napisal kodo, ki je ustvarila to čarovnijo. In zdaj pa pazi, kaj te bo navdušilo: do konca te lekcije ne boš le razumel, kako so to naredili, ampak boš komaj čakal, da poskusiš sam! -Poglej, popolnoma razumem, če se ti programiranje zdaj zdi strašljivo. Ko sem začel, sem iskreno mislil, da moraš biti nekakšen matematični genij ali programirati od petega leta starosti. Toda to, kar je popolnoma spremenilo moj pogled: programiranje je pravzaprav kot učenje pogovorov v novem jeziku. Začneš z "zdravo" in "hvala", nato naročaš kavo, in preden se zavedaš, vodiš globoke filozofske pogovore! Le da v tem primeru vodiš pogovore z računalniki, in iskreno? So najnežnejši sogovorniki, kar jih boš kadarkoli imel – nikoli ne obsojajo tvojih napak in vedno so navdušeni, da poskusiš znova! +Poglej, popolnoma razumem, če se ti zdi programiranje zdaj zastrašujoče. Ko sem začel, sem po resnici povedano mislil, da moraš biti nekakšen matematični genij ali pa kodirati že od petega leta starosti. Ampak nekaj, kar je popolnoma spremenilo moj pogled: programiranje je natanko tako kot učenje pogovarjanja v novem jeziku. Začneš s "zdravo" in "hvala", nato naročaš kavo, preden pa se zavedaš, pa vodiš globoke filozofske razprave! V tem primeru pa se pogovarjaš z računalniki in iskreno? Oni so najbolj potrpežljivi sogovorniki, kar jih boš kdaj imel – nikoli ne obsojajo tvojih napak in so vedno pripravljeni poskusiti znova! -Danes bomo raziskali neverjetna orodja, zaradi katerih sodobni spletni razvoj ni le mogoč, ampak tudi resnično zasvojen. Govorim o točno teh urejevalnikih, brskalnikih in potekih dela, ki jih razvijalci pri Netflixu, Spotifyju in tvoji najljubši indie aplikacijski študiii uporabljajo vsak dan. In tukaj je del, ki te bo spravil v veselo plesanje: večina teh profesionalnih, industrijsko standardnih orodij je popolnoma brezplačnih! +Danes bomo raziskali neverjetna orodja, ki spletni razvoj dandanes ne naredijo le možen, ampak ga naredijo resnično zasvojljivega. Govorim o enakih urejevalnikih, brskalnikih in potekih dela, ki jih vsak dan uporabljajo razvijalci pri Netflixu, Spotifyju in tvoji najljubši neodvisni aplikacijski studio. In tukaj je del, zaradi katerega boš z veseljem zaplesal: večina teh profesionalnih orodij, ki so standard v industriji, je popolnoma brezplačnih! ![Intro Programming](../../../../translated_images/sl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) @@ -14,148 +14,148 @@ Danes bomo raziskali neverjetna orodja, zaradi katerih sodobni spletni razvoj ni ```mermaid journey title Vaša programerska pot danes - section Odkrij + section Odkrijte Kaj je programiranje: 5: You - Programska jezika: 4: You + Programski jeziki: 4: You Pregled orodij: 5: You - section Razišči + section Raziščite Urejevalniki kode: 4: You Brskalniki in orodja za razvijalce: 5: You Ukazna vrstica: 3: You - section Vadba + section Vadite Jezikovni detektiv: 4: You Raziščite orodja: 5: You - Povezovanje z skupnostjo: 5: You + Povezava skupnosti: 5: You ``` ## Poglejmo, kaj že veš! -Preden skočimo v zabavne stvari, me zanima – kaj že veš o tem programerskem svetu? In poslušaj, če gledaš ta vprašanja in misliš "nimam prav nič pojma o tem," ni samo v redu, je popolno! To pomeni, da si prišel točno tja, kamor moraš. Ta kviz si predstavljaj kot raztezanje pred vadbo – pravkar ogrevamo možganske mišice! +Preden skočimo v zabavne dele, me zanima – kaj že veš o tem programerskem svetu? In poslušaj, če gledaš na ta vprašanja in misliš "o tem nimam pojma," to ni samo v redu, to je popolno! To pomeni, da si na pravem mestu. Pomisli na ta kviz kot na razgibavanje pred vadbo – samo ogrevamo možganske mišice! -[Reši kviz pred lekcijo](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Reši kviz pred lekcijo](https://ff-quizzes.netlify.app/web/) -## Pustolovščina, na katero se bomo skupaj podali +## Pustolovščina, na katero se odpravljava skupaj -V redu, resnično komaj čakam, da raziskujemo danes! Iskreno, rad bi videl tvoj obraz, ko ti bodo nekateri koncepti kliknili. Tukaj je neverjetno potovanje, na katerega se podajamo skupaj: +Prav, iskreno sem navdušen nad tem, kar bova danes raziskala! Resno, rad bi videl tvoj obraz, ko ti bo nekaj teh pojmov kliknilo. To je neverjetno potovanje, na katero se podajava skupaj: -- **Kaj programiranje pravzaprav je (in zakaj je najbolj kul stvar ever!)** – Odkrijemo, kako je koda dobesedno nevidna magija, ki poganja vse okoli tebe, od tistega alarma, ki nekako ve, da je ponedeljek zjutraj, do algoritma, ki popolnoma izbere tvoje Netflix priporočila -- **Programski jeziki in njihove osupljive osebnosti** – Predstavljaj si, da prideš na zabavo, kjer ima vsak povsem različne supermoči in načine reševanja problemov. Tako je s svetom programskih jezikov in zaljubil se boš v njihovo spoznavanje! -- **Temeljni gradniki, ki ustvarjajo digitalno magijo** – Predstavljaj si jih kot ultimativni ustvarjalni LEGO komplet. Ko razumeš, kako se ti kosi povezujejo, boš spoznal, da lahko dobesedno zgradiš karkoli, kar tvoja domišljija sanja -- **Profesionalna orodja, zaradi katerih se boš počutil, kot da si pravkar dobil čarobno paličico** – Ne dramatiziram – ta orodja te bodo zares naredila, da se počutiš kot, da imaš supermoči, in najboljši del? To so ista orodja, ki jih uporabljajo profesionalci! +- **Kaj je programiranje (in zakaj je najbolj kul stvar ever!)** – Odkrivali bomo, kako je koda dobesedno nevidna magija, ki poganja vse okoli tebe, od tistega alarma, ki nekako ve, da je ponedeljek zjutraj, do algoritma, ki popolnoma prilagaja tvoje priporočila na Netflixu +- **Programski jeziki in njihove neverjetne osebnosti** – Predstavljaj si, da vstopiš na zabavo, kjer ima vsak povsem drugačne supermoči in načine reševanja problemov. Tak svet je svet programskih jezikov in zagotovo jih boš rad spoznal! +- **Temeljni gradniki, ki ustvarjajo digitalno magijo** – Razumi jih kot ultimativni ustvarjalni LEGO set. Ko boš razumel, kako se ti deli med seboj povezujejo, boš videl, da lahko dobesedno ustvariš karkoli, kar sanja tvoja domišljija +- **Profesionalna orodja, zaradi katerih boš imel občutek, kot da držiš čarovniško palico** – Ne pretiravam – ta orodja te bodo resnično naredila, da se boš počutil kot nekdo z nadnaravnimi sposobnostmi, najboljše pri vsem pa je, da so to ista orodja, kot jih uporabljajo profesionalci! -> 💡 **Tukaj je stvar**: Danes sploh ne razmišljaj o memoriziranju vsega! Trenutno želim samo, da začutiš tisto iskrico navdušenja glede vsega možnega. Podrobnosti se bodo naravno sprijele, ko bomo vadi skupaj – tako se zgodi pravo učenje! +> 💡 **Tukaj je stvar:** Ne poskušaj danes vsega zapomniti na pamet! Zdaj želim, da začutiš to iskrico navdušenja nad tem, kar je mogoče. Detajli se bodo avtomatično utrdili, ko bova skupaj prakticirala – tako se zgodi pravo učenje! -> To lekcijo lahko opraviš na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> To lekcijo lahko opraviš tudi na [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Kaj pravzaprav *je* programiranje? +## Kaj pa je pravzaprav *programiranje*? V redu, lotimo se milijonskega vprašanja: kaj je programiranje, resnično? -Povedal ti bom zgodbo, ki je popolnoma spremenila, kako razmišljam o tem. Prejšnji teden sem poskušal mami razložiti, kako uporabiti naš nov daljinski upravljalnik za pametni TV. Ujel sem se, da govorim stvari kot "Pritisni rdeči gumb, ampak ne velikega rdečega gumba, majhnega rdečega gumba na levi... ne, tvoje drugi levi... v redu, zdaj drži dve sekundi, ne eno, ne tri..." Zveni znano? 😅 +Povedal ti bom zgodbo, ki je popolnoma spremenila moj pogled na to. Prejšnji teden sem svoji mami poskušal razložiti, kako uporabi naš novi pametni daljinec za televizijo. Pri sebi sem rekel stvari kot "Pritisni rdeči gumb, ampak ne velik rdeči gumb, ampak majhen rdeči gumb na levi... ne, na tvoji drugi levi... okej, zdaj ga drži dve sekundi, ne eno, ne tri..." Zveni znano? 😅 -To je programiranje! Je umetnost dajanja neverjetno podrobnih navodil po korakih nečemu, kar je zelo močno, a mora imeti vse natančno povedano. Razlika je, da ne razlagaš mami (ki lahko vpraša "kateri rdeči gumb?!"), ampak razlagaš računalniku (ki počne natanko to, kar rečeš, tudi če to, kar si rekel, ni čisto to, kar si mislil). +To je programiranje! Je umetnost dajanja izjemno podrobnih, korak po koraku navodil nečemu zelo močnemu, ki pa mora imeti vse natančno določeno. Razlika je v tem, da namesto da bi to razlagal mami (ki lahko vpraša "kateri rdeči gumb?!"), razlagaš računalniku (ki naredi natanko to, kar rečeš, tudi če to, kar si rekel, ni točno to, kar si mislil). -Tukaj je nekaj, kar me je osupnilo, ko sem to prvič izvedel: računalniki so v bistvu precej preprosti v svoji srži. Razumejo le dve stvari – 1 in 0, kar je v bistvu samo "da" in "ne" oz. "vklopljeno" in "izklopljeno". To je vse! A tukaj postane magično – ne moramo govoriti v 1 in 0, kot da smo v Matrici. Tu pridejo na pomoč **programski jeziki**. So kot najboljši prevajalec na svetu, ki vzame tvoje povsem običajne človeške misli in jih pretvori v računalniški jezik. +To me je popolnoma navdušilo, ko sem to prvič izvedel: računalniki so pravzaprav zelo preprosti v jedru. Razumejo namreč le dve stvari – 1 in 0, kar je v bistvu "da" in "ne" ali "vklopljeno" in "izklopljeno." To je vse! Ampak tukaj postane res magično – ne moramo govoriti v 1 in 0 kot v filmu Matriks. Tu pridejo na pomoč **programski jeziki**. To so nekakšni najboljši prevajalci na svetu, ki tvoje povsem običajne ljudske misli pretvorijo v računalniški jezik. -In tukaj je nekaj, kar mi še vedno povzroči mravljince vsako jutro, ko se zbudim: dobesedno *vse* digitalno v tvojem življenju se je začelo z nekom, prav takšnim kot ti, verjetno v pižami s skodelico kave, ki je tipkal kodo na prenosniku. Ta Instagram filter, ki te naredi brezhibnega? Nekdo ga je skriptal. Priporočilo, ki te je pripeljalo do nove najljubše pesmi? Razvijalec je zgradil ta algoritem. Aplikacija, ki ti pomaga deliti račune za večerjo s prijatelji? Ja, nekdo si je rekel "to je nadležno, prepričan sem, da lahko popravim to" in potem... je to naredil! +In to me še danes zjutraj ponavadi požene po koži: dobesedno *vse* digitalno v tvojem življenju se je začelo pri nekem človeku, prav takšnem kot si ti, ki je verjetno sedel v pižami s skodelico kave in tipkal kodo na svojem prenosniku. Tisti Instagramov filter, ki te naredi brezhibnega? Nekdo je to zakodiral. Priporočilo, ki te je pripeljalo do tvoje nove najljubše pesmi? Razvijalec je napisal ta algoritem. Aplikacija, ki pomaga razdeliti račun za večerjo s prijatelji? Ja, nekdo je pomislil "to je nadležno, mislim, da lahko to popravim" in potem... je to storil! -Ko se naučiš programirati, ne pridobivaš samo nove veščine – postaneš del te neverjetne skupnosti reševalcev problemov, ki preživijo dneve razmišljajoč: "Kaj če bi lahko zgradil nekaj, kar nekomu malo izboljša dan?" Resno, ali je kaj bolj kul od tega? +Ko se naučiš programirati, ne pridobiš le nove veščine – postaneš del te neverjetne skupnosti reševalcev problemov, ki vsak dan razmišljajo: "Kaj, če bi lahko zgradil nekaj, kar bi nekomu naredilo dan vsaj malo boljši?" Iskreno, obstaja kaj bolj kul od tega? -✅ **Zabavno dejstvo:** Tukaj je nekaj super kul, kar lahko pogledaš, ko boš imel trenutek – kdo misliš, da je bil prvi računalniški programer na svetu? Daj ti namig: morda ni to, kar pričakuješ! Zgodba o tej osebi je izjemno fascinantna in pokaže, da je programiranje vedno bilo o ustvarjalnem reševanju problemov in razmišljanju zunaj okvirjev. +✅ **Zabaven iskalni izziv**: Tukaj je nekaj zelo zanimivega, kar lahko poiščeš, ko boš imel prost trenutek – kdo misliš, da je bil prvi programer na svetu? Namig: morda ni tisti, ki ga pričakuješ! Zgodba o tej osebi je izjemno fascinantna in pokaže, da je programiranje vedno bilo o ustvarjalnem reševanju problemov in razmišljanju izven okvirov. ### 🧠 **Čas za preverjanje: Kako se počutiš?** **Vzemi trenutek za razmislek:** -- Ali ti zdaj ideja "dati navodila računalnikom" omogoča smisel? -- Se lahko spomniš vsakodnevne naloge, ki bi jo rad avtomatiziral s programiranjem? -- Katere vprašanja se ti vrtijo po glavi glede celotne te stvari s programiranjem? +- Ali ti zdaj ideja "dati računalnikom navodila" deluje smiselno? +- Se lahko spomniš kakšne vsakdanje naloge, ki bi jo rad avtomatiziral s programiranjem? +- Katere vprašanja ti vrtijo po glavi glede tega celotnega programiranja? -> **Zapomni si**: popolnoma normalno je, če so nekateri koncepti zdaj zamegljeni. Učenje programiranja je kot učenje novega jezika – potrebuje čas, da tvoj možgani vzpostavijo te nevronske povezave. Odlično delaš! +> **Spomni se:** Popolnoma normalno je, če se ti nekateri pojmi zdaj zdijo megleni. Učenje programiranja je kot učenje novega jezika – možgane moraš postopoma naučiti novih povezav. Opravljaš odlično! ## Programske jezike lahko primerjamo z različnimi okusi magije -V redu, to bo zvenelo čudno, a vztrajaj – programski jeziki so zelo podobni različnim zvrstem glasbe. Pomisli: imaš jazz, ki je gladek in improvizacijski, rock, ki je močan in neposreden, klasiko, ki je eleganten in strukturiran, in hip-hop, ki je ustvarjalen in izrazen. Vsak slog ima svoj vibe, svojo skupnost strastnih oboževalcev in vsak je popoln za različna razpoloženja in priložnosti. +V redu, morda bo zvenelo čudno, a ostani z mano – programski jeziki so zelo podobni različnim glasbenim zvrstem. Pomisli: imaš jazz, ki je gladek in improviziran, rock, ki je močan in neposreden, klasično glasbo, ki je elegantna in strukturirana, ter hip-hop, ki je ustvarjalen in izrazen. Vsak slog ima svoj značaj, svojo skupnost navdušenih oboževalcev in vsak je kot nalašč za različna razpoloženja in priložnosti. -Programski jeziki delujejo povsem enako! Ne bi uporabil istega jezika za izdelavo zabavne mobilne igre, kot bi ga za obdelavo ogromnih količin klimatskih podatkov, tako kot ne bi igral death metal na jogo (no, vsaj v večini joga urnikov ne! 😄). +Tako programiranje pravzaprav deluje! Ne bi uporabil istega jezika za izdelavo zabavne mobilne igre in za obdelavo ogromnih količin podatkov o podnebju, tako kot ne bi igral death metala v razredu joge (no, vsaj večina jih ne! 😄). -Ampak to, kar me vedno preseneča: ti jeziki so kot najbolj potrpežljiv, briljanten tolmač na svetu, ki sedi poleg tebe. Izraziš svoje ideje na način, ki je tvojemu človeškemu umu povsem naraven, oni pa opravijo vso izjemno kompleksno delo pretvorbe tega v 1 in 0, ki jih računalnik dejansko govori. Je kot prijatelj, ki je popolnoma tekoč v obeh: "človeška ustvarjalnost" in "računalniška logika" – pa se nikoli ne utrudi, ne potrebuje kavnih odmorov in te nikoli ne obsoja, če vprašaš isto vprašanje dvakrat! +Ampak nekaj, kar me vedno znova navduši: ti jeziki so kot najbolj potrpežljiv in briljanten tolmač na svetu, ki sedi prav ob tebi. Svoje ideje lahko izražaš na način, ki je naraven tvojemu človeškemu umu, oni pa opravijo vse izjemno zapleteno delo pretvorbe tega v 1 in 0, v katerem računalniki dejansko govorijo. To je kot imeti prijatelja, ki je popolnoma tekoč tako v "človeški ustvarjalnosti" kot v "računalniški logiki" – in nikoli ni utrujen, nikoli ne potrebuje pavz za kavo in te nikoli ne obsoja, če postaviš isto vprašanje dvakrat! -### Priljubljeni programski jeziki in njihove uporabe +### Priljubljeni programski jeziki in njihova uporaba ```mermaid mindmap - root((Programski Jeziki)) - Spletni Razvoj + root((Programski jeziki)) + Spletni razvoj JavaScript - Čarovnija Vmesnika - Interaktivne Spletne Strani + Čarovnija za frontend + Interaktivne spletne strani TypeScript - JavaScript + Tipi - Poslovne Aplikacije - Podatki & AI + JavaScript + tipi + Podjetniške aplikacije + Podatki in AI Python - Podatkovna Znanost - Strojno Učenje + Znanost o podatkih + Strojno učenje Avtomatizacija R Statistika Raziskave - Mobilne Aplikacije + Mobilne aplikacije Java Android - Poslovno + Podjetniško Swift iOS - Apple Ekosistem + Apple ekosistem Kotlin - Moderni Android + Sodobni Android Večplatformno - Sistemi & Zmogljivost + Sistemi in zmogljivost C++ Igre - Kritično Za Zmogljivost + Kritična zmogljivost Rust - Varnost Pomnilnika - Sistemsko Programiranje + Varnost spomina + Sistemsko programiranje Go - Oblačne Storitev - Razširljiv Backend + Oblačne storitve + Razširljiv backend ``` | Jezik | Najbolj za | Zakaj je priljubljen | |----------|----------|------------------| -| **JavaScript** | Spletni razvoj, uporabniški vmesniki | Teče v brskalnikih in poganja interaktivne spletne strani | -| **Python** | Znanost podatkov, avtomatizacija, AI | Enostaven za branje in učenje, zmogljive knjižnice | -| **Java** | Poslovne aplikacije, Android aplikacije | Neodvisen od platforme, robusten za velike sisteme | -| **C#** | Windows aplikacije, razvoj iger | Močna Microsoftova ekosistem podpora | -| **Go** | Oblak storitve, backend sistemi | Hiter, preprost, zasnovan za sodobno računalništvo | +| **JavaScript** | Spletni razvoj, uporabniški vmesniki | Teče v brskalnikih in poganja interaktivne strani | +| **Python** | Podatkovna znanost, avtomatizacija, AI | Enostaven za branje in učenje, močne knjižnice | +| **Java** | Podjetniške aplikacije, Android aplikacije | Neodvisen od platforme, robusten za velike sisteme | +| **C#** | Windows aplikacije, razvoj iger | Močna podpora Microsoft ekosistema | +| **Go** | Oblak storitve, zaledni sistemi | Hiter, enostaven, zasnovan za sodobno računalništvo | -### Jeziki višje ravni proti nižji ravni +### Visokonivojski vs. niskonivojski jeziki -V redu, to je bil iskreno koncept, ki mi je prvič zmešal možgane, zato bom delil analogijo, ki mi je končno odprla oči – in res upam, da pomaga tudi tebi! +Prav, ta pojem mi je iskreno malo zmešal možgane, ko sem ga prvič spoznal, zato delim analogijo, ki mi je končno omogočila razumevanje – upam, da ti bo tudi pomagala! -Predstavljaj si, da si obiskoval država, kjer ne znaš jezika in obupno potrebuješ najbližjo stranišče (vsi smo že bili tam, kajne? 😅): +Predstavljaj si, da si v državi, kjer ne govoriš jezika, in nujno potrebuješ najbližji WC (to se nam je vsem že zgodilo, kajne? 😅): -- **Programiranje na nizki ravni** je kot učenje lokalnega narečja tako dobro, da lahko klepetaš s staro mamo, ki na vogalu prodaja sadje, uporabiš kulturne reference, domače besede in notranje šale, ki jih razume samo nekdo, ki je tam odraščal. Super impresivno in zelo učinkovito... če si slučajno tekoč! A precej zmedeno, če le iščeš stranišče. +- **Niskonivojsko programiranje** je kot učenje lokalnega narečja tako dobro, da se lahko pogovarjaš z babico, ki prodaja sadje na vogalu, z uporabo kulturnih izrazov, lokalnega žargona in notranjih šale, ki jih razume le nekdo, ki je tam odraščal. Res impresivno in zelo učinkovito... če si tečnar in govoriš tekoče! Vendar pa je malo preveč, če samo iščeš WC. -- **Programiranje na visoki ravni** je kot imeti odličnega lokalnega prijatelja, ki te povsem razume. Lahko rečeš "Res nujno rabim stranišče" v običajni angleščini, on pa poskrbi za vso kulturno prevajanje in ti da napotke, ki popolnoma ustrezajo tvojemu nemestnemu umu. +- **Visokonivojsko programiranje** je kot imeti čudovitega lokalnega prijatelja, ki te popolnoma razume. Poveš mu "Res rabim najti stranišče" v preprosti angleščini, on pa poskrbi za cel prevod in ti v jeziku, ki je razumljiv tvojemu tujskemu umu, poda navodila. V programerskih izrazih: -- **Jeziki nizke ravni** (kot Assembly ali C) ti dovoljujejo izjemno podrobne pogovore z dejansko strojno opremo računalnika, vendar moraš razmišljati kot stroj, kar je... no, rekel bom, da je prava velika sprememba načina razmišljanja! -- **Jeziki visoke ravni** (kot JavaScript, Python ali C#) ti dovoljujejo razmišljati kot človek, medtem ko oni skrbijo za ves računalniški žargon v ozadju. Poleg tega imajo zelo prijazne skupnosti, polne ljudi, ki si zapomnijo, kako je bilo biti nov, in resnično želijo pomagati! +- **Niskonivojski jeziki** (kot Assembly ali C) ti dovolijo imeti izjemno podrobne pogovore s strojno opremo računalnika, a moraš razmišljati kot stroj, kar je... pa saj veš, velik preskok v miselnosti! +- **Visokonivojski jeziki** (kot JavaScript, Python ali C#) ti dovolijo razmišljati kot človek, medtem ko oni za teboj prevajajo v strojni jezik. Poleg tega imajo te jezike izjemno prijazne skupnosti ljudi, ki se spomnijo, kako je bilo biti začetnik in resnično želijo pomagati! -Uganil boš, katere ti bom predlagal za začetek? 😉 Jeziki visoke ravni so kot pomožne kolesce, ki jih nikoli ne želiš sneti, ker naredijo celotno izkušnjo tako veliko bolj prijetno! +Ugani, katere ti bom priporočil za začetek? 😉 Visokonivojski jeziki so kot pomožna kolesa, ki jih nikoli ne želiš sneti, ker naredijo celotno izkušnjo mnogo bolj prijetno! ```mermaid flowchart TB - A["👤 Človeška misel:
'Želim izračunati Fibonačijeva števila'"] --> B{Izberi raven jezika} + A["👤 Človeška misel:
'Želim izračunati Fibonaccijeva števila'"] --> B{Izberi raven jezika} B -->|Visoka raven| C["🌟 JavaScript/Python
Enostavno za branje in pisanje"] - B -->|Nizka raven| D["⚙️ Assemberski/C
Neposredni nadzor strojne opreme"] + B -->|Nizka raven| D["⚙️ Assembler/C
Neposredna kontrola strojne opreme"] - C --> E["📝 Piši: fibonacci(10)"] - D --> F["📝 Piši: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Zapiši: fibonacci(10)"] + D --> F["📝 Zapiši: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Razumevanje računalnika:
Prevajalnik obvladuje kompleksnost"] + E --> G["🤖 Računalniško razumevanje:
Prevajalnik ureja kompleksnost"] F --> G G --> H["💻 Enak rezultat:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Naj ti pokažem, zakaj so jeziki visoke ravni toliko bolj prijazni +### Naj ti pokažem, zakaj so visokonivojski jeziki prijaznejši -V redu, pokazal ti bom nekaj, kar popolnoma razloži, zakaj sem se zaljubil v jezike visoke ravni, a najprej – obljubi mi nekaj. Ko boš videl prvi primer kode, ne paničari! Namenjeno je, da izgleda zastrašujoče. Točno to hočem povedati! +V redu, pravkar ti bom pokazal nekaj, kar popolnoma dokazuje, zakaj sem se zaljubil v visokonivojske jezike, a najprej – obljubi mi nekaj. Ko vidiš prvi primer kode, ne paničaraj! Namenjena je, da je videti zastrašujoče. Točno to hočem pokazati! -Pogledali bomo isto nalogo, napisano v dveh popolnoma različnih stilih. Oba ustvarjata t.i. Fibonacci zaporedje – to je ta čudoviti matematični vzorec, kjer je vsak naslednji člen vsota dveh prejšnjih: 0, 1, 1, 2, 3, 5, 8, 13 ... (zabavno dejstvo: ta vzorec najdeš povsod v naravi – spirale sončničnih semen, vzorce storžev, celo oblikovanje galaksij!) +Poglejmo popolnoma isto nalogo, napisano na dva povsem različna načina. Oboje ustvari tisto, kar imenujemo Fibonaccijevo zaporedje – to je čudovit matematični vzorec, kjer je vsako število vsota dveh prejšnjih: 0, 1, 1, 2, 3, 5, 8, 13... (zabavna zanimivost: ta vzorec najdeš dobesedno povsod v naravi – spiralno razporeditev sončničnih semen, vzorce storžev, celo obliko galaksij!) -Pripravljen za razliko? Gremo! +Pripravljen na primerjavo? Gremo! -**Jezik visoke ravni (JavaScript) – Prijazen do ljudi:** +**Visokonivojski jezik (JavaScript) – po človeško:** ```javascript -// 1. korak: Osnovna nastavitev Fibonaccija +// Korak 1: Osnovna nastavitev Fibonaccija const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,29 +183,29 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**To koda naredi:** -- **Definira** konstanto za določitev, koliko Fibonacci števil želimo generirati -- **Inicializira** dve spremenljivki za sledenje trenutnim in naslednjim številom v zaporedju -- **Nastavi** začetne vrednosti (0 in 1), ki določata Fibonacci vzorec -- **Prikaže** glavno sporočilo za identifikacijo izhoda +**To koda počne:** +- **Deklarira** konstanto, ki določa, koliko Fibonaccijevih števil želimo ustvariti +- **Inicializira** dve spremenljivki za sledenje trenutnega in naslednjega števila v zaporedju +- **Nastavi** začetne vrednosti (0 in 1), ki definirajo Fibonaccijev vzorec +- **Prikaže** naslovno sporočilo za identifikacijo izpisa ```javascript -// Korak 2: Ustvari zaporedje s pomočjo zanke +// Korak 2: Generirajte zaporedje z zanko for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Izračunaj naslednjo številko v zaporedju + // Izračunajte naslednjo številko v zaporedju const sum = current + next; current = next; next = sum; } ``` -**Razčlenitev dogajanja tukaj:** -- **Zanka** za vsak položaj v zaporedju s pomočjo `for` zanke -- **Prikaže** vsak člen z njegovo pozicijo z uporabo oblikovanja predloge niza -- **Izračuna** naslednje Fibonacci število z dodajanjem trenutne in naslednje vrednosti -- **Posodobi** spremenljivke za sledenje, da se premaknemo na naslednji korak +**Kaj se dogaja tukaj:** +- **Zanka** skozi vsak položaj v zaporedju z uporabo `for` zanke +- **Prikazuje** vsako število s svojo pozicijo z oblikovanjem preko predloge +- **Izračunava** naslednje Fibonaccijevo število z dodajanjem trenutnega in naslednjega +- **Posodablja** sledilne spremenljivke za premik v naslednjo iteracijo ```javascript // Korak 3: Sodobni funkcionalni pristop @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**V zgornjem smo:** -- **Ustvarili** ponovno uporabno funkcijo z uporabo moderne sintakse puščice -- **Zgradili** polje za shranjevanje celotnega zaporedja namesto prikazovanja po posameznih členih -- **Uporabili** indeksiranje polja za izračunavanje vsakega novega člena iz prejšnjih vrednosti -- **Vrnil** celotno zaporedje za prilagodljivo uporabo v drugih delih programa +**V zgornjem primeru smo:** +- **Ustvarili** ponovljivo funkcijo z moderno sintakso puščic +- **Zgradili** tabelo za shranjevanje celotnega zaporedja namesto prikaza enega po enega +- **Uporabljali** indeksiranje tabele za izračun vsakega novega števila iz prejšnjih vrednosti +- **Vrnil** celotno zaporedje za fleksibilno uporabo drugje v programu -**Jezik nizke ravni (ARM Assembly) – Prijazen do računalnika:** +**Niskonivojski jezik (ARM Assembly) – računalniku prijazno:** ```assembly area ascen,code,readonly @@ -257,28 +257,28 @@ back add r0,r1 end ``` -Opazi, kako verzija JavaScript bere skoraj kot angleška navodila, medtem ko verzija Assembly uporablja skrivnostne ukaze, ki neposredno nadzorujejo procesor računalnika. Oba opravita enako nalogo, a je jezik visoke ravni veliko lažji za ljudi za razumevanje, pisanje in vzdrževanje. +Opazite, kako JavaScript verzija skoraj bere kot navodila v angleščini, medtem ko Assembly uporablja skrivnostne ukaze, ki neposredno nadzorujejo procesor računalnika. Oba izvedeta isto nalogo, vendar je visokonivojski jezik veliko bolj prijazen za ljudi, da ga razumejo, pišejo in vzdržujejo. **Ključne razlike, ki jih boš opazil:** -- **Berljivost**: JavaScript uporablja opisna imena kot `fibonacciCount`, medtem ko Assembly uporablja skrivnostne oznake kot `r0`, `r1` -- **Komentarji**: Visokonivojski jeziki spodbujajo pojasnjevalne komentarje, ki naredijo kodo samodokumentirajočo -- **Struktura**: Logični tok JavaScripta sovpada s tem, kako ljudje razmišljajo o problemih korak za korakom +- **Berljivost**: JavaScript uporablja opisna imena, kot je `fibonacciCount`, medtem ko asembler uporablja skrivnostne oznake, kot so `r0`, `r1` +- **Komentarji**: Visoko raven jeziki spodbujajo pojasnjujoče komentarje, ki naredijo kodo samodokumentirajočo +- **Struktura**: Logični tok JavaScripta sledi načinu, kako ljudje razmišljajo o problemih korak za korakom - **Vzdrževanje**: Posodabljanje JavaScript različice za različne zahteve je preprosto in jasno -✅ **O zaporedju Fibonaccijevih števil**: Ta popolnoma čudovit vzorec števil (kjer je vsako število vsota dveh predhodnih: 0, 1, 1, 2, 3, 5, 8...) se doslovno pojavlja *povsod* v naravi! Najdete ga v spiralah sončnic, vzorcih storžev, načinu zvijanja školjk nautilus in celo v rasti vej dreves. Res je osupljivo, kako nam matematika in koda pomagata razumeti in ustvarjati vzorce, ki jih narava uporablja za ustvarjanje lepote! +✅ **O Fibonaccijevem zaporedju**: Ta absolutno čudovit številčni vzorec (kjer je vsako število vsota dveh predhodnih: 0, 1, 1, 2, 3, 5, 8...) se pojavlja doslovno *povsod* v naravi! Najdete ga v spiralah sončnic, vzorcih storžev, v tem, kako se kodra lastovke lupine, pa tudi v načinu rasti drevesnih vej. Res je neverjetno, kako matematika in koda pomagata razumeti in znova ustvariti vzorce, ki jih narava uporablja za ustvarjanje lepote! ## Gradniki, ki ustvarjajo čarovnijo -Prav, zdaj ko ste videli, kako programski jeziki izgledajo v akciji, razčlenimo temeljne dele, ki sestavljajo doslovno vsak program, kar je bil kdaj napisan. Predstavljajte si jih kot bistvene sestavine v vaši najljubši jedi – ko boste razumeli, kaj vsaka po vrsti počne, boste znali brati in pisati kodo v skoraj vsakem jeziku! +Dobro, zdaj ko ste videli, kako programski jeziki izgledajo v akciji, razčlenimo temeljne dele, ki sestavljajo prav vsak program, kar je bil kdaj napisan. Pomislite na to kot na bistvene sestavine v vaši najljubši recepturi – ko boste razumeli, kaj vsak od njih počne, boste lahko brali in pisali kodo v skoraj vsakem jeziku! -To je nekako kot učenje slovnice programiranja. Se spomnite šolskih dni, ko ste se učili o samostalnikih, glagolih in kako sestaviti stavke? Programiranje ima svojo različico slovnice, in iskreno, je veliko bolj logična in odpuščajoča kot kdajkoli angleška slovnica! 😄 +To je nekako kot učenje slovnice programiranja. Se spomnite, kako smo se v šoli učili o samostalnikih, glagolih in sestavljanju stavkov? Programiranje ima svojo različico slovnice, in iskreno, ta je veliko bolj logična in odpuščajoča kot slovnica angleščine! 😄 -### Ukazi: Navodila korak za korakom +### Izjave: Navodila korak za korakom -Začnimo z **ukazi** – ti so kot posamezni stavki v pogovoru z vašim računalnikom. Vsak ukaz računalniku sporoči, naj naredi eno specifično stvar, podobno kot da bi dajali navodila: "Zavij levo tukaj," "Ustavi na rdeči luči," "Parkiraj na tistem mestu." +Začnimo z **izjavami** – te so kot posamezni stavki v pogovoru z vašim računalnikom. Vsaka izjava računalniku pove, naj naredi eno specifično stvar, nekako kot da dajete navodila: "Zavij levo tukaj," "Ustavi se na rdeči luči," "Parkiraj na tistem mestu." -Kar obožujem pri ukazih je, kako običajno berljivi so. Poglejte tole: +Všeč mi je, kako berljive so izjave običajno. Poglejte to: ```javascript // Osnovne izjave, ki izvajajo posamezna dejanja @@ -287,30 +287,30 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**To koda naredi:** -- **Deklairira** konstanto za shranjevanje uporabnikovega imena -- **Prikaže** pozdravno sporočilo na konzoli +**Tukaj je, kaj ta koda počne:** +- **Določi** konstanto za shranjevanje uporabnikovega imena +- **Prikaže** pozdravno sporočilo v konzoli - **Izračuna** in shrani rezultat matematične operacije ```javascript -// Izjave, ki sodelujejo z spletnimi stranmi +// Izjave, ki komunicirajo s spletnimi stranmi document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Korak za korakom, kar se dogaja:** +**Korak za korakom, tu se dogaja:** - **Spremeni** naslov spletne strani, ki se prikaže v zavihku brskalnika -- **Zamenja** barvo ozadja celotnega telesa strani +- **Zameni** barvo ozadja celotnega telesa strani -### Spremenljivke: Sistem pomnjenja vašega programa +### Spremenljivke: Spominski sistem vašega programa -Prav, **spremenljivke** so iskreno ena mojih najljubših konceptov za poučevati, ker so tako podobne stvarem, ki jih vsak dan že uporabljate! +Prav, **spremenljivke** so iskreno ena mojih najljubših konceptov za poučevanje, ker so zelo podobne stvarem, ki jih uporabljate vsak dan! -Pomislite za trenutek na seznam stikov v telefonu. Ne pomnite vseh telefonskih številk na pamet – raje shranite "Mami," "Najboljši prijatelj" ali "Picerija, ki dostavlja do 2. ure zjutraj" in vaš telefon si zapomni prave številke. Spremenljivke delujejo na povsem enak način! So kot označene posode, kamor vaš program lahko shrani informacije in jih pozneje pridobi z imenom, ki ima smisel. +Pomislite za trenutek na imenik v telefonu. Ne pomnite si vseh telefonskih številk – namesto tega shranite "Mami", "Najboljši prijatelj" ali "Picerija, ki dostavlja do 2 ure zjutraj" in pustite, da telefon shrani prave številke. Spremenljivke delujejo popolnoma enako! So kot označeni vsebniki, kjer vaš program lahko shrani informacije in jih pozneje poišče po imenu, ki ima smisel. -Tukaj je res kul: spremenljivke se lahko spreminjajo med tekom programa (od tod tudi ime "spremenljivka" – vidite, kaj so naredili?). Tako kot lahko posodobite kontakt pizzerije, ko odkrijete še boljšo možnost, se spremenljivke lahko posodabljajo, ko vaš program pridobiva nove podatke ali ko se situacije spreminjajo! +Tukaj je res kul stvar: spremenljivke se lahko spreminjajo med izvajanjem programa (od tod ime "spremenljivka" – veste, kaj so naredili?). Tako kot lahko posodobite stik za pico, ko odkrijete še boljšo picerijo, lahko spremenljivke posodabljate, ko vaš program pridobiva nove informacije ali se okoliščine spreminjajo! -Poglejmo, kako lepo preprosto je to lahko: +Pokažem vam, kako enostavno je to lahko: ```javascript // Korak 1: Ustvarjanje osnovnih spremenljivk @@ -321,13 +321,13 @@ let isRaining = false; ``` **Razumevanje teh konceptov:** -- **Shranjuje** nespremenljive vrednosti v `const` spremenljivkah (kot je ime strani) -- **Uporablja** `let` za vrednosti, ki se lahko spreminjajo skozi program -- **Dodeli** različne podatkovne tipe: nize (besedilo), številke in boolean (true/false) -- **Izbere** opisna imena, ki pojasnijo, kaj posamezna spremenljivka vsebuje +- **Shranjajte** nespremenljive vrednosti v `const` spremenljivkah (kot je ime strani) +- **Uporabite** `let` za vrednosti, ki se lahko spreminjajo skozi program +- **Dodelite** različne tipe podatkov: nizi (besedilo), številke in boolean (true/false) +- **Izberite** opisna imena, ki razložijo, kaj posamezna spremenljivka vsebuje ```javascript -// Korak 2: Delo z objekti za združevanje sorodnih podatkov +// Korak 2: Delo z objekti za združevanje povezanih podatkov const weatherData = { location: "San Francisco", humidity: 65, @@ -335,10 +335,10 @@ const weatherData = { }; ``` -**V zgornjem primeru smo:** -- **Ustvarili** objekt za skupno upravljanje povezanih vremenskih podatkov -- **Organizirali** več podatkov pod enim imenom spremenljivke -- **Uporabili** pare ključ-vrednost za jasno označevanje posameznih informacij +**Zgoraj smo:** +- **Ustvarili** objekt za skupinsko urejanje povezanih vremenskih informacij +- **Organizirali** več kosov podatkov pod enim imenom spremenljivke +- **Uporabljali** ključ-vrednost pare za jasno označevanje vsake informacije ```javascript // Korak 3: Uporaba in posodabljanje spremenljivk @@ -350,32 +350,32 @@ currentWeather = "cloudy"; temperature = 68; ``` -**Razumimo posamezen del:** -- **Prikazali** informacije s predlogami nizov z `${}` sintakso -- **Dostopali** do lastnosti objekta z notacijo s piko (`weatherData.windSpeed`) -- **Posodobili** spremenljivke deklarirane z `let`, da odražajo spreminjajoče se pogoje -- **Združili** več spremenljivk za ustvarjanje smiselnim sporočil +**Poglejmo vsak del posebej:** +- **Prikazujemo** informacije s predlogi nizov s sintakso `${}` +- **Dostopamo** do lastnosti objekta z dot notacijo (`weatherData.windSpeed`) +- **Posodabljamo** spremenljivke, deklarirane z `let`, da odražajo spreminjajoče se pogoje +- **Združujemo** več spremenljivk v smiselna sporočila ```javascript -// Korak 4: Moderna destrukturacija za čistejšo kodo +// Korak 4: Sodobno razstavljanje za čistejšo kodo const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Kar morate vedeti:** -- **Izluščite** specifične lastnosti iz objektov z razstavljanjem (destructuring assignment) -- **Ustvarite** nove spremenljivke samodejno z enakimi imeni kot ključi objekta -- **Poenostavite** kodo z izogibanjem ponavljajoči se notaciji s piko +**Kaj morate vedeti:** +- **Izvlecite** specifične lastnosti iz objektov z destrukturiranjem +- **Ustvarite** nove spremenljivke samodejno z istimi imeni kot ključi objekta +- **Poenostavite** kodo s tem, da se izognete ponavljajoči se dot notaciji -### Krmilni tok: Učite svoj program razmišljati +### Nadzor toka: Poučevanje programa razmišljanja -Prav, tukaj programiranje postane resnično osupljivo! **Krmilni tok** je osnovno učenje programa, kako sprejemati pametne odločitve, enako kot jih vi vsak dan sprejemate, ne da bi sploh razmišljali. +Prav, tukaj programiranje postane resnično osupljivo! **Nadzor toka** pomeni, da naučite svoj program pametno sprejemati odločitve, tako kot jih vi sprejemate vsak dan, ne da bi sploh pomislili. -Predstavljajte si: danes zjutraj ste verjetno razmišljali nekaj v stilu "Če dežuje, vzamem dežnik. Če je hladno, oblečem jakno. Če se mudi, preskočim zajtrk in vzamem kavo na poti." Vaš možgani avtomatično sledijo tej logiki če-potem desetinekrat na dan! +Predstavljajte si: danes zjutraj ste verjetno šli skozi nekaj takega: "Če dežuje, vzamem dežnik. Če je hladno, oblečem jopico. Če zamujam, izpustim zajtrk in vzamem kavo s poti." Vaš možgan nenehno sledijo tej if-then logiki na desetine krat dnevno! -To je tisto, kar programe naredi inteligentne in žive, namesto da bi zgolj sledili dolgočasnemu, predvidljivemu skriptu. Lahko zares pogledajo situacijo, ocenijo, kaj se dogaja, in ustrezno reagirajo. Kot da programu podarite možgane, ki se lahko prilagajajo in sprejemajo odločitve! +To je tisto, kar naredi programe pametne in žive, namesto da bi samo sledili dolgočasnemu, predvidljivemu scenariju. Programi lahko pogledajo situacijo, ocenijo, kaj se dogaja, in odgovorijo primerno. Tako kot, da bi dali programu možgane, ki se prilagodijo in sprejemajo odločitve! -Želite videti, kako lepo to deluje? Poglejte: +Želite videti, kako lepo to deluje? Pokažem vam: ```javascript // Korak 1: Osnovna pogojna logika @@ -389,11 +389,11 @@ if (userAge >= 18) { } ``` -**Ta koda naredi:** -- **Preveri**, ali uporabnikova starost izpolnjuje zahtevo za glasovanje +**Kaj ta koda počne:** +- **Preveri**, ali starost uporabnika ustreza volilnim pogojem - **Izvede** različne bloke kode glede na rezultat pogoja -- **Izračuna** in prikaže čas do upravičenosti glasovanja, če je pod 18 let -- **Nudi** specifične, koristne povratne informacije za vsak primer +- **Izračuna** in prikaže čas do upravičenosti do glasovanja, če je uporabnik mlajši od 18 +- **Nudi** natančne, koristne povratne informacije za vsak scenarij ```javascript // Korak 2: Več pogojev z logičnimi operatorji @@ -409,10 +409,10 @@ if (userAge >= 18 && hasPermission) { } ``` -**Razčlenitev dogajanja:** -- **Združi** več pogojev z operatorjem `&&` (in) +**Razčlenjevanje dogajanja tukaj:** +- **Združi** več pogojev z uporabo `&&` (in) operaterja - **Ustvari** hierarhijo pogojev z `else if` za več scenarijev -- **Obravnava** vse možne primere z zadnjim `else` stavkom +- **Obravnava** vse možne primere z zaključnim `else` - **Nudi** jasne in uporabne povratne informacije za vsako situacijo ```javascript @@ -421,10 +421,10 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Kar si morate zapomniti:** -- **Uporabite** ternarni operator (`? :`) za preproste dve možnosti -- **Najprej napišete** pogoj, nato `?`, sledita resnični vrednosti in `:`, ki ji sledi vrednost za napačen pogoj -- **Uporabite** ta vzorec za dodeljevanje vrednosti glede na pogoje +**Kar morate zapomniti:** +- **Uporabite** ternarnega operaterja (`? :`) za preproste pogoje z dvema možnostma +- **Najprej napišite** pogoj, nato `?`, potem resničen rezultat, nato `:`, nato napačen rezultat +- **Uporabite** ta vzorec, kadar morate vrednosti dodeliti glede na pogoje ```javascript // Korak 4: Obdelava več specifičnih primerov @@ -447,55 +447,55 @@ switch (dayOfWeek) { } ``` -**Ta koda doseže naslednje:** -- **Primerja** vrednost spremenljivke z več specifičnimi primeri -- **Skupini** podobne primere (delovni dnevi proti vikendom) -- **Izvede** ustrezen blok kode, ko najde ujemanje -- **Vključi** `default` primer za nepričakovane vrednosti -- **Uporabi** `break` stavke, da prepreči nadaljevanje kode v naslednjem primeru +**Ta koda izvede naslednje:** +- **Ujemanje** vrednosti spremenljivke z več specifičnimi primeri +- **Združevanje** podobnih primerov skupaj (delovni in vikend dnevi) +- **Izvajanje** ustreznega bloka kode, ko je najdeno ujemanje +- **Vključitev** `default` primera za nepričakovane vrednosti +- **Uporaba** `break` stavkov, da preprečijo nadaljevanje kode v naslednji primer -> 💡 **Resnični primer**: Razmislite o krmilnem toku kot o najbolj potrpežljivem GPS-u na svetu, ki vam daje navodila. Lahko bi rekli: "Če je promet na Glavni ulici, pojdi po avtocesti. Če gradbeni posegi zapirajo avtocesto, poskusi po panoramski poti." Programi uporabljajo isto vrsto pogojne logike, da inteligentno odzovejo na različne situacije in vedno uporabnikom zagotovijo najboljšo možno izkušnjo. +> 💡 **Praktična primerjava**: Nadzor toka je kot najbolj potrpežljiv GPS na svetu, ki vam daje navodila. Morda reče: "Če je na Main Street promet, pojdi avtocesto. Če je zaradi gradnje avtocesta zaprta, poskusi slikovito pot." Programi uporabljajo enako tip logike z pogoji, da inteligentno odgovorijo na razne situacije in vedno uporabnikom zagotovijo najboljšo možno izkušnjo. -### 🎯 **Preverjanje koncepta: Mojstrstvo gradnikov** +### 🎯 **Preverjanje razumevanja: Mojstrstvo gradnikov** -**Poglejmo, kako dobro razumeš osnove:** -- Ali znaš v svojih besedah pojasniti razliko med spremenljivko in ukazom? -- Pomisli na realen primer, kjer bi uporabil odločitev če-potem (kot naš primer z glasovanjem) -- Kaj te je eno o programerski logiki najbolj presenetilo? +**Poglejmo, kako vam gre s temelji:** +- Ali z lastnimi besedami lahko razložite razliko med spremenljivko in izjavo? +- Pomislite na resničen primer, kjer bi uporabili if-then odločitev (kot naš primer glasovanja) +- Kaj vas je najbolj presenetilo pri logiki programiranja? -**Hitro povečanje samozavesti:** +**Hiter dvig samozavesti:** ```mermaid flowchart LR - A["📝 Stavki
(Navodila)"] --> B["📦 Spremenljivke
(Shramba)"] --> C["🔀 Potek nadzora
(Odločitve)"] --> D["🎉 Delujoč program!"] + A["📝 Izjave
(Navodila)"] --> B["📦 Spremenljivke
(Shranjevanje)"] --> C["🔀 Krmilni Tok
(Odločitve)"] --> D["🎉 Delujoč Program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Kaj sledi:** Kmalu se bomo skupaj poglobili v te koncepte in imel boš pravo veselje! Za zdaj se osredotoči samo na tisti občutek navdušenja nad vsemi čudovitimi možnostmi, ki te čakajo. Specifične veščine in tehnike se bodo naravno razvijale, ko bomo skupaj vadili – obljubim, da bo to veliko bolj zabavno, kot si morda predstavljaš! +✅ **Kaj sledi:** Imeli bomo resnično zabavno potovanje z globljim spoznavanjem teh konceptov! Zdaj pa se osredotočite samo na to navdušenje nad vsemi čudovitimi možnostmi, ki so pred vami. Specifične veščine in tehnike se bodo naučile same naravno, ko bomo skupaj vadili – obljubim, da bo to veliko bolj zabavno, kot ste pričakovali! -## Orodja stroke +## Orodja obrti -Prav, tukaj resnično poželim, da ne bi mogel zadržati navdušenja! 🚀 Slovarili bomo o neverjetnih orodjih, ki ti bodo dala občutek, kot da so ti pravkar izročili ključe do digitalnega vesoljskega plovila. +Prav, tukaj pa sem res navdušen, komaj se držim! 🚀 Govorili bomo o neverjetnih orodjih, zaradi katerih se boste počutili, kot da ste ravnokar prejeli ključe digitalnega vesoljskega plovila. -Veš, kako ima kuhar svoje popolno uravnotežene nože, ki so kot podaljški njegovih rok? Ali kako ima glasbenik tisto posebno kitaro, ki začne peti takoj, ko jo prime? No, razvijalci imamo svoje različice teh čarobnih orodij, in tukaj je nekaj, kar ti bo popolnoma odpihnilo pamet – večina je povsem brezplačnih! +Veš, kako kuhar ima tiste popolnoma uravnotežene nože, ki se zdijo kot podaljšek njegovih rok? Ali kako glasbenik ima to edinstveno kitaro, ki takoj začne peti, ko jo primete? No, razvijalci imamo svojo različico teh čarobnih orodij, in tukaj je nekaj, kar vam bo popolnoma pomešalo misli – večina jih je popolnoma brezplačnih! -Skoraj ne morem sedeti pri miru, ko razmišljam o tem, da jih delim s tabo, ker so popolnoma spremenila način, kako gradimo programsko opremo. Govorimo o AI-podprtih pomočnikih za pisanje kode (resno!), oblačnih okoljih, kjer lahko razvijaš celotne aplikacije pravzaprav od kjerkoli, kjer je Wi-Fi, in orodjih za odpravljanje napak, ki so tako sofisticirana, da so kot rentgenski pogled v tvoje programe. +Skoraj skačem od navdušenja, ko pomislim, da vam jih lahko pokažem, ker so popolnoma revolucionirala način, kako gradimo programsko opremo. Govorimo o AI-pogojenih pomočnikih za kodiranje, ki lahko pomagajo pisati vašo kodo (iskreno, ne hecam se!), oblakih, kjer lahko gradite celotne aplikacije s kateregakoli kraja s povezavo Wi-Fi, in orodjih za odpravljanje napak, ki so tako sofisticirana, kot da imate rentgenski vid za vaše programe. -In tukaj pride del, ki mi še vedno požene mravljince: to niso orodja samo za začetnike, ki jih boš kmalu prerastel. To so ista profesionalna orodja, ki jih trenutno uporabljajo razvijalci v Googlu, Netflixu in tudi v mali neodvisni studio aplikacije, ki jo obožuješ. Uporaba teh orodij te bo naredila za pravega profesionalca! +In tukaj je del, ki mi še vedno povzroča mravljince: to niso orodja za začetnike, ki jih boste prerastli. To so točno ista profesionalna orodja, ki jih uporabljajo razvijalci v Googlu, Netflixu in tej indie razvojni skupini aplikacij, ki jo obožujete. Čutili se boste kot pravi profesionalec, ko jih uporabljate! ```mermaid graph TD A["💡 Vaša ideja"] --> B["⌨️ Urejevalnik kode
(VS Code)"] - B --> C["🌐 Brskalniški DevTools
(Testiranje in odpravljanje napak)"] + B --> C["🌐 Brskalnik DevTools
(Testiranje in odpravljanje napak)"] C --> D["⚡ Ukazna vrstica
(Avtomatizacija in orodja)"] D --> E["📚 Dokumentacija
(Učenje in referenca)"] E --> F["🚀 Osupljiva spletna aplikacija!"] B -.-> G["🤖 AI pomočnik
(GitHub Copilot)"] C -.-> H["📱 Preizkušanje naprav
(Prilagodljiva zasnova)"] - D -.-> I["📦 Upravljalci paketov
(npm, yarn)"] + D -.-> I["📦 Upravljalniki paketov
(npm, yarn)"] E -.-> J["👥 Skupnost
(Stack Overflow)"] style A fill:#fff59d @@ -505,124 +505,124 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Urejevalniki kode in IDE: tvoji novi digitalni najboljši prijatelji +### Urejevalniki kode in IDE-ji: vaši novi digitalni najboljši prijatelji -Govorimo o urejevalnikih kode – ti bodo kmalu postali tvoja najljubša mesta za druženje! Predstavi si jih kot svoj osebni kotiček za kodiranje, kjer boš preživel največ časa ustvarjanja in izpopolnjevanja svojih digitalnih stvaritev. +Pogovorimo se o urejevalnikih kode – ti bodo kmalu postali vaši najljubši kotički za ustvarjanje! Pomislite na njih kot na osebni zakladi kodiranja, kjer boste preživeli največ časa pri ustvarjanju in izpopolnjevanju svojih digitalnih stvaritev. -Pa poglej, kaj je pri sodobnih urejevalnikih najbolj čarobno: niso le navadni urejevalniki besedila. So kot najbolj briljantni, podpirajoči mentor kode, ki sedi poleg tebe 24/7. Ujameta tipkarske napake še preden jih opaziš, predlagata izboljšave, zaradi katerih zgledaš kot genij, pomagata razumeti, kaj vsak del kode počne, nekateri pa celo predvidijo, kaj boš napisal, in ponudijo, da dokončajo tvoje misli! +Ampak tukaj je nekaj, kar je zares čarobno pri sodobnih urejevalnikih: niso le lepi urejevalniki besedil. So kot najbolj briljanten in podpirajoč mentor programiranja, ki sedi ob vas 24 ur na dan. Ujamete njihove tipkarske napake še preden jih opazite, predlagajo izboljšave, zaradi katerih ste videti kot genij, pomagajo vam razumeti, kaj počne vsak kos kode, nekateri vam celo lahko predvidijo, kaj boste napisali in ponudijo, da dokončajo vaše misli! -Spomnim se, ko sem prvič odkril samodejno dopolnjevanje – imel sem občutek, da živim v prihodnosti. Začneš s pisanjem, pa ti urejevalnik reče: "Hej, si morda mislil to funkcijo, ki počne točno to, kar rabiš?" Kot da imaš bralca misli kot svojega kodiranja prijatelja! +Spomnim se, ko sem odkril samodejno dokončanje – res sem imel občutek, kot da živim v prihodnosti. Začnete tipkati nekaj in vaš urejevalnik reče: "Hej, si mislil na to funkcijo, ki počne točno to, kar potrebuješ?" To je kot imeti bralca misli kot kodirnega prijatelja! -**Zakaj so ti urejevalniki tako neverjetni?** +**Kaj naredi te urejevalnike tako neverjetne?** -Sodobni urejevalniki kode ponujajo impresiven nabor funkcij, ki povečajo tvojo produktivnost: +Sodobni urejevalniki kode ponujajo impresiven nabor funkcij, ki povečajo vašo produktivnost: -| Funkcija | Kaj počne | Zakaj pomaga | +| Funkcija | Kaj naredi | Zakaj pomaga | |---------|--------------|--------------| -| **Poudarjanje sintakse** | Barva različne dele kode | Olajša branje kode in odkrivanje napak | -| **Samodejno dopolnjevanje** | Predlaga kodo med pisanjem | Pospeši kodiranje in zmanjša tipkarske napake | -| **Orodja za odpravljanje napak** | Pomaga najti in popraviti napake | Prihrani ure odpravljanja težav | -| **Razširitve** | Dodajajo specializirane funkcije | Prilagodi urejevalnik za katerokoli tehnologijo | -| **AI pomočniki** | Predlagajo kodo in pojasnila | Pospešujejo učenje in produktivnost | +| **Poudarjanje sintakse** | Barva različne dele vaše kode | Naredi kodo lažjo za branje in zaznavanje napak | +| **Samodokončanje** | Predlaga kodo med tipkanjem | Pospeši kodiranje in zmanjša tipkarske napake | +| **Orodja za odpravljanje napak** | Pomaga najti in popraviti napake | Prihrani ure iskanja napak | +| **Razširitve** | Dodajajo specializirane funkcije | Prilagodite urejevalnik za katero koli tehnologijo | +| **AI pomočniki** | Predlagajo kodo in pojasnila | Pospešijo učenje in produktivnost | -> 🎥 **Video vir**: Želiš videti ta orodja v akciji? Oglej si [Video Orodja stroke](https://youtube.com/watch?v=69WJeXGBdxg) za celovit pregled. +> 🎥 **Video vir**: Želite videti ta orodja v akciji? Oglejte si [video Orodja obrti](https://youtube.com/watch?v=69WJeXGBdxg) za celovit pregled. #### Priporočeni urejevalniki za spletni razvoj -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (brezplačen) +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Brezplačno) - Najbolj priljubljen med spletnimi razvijalci - Odličen ekosistem razširitev -- Vgrajen terminal in integracija z Gitom -- **Nepogrešljive razširitve**: +- Vgrajen terminal in integracija Git +- **Neizogibne razširitve**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-podprti predlogi kode - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Sodelovanje v realnem času - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Samodejno oblikovanje kode - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Preprečevanje tipkarskih napak v kodi + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - sodelovanje v realnem času + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - samodejno oblikovanje kode + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - zaznavanje tipkarskih napak v kodi -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (plačljivo, brezplačno za študente) +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Plačljivo, brezplačno za študente) - Napredna orodja za odpravljanje napak in testiranje -- Inteligentno dopolnjevanje kode -- Vgrajen nadzor različic +- Inteligentno samodokončanje kode +- Vgrajeno upravljanje verzij -**Oblačni IDE-ji** (različne cene) -- [GitHub Codespaces](https://github.com/features/codespaces) - Celoten VS Code v brskalniku -- [Replit](https://replit.com/) - Odlično za učenje in deljenje kode -- [StackBlitz](https://stackblitz.com/) - Trenutni, poln spletni razvoj +**Spletna IDE-ji** (različne cene) +- [GitHub Codespaces](https://github.com/features/codespaces) - celoten VS Code v vašem brskalniku +- [Replit](https://replit.com/) - odlično za učenje in deljenje kode +- [StackBlitz](https://stackblitz.com/) - takojšen spletni razvoj celotnih aplikacij -> 💡 **Nasvet za začetek**: Začni z Visual Studio Code – je brezplačen, široko uporablja industrija in ima ogromno skupnost, ki ustvarja koristne vodiče in razširitve. +> 💡 **Nasvet za začetek**: Začnite z Visual Studio Code – brezplačen je, široko uporabljen v industriji in ima ogromno skupnost, ki ustvarja koristne vodiče in razširitve. -### Spletni brskalniki: tvoja skrivna razvojna laboratorija +### Spletni brskalniki: Vaša skrivna razvojna laboratorija -Pripravi se, da ti bo misel povsem odpihnila! Veš, kako si brskalnike uporabljal za brskanje po družbenih omrežjih in gledanje videov? Izkaže se, da so ves ta čas skrivali neizmerno skrivno razvojno laboratorijo, ki samo čaka, da jo odkriješ! +Pripravite se, da vam bo popolnoma odpihnilo um! Več kot le uporabljate brskalnike za brskanje po družbenih omrežjih in gledanje videov? No, izkazalo se je, da so ves čas skrivali neverjeten skrivni laboratorij za razvijalce, ki samo čaka, da ga odkrijete! -Vsakič, ko z desnim klikom klikneš na spletno stran in izbereš "Inspect Element" (Preveri element), odpreš skriti svet razvojnih orodij, ki so iskreno močnejša kot neka draga programska oprema, za katero sem nekdaj plačeval stotine evrov. To je kot odkriti, da je tvoja običajna kuhinja skrivala profesionalni kuharski laboratorij za skrivnim panelom! -Prvič, ko mi je nekdo pokazal brskalniška DevTools orodja, sem preživel kar tri ure, ko sem samo klikoval naokoli in govoril: "POČAKAJ, TO LAHKO TUDI?!" Lahko namreč v realnem času urejaš katerokoli spletno stran, vidiš točno, kako hitro se vse nalaga, preizkusiš, kako tvoja stran izgleda na različnih napravah, in celo odpraviš napake v JavaScriptu kot pravi strokovnjak. To je naravnost osupljivo! +Vsakič, ko kliknete z desnim gumbom na spletni strani in izberete »Preglej element«, odprete skriti svet orodij za razvijalce, ki so iskreno močnejša od neke drage programske opreme, za katero sem prej plačeval stotine evrov. To je kot odkriti, da vaša običajna kuhinja skriva profesionalni kuhinjski laboratorij za chefa za tajnim panelom! +Prvič, ko mi je nekdo pokazal brskalniška DevTools, sem preživel kakšne tri ure samo s klikom sem ter tja in govoril: "POSEDI, TO LAHKO TUDI?" Dobesedno lahko v realnem času urejaš katerokoli spletno stran, vidiš natanko, kako hitro se vse nalaga, preizkusiš, kako tvoja stran izgleda na različnih napravah, in celo odpraviš težave z JavaScriptom kot pravi strokovnjak. Popolnoma osupljivo je! -**Zakaj so brskalniki tvoja skrivna orožja:** +**Tukaj je razlog, zakaj so brskalniki tvoja skrivna orožja:** -Ko ustvarjaš spletno stran ali spletno aplikacijo, moraš videti, kako izgleda in deluje v resničnem svetu. Brskalniki ne prikazujejo samo tvojega dela, ampak nudijo tudi podrobne povratne informacije o zmogljivosti, dostopnosti in morebitnih težavah. +Ko ustvariš spletno stran ali spletno aplikacijo, moraš videti, kako izgleda in kako se obnaša v resničnem svetu. Brskalniki ne prikazujejo le tvojega dela, ampak ponujajo tudi podrobne povratne informacije o zmogljivosti, dostopnosti in morebitnih težavah. -#### Brskalniška orodja za razvijalce (DevTools) +#### Razvijalska orodja brskalnika (DevTools) -Sodobni brskalniki vključujejo celovite razvojne pakete: +Sodobni brskalniki vključujejo obsežne razvojne pakete: | Kategorija orodja | Kaj počne | Primer uporabe | |-------------------|-----------|----------------| -| **Pregledovalnik elementov** | Ogled in urejanje HTML/CSS v realnem času | Prilagajanje slogov za takojšen rezultat | +| **Pregledovalnik elementov** | Ogled in urejanje HTML/CSS v realnem času | Prilagodi stilizacijo in takoj vidi rezultate | | **Konzola** | Ogled sporočil o napakah in testiranje JavaScripta | Odpravljanje napak in eksperimentiranje s kodo | -| **Nadzornik omrežja** | Sledenje nalaganju virov | Optimizacija zmogljivosti in časov nalaganja | -| **Preverjevalnik dostopnosti** | Testiranje vključujočega oblikovanja | Zagotavljanje delovanja strani za vse uporabnike | -| **Simulator naprav** | Predogled na različnih velikostih zaslona | Preizkušanje odzivnega oblikovanja brez več naprav | +| **Mrežni monitor** | Spremljanje nalaganja virov | Optimizacija zmogljivosti in časov nalaganja | +| **Preverjevalnik dostopnosti** | Testiranje vključujočega oblikovanja | Zagotovi, da tvoja stran deluje za vse uporabnike | +| **Simulator naprav** | Predogled na različnih velikostih zaslonov | Testiranje odzivnega oblikovanja brez več naprav | #### Priporočeni brskalniki za razvoj -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industrijski standard DevTools z obsežno dokumentacijo -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Odlična orodja za CSS Grid in dostopnost -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Zgrajen na Chromiumu z Microsoftovimi razvojnimi viri +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – industrijski standard DevTools z obsežno dokumentacijo +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – odlična orodja za CSS mrežo in dostopnost +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – temelji na Chromiumu s Microsoftovimi razvojnimi viri -> ⚠️ **Pomemben nasvet za testiranje**: Vedno svoje spletne strani preizkusi v več brskalnikih! Kar popolno deluje v Chrome, lahko v Safariju ali Firefoxu izgleda drugače. Profesionalni razvijalci testirajo v vseh glavnih brskalnikih, da zagotovijo dosledno uporabniško izkušnjo. +> ⚠️ **Pomemben nasvet za testiranje**: Vedno testiraj svoje spletne strani v več brskalnikih! Kar v Chromu deluje popolno, se lahko v Safariju ali Firefoxu prikaže drugače. Profesionalni razvijalci preizkušajo v vseh glavnih brskalnikih, da zagotovijo dosledne uporabniške izkušnje. -### Orodja ukazne vrstice: tvoja pot do razvijalskih supermoč +### Orodja ukazne vrstice: Tvoja pot do supermoč razvijalca -Prav, pojdimo do popolnoma iskrenega trenutka o ukazni vrstici, ker želim, da to slišiš od nekoga, ki res razume. Ko sem jo prvič videl – samo ta strašni črni zaslon z utripajočim besedilom – sem si dejal: "Ne, nikakor ne! To izgleda kot nekaj iz hekerskega filma iz 80-ih in zagotovo nisem dovolj pameten za to!" 😅 +Prav, bodimo čisto iskreni glede ukazne vrstice, ker želim, da to slišiš od nekoga, ki to res razume. Ko sem jo prvič videl – samo ta strašen črni zaslon z utripajočim besedilom – sem dobesedno pomislil: "Ne, absolutno ne! To izgleda kot nekaj iz hekerskega filma iz 80-ih in jaz zagotovo nisem dovolj pameten za to!" 😅 -Ampak tukaj je, kar bi si želel, da bi mi takrat nekdo rekel in ti govorim zdaj: ukazna vrstica ni strašljiva – pravzaprav je kot neposreden pogovor s tvojim računalnikom. Pomisli nanjo kot na razliko med naročanjem hrane preko elegantne aplikacije s slikami in meniji (kar je lepo in enostavno) ter vstopom v tvojo najljubšo lokalno restavracijo, kjer kuhar natanko ve, kaj imaš rad, in ti pripravi nekaj popolnega, samo če rečeš "preseneti me z nečim neverjetnim." +Ampak tukaj je tisto, kar bi mi nekdo moral takrat povedati in ti prav zdaj: ukazna vrstica ni strašljiva – to je kot da imaš neposreden pogovor s svojim računalnikom. Predstavljaj si razliko med naročanjem hrane preko elegantne aplikacije s slikami in meniji (kar je lepo in enostavno) ter vstopom v tvojo najljubšo lokalno restavracijo, kjer kuhar natančno ve, kaj ti je všeč, in ti lahko pripravi nekaj popolnega, samo z besedami "preseneti me s čim neverjetnim." -Ukazna vrstica je mesto, kjer razvijalci dobijo občutek, da so pravi čarovniki. Vpišeš nekaj na videz magičnih besed (okej, to so samo ukazi, ampak se zdijo magični!), pritisneš enter in BOOM – ustvariš celotno strukturo projekta, namestiš močna orodja z vsega sveta ali zaženeš svojo aplikacijo na internetu za milijone ljudi. Ko poskusiš prvič to moč, postaneš pošteno zasvojen! +Ukazna vrstica je kraj, kjer razvijalci postanejo pravi čarovniki. Vpišeš nekaj navidez magičnih besed (okej, to so ukazi, ampak se zdijo čarobni!), pritisneš enter in BAM – ustvaril si celotno strukturo projekta, namestil močna orodja z vsega sveta ali zagnal svojo aplikacijo na internetu, da jo vidijo milijoni ljudi. Ko enkrat poskusiš to moč, je iskreno kar zasvojljivo! -**Zakaj bo ukazna vrstica tvoj najljubši pripomoček:** +**Zakaj bo ukazna vrstica tvoja najljubša orodja:** -Medtem ko so grafični vmesniki odlični za veliko nalog, ukazna vrstica blesti pri avtomatizaciji, natančnosti in hitrosti. Mnogi razvojni pripomočki delujejo predvsem prek ukaznih vmesnikov, in učenje njihove učinkovite uporabe lahko močno izboljša tvojo produktivnost. +Medtem ko so grafični vmesniki krasni za mnogo opravil, ukazna vrstica odlično služi avtomatizaciji, natančnosti in hitrosti. Mnog Orodja za razvoj delujejo predvsem prek ukazne vrstice in učenje učinkovite uporabe lahko dramatično izboljša tvojo produktivnost. ```bash -# Korak 1: Ustvarite in se premaknite v imenik projekta +# Korak 1: Ustvarite in pojdite v imenik projekta mkdir my-awesome-website cd my-awesome-website ``` **Tukaj je, kaj ta koda počne:** - **Ustvari** novo mapo z imenom "my-awesome-website" za tvoj projekt -- **Vstopi** v pravkar ustvarjeno mapo, da začneš delati +- **Premakne se** v novo ustvarjeno mapo, da začneš z delom ```bash # Korak 2: Inicializirajte projekt z datoteko package.json npm init -y -# Namestite sodobna razvojna orodja +# Namestite sodobna orodja za razvoj npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Korak za korakom, kaj se dogaja:** -- **Inicializira** nov Node.js projekt z privzetimi nastavitvami z `npm init -y` -- **Namesti** Vite kot sodobno orodje za gradnjo za hiter razvoj in produktivne gradnje +**Korak za korakom, tukaj se dogaja:** +- **Inicializira** novi Node.js projekt z osnovnimi nastavitvami z `npm init -y` +- **Namesti** Vite kot sodobno orodje za hitro razvijanje in izdelavo produkcijskih graditev - **Doda** Prettier za samodejno oblikovanje kode in ESLint za preverjanje kakovosti kode -- **Uporabi** zastavico `--save-dev` za označitev teh kot razvojnih odvisnosti +- **Uporabi** zastavico `--save-dev`, da se zadeve označijo kot odvisnosti samo za razvoj ```bash -# Korak 3: Ustvarite strukturo projekta in datoteke +# Korak 3: Ustvarite strukturo in datoteke projekta mkdir src assets echo 'My Site

Hello World

' > index.html @@ -630,225 +630,227 @@ echo 'My Site

Hello Wo npx vite ``` -**Zgoraj smo:** -- **Organizirali** svoj projekt z ustvarjanjem ločenih map za izvorno kodo in sredstva -- **Generirali** osnovno HTML datoteko z ustrezno strukturo dokumenta -- **Zagnali** razvojni strežnik Vite za živo osveževanje in zamenjavo modulov v živo +**V zgornjem primeru smo:** +- **Organizirali** projekt z ustvarjanjem ločenih map za izvorno kodo in sredstva +- **Generirali** osnovno HTML datoteko s pravilno strukturo dokumenta +- **Zagnali** Vite razvojni strežnik za živo osveževanje in zamenjavo modulov v živo -#### Ključna orodja ukazne vrstice za spletni razvoj +#### Nujna orodja ukazne vrstice za spletni razvoj | Orodje | Namen | Zakaj ga potrebuješ | -|--------|-------|--------------------| +|--------|--------|--------------------| | **[Git](https://git-scm.com/)** | Upravljanje različic | Sledi spremembam, sodeluj z drugimi, varnostno kopiraj delo | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript okolje izvajanja & upravljanje paketov | Zaženi JavaScript zunaj brskalnikov, namesti sodobna razvojna orodja | -| **[Vite](https://vitejs.dev/)** | Orodje za gradnjo & razvojni strežnik | Izjemno hiter razvoj z zamenjavo modulov v živo | -| **[ESLint](https://eslint.org/)** | Kakovost kode | Samodejno najdi in odpravi težave v tvojem JavaScriptu | -| **[Prettier](https://prettier.io/)** | Oblikovanje kode | Ohrani svojo kodo dosledno oblikovano in berljivo | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime in upravljanje paketov | Zaženi JavaScript zunaj brskalnikov, namesti sodobna orodja | +| **[Vite](https://vitejs.dev/)** | Orodje za gradnjo in razvojni strežnik | Izjemno hiter razvoj s turbo posodobitvami modulov | +| **[ESLint](https://eslint.org/)** | Kakovost kode | Samodejno najde in odpravi težave v JavaScript kodi | +| **[Prettier](https://prettier.io/)** | Oblikovanje kode | Ohrani kodo dosledno oblikovano in berljivo | #### Platformno specifične možnosti **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Sodobni, z mnogimi funkcijami bogat terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Močno skriptno okolje -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradicionalna ukazna vrstica Windows +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – moder, bogat s funkcijami terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – močno skriptno okolje +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – tradicionalna ukazna vrstica Windows **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Vgrajena terminalska aplikacija -- **[iTerm2](https://iterm2.com/)** - Izboljšan terminal z naprednimi funkcijami +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – vgrajena terminalska aplikacija +- **[iTerm2](https://iterm2.com/)** – izboljšan terminal z naprednimi funkcijami **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standardni Linux lupina -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Napreden terminalski emulator +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standardna Linux lupina +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – napredni terminalski emulator -> 💻 = Prednameščeno v operacijskem sistemu +> 💻 = Vnaprej nameščen v operacijskem sistemu -> 🎯 **Pot učenja**: Začni z osnovnimi ukazi kot so `cd` (sprememba mape), `ls` ali `dir` (seznam datotek) in `mkdir` (ustvari mapo). Vadite z modernimi ukazi za delo kot `npm install`, `git status` in `code .` (odpre trenutno mapo v VS Code). Ko boš bolj vešč, boš naravno osvojil naprednejše ukaze in tehnike avtomatizacije. +> 🎯 **Pot učenja**: Začni z osnovnimi ukazi, kot so `cd` (zamenjaj mapo), `ls` ali `dir` (prikaži datoteke) in `mkdir` (ustvari mapo). Vadite moderno delo z ukazi, kot so `npm install`, `git status` in `code .` (odpre trenutno mapo v VS Code). Ko boš bolj domač, boš naravno osvojil zahtevnejše ukaze in tehnike avtomatizacije. -### Dokumentacija: tvoj vedno dostopen učni mentor +### Dokumentacija: Tvoj vedno dostopen učni mentor -Naj ti zaupam eno skrivnost, ki ti bo resnično olajšala občutek začetnika: tudi najbolj izkušeni razvijalci preživijo ogromno časa z branjem dokumentacije. In to ni zato, ker ne vedo, kaj delajo – pravzaprav je to znak modrosti! +Naj ti zaupam majhno skrivnost, ki ti bo dala veliko večjo samozavest kot začetniku: celo najbolj izkušeni razvijalci preživijo velik del svojega časa ob branju dokumentacije. In to ni zato, ker ne vedo, kaj delajo – to je dejansko znak modrosti! -Dokumentacijo si predstavljaj kot dostop do najbolj potrpežljivih, izkušenih učiteljev na svetu, ki so ti na voljo 24/7. Zaglaviš pri problemu ob 2. uri zjutraj? Dokumentacija je tam z virtualnim toplim objemom in točno pravim odgovorom, ki ga potrebuješ. Želiš izvedeti nekaj o novi zanimivi funkciji, o kateri vsi govorijo? Dokumentacija te podpira z jasnimi primeri korak za korakom. Poskušaš razumeti, zakaj nekaj deluje tako, kot deluje? Uganil si – dokumentacija je pripravljena, da ti razloži na način, ki ti bo končno odprl oči! +Predstavljaj si dokumentacijo kot dostop do najbolj potrpežljivih, najbolj strokovnih učiteljev na svetu, ki so na voljo 24/7. Zapečen si pri problemu ob 2 zjutraj? Dokumentacija je tukaj z virtualnim toplim objemom in točno tistim odgovorom, ki ga potrebuješ. Želiš izvedeti o novi kul funkciji, o kateri vsi govorijo? Dokumentacija ti stoji ob strani s korak-po-korak primeri. Poskušaš razumeti, zakaj nekaj deluje na določen način? Ugani kaj – dokumentacija je pripravljena to razložiti na način, da ti končno klikne! -Nekaj, kar mi je popolnoma spremenilo pogled: spletni razvoj se odvija neverjetno hitro in nihče (mislim, nihče!) si ne zapomni vsega. Videl sem starejše razvijalce z več kot 15 leti izkušenj, kako iščejo osnovno sintakso in veš kaj? To ni sramotno – to je pametno! Ni stvar popolnega spomina, temveč vedeti, kje čim hitreje najti zanesljive odgovore in kako jih uporabiti. +Tukaj je nekaj, kar mi je popolnoma spremenilo pogled: svet spletnega razvoja se premika izjemno hitro in nihče (res nihče!) ne zna vsega na pamet. Videl sem starejše razvijalce z več kot 15 leti izkušenj, kako iščejo osnovno sintakso, in veš kaj? Ni sramotno – to je pametno! Ne gre za popoln spomin, ampak za to, da veš, kje hitro najti zanesljive odgovore in kako jih uporabiti. -**Tu se zgodi prava čarovnija:** +**Prava magija se zgodi tukaj:** -Profesionalni razvijalci veliko časa preživijo z branjem dokumentacije – ne zato, ker ne vedo, kaj delajo, ampak zato, ker se področje spletnega razvoja tako hitro razvija, da je potrebno stalno učenje, da ostanejo na tekočem. Izvrstna dokumentacija ti pomaga razumeti ne samo *kako* uporabiti nekaj, ampak tudi *zakaj* in *kdaj* to uporabiti. +Profesionalni razvijalci velik del svojega časa namenjajo branju dokumentacije – ne zato, ker ne vedo, kaj počnejo, ampak ker se spletni razvoj hitro spreminja in ohranjanje aktualnosti zahteva neprestano učenje. Odlična dokumentacija ti pomaga razumeti ne samo *kako* nekaj uporabljati, ampak tudi *zakaj* in *kdaj*. -#### Ključni viri dokumentacije +#### Nujni viri dokumentacije **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Zlati standard za dokumentacijo spletnih tehnologij -- Celoviti vodiči za HTML, CSS in JavaScript -- Vključuje informacije o združljivosti brskalnikov -- Ponuja praktične primere in interaktivne demonstracije +- zlati standard za spletno tehnološko dokumentacijo +- obsežni vodiči za HTML, CSS in JavaScript +- vključuje informacije o združljivosti brskalnikov +- vsebuje praktične primere in interaktivne predstavitve **[Web.dev](https://web.dev)** (Google) -- Najboljše prakse sodobnega spletnega razvoja -- Vodiči za optimizacijo zmogljivosti -- Načela dostopnosti in vključujočega oblikovanja -- Primeri iz resničnih projektov +- sodobne najboljše prakse spletnega razvoja +- vodiči za optimizacijo zmogljivosti +- načela dostopnosti in vključujočega oblikovanja +- študije primerov iz resničnih projektov **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Razvojni viri za brskalnik Edge -- Vodiči za progresivne spletne aplikacije -- Vpogledi v razvoj prek platform +- razvojni viri za brskalnik Edge +- vodiči za progresivne spletne aplikacije +- vpogledi v razvoj med platformami **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukture učnih poti -- Video tečaji strokovnjakov iz industrije -- Praktične vaje s kodo +- urejene učne poti +- video tečaji strokovnjakov iz industrije +- praktične vaje s kodo -> 📚 **Strategija učenja**: Ne poskušaj na pamet naučiti dokumentacije – raje se nauči, kako jo učinkovito uporabljati. Dodaj si zaznamke pogosto uporabljenih referenc in vadite iskanje specifičnih informacij po ključnih besedah. +> 📚 **Strategija učenja**: Ne poskušaj si zapomniti dokumentacije – raje se nauči, kako z njo učinkovito brskati. Kljukaj pogosto uporabljene reference in vadite iskanje specifičnih informacij hitro. ### 🔧 **Preverjanje obvladovanja orodij: Kaj te najbolj nagovarja?** -**Vzemimo trenutek za razmislek:** -- Katero orodje te najbolj vznemirja, da ga preizkusiš najprej? (Ni napačnih odgovorov!) -- Ali ti ukazna vrstica še vedno deluje zastrašujoče ali si radoveden zanjo? -- Se lahko predstaviš, da uporabljaš brskalniška DevTools orodja za pogled za kulise svojih najljubših spletnih strani? +**Vzemite si trenutek za razmislek:** +- Katero orodje si najbolj navdušen, da preizkusiš najprej? (Ni napačnega odgovora!) +- Ali se ti ukazna vrstica še vedno zdi zastrašujoča ali si radoveden z njo? +- Si lahko predstavljaš, da uporabiš brskalniška DevTools, da pokukaš za zaveso svojih najljubših spletnih strani? ```mermaid pie title "Čas razvijalca preživet z orodji" "Urejevalnik kode" : 40 - "Preizkušanje v brskalniku" : 25 + "Testiranje v brskalniku" : 25 "Ukazna vrstica" : 15 "Branje dokumentacije" : 15 "Razhroščevanje" : 5 ``` -> **Zabavna ugotovitev**: Večina razvijalcev približno 40 % časa preživi v urejevalniku kode, a opazi, koliko časa gre za testiranje, učenje in reševanje težav. Programiranje ni samo pisanje kode – gre za ustvarjanje izkušenj! +> **Zanimiva ugotovitev**: Večina razvijalcev preživi približno 40 % svojega časa v urejevalniku kode, a opazi, koliko časa gre za testiranje, učenje in reševanje problemov. Programiranje ni samo pisanje kode – gre za ustvarjanje izkušenj! -✅ **Misli za povrh**: Tukaj je nekaj za razmislek – kako misliš, da so orodja za izdelavo spletnih strani (razvoj) lahko drugačna od orodij za oblikovanje njihovega videza (dizajn)? To je kot razlika med arhitektom, ki načrtuje čudovito hišo, in izvajalcem, ki jo dejansko zgradi. Oba sta ključna, a potrebujeta različne nabore orodij! Takšen način razmišljanja ti bo res pomagal videti širšo sliko, kako spletne strani zaživijo. +✅ **Za razmislek**: Tukaj je nekaj interesantnega – kako misliš, da se orodja za gradnjo spletnih strani (razvoj) razlikujejo od orodij za oblikovanje njihovega videza (design)? Kot je razlika med arhitektom, ki načrtuje čudovito hišo, in izvajalcem, ki jo dejansko zgradi. Obe sta ključni, ampak potrebujeta različne sklope orodij! Ta način razmišljanja ti bo pomagal videti širšo sliko, kako spletne strani oživijo. -## Izziv GitHub Copilot agenta 🚀 +## GitHub Copilot Agent izziv 🚀 -Uporabi način Agent, da dokončaš naslednji izziv: +Uporabi način Agent za izpolnitev naslednjega izziva: -**Opis:** Razišči funkcije sodobnega urejevalnika kode ali IDE in pokaži, kako lahko izboljša tvoj potek dela kot spletni razvijalec. +**Opis:** Raziskuj funkcije sodobnega urejevalnika kode ali IDE ter pokaži, kako izboljšuje tvoj delovni tok kot spletni razvijalec. -**Nalaganje:** Izberi urejevalnik kode ali IDE (npr. Visual Studio Code, WebStorm ali IDE v oblaku). Naštej tri funkcije ali razširitve, ki ti pomagajo pisati, odpravljati napake ali vzdrževati kodo bolj učinkovito. Za vsako podaj kratek opis, kako izboljša tvoj potek dela. +**Navodilo:** Izberi urejevalnik kode ali IDE (na primer Visual Studio Code, WebStorm ali IDE v oblaku). Naštej tri funkcije ali razširitve, ki ti pomagajo pisati, odkrivati napake ali vzdrževati kodo bolj učinkovito. Za vsako na kratko pojasni, kako pripomore k tvojemu delovnemu toku. --- ## 🚀 Izziv -**Prav, detektiv, pripravljen na svoj prvi primer?** +**Prav, detektiv, pripravljen na prvi primer?** -Zdaj, ko imaš odlično osnovo, imam za tebe pustolovščino, ki ti bo pomagala razumeti, kako neverjetno raznolik in fascinanten je svet programiranja. In poslušaj – to še ni pisanje kode, tako da brez pritiska! Predstavljaj si, da si detektiv programskih jezikov na svojem prvem vznemirljivem primeru! +Zdaj, ko imaš to super osnovo, imam avanturo, ki ti bo pomagala videti, kako neverjetno raznolik in fascinanten je svet programiranja. In poslušaj – to še ni pisanje kode, brez pritiska! Predstavljaj si, da si detektiv programskih jezikov na svojem prvem razburljivem primeru! -**Tvoja naloga, če se je odločiš sprejeti:** -1. **Postani raziskovalec jezikov**: Izberi tri programske jezike iz povsem različnih svetov – morda enega za izdelavo spletnih strani, enega za ustvarjanje mobilnih aplikacij in enega za znanstveno obdelavo podatkov. Poišči primere enake preproste naloge zapisane v vsakem jeziku. Obljubim, da boš navdušen, kako različni so lahko, medtem ko delajo točno isto stvar! +**Tvoja misija, če jo sprejmeš:** +1. **Postani raziskovalec jezikov**: Izberi tri programske jezike iz popolnoma različnih svetov – morda enega za izdelavo spletnih strani, enega za mobilne aplikacije in enega za obdelavo podatkov za znanstvenike. Najdi primere iste enostavne naloge napisane v vsakem jeziku posebej. Obljubim, da boš popolnoma navdušen nad razlikami, čeprav delajo isto stvar! -2. **Razkrij njihove zgodbe izvora**: Kaj naredi vsak jezik poseben? Tukaj je zanimiv podatek – vsak programski jezik je nastal, ker je nekdo pomislil: "Veš kaj? Moral bi obstajati boljši način za rešitev te specifične težave." Ali lahko ugotoviš, katere težave so bile to? Nekatere od teh zgodb so res fascinantne! +2. **Razkrij njihove zgodbe izvora**: Kaj naredi vsak jezik poseben? Tukaj je kul dejstvo – vsak programski jezik je bil ustvarjen, ker je nekdo pomislil: "Veš kaj? Obstajati mora boljši način za reševanje tega posebnega problema." Ali lahko ugotoviš, kateri problemi so bili? Nekatere zgodbe so zares fascinantne! -3. **Spoznaj skupnosti**: Oglej si, kako odprta in strastna so skupnost posameznih jezikov. Nekatere imajo milijone razvijalcev, ki delijo znanje in si pomagajo, druge so manjše, a neverjetno povezane in podporne. Rada boš videla različne osebnosti teh skupnosti! +3. **Spoznaj skupnosti**: Poglej, kako gostoljubne in strastne so skupnosti okrog vsakega jezika. Nekatere imajo milijone razvijalcev, ki delijo znanje in si pomagajo, druge so manjše, a izjemno povezane in podpirajoče. Spodobi si ogledati različne osebnosti teh skupnosti! -4. **Sledi svojemu občutku**: Kateri jezik ti zdaj najbolj ustreza? Ne obremenjuj se z izbiro "pravega" – samo zaupaš svojim instinktom! Res ni napačnega odgovora in vedno lahko kasneje raziščeš druge. +4. **Sledi svojemu občutku**: Kateri jezik se ti zdi zdaj najbolj dostopen? Ne obremenjuj se s popolno izbiro – slediti intuiciji! Iskreno, tukaj ni napačnega odgovora, in vedno lahko kasneje raziskuješ druge. -**Bonus detektivska naloga**: Poskusi izvedeti, s katerimi večjimi spletnimi mesti ali aplikacijami so zgrajeni ti jeziki. Zagotavljam ti, da boš presenečen, kaj poganja Instagram, Netflix ali tisto mobilno igro, ki je ne moreš nehati igrati! +**Bonus detektivsko delo**: Poskusi izvedeti, katere glavne spletne strani ali aplikacije so narejene v posameznem jeziku. Zagotavljam, da boš presenečen, kaj poganja Instagram, Netflix ali tisto mobilno igro, ki je ne moreš nehat igrati! -> 💡 **Zapomni si**: Ne poskušaš danes postati strokovnjak za katerega koli izmed teh jezikov. Raje spoznavaš sosesko, preden se odločiš, kje želiš "postaviti šotor". Vzemi si čas, zabavaj se in dovoli svoji radovednosti, da te vodi! +> 💡 **Zapomni si**: Danes ne poskušaš postati ekspert v nobenem od teh jezikov. Samo spoznavaš okolico, preden se odločiš, kje se želiš naseliti. Vzemi si čas, uživaj in naj ti radovednost vodi korake! -## Praznujmo tisto, kar si odkril! +## Praznujmo, kar si odkril! -O, moj bog, danes si absorbil tako veliko neverjetnih informacij! Resnično sem navdušen, da vidim, koliko tega neverjetnega popotovanja ti je ostalo v spominu. In ne pozabi – to ni test, kjer moraš biti popoln. To je bolj praznovanje vseh kul stvari, ki si jih izvedel o tem fascinantnem svetu, v katerega se boš poglobil! +O, moj bog, danes si zaužil toliko neverjetnih informacij! Res sem navdušen videti, koliko tega čudovitega potovanja ti je ostalo v spominu. In ne pozabi – to ni preizkus, kjer moraš biti popoln. To je bolj praznovanje vseh kul stvari, ki si se jih naučil o tem fascinantnem svetu, v katerega se boš potopil! [Reši kviz po lekciji](https://ff-quizzes.netlify.app/web/) -## Pregled in samostojno učenje -**Vzemite si čas za raziskovanje in zabavo!** +## Pregled in samostojno učenje -Danes ste prehodili veliko poti, in na to ste lahko ponosni! Zdaj sledi zabavni del – raziskovanje tem, ki so vzbudile vašo radovednost. Ne pozabite, to ni domača naloga – to je pustolovščina! +**Vzemi si čas za raziskovanje in uživanje!** +Danes ste naredili veliko korakov, na kar ste lahko ponosni! Zdaj pa pride zabavni del – raziskovanje tem, ki so vzbudile vašo radovednost. Ne pozabite, to ni domača naloga – to je avantura! **Poglobite se v to, kar vas navdušuje:** **Preizkusite se v programskih jezikih:** -- Obiščite uradne spletne strani 2-3 jezikov, ki so pritegnili vašo pozornost. Vsak ima svojo osebnost in zgodbo! -- Preizkusite spletne kode za igranje, kot so [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ali [Replit](https://replit.com/). Ne bojte se eksperimentirati – nič ne morete pokvariti! +- Obiščite uradne spletne strani 2-3 jezikov, ki so vam pritegnili pozornost. Vsak ima svojo osebnost in zgodbo! +- Preizkusite spletna okolja za kodiranje, kot so [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ali [Replit](https://replit.com/). Ne bojte se eksperimentirati – ničesar ne morete pokvariti! - Preberite, kako je nastal vaš najljubši jezik. Resno, nekatere izvorne zgodbe so fascinantne in vam bodo pomagale razumeti, zakaj jeziki delujejo tako, kot delujejo. -**Spoznajte nove orodje:** -- Prenesite Visual Studio Code, če ga še niste – je brezplačen in ga boste oboževali! -- Preživet nekaj minut z brskanjem po Trgovini razširitev. Je kot trgovina z aplikacijami za vaš urejevalnik kode! -- Odprite Orodja za razvijalce v vašem brskalniku in klikajte okrog. Ne skrbite, če ne razumete vsega – samo spoznajte, kaj je tam. +**Spoznajte svoje nove pripomočke:** +- Prenesite Visual Studio Code, če ga še niste – je brezplačen in vam bo všeč! +- Preživite nekaj minut na tržnici Extensions. To je kot trgovina z aplikacijami za vaš urejevalnik kode! +- Odprite orodja za razvijalce v svojem brskalniku in klikajte naokoli. Ne skrbite, če ne razumete vsega – samo spoznajte, kaj je tam. **Pridružite se skupnosti:** -- Sledite nekaterim razvijalskim skupnostim na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ali [GitHub](https://github.com/). Programerska skupnost je izjemno prijazna do novincev! -- Poglejte nekaj videov za začetnike na YouTube-u. Obstaja veliko odličnih ustvarjalcev, ki se spomnijo, kako je bilo začeti. -- Razmislite o pridružitvi lokalnim srečanjem ali spletnim skupnostim. Verjemite mi, razvijalci radi pomagajo novincem! +- Spremljajte nekaj razvijalskih skupnosti na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ali [GitHub](https://github.com/). Programerska skupnost je neverjetno prijazna do novincev! +- Oglejte si začetniško prijazne videoposnetke kodiranja na YouTube. Obstaja toliko odličnih ustvarjalcev, ki se spominjajo, kako je začeti. +- Razmislite o pridružitvi lokalnim srečanjem ali spletnim skupnostim. Verjemite, razvijalci radi pomagajo novincem! + +> 🎯 **Poslušajte, to naj si zapomnite**: Od vas ne pričakujem, da boste čez noč postali čarovnik programiranja! Trenutno se le spoznavate s tem neverjetnim novim svetom, v katerem boste delovali. Vzemite si čas, uživajte na poti in ne pozabite – vsak razvijalec, ki ga občudujete, je nekoč sedel točno tam, kjer ste vi zdaj, začuden in morda malo preobremenjen. To je povsem normalno in pomeni, da delate prav! + -> 🎯 **Poslušajte, tukaj je, kar želite zapomniti**: Od vas ne pričakujemo, da boste preko noči čarovnik v kodiranju! Trenutno se samo spoznavate s tem neverjetnim novim svetom, ki vam je na voljo. Vzemite si čas, uživajte na poti in ne pozabite – vsak razvijalec, ki ga občudujete, je nekoč sedel natanko tam, kjer ste vi zdaj, začuden in morda malo preobremenjen. To je povsem normalno, in to pomeni, da delate prav! ## Naloga [Reading the Docs](assignment.md) -> 💡 **Mali namig za vašo nalogo**: Zelo bi rad videl, da raziščete nekaj orodij, ki jih še nismo obravnavali! Izpustite urejevalnike, brskalnike in orodja ukazne vrstice, o katerih smo že govorili – tam je cel čudovit svet neverjetnih razvojnih orodij, ki čakajo, da jih odkrijete. Iščite tiste, ki so aktivno vzdrževani in imajo živahne, prijazne skupnosti (ti imajo ponavadi najboljše vodiče in najbolj podporne ljudi, ko boste neizogibno naleteli na težave in potrebovali prijazno pomoč). +> 💡 **Mala spodbuda za vašo nalogo**: Zelo bi mi bilo všeč, če bi raziskali nekaj orodij, ki jih še nismo obravnavali! Preskočite urejevalnike, brskalnike in ukazne vrstice, o katerih smo že govorili – obstaja cel vesolje neverjetnih razvojnih orodij, ki čakajo, da jih odkrijete. Poiščite tista, ki so aktivno vzdrževana in imajo živahne, podporne skupnosti (ti imajo ponavadi najboljše vodiče in najbolj prijazne ljudi, ko se zataknete in potrebujete prijateljsko pomoč). --- ## 🚀 Časovnica vaše programerske poti ### ⚡ **Kaj lahko naredite v naslednjih 5 minutah** -- [ ] Dodajte med zaznamke spletne strani 2-3 programskih jezikov, ki so pritegnili vašo pozornost +- [ ] Dodajte med zaznamke 2-3 spletne strani programskih jezikov, ki so vam pritegnili pozornost - [ ] Prenesite Visual Studio Code, če ga še niste -- [ ] Odprite DevTools v brskalniku (F12) in klikajte po katerikoli spletni strani +- [ ] Odprite orodja za razvijalce (F12) v brskalniku in klikajte na katerikoli spletni strani - [ ] Pridružite se eni programerski skupnosti (Dev.to, Reddit r/webdev ali Stack Overflow) -### ⏰ **Kaj lahko dosežete v eni uri** -- [ ] Dokončajte kviz po lekciji in premislite o svojih odgovorih +### ⏰ **Kaj lahko dosežete v tej uri** +- [ ] Zaključite kviz po lekciji in razmislite o svojih odgovorih - [ ] Nastavite VS Code z razširitvijo GitHub Copilot -- [ ] Preizkusite primer "Hello World" v dveh različnih programskih jezikih na spletu -- [ ] Oglejte si video "Dan v življenju razvijalca" na YouTube-u -- [ ] Začnite raziskovati svojo programsko jezikovno detektivko (iz izziva) - -### 📅 **Vaša tedenska pustolovščina** -- [ ] Dokončajte nalogo in raziščite 3 nova razvojna orodja -- [ ] Sledite 5 razvijalcem ali programerskim računom na družbenih omrežjih -- [ ] Poskusite ustvariti nekaj majhnega v CodePen ali Replit (tudi samo "Hello, [Vaše ime]!") +- [ ] Preizkusite "Hello World" primer v 2 različnih programskih jezikih na spletu +- [ ] Oglejte si video "Dan v življenju razvijalca" na YouTube +- [ ] Začnite detektivsko delo o programskem jeziku (iz izziva) + +### 📅 **Vaša tedenska avantura** +- [ ] Izpolnite nalogo in raziščite 3 nova razvojna orodja +- [ ] Spremljajte 5 razvijalcev ali programerskih računov na družbenih omrežjih +- [ ] Poskusite ustvariti nekaj majhnega v CodePen ali Replit (tudi samo "Hello, [vaše ime]!") - [ ] Preberite en blog zapis razvijalca o njegovi programerski poti -- [ ] Pridružite se virtualnemu srečanju ali si oglejte programerski govor -- [ ] Začnite se učiti izbran jezik z spletnimi učnimi gradivi +- [ ] Pridružite se virtualnemu srečanju ali si oglejte predavanje o programiranju +- [ ] Začnite se učiti izbran jezik preko spletnih vodičev ### 🗓️ **Vaša mesečna preobrazba** -- [ ] Izdelajte svoj prvi majhen projekt (tudi preprosta spletna stran šteje!) -- [ ] Prispevajte k odprtokodnemu projektu (začnite z izboljšavami dokumentacije) -- [ ] Mentorirajte nekoga, ki šele začenja s programersko potjo -- [ ] Ustvarite svojo spletno stran s portfeljem razvijalca -- [ ] Povežite se z lokalnimi razvijalskimi skupinami ali učnimi skupinami -- [ ] Začnite načrtovati svoj naslednji učni mejnik +- [ ] Sestavite svoj prvi majhen projekt (tudi preprosta spletna stran šteje!) +- [ ] Prispevajte v odprtokodni projekt (začnite s popravki dokumentacije) +- [ ] Mentorirajte nekoga, ki šele začenja svojo programersko pot +- [ ] Ustvarite svojo spletno portfelj razvijalca +- [ ] Povežite se z lokalnimi razvijalskimi skupnostmi ali študijskimi skupinami +- [ ] Začnite načrtovati naslednjo učno prelomnico -### 🎯 **Zaključna refleksija** +### 🎯 **Zaključni premislek** -**Preden nadaljujete, vzemite trenutek za praznovanje:** -- Kaj vas je danes pri programiranju najbolj navdušilo? +**Preden nadaljujete, si vzemite trenutek za praznovanje:** +- Kaj vas je danes v programiranju najbolj navdušilo? - Katero orodje ali koncept želite raziskati najprej? - Kako se počutite ob začetku te programerske poti? -- Kakšno vprašanje bi zdaj želeli zastaviti razvijalcu? +- Kakšno vprašanje bi radi zdaj zastavili razvijalcu? ```mermaid journey - title Vaša pot do gradnje samozavesti + title Vaša Pot do Izgradnje Zaupanja section Danes - Curious: 3: Vi - Overwhelmed: 4: Vi - Excited: 5: Vi + Radoveden: 3: You + Preobremenjen: 4: You + Navdušen: 5: You section Ta Teden - Exploring: 4: Vi - Learning: 5: Vi - Connecting: 4: Vi + Raziščem: 4: You + Učim se: 5: You + Povezujem se: 4: You section Naslednji Mesec - Building: 5: Vi - Confident: 5: Vi - Helping Others: 5: Vi + Gradim: 5: You + Zaupljiv: 5: You + Pomagam Drugim: 5: You ``` -> 🌟 **Zapomnite si**: Vsak strokovnjak je bil nekoč začetnik. Vsak izkušen razvijalec se je nekoč počutil natanko tako kot vi zdaj – navdušen, morda malo preobremenjen in zagotovo radoveden, kaj je mogoče. Ste v odlični družbi in ta pot bo neverjetna. Dobrodošli v čudovitem svetu programiranja! 🎉 +> 🌟 **Ne pozabite**: Vsak strokovnjak je bil nekoč začetnik. Vsak izkušen razvijalec je nekoč čutil točno to, kar čutite vi zdaj – navdušenje, morda nekaj preobremenjenosti in zagotovo radovednost o tem, kaj je mogoče. V odlični ste družbi in ta pot bo čudovita. Dobrodošli v čudovitem svetu programiranja! 🎉 --- -**Omejitev odgovornosti**: -Ta dokument je bil preveden z uporabo storitve za avtomatski prevod AI [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za avtoritativni 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. +**Opozorilo**: +Ta dokument je bil preveden z uporabo storitve umetne inteligence za 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 njegovem izvirnem jeziku velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo. \ No newline at end of file diff --git a/translations/sl/AGENTS.md b/translations/sl/AGENTS.md index a9b5825a3..8fa731c49 100644 --- a/translations/sl/AGENTS.md +++ b/translations/sl/AGENTS.md @@ -2,29 +2,29 @@ ## Pregled projekta -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: -### Nastavitev glavnega repozitorija +### Nastavitev glavnega skladišča ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -36,27 +36,27 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # Zaženite razvojni strežnik -npm run build # Ustvari za produkcijo +npm run dev # Zaženi razvojni strežnik +npm run build # Zgradi za produkcijo npm run lint # Zaženi ESLint ``` -### API bankovnega projekta (Node.js + Express) +### API za bankovni projekt (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Zaženi API strežnik npm run lint # Zaženi ESLint -npm run format # Formatiraj s Prettier-jem +npm run format # Oblikuj s Prettier ``` -### Projekti razširitev za brskalnik +### Projekti za razširitve brskalnika ```bash cd 5-browser-extension/solution npm install -# Sledite navodilom za nalaganje razširitev, specifičnim za brskalnik +# Sledite navodilom za nalaganje razširitev, značilnim za brskalnik ``` ### Projekti vesoljske igre @@ -67,7 +67,7 @@ npm install # Odprite index.html v brskalniku ali uporabite Live Server ``` -### Chat projekt (Python Backend) +### Projekt klepetalnega pomočnika (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -76,33 +76,33 @@ pip install openai python api.py ``` -## Razvojni potek +## Razvojni potek dela -### Za prispevatele vsebine +### Za prispevajoče vsebino -1. **Razvejajte repozitorij** na svoj GitHub račun -2. **Klonirajte svojo vejo** lokalno -3. **Ustvarite novo vejo** za vaše spremembe -4. Spremenite vsebino lekcij ali primere kode -5. Preizkusite spremembe kode v ustreznih imenikih projektov -6. Pošljite pull requeste v skladu z navodili za prispevanje +1. **Razvezi skladišče (fork)** na svoj GitHub račun +2. **Kloniraj svoj fork** lokalno +3. **Ustvari novo vejo** za svoje spremembe +4. Naredi spremembe v vsebini lekcij ali primerih kode +5. Preizkusi spremembe kode v relevantnih projektnikih +6. Pošlji pull requeste v skladu z navodili za prispevke ### Za učence -1. Razvejajte ali klonirajte repozitorij -2. Po vrsti odprite mape lekcij -3. Preberite README datoteke za vsako lekcijo -4. Rešite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/ -5. Delajte skozi primere kode v lekcijskih mapah -6. Zaključite naloge in izzive -7. Rešite povratne kvize po lekciji +1. Razvezi ali kloniraj skladišče +2. Postopoma obišči mape lekcij +3. Preberi README datoteke za vsako lekcijo +4. Opravi pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/ +5. Prehod skozi primere kode v mapah lekcij +6. Dokončaj naloge in izzive +7. Opravi po-lekcijske kvize ### Živi razvoj -- **Dokumentacija**: Povlecite `docsify serve` v korenski mapi (port 3000) -- **Quiz App**: Zaženite `npm run dev` v mapi quiz-app -- **Projekti**: Uporabite VS Code Live Server razširitev za HTML projekte -- **API projekti**: Zaženite `npm start` v ustreznih API mapah +- **Dokumentacija**: Zaženi `docsify serve` v korenski mapi (port 3000) +- **Quiz App**: Zaženi `npm run dev` v mapi quiz-app +- **Projekti**: Uporabi VS Code Live Server razširitev za HTML projekte +- **API projekti**: Zaženi `npm start` v ustreznih API mapah ## Navodila za testiranje @@ -110,93 +110,93 @@ python api.py ```bash cd quiz-app -npm run lint # Preveri težave s slogom kode -npm run build # Preveri, ali se gradnja uspešno zaključi +npm run lint # Preverite težave s slogom kode +npm run build # Preverite, ali se gradnja uspešno zaključi ``` -### Testiranje API banke +### Testiranje Bank API ```bash cd 7-bank-project/api npm run lint # Preveri težave s slogom kode -node server.js # Preveri, da se strežnik zažene brez napak +node server.js # Preveri, da strežnik začne brez napak ``` -### Splošen pristop testiranja +### Splošni pristop k testiranju -- To je izobraževalni repozitorij brez celovitih avtomatiziranih testov -- Ročno testiranje se osredotoča na: - - Koda teče brez napak - - Povezave v dokumentaciji delujejo pravilno - - Projekti se uspešno zgradijo - - Primeri sledijo najboljšim praksam +- To je učni repozitorij brez obsežnih avtomatskih testov +- Ročno testiranje se osredotoča na: + - Primere kode, ki se izvajajo brez napak + - Delovanje povezav v dokumentaciji + - Uspešno gradnjo projektov + - Primeri sledijo najboljšim praksam -### Preverjanje pred predajo +### Preverjanja pred oddajo -- Zaženite `npm run lint` v mapah z datoteko package.json -- Preverite veljavnost markdown povezav -- Testirajte primere kode v brskalniku ali Node.js -- Preverite, da prevodi ne porušijo strukture +- Zaženi `npm run lint` v mapah z datoteko package.json +- Preveri, da so markdown povezave veljavne +- Testiraj primere kode v brskalniku ali Node.js +- Preveri, da prevodi ohranjajo pravilno strukturo -## Smernice za stil kode +## Smernice glede sloga kode ### JavaScript -- Uporabljajte sodobno sintakso ES6+ -- Sledite standardnim ESLint konfiguracijam v projektih -- Uporabljajte smiselna imena spremenljivk in funkcij za jasnost učenja -- Dodajajte komentarje, ki pojasnjujejo koncepte za učence -- Oblikujte kodo po Prettier, kjer je nastavljeno +- Uporabljaj sodoben ES6+ zapis +- Sledi standardnim ESLint konfiguracijam v projektih +- Uporabljaj pomenljive spremenljivke in imena funkcij za jasnost izobraževanja +- Dodaj komentarje za razlago konceptov učencem +- Formatiraj s Prettier, kjer je konfiguriran ### HTML/CSS -- Semantični HTML5 elementi -- Principi odzivnega oblikovanja -- Jasne konvencije za poimenovanje razredov -- Komentarji, ki pojasnjujejo CSS tehnike za učence +- Semantični HTML5 elementi +- Principi odzivnega dizajna +- Jasne konvencije poimenovanja razredov +- Komentarji, ki pojasnjujejo CSS tehnike za učence ### Python -- Smernice stila PEP 8 -- Jasni, izobraževalni primeri kode -- Tipizacija, kjer je koristna za učenje +- Smernice sloga PEP 8 +- Jasni, izobraževalni primeri kode +- Tipizacije tam, kjer so uporabne za učenje ### Markdown dokumentacija -- Jasna hierarhija naslovov -- Bloki kode z navedbo jezika -- Povezave do dodatnih virov -- Posnetki zaslona in slike v mapah `images/` -- Alternativno besedilo za slike za dostopnost +- Jasna hierarhija naslovov +- Kode v blokih z določeno jezikovno označbo +- Povezave do dodatnih virov +- Posnetki zaslona in slike v imeniku `images/` +- Alt besedilo za slike zaradi dostopnosti ### Organizacija datotek -- Lekcije so oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.) -- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/` -- Slike so shranjene v lekcijsko specifičnih mapah `images/` -- Prevodi so v strukturi `translations/{language-code}/` +- Lekcije oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics, itd.) +- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/` +- Slike shranjene v mapah lekcije v `images/` +- Prevodi v strukturi `translations/{language-code}/` -## Gradnja in objava +## Gradnja in nameščanje -### Objavljanje Quiz App (Azure Static Web Apps) +### Namestitev Quiz App (Azure Static Web Apps) -Quiz-app je konfiguriran za objavo na Azure Static Web Apps: +Quiz-app je konfiguriran za nameščanje na Azure Static Web Apps: ```bash cd quiz-app npm run build # Ustvari mapo dist/ -# Izvede namestitev prek GitHub Actions delovnega toka ob potisku na main +# Izvede nameščanje prek GitHub Actions poteka dela ob potisku na main ``` -Konfiguracija Azure Static Web Apps: -- **Lokacija aplikacije**: `/quiz-app` -- **Izhodna lokacija**: `dist` -- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Konfiguracija Azure Static Web Apps: +- **Lokacija aplikacije**: `/quiz-app` +- **Izhodna lokacija**: `dist` +- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generiranje dokumentacije v PDF +### Generiranje PDF dokumentacije ```bash -npm install # Namesti docsify-to-pdf +npm install # Namestite docsify-to-pdf npm run convert # Ustvari PDF iz docs ``` @@ -204,79 +204,79 @@ npm run convert # Ustvari PDF iz docs ```bash npm install -g docsify-cli # Namestite Docsify globalno -docsify serve # Strežite na localhost:3000 +docsify serve # Postrežite na localhost:3000 ``` -### Gradnje po posameznih projektih +### Gradnje specifične za projekte -Vsak projekt ima lahko lasten gradbeni proces: -- Vue projekti: `npm run build` ustvari proizvodne pakete -- Statični projekti: brez gradnje, datoteke se neposredno strežejo +Vsak projekt lahko ima svoj postopek gradnje: +- Vue projekti: `npm run build` ustvari produkcijske pakete +- Statični projekti: brez koraka gradnje, streže datoteke neposredno ## Smernice za pull requeste ### Oblika naslova -Uporabite jasne, opisne naslove, ki označujejo področje spremembe: -- `[Quiz-app] Dodaj nov kviz za lekcijo X` -- `[Lesson-3] Popravi napako v projektu terrarium` -- `[Translation] Dodaj španski prevod za lekcijo 5` -- `[Docs] Posodobi navodila za namestitev` +Uporabi jasne, opisne naslove, ki kažejo področje spremembe: +- `[Quiz-app] Dodaj nov kviz za lekcijo X` +- `[Lesson-3] Popravi tipkarsko napako v projektu terrarium` +- `[Translation] Dodaj španski prevod za lekcijo 5` +- `[Docs] Posodobi navodila za nastavitev` -### Potrebni pregledi +### Zahtevana preverjanja -Pred oddajo PR: +Pred oddajo PR: -1. **Kakovost kode**: - - Zaženite `npm run lint` v ustreznih projektnih mapah - - Odpravite vse napake in opozorila +1. **Kakovost kode**: + - Zaženi `npm run lint` v prizadetih projektnih mapah + - Odpravi vse napake in opozorila linterja -2. **Preverjanje gradnje**: - - Zaženite `npm run build`, če je potrebno - - Zagotovite, da ni napak pri gradnji +2. **Preverjanje gradnje**: + - Zaženi `npm run build`, če je potrebno + - Prepričaj se, da ni napak pri gradnji -3. **Preverjanje povezav**: - - Testirajte vse markdown povezave - - Preverite pravilnost slikovnih referenc +3. **Preverjanje povezav**: + - Preizkusi vse markdown povezave + - Preveri, da so reference na slike delujoče -4. **Pregled vsebine**: - - Preverite pravopis in slovnico - - Zagotovite pravilnost in izobraževalno vrednost primerov kode - - Preverite pravilnost prevodov in skladnost pomena +4. **Pregled vsebine**: + - Preberi za pravopisne in slovnične napake + - Preveri pravilnost in izobraževalno vrednost primerov kode + - Preveri, da prevodi ohranjajo prvotni pomen -### Zahteve za prispevanje +### Zahteve za prispevke -- Strinjajte se z Microsoft CLA (avtomatska kontrola pri prvem PR) -- Sledite [Microsoftovemu kodeksu ravnanja za odprto kodo](https://opensource.microsoft.com/codeofconduct/) -- Preberite [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila -- Referencirajte številke težav v opisu PR, če je primerno +- Sprejmi Microsoftovo CLA (avtomatski pregled ob prvem PR) +- Sledi [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Poglej [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila +- V primeru potrebuje povezave do številk issue v opisu PR ### Postopek pregleda -- PR-e pregledajo vzdrževalci in skupnost -- Prioriteta je jasnost izobraževalnih vsebin -- Primeri kode naj sledijo najboljšim trenutnim praksam -- Prevodi so pregledani glede točnosti in kulturne ustreznosti +- PR pregledujejo vzdrževalci in skupnost +- Prednost ima jasnost izobraževalne vsebine +- Primeri kode naj sledijo trenutnim najboljšim praksam +- Prevodi se pregledajo za točnost in kulturno ustreznost ## Sistem prevajanja -### Avtomatski prevod +### Avtomatizirani prevodi -- Uporablja GitHub Actions s co-op-translator potekom dela -- Samodejno prevaja v več kot 50 jezikov -- Izvorne datoteke v glavnih direktorijih -- Prevedene datoteke v `translations/{language-code}/` mapah +- Uporablja GitHub Actions z co-op-translator workflow +- Samodejno prevaja v več kot 50 jezikov +- Izvorne datoteke v glavnih mapah +- Prevedene datoteke v mapi `translations/{language-code}/` ### Dodajanje ročnih izboljšav prevodov -1. Poiščite datoteko v `translations/{language-code}/` -2. Izboljšajte vsebino ob ohranitvi strukture -3. Zagotovite delovanje primerov kode -4. Preizkusite lokalizirane kvize, če so prisotni +1. Najdi datoteko v `translations/{language-code}/` +2. Naredi izboljšave ob ohranjanju strukture +3. Poskrbi, da primeri kode ostanejo funkcionalni +4. Preizkusi vse lokalizirane kviz vsebine -### Metapodatki prevodov +### Metapodatki za prevode -Prevedene datoteke vključujejo glavo metapodatkov: +Prevedene datoteke vsebujejo metapodatkovni naslov: ```markdown ``` -## Razhroščevanje in odpravljanje težav +## Odpravljanje napak in reševanje težav ### Pogoste težave -**Aplikacija kvizov se ne zažene**: -- Preverite različico Node.js (priporočeno v4+ ali višje) -- Izbrišite `node_modules` in `package-lock.json`, znova zaženite `npm install` -- Preverite konflikte pristanišč (privzeto Vite uporablja port 5173) +**Quiz app se ne zažene**: +- Preveri različico Node.js (priporočen v14+) +- Izbriši `node_modules` in `package-lock.json`, ponovno zaženi `npm install` +- Preveri konflikte vrat (privzeto: Vite uporablja port 5173) -**API strežnik se ne zažene**: -- Preverite, ali je različica Node.js zadostna (node >=10) -- Preverite, ali je pristanišče že v uporabi -- Prepričajte se, da so vse odvisnosti nameščene preko `npm install` +**Strežnik API se ne zažene**: +- Preveri minimalno različico Node.js (node >=10) +- Preveri, če vrata že niso zasedena +- Zagotovi, da so vse odvisnosti nameščene z `npm install` -**Razširitev za brskalnik se ne naloži**: -- Preverite pravilno oblikovan manifest.json -- Preverite konzolo brskalnika za napake -- Sledite navodilom za namestitev specifičnim za brskalnik +**Razširitev brskalnika se ne naloži**: +- Preveri, ali je manifest.json pravilno oblikovan +- Preveri napake v konzoli brskalnika +- Sledi navodilom za namestitev razširitve za določen brskalnik -**Težave s Python chat projektom**: -- Prepričajte se, da je nameščen paket OpenAI: `pip install openai` -- Preverite, da je okoljska spremenljivka GITHUB_TOKEN nastavljena -- Preverite dovoljenja za dostop do GitHub modelov +**Težave s projektnim klepetom (Python)**: +- Poskrbi, da je nameščen paket OpenAI: `pip install openai` +- Preveri, da je okoljska spremenljivka GITHUB_TOKEN nastavljena +- Preveri dostopne pravice GitHub Modelov -**Docsify ne streže dokumentacije**: -- Namestite docsify-cli globalno: `npm install -g docsify-cli` -- Zaženite v korenski mapi repozitorija -- Preverite, ali obstaja `docs/_sidebar.md` +**Docsify ne streže dokumentacije**: +- Namesti docsify-cli globalno: `npm install -g docsify-cli` +- Zaženi z korenske mape repozitorija +- Preveri, da datoteka `docs/_sidebar.md` obstaja ### Nasveti za razvojno okolje -- Uporabljajte VS Code z razširitvijo Live Server za HTML projekte -- Namestite ESLint in Prettier razširitve za skladno oblikovanje -- Uporabljajte DevTools v brskalniku za razhroščevanje JavaScripta -- Za Vue projekte namestite Vue DevTools razširitev za brskalnik +- Uporabljaj VS Code z Live Server razširitvijo za HTML projekte +- Namesti ESLint in Prettier razširitve za konsistentno oblikovanje +- Uporabi DevTools v brskalniku za odpravljanje napak v JavaScriptu +- Za Vue projekte namesti Vue DevTools razširitev brskalnika ### Upoštevanje zmogljivosti -- Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone -- Uporabite plitek klon, če delate samo z vsebino: `git clone --depth 1` -- Izključite prevode iz iskanja pri delu na angleški vsebini -- Gradbeni postopki so lahko počasni ob prvem zagonu (npm install, Vite build) +- Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone +- Uporabi plitek klon, če delaš samo z vsebino: `git clone --depth 1` +- Izključi prevode iz iskanja med delom z angleško vsebino +- Gradbeni procesi so lahko počasni pri prvem zagonu (npm install, Vite build) -## Varnostne usmeritve +## Varnostni ukrepi ### Okoljske spremenljivke -- API ključi nikoli naj ne bodo vključeni v repozitorij -- Uporabite `.env` datoteke (že v `.gitignore`) -- Dokumentirajte potrebne okoljske spremenljivke v README-jih projektov +- Ključi API naj nikoli niso vključeni v repozitorij +- Uporabljaj `.env` datoteke (že vključene v `.gitignore`) +- Zabeleži potrebne okoljske spremenljivke v README projektov ### Python projekti -- Uporabljajte virtualna okolja: `python -m venv venv` -- Ohranjajte odvisnosti posodobljene -- GitHub tokeni naj imajo minimalne potrebne pravice +- Uporabljaj virtualna okolja: `python -m venv venv` +- Održi odvisnosti posodobljene +- GitHub tokeni naj imajo minimalne potrebne pravice -### Dostop do GitHub modelov +### Dostop do GitHub Modelov -- Za GitHub modele so potrebni osebni dostopni tokeni (PAT) -- Tokeni naj se hranijo v okoljskih spremenljivkah -- Nikoli ne vključujte tokenov ali poverilnic v repozitorij +- Potrebni so osebni dostopni žetoni (PAT) +- Žetone je treba shranjevati kot okoljske spremenljivke +- Nikoli jih ne vključi v repozitorij ali delilne datoteke ## Dodatne opombe ### Ciljna publika -- Popolni začetniki v spletnem razvoju -- Študenti in samostojni učeči se -- Učitelji, ki uporabljajo kurikulum v razredih -- Vsebina je zasnovana za dostopnost in postopno gradnjo znanja +- Popolni začetniki v razvoju spletnih strani +- Študenti in samostojni učenci +- Učitelji, ki uporabljajo učni načrt v učilnicah +- Vsebina je namenjena dostopnosti in postopnemu razvijanju veščin ### Izobraževalna filozofija -- Pristop učenja skozi projekte -- Pogoste preveritve znanja (kvizi) -- Praktikum programiranja -- Primeri iz resničnega sveta -- Osredotočenost na osnove pred ogrodji +- Pristop učenja na osnovi projektov +- Pogoste preizkuse znanja (kvizi) +- Praktične vaje s kodo +- Prikazi primerov iz resničnega sveta +- Poudarek na osnovah pred okviri ### Vzdrževanje repozitorija -- Aktivna skupnost učencev in prispevalcev -- Redne posodobitve odvisnosti in vsebine -- Spremljanje težav in razprav s strani vzdrževalcev -- Posodobitve prevodov avtomatizirane preko GitHub Actions +- Aktivna skupnost učencev in prispevkov +- Redne posodobitve odvisnosti in vsebine +- Vzdrževalci spremljajo zadeve in razprave +- Posodobitve prevodov avtomatizirane prek GitHub Actions ### Sorodni viri -- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) -- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočen za učence -- Dodatni tečaji: Generativni AI, Data Science, ML, IoT kurikulumi na voljo +- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) +- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence +- 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 --- -**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. \ No newline at end of file diff --git a/translations/sl/README.md b/translations/sl/README.md index d29cc5904..662c24d4b 100644 --- a/translations/sl/README.md +++ b/translations/sl/README.md @@ -10,261 +10,270 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Spletni razvoj za začetnike - Učni načrt +# Spletni razvoj za začetnike - učni načrt -Naučite se osnov spletnega razvoja z našim 12-tedenskim 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! -Pridružite se Discord skupnosti Azure AI Foundry +Pridružite se skupnosti Azure AI Foundry Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Sledite tem korakom, da začnete uporabljati te vire: -1. **Forkajte repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4) +Sledite tem korakom za začetek z uporabo teh virov: +1. **Razvezi repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Pridruži se Azure AI Foundry Discord in spoznaj strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Podpora za več jezikov -#### Podprto preko GitHub Action (avtomatsko in vedno posodobljeno) +#### Podprto preko GitHub Action (avtomatizirano in vedno posodobljeno) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](./README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Raje klonirati lokalno?** - -> 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: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Tako prejmete vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> 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. -**Č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)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Odpri v Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _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! ![Background](../../translated_images/sl/background.148a8d43afde5730.webp) - Lekcije pokrivajo vse od osnov do RAG. -- Interakcija z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo. -- Zabavno in privlačno pripovedovanje, potovanje skozi čas! +- Interaktivno sodelovanje z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo. +- Zabavna in vključujoča pripoved, potovali boste skozi čas! ![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp) -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. -2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Razvezi repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani. +2. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Zagon učnega načrta v Codespace -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. ![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp) -#### 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 `` 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 `` z URL-jem, ki ste ga pravkar kopirali: ```bash git clone ``` -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 | +| 04 | Osnove JS | JavaScript podatkovni tipi | Osnove podatkovnih tipov JavaScript | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher | +| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v 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: ### LangChain -[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j za začetnike](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js za začetnike](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain za začetnike](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents -[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +### Azure / Edge / MCP / Agenti +[![AZD za začetnike](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI za začetnike](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP za začetnike](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agenti za začetnike](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Serija generativne umetne inteligence -[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +[![Generativna umetna inteligenca za začetnike](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generativna AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generativna AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generativna AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- -### Osnove učenja -[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +### Osnovno učenje +[![Strojno učenje za začetnike](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Podatkovna znanost za začetnike](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![Umetna inteligenca za začetnike](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Kibernetska varnost za začetnike](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Spletni razvoj za začetnike](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT za začetnike](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR razvoj za začetnike](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Serija Copilot -[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot za AI parno programiranje](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot za C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Pustolovščina Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Pomoč +## Pridobivanje pomoči -Č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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Če imate povratne informacije o izdelku ali napake med razvojem, obiščite: +Če imate povratne informacije o izdelku ali napake pri razvoju, obiščite: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licenca -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). --- -**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. \ No newline at end of file diff --git a/translations/sr/.co-op-translator.json b/translations/sr/.co-op-translator.json index 45eb0b57a..fd9622b62 100644 --- a/translations/sr/.co-op-translator.json +++ b/translations/sr/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T08:30:02+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T15:00:07+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "sr" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:33:54+00:00", + "translation_date": "2026-03-06T15:13:43+00:00", "source_file": "AGENTS.md", "language_code": "sr" }, @@ -516,8 +516,8 @@ "language_code": "sr" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:29:19+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T14:55:56+00:00", "source_file": "README.md", "language_code": "sr" }, diff --git a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 09b2c859a..cb612d6cf 100644 --- a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,101 +1,101 @@ # Увод у програмске језике и савремене алате за програмере -Здраво, будући програмеру! 👋 Могу ли ти рећи нешто што ме и данас сваког дана потресе? Ускоро ћеш открити да програмирање није само око рачунара – то су истинске суперсиле које ти омогућавају да оживиш своје најлуђе идеје! +Здраво, будући програмеру! 👋 Да ли могу да ти кажем нешто што ме и даље сваког дана покреће узбуђење? Ускоро ћеш открити да програмирање није само око рачунара – то је као да имаш супермоћи да оживиш своје најлудље идеје! -Знаш онај тренутак када користиш своју омиљену апликацију и све једноставно савршено функционише? Када тапнеш на дугме и догоди се нешто магично што те натера да кажеш „вау, како су то урадили?“ Па, тај неко баш као ти – вероватно седи у свом омиљеном кафићу у 2 ујутру са трећом еспресо кафом – је написао код који је створио ту магију. И ево шта ће ти одузети дах: на крају овог часа нећеш само разумети како су то урадили, већ ће те копкати да и сам пробаш! +Знаш онај тренутак када користиш своју омиљену апликацију и све се савршено поклопи? Када тапнеш на дугме и нешто потпуно магично се догоди и помислиш „вау, како су то УРАДИЛИ?“ Па, неко баш као ти – вероватно седи у свом омиљеном кафићу у 2 ујутру са својим трећим еспресом – написао је код који је створио ту магију. И ево шта ће ти одузети дах: до краја овог часа нећеш само разумети како су то урадили, већ ћеш једва чекати да и сам пробаш! -Види, сасвим је у реду ако ти програмирање сада делује застрашујуће. Када сам ја почео, стварно сам мислио да мораш бити неки математички геније или да програмираш од пет година. Али ево шта ми је потпуно променило начин размишљања: програмирање је управо као учење да водиш разговор на новом језику. Почнеш са „здраво“ и „хвала“, па онда наручујеш кафу и пре него што приметиш, водиш дубоке филозофске разговоре! Само што су у овом случају ти разговори са рачунарима, а искрено? Они су најстрпљивији саговорници – никада не осуђују твоје грешке и увек су спремни да покушају поново! +Гледај, потпуно разумем ако ти програмирање делује застрашујуће сад. Када сам ја почео, искрено сам мислио да мораш бити неки математички геније или да програмериш од пете године. Али ево шта ми је потпуно променило гледиште: програмирање је баш као учење како да водиш разговоре на новом језику. Почнеш са „здраво“ и „хвала“, па се даље научиш да поручи кафу, и пре него што приметиш, водиш дубоке филозофске разговоре! Али у овом случају, разговараш са рачунарима, и искрено? Они су најстрпљивији саговорници које ћеш икада имати – никада не осуђују твоје грешке и увек су спремни да покушају поново! -Данас ћемо истражити невероватне алате који савремени веб развој чине не само могућим, већ и озбиљно заразним. Причам о управо тим иста којима програмирају у Netflix, Spotify и твојој омиљеној инди апликационој студији сваки дан. И ево дела који ће те натерати да заиграш од радости: већина ових професионалних, индустријских алата је у потпуности бесплатна! +Данас ћемо истражити невероватне алате који чине савремени веб развој не само могућим, већ и озбиљно заразним. Причам о једнаким онлајн уредницима, прегледачима и радним токовима које сваки дан користе програмери у Netflix-у, Spotify-у и твом омиљеном чудесном студију за апликације. А ево дела који ће те натерати на радосни плес: већина ових професионалних, индустријских алата је потпуно бесплатна! ![Intro Programming](../../../../translated_images/sr/webdev101-programming.d6e3f98e61ac4bff.webp) -> Скечнот од [Tomomi Imura](https://twitter.com/girlie_mac) +> Скетчнот од [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Ваш данашњи пут програмирања - section Откријте + title Ваш пут програмирања данас + section Откривање Шта је програмирање: 5: You - Програмијски језици: 4: You + Језици програмирања: 4: You Преглед алата: 5: You - section Истражите - Уређивачи кода: 4: You - Прегледачи и ДевТулс: 5: You + section Истраживање + Уредници кода: 4: You + Прегледачи и алати за развој: 5: You Командна линија: 3: You - section Вежбајте - Језички детектив: 4: You + section Вежба + Детектив језика: 4: You Истраживање алата: 5: You - Повезивање заједнице: 5: You + Повезивање са заједницом: 5: You ``` ## Видимо шта већ знаш! -Пре него што заронимо у забавне ствари, занимљиво ми је – шта ти већ знаш о овом свету програмирања? И слушај, ако гледаш ова питања и мислиш „апсолутно немам појма о овоме“, то није само у реду, то је савршено! То значи да си баш на правом месту. Замисли овај квиз као загревање пре тренинга – само полако загревамо те мишиће мозга! +Пре него што се упустимо у забавне ствари, радознао сам – шта већ знаш о овом свету програмирања? И слушај, ако гледаш ова питања и помишљаш „немам баш појма о овоме што пише“, то није само ок, то је савршено! То значи да си на баш правом месту. Замисли овај тест као истезање пре вежбања – ми само загревамо оне мишиће мозга! -[Преузми квиз пре часа](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Уради предчасовни квиз](https://ff-quizzes.netlify.app/web/) -## Авантура која нам предстоји заједно +## Авантура на коју крећемо заједно -У реду, стварно сам узбуђен због онога што ћемо данас истражити! Искрено, волео бих да видим твоје лице када ти неки од ових концепата кликну. Ово је невероватно путовање у које крећемо: +Океј, ја стварно крећем од скакања од узбуђења због онога што ћемо данас истраживати! Заиста, волео бих да видим твоје лице када ти неки од ових појмова буду кликнули. Ево невероватног путовања на које крећемо заједно: -- **Шта је програмирање у ствари (и зашто је најцјењенија ствар икада!)** – Открићемо како је код буквално невидљива магија која покреће све око тебе, од аларма који зна када је понедељак ујутру до алгоритма који савршено бира Netflix препоруке -- **Програмски језици и њихове невероватне личности** – Замисли да уђеш на журку где свака особа има сасвим различите суперсиле и начине решавања проблема. Тако изгледа свет програмских језика, и обожаваћеш да их упознаш! -- **Основни грађевински блокови који стварају дигиталну магију** – Замисли их као најбољи креативни LEGO сет. Када схватиш како се ови делови међусобно уклапају, схватићеш да можеш буквално направити било шта што ти маштања пожеле -- **Професионални алати који ће ти дати осећај као да си управо добио чаробни штапић** – Нисам драматичан – ови алати ће ти стварно дати осећај као да имаш суперсиле, а најбоље од свега? То су исти алати које користе професионалци! +- **Шта је заправо програмирање (и зашто је најфантомскија ствар икада!)** – Открићемо како је код буквално невидљива магија која покреће све око тебе, од тог аларма који некако зна да је понедељак ујутро до алгоритма који савршено креира твоје Netflix препоруке +- **Програмски језици и њихове невероватне личности** – Замисли да уђеш на журку где свака особа има сасвим различите супермоћи и начине решавања проблема. Е тако изгледа свет програмских језика, и волећеш да их упознаш! +- **Основне градивне јединице које чине дигиталну магију** – Замисли ово као ултимативни креативни LEGO сет. Када разумеш како се ови делићи спајају, схватићеш да буквално можеш да направиш било шта што твоја машта сања +- **Професионални алати који ће те натерати да се осећаш као да си управо добио чаробни штапић** – Нисам драматичан овде – ови алати ће те заиста учинити да се осећаш као да имаш супермоћи, а најбоље од свега? То су исти они које користе професионалци! -> 💡 **Ево шта је важно**: Немој ни да помислиш да треба све да меморишеш данас! Сада желим само да осетиш ту искру узбуђења о томе шта је могуће. Детаљи ће се природно учврстити док заједно вежбамо – тако се прави учење дешава! +> 💡 **Ево шта:** Немој ни да помислиш да сада покушаш све да запамтиш! Тренутно желим само да осетиш искру узбуђења о томе шта је могуће. Детаљи ће се природно усадити док вежбамо заједно – тако се заиста учи! -> Ову лекцију можеш похађати на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Можеш овај час проћи на [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Па шта тачно *је* програмирање? +## Па шта је у ствари *програмирање*? -У реду, хајде да се позабавимо питањем од милион долара: шта је програмирање у ствари? +У реду, хајде да решимо питање од милион долара: шта је заправо програмирање? -Причаћу ти причу која ми је потпуно променилa начин размишљања о овоме. Прошле недеље сам покушавао да објасним мами како да користи наш нови даљински управљач за паметни ТВ. Зауставио сам се да кажем нешто као „Притисни црвено дугме, али не оно велико црвено, мало црвено са леве стране... не, други твој леви... ок, сада држи две секунде, не једну, не три...“ Звучи познато? 😅 +Причаћу ти причу која је потпуно променила мој поглед на ову тему. Прошле недеље сам покушавао да објасним мајци како да користи наш нови даљински за паметни телевизор. Примијетио сам да кажем ствари као „Притисни црвено дугме, али не оно велико црвено, малено црвено са леве стране... не, други твој леви... ок, сад га држи две секунде, не једну, не три...“ Звуче познато? 😅 -То је програмирање! То је уметност давања невероватно детаљних, корак по корак упутстава нечему што је изузетно моћно али му треба све садржано објашњење. Само што уместо да објашњаваш мами (која може питати „које црвено дугме?!“), ти објашњаваш рачунару (који једноставно ради баш оно што кажеш, чак и ако оно што си рекао није баш оно што си мислио). +То је програмирање! То је уметност давање невероватно детаљних, корак по корак упутстава нечему што је моћно али мора да се све савршено подеси. Само што уместо да објашњаваш мајци (која би могла да пита „које црвено дугме?!“), ти објашњаваш рачунару (који уради баш оно што му кажеш, чак и ако то што си рекао није баш оно што си мислио). -Ево шта ми је одузело дах када сам први пут научио: рачунари су заправо прилично једноставни у својој сржи. Они буквално разумеју само две ствари – 1 и 0, што је у основи „да“ и „не“ или „укључено“ и „искључено.“ То је све! Али ево где постаје магично – не морамо да причамо у 1-ицама и 0-ицама као у Матриксу. Ту наступају **програмски језици**. Они су као најбољи преводилац на свету који узима твоје потпуно нормалне људске мисли и претвара их у језик који рачунар разуме. +Ево шта ми је одузело дах кад сам први пут то научио: рачунари су у основи прилично једноставни. Они буквално разумеју само две ствари – 1 и 0, што је у основи „да“ и „не“ или „укључено“ и „искључено“. То је то! Али ево где постаје магично – не морамо да причамо у 1 и 0 као у Матриксу. Тиме се баве **програмски језици**. Они су као да имаш најбољег преводиоца на свету који узима твоје савршено нормалне људске мисли и претвара их у рачунарски језик. -И ево шта ме и даље свако јутро стварно потресе када се пробудим: буквално *све* дигитално у твом животу почело је са неким баш као ти, вероватно у пиџами са шољом кафе, куцајући код на лаптопу. Та Instagram филтер који ти даје савршен изглед? Неки програмер је направио тај код. Препорука која те довела до твоје нове омиљене песме? Програмер је направио тај алгоритам. Апликација која ти помаже да поделиш рачун за вечеру са пријатељима? Да, неко је помислио „ово је досадно, могао бих да поправим ово“ и онда... јесте! +И ево шта ми сваки јутар даје праву језу кад се пробудим: буквално *све* дигитално у твом животу почело је са неким као ти, вероватно у пижами са шољом кафе, како куца код на лаптопу. Та Instagram филтер који те чини беспрекорним? Неки програмер је то написао. Препорука која те одвела до твоје нове омиљене песме? Програмер је направио тај алгоритам. Апликација која ти помаже да поделиш рачун за вечеру са пријатељима? Ја, неко је помислио „ово је досадно, могао бих то да поправим“ и онда... урадио је! -Када научиш да програмираш, ти не учиш само нову вештину – постајеш део ове невероватне заједнице решавача проблема који проводе своје дане размишљајући: „Шта ако бих могао да направим нешто што неког учини дан бољим?“ Искрено, има ли ичег кул од тога? +Када научиш да програмираш, не добијаш само нову вештину – постајеш део ове невероватне заједнице решавача проблема који проводе дане размишљајући, „Шта ако бих могао да направим нешто што некоме уљепша дан макар мало?“ Искрено, има ли нешто кул од тога? -✅ **Забавна чињеница**: Ево нешто супер кул што можеш да потражиш када будеш имао слободног момента – ко мислиш да је први светски програмер? Даћу ти трачак: можда није онај кога очекујеш! Прича о овој особи је апсолутно фасцинантна и показује да програмирање је оduвек било о креативном решавању проблема и размишљању изван оквира. +✅ **Занимљива чињеница за трагање**: Ево нешто супер кул што можеш да потражиш кад будеш имао слободан тренутак – ко мислиш да је био први програмер на свету? Дајем ти наговештај: можда није онако како очекујеш! Прича о овој особи је заиста фасцинантна и показује да програмирање увек значи креативно решавање проблема и размишљање изван оквира. -### 🧠 **Време за проверу: Како се осећаш?** +### 🧠 **Временско освежење: Како се осећаш?** -**Одвој мало тренутак да размислиш:** -- Да ли ти сада има смисла идеја „давања упутстава рачунарима“? -- Можеш ли да се сетиш неког свакодневног задатка који би желео да аутоматизујеш помоћу програмирања? -- Која питања ти сада лебде по глави о овом целом свету програмирања? +**Погледај на ово:** +- Да ли сада разумеш идеју „давања упутстава рачунарима“? +- Можеш ли да смислиш дневни задатак који би волео да аутоматизујеш програмирањем? +- Која питања ти се врзе у глави о овом целом програмирању? -> **Запамти**: Потпуно је нормално ако ти неки концепти сада делују мутно. Учење програмирања је као учење новог језика – треба времена да мозак створи те неуралне везе. Сјајно радиш! +> **Запамти:** Потпуно је нормално ако ти неки појмови сада изгледају замућено. Учење програмирања је као учење новог језика – треба време да мозак направи те неуронске везе. Сјајно радиш! ## Програмски језици су као различити укуси магије -У реду, ово ће вероватно звучати чудно, али остани са мном – програмски језици су баш као различите врсте музике. Размишљај о томе: имаш џез који је смирен и импровизацијски, рок који је моћан и једноставан, класичну музику која је елегантна и структурисана, и хип-хоп који је креативан и изражајан. Сваки стил има свој угођај, своју заједницу страствених фанова, и сваки је савршен за различита расположења и прилике. +У реду, ово ће звучати чудно, али остани са мном – програмски језици су као различити музички жанрови. Замисли: имаш џез, који је глатак и импровизаторски, рок који је моћан и директан, класичну музику која је елегантна и структурирана, и хип-хоп који је креативан и изражајан. Свакој стил има свој дух, своју заједницу страствених фанова, и сваки је савршен за различите расположења и прилике. -Програмски језици раде управо тако! Не би користио исти језик да направиш забавну мобилну игру као за обраду огромне количине климатских података, баш као што не би пуштао дет метал на час јоге (па, већина часова јоге у сваком случају! 😄). +Програмски језици раде на исти начин! Не би користио исти језик за прављење забавне мобилне игре којим би обрађивао огромну количину климатских података, баш као што не би пуштао дет метaл на јога часу (па, на већини јога часова! 😄). -Али ево шта ми је сваки пут кад размислим о томе апсолутно невероватно: ти језици су као најстрпљивији, најпаметнији преводилац на свету који седи баш поред тебе. Можеш да изразиш своје идеје на начин који је природан твом људском мозгу, а они све невероватно компликоване ствари преводе у 1-ице и 0-ице које рачунари стварно разумеју. Као да имаш друга који савршено течно говори и „људску креативност“ и „рачунарску логику“ – и никада не умара се, никада не треба паузу за кафу и никада те не суди ако питаш исто питање два пута! +А ево шта ми сваки пут одузима дах: ови језици су као да имаш најстрпљивијег, најпаметнијег тумача света који седи поред тебе. Можеш да изразиш своје идеје на начин који је природан твом мозгу, а они се баве својом невероватно сложеном преводилачком работом у 1 и 0 које рачунари заиста разумеју. Као да имаш пријатеља који је савршено течан у оба „људска креативност“ и „рачунарска логика“ – и никада не умарају, никада не узимају паузе за кафу и никада те не осуђују ако поставиш исто питање два пута! -### Популарни програмски језици и њихова употреба +### Популарни програмски језици и њихове примене ```mermaid mindmap root((Програмски Језици)) Web Development JavaScript - Frontend Магија - Интерактивни Сајтови + Чаролија на Фронтенду + Интерактивни Вебсајтови TypeScript JavaScript + Типови - Привредне Апликације + Предузетничке Апликације Data & AI Python - Наука о подацима - Машинско учење + Наука о Подацима + Машинско Учење Аутоматизација R Статистика @@ -103,76 +103,76 @@ mindmap Mobile Apps Java Андроид - Привреда + Предузеће Swift иОС - Apple Екосистем + Аппле Еко-систем Kotlin Модерни Андроид - Крос-платформа + Вишеплатформено Systems & Performance C++ Игре - Критично за перформансе + Критично за Перформансе Rust - Безбедност меморије - Системско програмирање + Безбедност Меморије + Системско Програмирање Go - Cloud Сервиси + Облачне Услуге Скалирајући Бекенд ``` -| Језик | Најбоље за | Зашто је популаран | +| Језик | Најбољи за | Зашто је популаран | |----------|----------|------------------| -| **JavaScript** | Веб развој, кориснички интерфејси | Ради у прегледачима и покреће интерактивне сајтове | -| **Python** | Наука о подацима, аутоматизација, вештачка интелигенција | Једноставан за читање и учење, моћне библиотеке | -| **Java** | Пословне апликације, Андроид апликације | Платформски независан, поуздан за велике системе | -| **C#** | Виндовс апликације, развој игара | Јака подршка Microsoft екосистема | -| **Go** | Облачно рачунање, бекенд системи | Брз, једноставан, дизајниран за савремено рачунање | +| **JavaScript** | Веб развој, кориснички интерфејси | Ради у прегледачима и покреће интерактивне веб сајтове | +| **Python** | Наука о подацима, аутоматизација, вештачка интелигенција | Лако читање и учење, моћне библиотеке | +| **Java** | Пословне апликације, Android апликације | Независност од платформе, робустан за велике системе | +| **C#** | Windows апликације, развој игара | Јак подршка Microsoft екосистема | +| **Go** | Cloud сервиси, backend системи | Брз, једноставан, дизајниран за модерно рачунарство | -### Језици високог нивоа у односу на језике ниског нивоа +### Језици високог и ниског нивоа -У реду, ово је искрено био концепт који ми је поломио мозак када сам први пут почео да учим, па ћу поделити поређење које ми је коначно све учинило јасним – и заиста се надам да ће помоћи и теби! +Океј, ово је искрено био појам који ми је сломио мозак када сам почео да учим, па ћу поделити аналогју која ми је коначно све разјаснила – и баш се надам да ће помоћи и теби! -Замисли да си у земљи у којој не говориш језик, а жустро ти треба најближи тоалет (сви смо ту били, зар не? 😅): +Замисли да посећујеш државу чији језик не говориш, и очајнички ти треба најближи тоалет (сви смо то прошли, зар не? 😅): -- **Програмирање ниског нивоа** је као да тако добро научиш локални дијалекат да можеш да ћаскаш са бабом која продаје воће на углу користећи културолошке референце, локални сленг и унутрашње шале које разуме само неко ко је одрастао тамо. Супер импресивно и невероватно ефикасно... ако случајно течно говориш! Али прилично претерано када само покушаваш да пронађеш тоалет. +- **Програмирање ниског нивоа** је као да тако добро научиш локални дијалекат да можеш да ћаскаш са баком која продаје воће на углу користећи културне референце, локални сленг и унутрашње шале које разуме само онај који је одрастао тамо. Супер импресивно и невероватно ефикасно... ако случајно говориш тај језик као матерњи! Али прилично збуњујуће када само покушаваш да нађеш тоалет. -- **Програмирање високог нивоа** је као да имаш тог невероватног локалног друга који те заиста разуме. Можеш да кажеш „Употреба ми стварно треба да нађем тоалет“ обичним енглеским, а он обави сав културолошки превод и даје ти упутства на начин који савршено има смисла твом не-локалном мозгу. +- **Програмирање високог нивоа** је као да имаш тог невероватног локалног пријатеља који те само разуме. Можеш рећи „како да нађем тоалет?“ на обичном енглеском, а он ће све културне разлике превести и дати ти упутства на начин који твом неместном мозгу потпуно има смисла. -У терминологији програмирања: -- **Језици ниског нивоа** (као што су Assembly или C) ти омогућавају невероватно детаљне разговоре са стварним хардвером рачунара, али мораш да размишљаш као машина, што је... па, рећи ћемо да је то велики ментални пресек! -- **Језици високог нивоа** (као JavaScript, Python или C#) ти омогућавају да размишљаш као човек док они обављају сав говор машине иза кулиса. Плус, имају невероватно гостољубиве заједнице пуне људи који се сећају како је било бити нови и искрено желе да помогну! +У програмирању: +- **Језици ниског нивоа** (као Assembly или C) ти дозвољавају да имаш невероватно детаљне разговоре са самим хардвером рачунара, али онда мораш да мислиш као машина, што је... па, рећи ћу само да је велика ментална промена! +- **Језици високог нивоа** (као JavaScript, Python или C#) ти дозвољавају да мислиш као човек док они воде компликовани језик машине иза сцене. Плус, имају невероватно топле заједнице пунe људи који се сећају како је било бити почетник и заиста желе да помогну! -Погоди које ћу ја препоручити да почнеш да учиш? 😉 Језици високог нивоа су као тренинг точкови које никада нећеш хтети да скинеш јер цео процес чине много забавнијим! +Погађаш које ћу ти предложити да започнеш? 😉 Језици високог нивоа су као точкови за учење које никада заправо не желиш да скидаш јер чине целокупно искуство много пријатнијим! ```mermaid flowchart TB - A["👤 Људска мисао:
'Желим да израчунaм Фибоначијеве бројеве'"] --> B{Изаберите ниво језика} + A["👤 Човечја Мисао:
'Желим да израчунам Фибоначијеве бројеве'"] --> B{Изабери Ниво Језика} - B -->|Висок ниво| C["🌟 JavaScript/Python
Лако за читање и писање"] - B -->|Низак ниво| D["⚙️ Ассемблер/C
Директна контрола хардвера"] + B -->|Висок Ниво| C["🌟 JavaScript/Python
Лако за читање и писање"] + B -->|Низак Ниво| D["⚙️ Ассемблер/C
Директна контрола хардвера"] C --> E["📝 Пиши: fibonacci(10)"] D --> F["📝 Пиши: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Разумевање рачунара:
Преводилац решава сложеност"] + E --> G["🤖 Рачунарско Разумевање:
Транслатор решава сложеност"] F --> G - G --> H["💻 Исти резултат:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Исти Резултат:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Пустим те да видиш зашто су језици високог нивоа много пријатнији +### Показујем ти зашто су језици високог нивоа много пријатељскији -У реду, показаћу ти нешто што савршено илуструје зашто сам се заљубио у језике високог нивоа, али прво – мораш ми обећати нешто. Када будеш видео први пример кода, не паничи! Требало би да изгледа застрашујуће. И управо то је поента! +У реду, управо ћу ти показати нешто што савршено илуструје зашто сам се заљубио у језике високог нивоа, али прво – обећај ми нешто. Када видиш први пример кода, не паничи! Треба да изгледа застрашујуће. То је управо поента! -Погледаћемо исти задатак написан у два потпуно различита стила. Обојица праве тзв. Фибоначијев низ – то је прелепи математички низ где је сваки број збир претходна два: 0, 1, 1, 2, 3, 5, 8, 13... (Забавна чињеница: овај образац налазиш буквално свуда у природи – у спиралама семенки сунцокрета, у облицима шишарки, па чак и у формирању галаксија!) +Погледаћемо исти задатак написан на два сасвим различита начина. Обоје креирају такозвану Фибоначијеву низу – то је леп узорак из математике где је сваки број збир претходна два: 0, 1, 1, 2, 3, 5, 8, 13... (Занимљива чињеница: овај узорак можеш пронаћи буквално свуда у природи – спирале семенки сунцокрета, обрасце чепова бора, чак и начин на који се формирају галаксије!) -Спреман да видиш разлику? Хајде! +Спреман да видиш разлику? Кренимо! -**Језик високог нивоа (JavaScript) – пријатељски човеку:** +**Језик високог нивоа (JavaScript) – пријатељски за људе:** ```javascript // Корак 1: Основна поставка Фибоначија @@ -184,17 +184,17 @@ console.log('Fibonacci sequence:'); ``` **Ово код ради:** -- **Декларати** константу која одређује колико Фибоначијевих бројева желимо да генеришемо -- **Иницијализовати** две променљиве које прате тренутни и следећи број у низу -- **Поставити** почетне вредности (0 и 1) које дефинишу Фибоначијев образац -- **Приказати** наслов како бисмо означили наш излаз +- **Декларише** константу која одређује колико Фибоначијевих бројева желимо да генеришемо +- **Иницијализује** две променљиве које прате тренутни и следећи број у низи +- **Поставља** почетне вредности (0 и 1) које дефинишу Фибоначијев образац +- **Приказује** заглавни текст да означи наш резултат ```javascript -// Корак 2: Генеришите низ са петљом +// Корак 2: Генериши низ са петљом for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Израчунајте следећи број у низу + // Израчунај следећи број у низу const sum = current + next; current = next; next = sum; @@ -202,13 +202,13 @@ for (let i = 0; i < fibonacciCount; i++) { ``` **Објашњење шта се овде дешава:** -- **Прелазити** кроз сваки положај у низу помоћу `for` петље -- **Приказати** сваки број са његовом позицијом користећи форматирање шаблона -- **Израчунати** следећи Фибоначијев број сабирањем тренутних и следећих вредности -- **Ажурирати** наше променљиве за праћење да пређемо на следећу итеријацију +- **Пролази** кроз сваки положај у низу користећи `for` петљу +- **Приказује** сваки број са његовим положајем користећи шаблонски стринг +- **Израчунава** следећи Фибоначијев број сабирајући тренутне и следеће вредности +- **Ажурира** променљиве да пређе на следећу итерацију ```javascript -// Корак 3: Модеран функционални приступ +// Корак 3: Модерни функционални приступ const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -219,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Пример коришћења +// Пример употребе const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**У горњем примеру:** -- **Направио** сам поновљиву функцију користећи савремену стрелицу (`arrow`) синтаксу -- **Креирао** сам низ (array) да сачувам целу секвенцу, уместо да је приказујем један по један -- **Користио** сам индексирање низа да израчунам сваки нови број из претходних вредности -- **Вратио** сам целу секвенцу ради флексибилне употребе у другим деловима програма +**У горе наведеном смо:** +- **Направили** поново употребљиву функцију користећи модерну стрелицу функције +- **Креирали** низ да сачувамо комплетан низ уместо да га приказујемо број по број +- **Користили** индексирање низа за израчунавање сваког новог броја из претходних вредности +- **Вратили** комплетан низ за флексибилну употребу у другим деловима програма -**Језик ниског нивоа (ARM Assembly) – пријатељ рачунару:** +**Језик ниског нивоа (ARM Assembly) – пријатељски рачунарима:** ```assembly area ascen,code,readonly @@ -257,27 +257,28 @@ back add r0,r1 end ``` -Примети начин на који верзија у JavaScript-у чита као енглеска упутства, док верзија у Assembly користи мистериозне команде које директно контролишу процесор рачунара. Обе раде потпуно исти задатак, али језик високог нивоа је много лакши за људе да разумеју, пишу и одржавају. +Примети како JavaScript верзија изгледа скоро као упутство написано на енглеском, док верзија на асемблеру користи криптичне команде које директно управљају процесором рачунара. Обе обављају исти задатак, али језик високог нивоа је много лакши за разумевање, писање и одржавање од стране људи. **Кључне разлике које ћеш приметити:** -- **Читљивост**: JavaScript користи описна имена као `fibonacciCount` док Assembly користи тајанствене ознаке као `r0`, `r1` -- **Коментари**: Језици високог нивоа охрабрују објашњавајуће коментаре који чине код самодокументованим -- **Структура**: Логички ток ЈаваСкрипта одговара томе како људи размишљају о проблемима корак по корак -- **Одржавање**: Ажурирање ЈаваСкрипт верзије за различите захтеве је једноставно и јасно +- **Читљивост**: JavaScript користи описна имена као што је `fibonacciCount`, док Assembly користи шифроване ознаке као `r0`, `r1` +- **Коментари**: Језици вишег нивоа подстичу објашњавајуће коментаре који чине код самодокументованим +- **Структура**: Логички ток JavaScript-а одговара начину на који људи размишљају о проблемима корак по корак +- **Одржавање**: Ажурирање JavaScript верзије за различите захтеве је једноставно и јасно -✅ **О Фибоначијевом низу**: Овај апсолутно предиван бројчани образац (где је сваки број једнак збиру претходна два: 0, 1, 1, 2, 3, 5, 8...) појављује се буквално *свуда* у природи! Пронаћи ћете га у спиралама сунцокрета, пинећим шишкама, облику шкољки наутилиуса, па чак и у начину на који гране дрвећа расту. Веома је фасцинантно како математика и код могу помоћи да разумемо и пресликaмо обрасце које природа користи да створи лепоту! +✅ **О низу Фибоначија**: Овај апсолутно прелеп образац бројева (где је сваки број једнак збиру претходна два: 0, 1, 1, 2, 3, 5, 8...) појављује се буквално *свуда* у природи! Пронаћи ћете га у спиралама сунцокрета, обрасцима чешера, начину на који школке натилуса коврчају, па чак и у начину раста грана дрвећа. Заиста је фасцинантно како математика и код могу помоћи да разумемо и поново створимо обрасце које природа користи да створи лепоту! -## Грађевински блокови који стварају магију -У реду, сада када сте видели како изгледају језици програмирања у пракси, хајде да разложимо основне делове који чине буквално сваки програм икада написан. Замислите их као суштинске састојке ваше омиљене рецептуре – када разумете шта сваки ради, моћи ћете да читате и пишете код у готово сваком језику! +## Основни Камењарски Блокови Који Праве Магију -Ово је помало као учење граматике програмирања. Сећате се у школи када сте учили о именицама, глаголима и како се слажу реченице? Програмирање има своју верзију граматике, а искрено, она је много логичнија и попустљивија од граматике енглеског језика! 😄 +У реду, сада када сте видели како програмски језици изгледају у пракси, хајде да разложимо основне делове који сачињавају буквално сваки написани програм. Замислите их као суштинске састојке у вашем омиљеном рецепту – када једном разумете шта сваки ради, моћи ћете да читате и пишете код у готово било ком језику! -### Наредбе: Упутства корак по корак +Ово је нешто као учење граматике програмирања. Сећате се у школи када сте учили о именицама, глаголима и како слагати реченице? Програмирање има своју верзију граматике, и искрено, много је логичнија и опроштенија од енглеске граматике! 😄 -Хајде да почнемо са **наредбама** – оне су као појединачне реченице у разговору са вашим рачунаром. Свака наредба говори рачунару да уради једну одређену ствар, као да дајете упутства: "Скрените лево овде," "Стани на црвено светло," "Парк ин у то место." +### Наређења: Упутства Корак по Корак -Што највише волим код наредби је то колико су обично читљиве. Погледајте ово: +Хајде да почнемо са **наређењима** – они су као појединачне реченице у разговору са вашим рачунаром. Свако наређење говори рачунару да уради једну специфичну ствар, слично као када дајете упутства: "Скрените лево овде," "Стани на црвено светло," "Паркирaј се на то место." + +Оно што волим код наређења је колико су обично читљива. Погледајте ово: ```javascript // Основне изјаве које извршавају појединачне радње @@ -285,31 +286,31 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Ево шта овај код ради:** -- **Декларише** константну променљиву за чување корисничког имена -- **Приказује** поздравну поруку на конзоли -- **Израчунава** и чува резултат математичке операције + +**Ево шта овај код ради:** +- **Декларише** константну променљиву за чување имена корисника +- **Приказује** поруку за поздрав на конзолном излазу +- **Израчунава** и чува резултат математичке операције ```javascript -// Изјаве које комуницирају са веб страницама +// Изјаве које интерагују са веб страницама document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Корак по корак, ево шта се дешава:** -- **Модификује** наслов странице који се појављује у картици прегледача -- **Промењује** боју позадине целог тела странице -### Променљиве: Систем меморије вашег програма +**Корак по корак, ево шта се дешава:** +- **Промењује** наслов веб-пајџа који се приказује у картици прегледача +- **Промењује** боју позадине целог тела странице + +### Променљиве: Систем Памћења Вашег Програма -У реду, **променљиве** су искрено један од мојих апсолутно омиљених концепата за предавање јер су веома сличне стварима које већ користите сваки дан! +У реду, **променљиве** су искрено један од мојих апсолутно омиљених концепата за предавање јер су сасвим сличне стварима које већ користите сваки дан! -Размислите о листи контаката на вашем телефону. Не памтите бројеве свих људи – уместо тога сачувате „Мама“, „Најбољи пријатељ“ или „Пицерија која доставља до 2 ујутро“ и пустите телефон да се сети стварних бројева. Променљиве функционишу баш тако! Оне су као означене посуде у које ваш програм може да смешта податке и касније их вади помоћу имена које има смисла. +Размислите о листи контаката на вашем телефону. Не памтите бројеве телефона свих људи – уместо тога чувате "Мама," "Најбољи пријатељ" или "Пицерија која дистрибуира до 2 ујутро" и телефон памти стварне бројеве. Променљиве раде на исти начин! Оне су као означени контејнери у којима ваш програм може чувати информације и касније их преузимати помоћу имена које заиста има смисла. -Ево шта је стварно кул: променљиве се могу мењати док ваш програм ради (отуда и назив "променљива" – схватате игру речи?). Баш као што можете ажурирати контакт пицерије када пронађете још боље место, променљиве се могу мењати како програм учи нове информације или како се ситуација мења! +Ево шта је стварно кул: промењиве се могу мењати како ваш програм ради (због чега се зову "променљиве" – видите шта су урадили?). Баш као што можете ажурирати контакт за пицерију када пронађете неку бољу, промењиве могу бити освежене док ваш програм сазнаје нове информације или се ситуације мењају! -Хајде да вам покажем колико ово може бити једноставно: +Показаћу вам колико ово може лепо и једноставно изгледати: ```javascript // Корак 1: Креирање основних променљивих @@ -318,12 +319,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Разумевање ових концепата:** -- **Чување** неизмењивих вредности у `const` променљивима (као име сајта) -- **Коришћење** `let` за вредности које се могу мењати током рада програма -- **Додељивање** различитих типова података: стрингови (текст), бројеви и булови (тачно/нетачно) -- **Избор** описних имена која објашњавају шта свака променљива садржи + +**Разумевање ових концепата:** +- **Чува** непроменљиве вредности у `const` променљивама (као назив сајта) +- **Користи** `let` за вредности које могу да се мењају током рада програма +- **Додељује** различите типове података: стрингове (текст), бројеве и булове (тачно/не) +- **Бира** описна имена која објашњавају шта свака променљива садржи ```javascript // Корак 2: Рад са објектима за груписање повезаних података @@ -333,11 +334,11 @@ const weatherData = { windSpeed: 12 }; ``` - -**У горњем примеру смо:** -- **Креирали** објекат да групишемо повезане информације о времену -- **Организовали** више података под једним именом променљиве -- **Користили** парове кључ-вредност да јасно означимо сваки део информације + +**Горњи код ради:** +- **Креира** објекат за груписање повезаних временских информација +- **Организује** више података под једним именом променљиве +- **Користи** парове кључ-вредност за јасно означавање сваког дела информација ```javascript // Корак 3: Коришћење и ажурирање променљивих @@ -348,33 +349,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**Размотримо сваки део:** -- **Приказује** информације користећи тзв. шаблонске литерале са `${}` синтаксом -- **Приступа** својствима објекта преко тачкасте нотације (`weatherData.windSpeed`) -- **Ажурира** променљиве декларисане са `let` да одражавају променљиве услове -- **Комбинује** више променљивих да би се креирале смислене поруке + +**Разумевање сваког дела:** +- **Приказује** информације користећи шаблоне са `${}` синтаксом +- **Приступа** својствима објекта помоћу нотације тачке (`weatherData.windSpeed`) +- **Ажурира** променљиве декларисане са `let` да прикажу променљиве услове +- **Комбинује** више променљивих да направи смислене поруке ```javascript -// Корак 4: Модерно деструктурирање за чистији код +// Корак 4: Модерно распакивање за чистији код const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**Шта треба да знате:** -- **Издваја** одређена својства из објеката помоћу деструктурирања -- **Креира** аутоматски нове променљиве са истим именима као кључеви у објекту -- **Поједностављује** код избегавањем понављања тачкасте нотације -### Контролни ток: Учите свој програм да размишља +**Шта треба да знате:** +- **Извлачи** одређена својства из објеката користећи деструктурирајућу доделу +- **Креира** нове променљиве аутоматски са истим именима као кључеви у објекту +- **Поједностављује** код избегавајући понављајућу нотацију тачке + +### Контролни Ток: Учимо Ваш Програм да Размишља -У реду, овде програмирање постаје апсолутно фасцинантно! **Контролни ток** је у основи учење вашег програма да доноси паметне одлуке, баш као што то ви радите сваки дан без размишљања. +У реду, овде програмирање постаје потпуно невероватно! **Контролни ток** је у ствари учење вашег програма како да доноси паметне одлуке, управо као што то ви радите сваки дан без икаквог размишљања. -Замислите ово: јутрос сте вероватно прошли кроз нешто као "Ако пада киша, узећу кишобран. Ако је хладно, обући ћу јакну. Ако касним, прескочићу доручак и узети кафу у пролазу." Ваш мозак природно прати ову if-then логику десетина пута дневно! +Замислите ово: јутрос сте вероватно пролазили кроз нешто као "Ако пада киша, узећу кишобран. Ако је хладно, обући ћу јакну. Ако касним, прескочићу доручак и купити кафић на путу." Ваш мозак природно прати ову if-then логику десетинама пута сваког дана! -Ово је оно што програме чини интелигентним и живим уместо да прате неки досадни, предвидљиви сценарио. Они могу да погледају ситуацију, процене шта се дешава и одговоре адекватно. То је као да програму дајете мозак који може да се прилагођава и доноси одлуке! +То је оно што програме чини интелигентним и живим уместо да само прате досадан, предвидив сценарио. Они заправо могу да посматрају ситуацију, процене шта се дешава и одговоре адекватно. Као да дајете програму мозак који се може прилагодити и правити изборе! -Желите видети како ово лепо функционише? Погледајте: +Желите да видите како ово лепо функционише? Пустите да вам покажем: ```javascript // Корак 1: Основна условна логика @@ -387,12 +388,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Овде овај код ради:** -- **Проверава** да ли корисникова старост испуњава услов за гласање -- **Извршава** различите блокове кода у зависности од резултата услова -- **Израчунава** и приказује колико још има до могућности гласања ако је испод 18 -- **Пружа** конкретне и корисне повратне информације за сваки сценарио + +**Ево шта овај код ради:** +- **Проверава** да ли је корисникова старост довољна за гласање +- **Извршава** различите блокове кода у зависности од резултата услова +- **Израчунава** и приказује колико дуго треба да чека да гласа ако је испод 18 година +- **Пружа** конкретне, корисне повратне информације за сваку ситуацију ```javascript // Корак 2: Више услова са логичким операторима @@ -407,23 +408,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Разлагање шта се овде дешава:** -- **Комбинује** више услова користећи `&&` (и) оператор -- **Прави** хијерархију услова коришћењем `else if` за више сценарија -- **Обрађује** све могуће случајеве са коначним `else` исказом -- **Пружа** јасне, конкретне повратне информације за сваку различиту ситуацију + +**Разлагање дешавања овде:** +- **Комбинује** више услова користећи `&&` (и) оператор +- **Креира** хијерархију услова користећи `else if` за различите сценарије +- **Обрађује** све могуће случајеве са коначним `else` изјавом +- **Пружа** јасан и користан повратни одговор за сваку различиту ситуацију ```javascript -// Корак 3: Кратак услов са тернарним оператором +// Корак 3: Кратки услов са тернарним оператором const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Што треба да запамтите:** -- **Користите** тернарни оператор (`? :`) за једноставне услове са две могућности -- **Пишите** прво услов, затим `?`, па резултат ако је услов тачан, па `:`, па резултат ако није -- **Примените** овај образац када треба доделити вредности на основу услова + +**Запамтите ово:** +- **Користите** тернарни оператор (`? :`) за једноставне услове са две опције +- **Пишете** услов прво, па `?`, затим резултат ако је тачно, па `:`, затим резултат ако је нетачно +- **Примена** овог обрасца када треба доделити вредности на основу услова ```javascript // Корак 4: Обрада више специфичних случајева @@ -445,56 +446,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Овај код постиже следеће:** -- **Упоређује** вредност променљиве са више специфичних случајева -- **Групише** сличне случајеве заједно (радни дани против викенда) -- **Извршава** одговарајући блок кода када се пронађе поклапање -- **Укључује** `default` случај за непредвиђене вредности -- **Користи** `break` изјаве да спречи наставак извршавања ка следећем случају -> 💡 **Аналогија из стварног света**: Размислите о контролном току као о најстрпљивијем GPS-у који вам даје упутства. Може рећи: "Ако је гужва на Главној улици, иди ауто-путем. Ако је ауто-пут блокиран због радова, пробај обилазницу." Програми користе управо ову врсту условне логике да интелигентно реагују на различите ситуације и увек пруже корисницима најбоље могуће искуство. +**Овај код постиже следеће:** +- **Упоређује** вредност променљиве са више одређених случајева +- **Групише** сличне случајеве заједно (радни дани против викенда) +- **Извршава** одговарајући блок кода када налази подударање +- **Укључује** `default` случај за руковање неочекиваним вредностима +- **Користи** `break` наредбе да спречи наставак кода у следећем случају -### 🎯 **Провера знања: Мастер основних блокова** +> 💡 **Аналогија из стварног живота**: Размислите о контролном току као о најстрпљивијем GPS-у на свету који вам даје упутства. Може рећи "Ако има гужве на Главној улици, узми ауто-пут уместо тога. Ако је ауто-пут блокиран због радова, пробај пут прелепим предеоm." Програми користе управо овакву врсту условне логике да паметно реагују на различите ситуације и увек пруже корисницима најбоље могуће искуство. -**Хајде да видимо како стојите са основама:** -- Можете ли објаснити разлику између променљиве и наредбе својим речима? -- Смислите сценарио из стварног живота где бисте користили if-then одлуку (као у примеру са гласањем) -- Која вас је ствар о логици програмирања највише изненадила? +### 🎯 **Провера Концепта: Мајсторство Основних Каменова** -**Брзи подстицај самопоуздања:** +**Хајде да видимо како стојите са основама:** +- Можете ли објаснити разлику између променљиве и наређења својим речима? +- Замислите ситуацију из стварног живота где бисте користили if-then одлуку (као наш пример гласања) +- Која вас је једна ствар о програмирању највише изненадила? + +**Брзо подизање самопоуздања:** ```mermaid flowchart LR - A["📝 Изјаве
(Налози)"] --> B["📦 Променљиве
(Складиште)"] --> C["🔀 Управљање током
(Одлуке)"] --> D["🎉 Радни програм!"] + A["📝 Изјаве
(Упутства)"] --> B["📦 Променљиве
(Складиште)"] --> C["🔀 Контрола тока
(Одлуке)"] --> D["🎉 Радни програм!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **Шта следи**: Ускоро ћемо заједно уживати у дубљем уласку у ове концепте док настављамо ову невероватну авантуру! За сада, само се усредсредите на узбуђење због свих невероватних могућности које вас чекају. Специфичне вештине и технике ће вам природно постати пријатне како будемо вежбали заједно – обећавам да ће ово бити далеко забавније него што можда очекујете! +``` +✅ **Шта следи**: Очекује нас сјајно искуство у дубље улажење у ове концепте док настављамо заједно ову невероватну авантуру! За сада се фокусирајте само на осећај узбуђења због свих невероватних могућности које вас очекују. Специфичне вештине и технике ће вам природно бити при руци како будемо вежбали заједно – обећавам да ће ово бити далеко забавније него што сте можда мислили! -## Алати заната +## Алати Заната -У реду, искрено сам толико узбуђен да се тешко сналазим! 🚀 Управо ћемо причати о невероватним алатима који ће вам дати осећај као да су вам управо додељене кључеве дигиталног свемирског брода. +У реду, ово је искрено оно што ме толико узбуђује да се једва суздржавам! 🚀 Управо ћемо причати о невероватним алатима који ће вас учинити да се осећате као да сте управо добили кључеве дигиталног свемирског брода. -Знате како кухар има савршено избалансиране ножеве који су као продужетак руку? Или како музичар има ону гитару која као да пева чим је додирне? Па, програмери имају своју верзију ових магичних алата, и ево шта ће вас апсолутно одушевити – већина њих је потпуно бесплатна! +Знате како кувар има савршено балансиране ножеве који му делују као продужетак руку? Или како музичар има ону гитару која као да пева оног тренутка када је додирне? Па, програмери имају своју верзију ових магичних алата, а ево шта ће вам потпуно одузети дах – већина њих је потпуно бесплатна! -Практично скачем од среће што вам могу поделити ове алате јер су потпуно револуционисали начин на који градимо софтвер. Причамо о AI асистентима за кодирање који могу помоћи да напишете свој код (зар се шалим?), о облачним оквирима у којима можете градити целе апликације буквално било где са Wi-Fi-јем и о алаткама за отклањање грешака толико супериорним да су као да имате рендген визију у програмима. +Практично скачем на столици док размишљам како ћу вам ово поделити, јер су у потпуности револуционисали начин на који правимо софтвер. Причамо о AI помоћницима за кодирање који вам могу помоћи да напишете ваш код (не шалим се!), о облачним окружењима у којима можете градити читаве апликације буквално са било ког места са Wi-Fi-јем, и о тако софистицираним алатима за дебаговање да делују као рендгенски вид за ваше програме. -И ево дела који ми још увек изазива трнце: ово нису „почетнички алати“ које ћете прерасти. Ово су иста она професионална средства која користе програмери у Google-у, Netflix-у и оним малим студијима апликација које волите баш у овом тренутку. Осетићете се као прави професионалац користећи их! +А сада део који ми и даље изазива узбуђење: ово нису „алати за почетнике“ које ћете прерасти. Ово су управо исте професионалне алате које програмери у Google-у, Netflix-у и тој независној студији апликација коју волите користе у овом тренутку. Осетићете се као прави професионалац када их користите! ```mermaid graph TD A["💡 Ваша Идеја"] --> B["⌨️ Уређивач Кода
(VS Code)"] - B --> C["🌐 ДевТулс Прегледача
(Тестирање и Отстрањивање Грешака)"] - C --> D["⚡ Командна Линија
(Аутоматизација и Алатке)"] - D --> E["📚 Документација
(Учење и Референце)"] - E --> F["🚀 Фантастична Веб Апликација!"] + B --> C["🌐 Прегледач ДевТулс
(Тестирање и Отклањање грешака)"] + C --> D["⚡ Командна Линија
(Аутоматизација и Алати)"] + D --> E["📚 Документација
(Учење и Референца)"] + E --> F["🚀 Невероватна Веб Апликација!"] - B -.-> G["🤖 Помоћник Вештачке Интелигенције
(GitHub Copilot)"] + B -.-> G["🤖 АИ Асистент
(GitHub Copilot)"] C -.-> H["📱 Тестирање Уређаја
(Респонзивни Дизајн)"] - D -.-> I["📦 Менaџери Пакета
(npm, yarn)"] + D -.-> I["📦 Менаџери Пакета
(npm, yarn)"] E -.-> J["👥 Заједница
(Stack Overflow)"] style A fill:#fff59d @@ -503,350 +504,353 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### Едитори кода и IDE-ови: Ваши нови дигитални најбољи пријатељи +``` +### Уређивачи кода и IDE-ови: Ваши Нови Дигитални Најбољи Пријатељи + +Хајде да причамо о уређивачима кода – они ће заиста постати ваша омиљена места за рад! Замислите их као вашу личну светињу програмирања где ћете проводити већину времена стварајући и усавршавајући ваше дигиталне креације. -Причајмо о едиторима кода – они ће заиста постати ваша нова омиљена места за боравак! Замислите их као ваше лично уточиште за кодирање у којем ћете проводити већину времена стварајући и усавршавајући своје дигиталне креације. +Али ево шта је права магија код модерних уређивача: они нису само сјајни уређивачи текста. Они су као најпаметнији и најподржавајући ментор за кодирање који седи поред вас 24/7. Ухвате ваше грешке пре него што их приметите, предлажу побољшања која вас чине генијем, помажу вам да разумете шта сваки део кода ради, а неки чак могу и предвидети шта ћете куцати и понудити да заврше ваше мисли! -Али ево шта је потпуно магично код модерних едитора: они нису само фини уређивачи текста. Они су као најбриљантнији, најпотпорнији ментор за кодирање који седи поред вас 24/7. Они хватају правописне грешке пре него што их уопште приметите, предлажу побољшања која вас чине генијем, помажу вам да разумете шта сваки део кода ради, а неки чак могу и предвидети шта ћете укуцати и понудити да заврше ваше мисли! +Сећам се када сам први пут открио аутоматско довршавање – буквално сам се осећао као да живим у будућности. Почнете да куцате нешто, а ваш уређивач каже: „Да ли си размишљао о овој функцији која ради баш оно што ти треба?“ Као да имате читаоца мисли као пријатеља за кодирање! -Сећам се када сам први пут открио аутоматски допуњавач – буквално сам се осећао као да живим у будућности. Почнете да куцате нешто, а едитор каже: „Хеј, да ли си мислио на ову функцију која ради баш оно што ти треба?“ Као да имате читаоца мисли као пријатеља за кодирање! +**Шта ове уређиваче чини невероватним?** -**Шта овај едитор чини тако невероватним?** +Модерни уређивачи кода нуде импресиван низ функција осмишљених да побољшају вашу продуктивност: -Модерни едитори кода нуде импресиван низ карактеристика дизајнираних да повећају вашу продуктивност: +| Функција | Шта ради | Зашто помаже | +|---------|--------------|--------------| +| **Истраживање синтаксе** | Боји различите делове вашег кода | Олакшава читање и проналажење грешака | +| **Аутоматско довршавање** | Предлаже код док куцате | Убрзава кодирање и смањује типографске грешке | +| **Алати за дебаговање** | Помажу у проналажењу и исправљању грешака | Штеди сате времена за решавање проблема | +| **Проширења** | Додају специјализоване функције | Прилагодите уређивач било којој технологији | +| **AI помоћници** | Предлажу код и објашњења | Убрзавају учење и продуктивност | -| Карактеристика | Шта ради | Зашто помаже | -|----------------|----------|--------------| -| **Хајлајтинг синтаксе** | Боји различите делове кода | Олакшава читање и уочавање грешака | -| **Аутоматско довршавање** | Предлаже код док куцате | Убрзава кодирање и смањује правописне грешке | -| **Алатке за отклањање грешака** | Помажу у проналажењу и исправљању грешака | Штеде сате времена при решавању проблема | -| **Проширења** | Додају специјализоване функције | Прилагодују едитор било којој технологији | -| **AI асистенти** | Предлажу код и објашњења | Убрзавају учење и продуктивност | +> 🎥 **Видео ресурс**: Желите да видите ове алате у акцији? Погледајте овај [Видео о алатима заната](https://youtube.com/watch?v=69WJeXGBdxg) за детаљан преглед. -> 🎥 **Видеоресурс**: Желите да видите ове алате у акцији? Погледајте овај [Tools of the Trade видео](https://youtube.com/watch?v=69WJeXGBdxg) за свеобухватан преглед. +#### Препоручени уређивачи за веб развој -#### Препоручени едитори за развој веба +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (бесплатан) +- Најпопуларнији међу веб програмерима +- Одличан екосистем проширења +- Уграђени терминал и Git интеграција +- **Морају имати проширења**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-помоћ за писање кода + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Сарадња у реалном времену + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Аутоматско форматирање кода + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Ухвата типографске грешке у коду -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Бесплатно) -- Најпопуларнији међу веб програмерима -- Одличан екосистем проширења -- Уграђени терминал и Git интеграција -- **Неопходна проширења**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI-подржани предлози кода - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – сарадња у реалном времену - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – аутоматско форматирање кода - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – откривање правописних грешака у коду +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (плаћен, бесплатан за студенте) +- Напредни алати за дебаговање и тестирање +- Интелигентно довршавање кода +- Уграђена контрола верзија -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Плаћено, бесплатно за студенте) -- Напредне алатке за дебаговање и тестирање -- Интелигентно допуњавање кода -- Уграђена контрола верзија +**Облачни IDE-ови** (различите цене) +- [GitHub Codespaces](https://github.com/features/codespaces) - Пун VS Code у вашем претраживачу +- [Replit](https://replit.com/) - Одлично за учење и делјење кода +- [StackBlitz](https://stackblitz.com/) - Инстант веб развој целокупног стека -**IDE-ови засновани на облаку** (различите цене) -- [GitHub Codespaces](https://github.com/features/codespaces) – Потпуни VS Code у вашем претраживачу -- [Replit](https://replit.com/) – Одличан за учење и дељење кода -- [StackBlitz](https://stackblitz.com/) – Инстантни full-stack веб развој +> 💡 **Савет за почетак**: Почните са Visual Studio Code – бесплатан је, широко коришћен у индустрији и има огромну заједницу која креира корисне туторијале и екстензије. -> 💡 **Савет за почетак**: Почните са Visual Studio Code – бесплатан је, широко коришћен у индустрији и има огромну заједницу која прави корисне туторијале и проширења. -### Веб претраживачи: Ваш тајни развојни лабораториј +### Веб Прегледачи: Ваша Тајна Лабораторија За Развој -У реду, спремите се да вам ум буде потпуно одушевљен! Знате како користите претраживаче да бисте скроловали друштвене мреже и гледали видео снимке? Испоставило се да су они сав овај пут крили невероватну тајну лабораторију за програмере, само чекајући да је откријете! +У реду, спремите се да вам се ум потпуно одузме! Знате како користите прегледаче за претраживање друштвених мрежа и гледање видео снимака? Испоставило се да су читаво време крили ову невероватну тајну лабораторију за програмере, само што чекају да је откријете! -Сваки пут када кликнете десним тастером миша на веб страницу и изаберете „Inspect Element“ (Инспекција елемента), отварате скривени свет алата за програмере који су искрено моћнији од неких скупих програма за које сам некад плаћао стотине долара. Као да сте открили да ваша обична кујна крије професионалну лабораторију кувара иза тајног панела! -Први пут када ми је неко показао девтулсе у прегледачу, провео сам око три сата само кликајући и вичући „ЧЕКАЈ, ОН МОЖЕ И ТО?!“ Можеш буквално да уређујеш било који сајт у реалном времену, видиш тачно колико брзо све се учитава, тестираш како твој сајт изгледа на различитим уређајима, па чак и да дебагујеш JavaScript као прави професионалац. Апсолутно је невероватно! +Сваки пут када кликнете десним тастером миша на веб страницу и одаберете „Inspect Element“ (Инспекција елемента), отварате скривени свет алата за програмере који су заправо моћнији од неког скупог софтвера за који сам ја раније плаћао стотине долара. Као да сте открили да ваша обична кухиња крије професионалну кухињску лабораторију иза тајног панела! +Први пут када ми је неко показао алате за развој у прегледачу, провео сам око три сата само кликајући по свему и говорећи „ЧЕКАЈ, МОЖЕ И ТО?!“ Можете буквално да уређујете било који веб сајт у реалном времену, видите колико све брзо учитава, тестирате како ваш сајт изгледа на различитим уређајима, и чак дебагујете JavaScript као потпуни професионалац. То је заиста невероватно! -**Ево зашто су прегледачи твоје тајно оружје:** +**Ево зашто су прегледачи ваша тајна суперсила:** -Када правиш веб сајт или веб апликацију, мораш да видиш како она изгледа и функционише у стварном свету. Прегледачи не само да приказују твој рад већ пружају детаљне повратне информације о перформансама, приступачности и потенцијалним проблемима. +Када креирате веб сајт или веб апликацију, потребно је да видите како она изгледа и функционише у стварном свету. Прегледачи не само да приказују ваш рад, већ пружају и детаљне повратне информације о перформансама, приступачности и потенцијалним проблемима. -#### Девелопер алати прегледача (DevTools) +#### Алати за развој у прегледачу (DevTools) -Модерни прегледачи укључују свеобухватне развојне пакете: +Модерни прегледачи укључују свеобухватне сетове алата за развој: | Категорија алата | Шта ради | Пример употребе | |------------------|----------|-----------------| -| **Преглед елемената** | Преглед и уређивање HTML/CSS у реалном времену | Прилагоди стил и види резултате одмах | -| **Конзола** | Приказ порука о грешкама и тестирање JavaScript-а | Дебаговање проблема и експериментисање са кодом | -| **Мрежни монитор** | Праћење учитавања ресурса | Оптимизација перформанси и времена учитавања | -| **Тестер приступачности** | Тестирање инклузивног дизајна | Осигурај да твој сајт ради за све кориснике | -| **Симулатор уређаја** | Преглед на различитим величинама екрана | Тестирање респонзивног дизајна без више уређаја | +| **Инспектор елемената** | Приказ и уређивање HTML/CSS у реалном времену | Подешавање стила да видите резултате одмах | +| **Конзола** | Приказивање порука о грешкама и тестирање JavaScript-а | Дебаговање проблема и експериментисање са кодом | +| **Мрежни монитор** | Прати како се ресурси учитавају | Оптимизација перформанси и времена учитавања | +| **Провера приступачности** | Тестирање инклузивног дизајна | Осигуравање да сајт ради за све кориснике | +| **Симулатор уређаја** | Преглед на различитим величинама екрана | Тестирање респонсивног дизајна без више уређаја | #### Препоручени прегледачи за развој -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ДевТулс индустријски стандард са обимном документацијом +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Индустријски стандард DevTools са обимном документацијом - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Одлични алати за CSS Grid и приступачност -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Изграђен на Chromium-у са Microsoft-овим ресурсима за развој +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Изграђен на Chromium-у са Microsoft ресурсима за програмере -> ⚠️ **Важно упозорење за тестирање**: Увек тестирај своје сајтове у више прегледача! Оно што савршено ради у Chrome-у можда изгледа другачије у Safari-ју или Firefox-у. Професионални програмери тестирају у свим главним прегледачима како би осигурали доследно корисничко искуство. +> ⚠️ **Важно савет за тестирање**: Увек тестирајте ваше веб странице у више прегледача! Оно што савршено ради у Chrome-у може изгледати другачије у Safari-ју или Firefox-у. Професионални програмери тестирају на свим главним прегледачима како би обезбедили доследно корисничко искуство. -### Командна линија: Твој пут ка супермоћима програмера +### Алати командне линије: Ваш пут ка суперсилама програмера -Хајде да будемо потпуно искрени око командне линије, јер желим да то чујеш од некога ко стварно разуме. Када сам је први пут видео – само тај страшни црни екран са трепћућим текстом – искрено сам помислио: „Не, апсолутно не! Ово изгледа као нешто из хакерског филма из осамдесетих, и ја дефинитивно нисам довољно паметан за ово!“ 😅 +Хајде да будемо потпуно искрени у вези командне линије, јер желим да то чујете од неког ко заиста разуме. Када сам је први пут видео – само онај страшни црни екран са трепћућим текстом – буквално сам помислио: „Не, никако! Ово изгледа као нешто из хакерског филма из 1980-их, и дефинитивно нисам довољно паметан за ово!“ 😅 -Али ево шта бих волео да ми је неко рекао тада, а сада и теби: командна линија није страшна – она је као директан разговор са твојим рачунаром. Замисли то као разлику између наручивања хране преко софистициране апликације са сликама и менијима (што је лепо и лако) и уласка у твој омиљени локални ресторан где кувар тачно зна шта волиш и може да припреми нешто савршено само ако му кажеш „изненади ме нечим феноменалним“. +Али ево шта ми је драго што ми тада нико није рекао, а ја вам сада говорим: командна линија није страшна – она је као разговор лице у лице са вашим рачунаром. Замислите то као разлику између наручивања хране преко неке лепо урађене апликације са сликама и менијима (што је лепо и једноставно) и уласка у ваш омиљени локални ресторан где кувар зна тачно шта волите и може спремити нешто сјајно само ако кажете „изненади ме нечем фантастичним“. -Командна линија је оно место где програмери осећају као прави чаробњаци. Укуцаш неколико наизглед магичних речи (у реду, то су само команде, али делују магично!), притиснеш ентер и БУМ – направио си целу структуру пројекта, инсталирао моћне алате из целог света, или распоредио своју апликацију на интернет за милионе људи да виде. Када једном пробаш ту моћ, искрено постаје зависност! +Командна линија је место где програмери осећају као прави чаробњаци. Укуцате неколико наизглед магичних речи (у реду, то су само команде, али делују магично!), притиснете ентер и БУМ – створили сте целокупну структуру пројекта, инсталирали моћне алате из целог света, или поставили вашу апликацију на интернет да је милиони људи виде. Када једном осетите ту моћ, искрено постаје прилично заразно! -**Зашто ће командна линија постати твој омиљени алат:** +**Зашто ће командна линија постати ваш омиљени алат:** -Док су графички интерфејси сјајни за многе задатке, командна линија сјаји у аутоматизацији, прецизности и брзини. Многи алати за развој раде првенствено преко командне линије, а учењем њиховог ефикасног коришћења значајно ћеш повећати продуктивност. +Док су графичка сучеља одлична за многе задатке, командна линија изузетно добро ради у аутоматизацији, прецизности и брзини. Много алата за развој ради углавном кроз командну линију, и учење како их ефикасно користити може драматично побољшати вашу продуктивност. ```bash -# Корак 1: Креирајте и уђите у директоријум пројекта +# Корак 1: Креирајте и приступите директоријуму пројекта mkdir my-awesome-website cd my-awesome-website ``` -**Ово ради овај код:** -- **Креира** нови директоријум под називом "my-awesome-website" за твој пројекат -- **Улази** у новокреирани директоријум да почнеш рад +**Ево шта овај код ради:** +- **Креира** нови директоријум под именом "my-awesome-website" за ваш пројекат +- **Улази** у тај новокреирани директоријум да почне рад ```bash # Корак 2: Иницијализујте пројекат са package.json npm init -y -# Инсталирајте модерне развојне алате +# Инсталирајте модерне алате за развој npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Корак по корак, ево шта се дешава:** -- **Иницијализује** нови Node.js пројекат са подразумеваним подешавањима помоћу `npm init -y` -- **Инсталира** Vite као модерни алат за брзу израду и продукцијске билдове -- **Додаје** Prettier за аутоматско форматирање кода и ESLint за проверу квалитета кода -- **Користи** флаг `--save-dev` да означи да су ове зависности само за развој +- **Иницијализује** нови Node.js пројекат са подразумеваним подешавањима користећи `npm init -y` +- **Инсталира** Vite као модеран алат за израду пројеката ради брзог развоја и продуктивних билдова +- **Додаје** Prettier за аутоматску форматираност кода и ESLint за проверу квалитета кода +- **Користи** `--save-dev` заставицу да их означи као зависности које су само за развој ```bash -# Корак 3: Креирај структуру пројекта и фајлове +# Корак 3: Креирајте структуру пројекта и фајлове mkdir src assets echo 'My Site

Hello World

' > index.html -# Покрени сервер за развој +# Покрените сервер за развој npx vite ``` **Горе смо:** -- **Организовали** пројекат креирањем одвојених фасцикли за изворни код и ресурсе +- **Организовали** пројекат креирањем посебних фасцикли за изворни код и ресурсе - **Генерисали** основни HTML фајл са исправном структуром документа -- **Покренули** Vite дев сервер за live reload и hot module replacement +- **Покренули** Vite развојни сервер за живо рефрешовање и замену модула у ходу #### Основни алати командне линије за веб развој | Алат | Намена | Зашто ти треба | -|-------|---------|-----------------| +|------|--------|----------------| | **[Git](https://git-scm.com/)** | Контрола верзија | Праћење промена, сарадња са другима, резервне копије | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime и управљање пакетима | Покрени JavaScript ван прегледача, инсталирај модерне алате за развој | -| **[Vite](https://vitejs.dev/)** | Алат за билд и дев сервер | Блиц развој са hot module replacement-ом | -| **[ESLint](https://eslint.org/)** | Квалитет кода | Аутоматски нахватавање и исправљање проблема у JavaScript-у | -| **[Prettier](https://prettier.io/)** | Форматирање кода | Одржава код доследно форматираним и читким | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript извршни систем и управљање пакетима | Покретање JavaScript-а ван прегледача, инсталација модерних алата | +| **[Vite](https://vitejs.dev/)** | Алат за билд и развојни сервер | Вртоглаво брз развој са заменом модула у ходу | +| **[ESLint](https://eslint.org/)** | Квалитет кода | Аутоматско проналажење и исправка проблема у JavaScript-у | +| **[Prettier](https://prettier.io/)** | Форматирање кода | Одржавајте код доследно форматираним и читљивим | -#### Опције по платформи +#### Опције по платформама **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Модерни, богати терминал -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Моћно скриптно окружење +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Модеран, са богатим могућностима +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Моћно окружење за скриптове - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиционална Windows командна линија **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Уграђена апликација терминала -- **[iTerm2](https://iterm2.com/)** - Побољшани терминал са напредним функцијама +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Уграђена терминална апликација +- **[iTerm2](https://iterm2.com/)** - Напреднији терминал са додатним функцијама **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандардни Linux shell +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандардни Linux шкољка - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Напредни емулатор терминала -> 💻 = Прединсталиран на оперативном систему +> 💻 = Прединсталирано у оперативном систему -> 🎯 **Пут учења**: Почни са основним командама као што су `cd` (промена директоријума), `ls` или `dir` (листање фајлова), и `mkdir` (креирање фасцикле). Вежбај са модерним командама попут `npm install`, `git status`, и `code .` (отвара тренутни директоријум у VS Code-у). Са временом ћеш природно усавршити напредније команде и аутоматизацију. +> 🎯 **Пут учења**: Почни са основним командама као што су `cd` (промена директоријума), `ls` или `dir` (листање фајлова) и `mkdir` (креирање фасцикле). Вежбај са модерним командама као што су `npm install`, `git status` и `code .` (отвара тренутни директоријум у VS Code). Како будете постајали комфорнији, природно ћете усвојити напредније команде и технике аутоматизације. -### Документација: Твој увек доступни ментор за учење +### Документација: Ваш увек доступан ментор за учење -У реду, да поделим једну малу тајну која ће те осетно охрабрити као почетника: чак и најискуснији програмери велики део свог времена проводе читајући документацију. И то није зато што не знају шта раде – то је стварно знак мудрости! +Добро, да поделим једну малу тајну која ће вас учинити да се осећате много боље као почетник: чак и најискуснији програмери проводе огроман део свог времена читајући документацију. И није то зато што не знају шта раде – то је заправо знак мудрости! -Замисли документацију као приступ најстрпљивијим, најпаметнијим учитељима на свету који су доступни 24/7. Заглавио си у проблему у 2 ујутру? Документација пружа топли виртуелни загрљај и баш онај одговор који ти треба. Желиш да научиш о некој новој супер функцији о којој сви говоре? Документација је ту са примјерима корак по корак. Покушаваш да схватиш зашто нешто ради како ради? Погоди шта – документација ће ти то објаснити на начин који ће ти коначно бити јасан! +Замислите документацију као приступ најстрпљивијим и најпаметнијим учитељима на свету који су доступни 24/7. Зачепљени сте на неком проблему у 2 ујутро? Документација је ту са топлим виртуелним загрљајем и управо тачним одговором који вам треба. Желите да научите о некој усађеној новој функцији о којој сви говоре? Документација вас подржава са корак-по-корак примерима. Покушавате да разумете зашто нешто ради онако како ради? Погодили сте – документација је спремна да вам то објасни тако да коначно буде јасно! -Ево шта ми је потпуно променило став: свет веб развоја се непредстављиво брзо креће и нико (искрено, баш нико!) не памти све детаље напамет. Видео сам и старије програмере с 15+ година искуства како траже основну синтаксу, и знаш шта? То није срамота – то је паметно! Није важно имати савршену меморију; важно је знати где брзо пронаћи поуздане одговоре и разумети како их применити. +Ево нечега што ми је потпуно променило перспективу: свет веб развоја се креће невероватном брзином, и нико (мислим нико!) не памти све напамет. Гледао сам искусне програмере са преко 15 година искуства како проверавају основну синтаксу, и знате шта? То није срамота – то је паметно! Није ствар у савршеном памћењу, него у знању где брзо пронаћи поуздане одговоре и разумевању како их применити. -**Ту се дешава права магија:** +**Ево где се дешава права магија:** -Професионални програмери већи део свог времена проводе читајући документацију – не зато што не умеју, већ зато што веб развој тако брзо напредује да треба стално учити и остати у току. Одлична документација ти помаже не само да схватиш *како* нешто користити већ и *зашто* и *када*. +Професионални програмери значајан део свог времена проводе читајући документацију – не зато што не знају шта раде, него зато што веб развојне области тако брзо напредују да је стално учење неопходно. Одлична документација вам помаже да разумете не само *како* нешто користити, већ и *зашто* и *када*. -#### Основни извори документације +#### Основни ресурси документације **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Златни стандард за документацију веб технологија -- Свеобухватни приручници за HTML, CSS и JavaScript -- Укључује информације о компатибилности у прегледачима -- Поседује практичне примере и интерактивне демонстрације +- Златни стандард за документацију о веб технологијама +- Свеобухватни водичи за HTML, CSS и JavaScript +- Укључује информације о компатибилности прегледача +- Садржи практичне примерe и интерактивне демонстрације **[Web.dev](https://web.dev)** (од Google-а) - Најбоље праксе модерног веб развоја - Водичи за оптимизацију перформанси - Принципи приступачности и инклузивног дизајна -- Студије случаја из стварних пројеката +- Студије случајева из стварних пројеката **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ресурси за развој прегледача Edge -- Водичи за Progressive Web Apps -- Информације о крос-платформском развоју +- Ресурси за развој за Edge прегледач +- Водичи за прогресивне веб апликације +- Увид у крос-платформски развој **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структурирани програми учења -- Видео курсеви од стручњака из индустрије -- Практичне вежбе кодирања +- Структурирани курикулуми за учење +- Видео курсеви од индустријских стручњака +- Вежбе кодирања за праксу -> 📚 **Стратегија учења**: Немој да покушаваш да памтиш документацију – уместо тога научи како да се ефикасно крећеш кроз њу. Обележавај често коришћене странице и вежбај претрагу да брзо пронађеш конкретне информације. +> 📚 **Стратегија учења**: Не покушавајте да меморишете документацију – уместо тога научите како да се ефикасно крећете кроз њу. Обележавајте често коришћене референце и вежбајте коришћење претраге да брзо пронађете специфичне информације. -### 🔧 **Проверa знања алата: Шта ти се свиђа?** +### 🔧 **Провера знања алата: Шта вам највише одговара?** -**Одвојите тренутак да размислиш:** -- Који алат се највише радујеш да прво испробаш? (Нема погрешног одговора!) -- Да ли ти командна линија и даље делује застрашујуће или те интересује? -- Можеш ли да замислиш да користиш девтулсе у прегледачу да погледаш иза завесе твојих омиљених сајтова? +**Одвојите тренутак да размислите:** +- Који алат сте највише узбуђени да испробате први? (Нема погрешног одговора!) +- Да ли вам командна линија и даље делује застрашујуће или вас занима? +- Можете ли замислити да користите DevTools у прегледачу да погледате „иза завесе“ ваших омиљених сајтова? ```mermaid -pie title "Време које програмер проводи са алатима" - "Уређивач кода" : 40 +pie title "Време програмера проведено са алатима" + "Уредник кода" : 40 "Тестирање у прегледачу" : 25 "Командна линија" : 15 "Читање документације" : 15 - "Отхељивање грешака" : 5 + "Отлањење грешака" : 5 ``` -> **Забавна напомена**: Већина програмера проводи око 40% свог времена у едитору кода, али примети колико времена иде на тестирање, учење и решавање проблема. Програмирање није само писање кода – већ креирање искустава! +> **Занимљива чињеница**: Већина програмера проводи око 40% времена у свом едитору кода, али примети колико се времена троши на тестирање, учење и решавање проблема. Програмирање није само писање кода – то је креирање искустава! -✅ **Храна за размишљање**: Ево нешто занимљиво за разматрање – како мислиш да алати за прављење сајтова (развој) могу да се разликују од алата за дизајн како изгледају? Као разлика између архитекте који дизајнира прелепу кућу и извођача који ту кућу заправо гради. Обоје су кључни, али им требају различити алати! Овакво размишљање ће ти стварно помоћи да видиш ширу слику о томе како сајтови оживљавају. +✅ **За размишљање**: Ево нешто занимљиво за размишљање – како мислите да се алати за прављење веб сајтова (развој) разликују од алата за дизајн како да изгледају? То је као разлика између архитекте који дизајнира лепу кућу и извођача који је заправо гради. Обоје су важни, али им требају другачији алати! Овакав начин размишљања ће вам заиста помоћи да видите ширу слику како веб сајтови оживљавају. -## GitHub Copilot Agent изазов 🚀 +## Изазов GitHub Copilot Агенту 🚀 -Користи Agent режим да завршиш следећи изазов: +Користите режим Агента да завршите следећи изазов: -**Опис:** Истражи могућности модерног едитора кода или IDE и прикажи како може побољшати твој радни ток као веб програмера. +**Опис:** Истражите функције модерног кода едитора или IDE-а и покажите како могу побољшати ваш радни ток као веб програмера. -**Задатак:** Изабери едитор кода или IDE (нпр. Visual Studio Code, WebStorm, или cloud-based IDE). Наведи три функције или екстензије које ти помажу да ефикасније пишеш, дебагујеш или одржаваш код. За сваку кратко објасни како унапређује твој радни ток. +**Упутство:** Изаберите код едитор или IDE (нпр. Visual Studio Code, WebStorm или cloud-based IDE). Набројте три функције или додатка који вам помажу у писању, дебаговању или одржавању кода ефикасније. За сваки наведе кратко објашњење како унапређује ваш радни ток. --- ## 🚀 Изазов -**Дакле, детективе, спреман за свој први случај?** +**Добро, детективе, спреман за свој први случај?** -Сада када имаш ову сјајну основу, имам авантуру која ће ти помоћи да видиш колико је свет програмирања заправо невероватно разнолик и фасцинантан. И слушај – ово није о писању кода још, па нема притиска! Замисли себе као детектива програмских језика на свом првом узбудљивом задатку! +Сад кад имаш ову сјајну основу, имам авантуру која ће ти помоћи да видиш колико је свет програмирања невероватно разнолик и фасцинантан. И слушај – ово још није писање кода, тако да нема притиска! Замисли себе као детектива програмских језика на свом првом узбудљивом задатку! **Твоја мисија, ако је прихватиш:** -1. **Постани истраживач језика**: Изабери три програмска језика из потпуно различитих универзума – можда један за прављење сајтова, један за мобилне апликације и један за обраду података за научнике. Пронађи примере истог једноставног задатка у сва три језика. Ти ћу те уверавати да ћеш бити потпуно задивљен колико могу изгледати другачије док раде исту ствар! +1. **Постани истраживач језика**: Изабери три програмска језика из потпуно различитих области – можда један за прављење веб сајтова, један за мобилне апликације и један за анализу података за научнике. Пронађи примере истог једноставног задатка написаног на сва три језика. Обећавам – бићеш запањен колико могу да изгледају различито док раде исто! -2. **Откриј приче о њиховом пореклу**: Шта сваки језик чини јединственим? Ево једне кул чињенице – сваки програмски језик је настао јер је неко мислио: „Знаш шта? Мора да постоји бољи начин за решавање овог конкретног проблема.“ Можеш ли схватити који су то проблеми били? Неке од тих прича су заиста фасцинантне! +2. **Откриј приче о пореклу**: Шта чини сваки језик посебним? Једна кул чињеница – сваки програмски језик је створен зато што је неко помислио „Знаш шта? Мора постојати бољи начин да се реши овај конкретан проблем.“ Можеш ли да сазнаш који су то проблеми били? Неке од ових прича су заиста фасцинантне! -3. **Упознај заједнице**: Погледај колико су отворене и страствене заједнице сваког језика. Неке имају милионе програмера који деле знање и помажу једни другима, друге су мање, али изузетно повезане и подржавајуће. Свидеће ти се различитост личности које ове заједнице имају! +3. **Упознај заједнице**: Погледај колико су пријатељске и страствене заједнице сваког језика. Неке имају милионе програмера који деле знање и помажу једни другима, друге су мање али изузетно блиске и подржавајуће. Свидеће ти се различите личности тих заједница! -4. **Прати свој угођај**: Који ти језик сада делује најприступачније? Не брините о „правом“ избору – само слушај свој инстинкт! Овде нема погрешног одговора и увек можеш касније испробати друге. +4. **Слушај свој инстинкт**: Који језик ти сада највише прија? Не брините о „савршеном“ избору – само слушај своје осећаје! Овде нема погрешног одговора, а касније увек можеш истражити друге. -**Додатни детективски задатак**: Погледај можеш ли сазнати које велике сајтове или апликације користе сваки од ових језика. Гарантујем ти да ћеш бити шокиран када сазнаш шта покреће Instagram, Netflix или ту мобилну игру коју не можеш да престанеш да играш! +**Бонус детективски задатак**: Пробај да сазнаш којим програмским језицима су изграђени велики веб сајтови или апликације. Гарантујем да ћеш бити изненађен када сазнаш шта покреће Instagram, Netflix или ону мобилну игру коју не можеш да оставиш! -> 💡 **Запамти**: Не покушаваш данас да постанеш стручњак за неки од ових језика. Само упознај околину пре него што одлучиш где желиш да започнеш. Узми време, забави се и нека те љубопитљивост води! +> 💡 **Запамти**: Не покушаваш данас да постанеш експерт за било који од ових језика. Све што радиш је да упознајеш комшије пре него што одлучиш где ћеш да се установиш. Узми време, забави се и нека те води радозналост! -## Прославимо шта си открио! +## Хајде да прославимо шта си открио! -Боже мили, данас си усвојио толико невероватних информација! Заиста сам узбуђен да видим колико си тога запамтио са овог сјајног путовања. И запамти – ово није тест где треба све да буде савршено. Ово је више прослава свих кул ствари које си научио о овом фасцинантном свету у који ћеш ускоро заронити! +Боже мили, усвојио си толико невероватних информација данас! Искрено се радујем да видим колико је овог сјајног путовања остао са тобом. И запамти – ово није тест где мораш све да одговориш савршено. Ово је више као прослава свега кул што си научио о овом фасцинантном свету у који се спремаш да зарониш! -[Познај квиз после лекције](https://ff-quizzes.netlify.app/web/) -## Преглед и самостална студија +[Направи квиз после лекције](https://ff-quizzes.netlify.app/web/) -**Уземите време да истражујете и забавите се уз ову активност!** +## Ревизија и самостално учење -Покрили сте пуно тема данас, и то је нешто на шта треба да будете поносни! Сада долази забавни део – истраживање тема које су вам пробудиле радозналост. Запамтите, ово није домаћи задатак – ово је авантура! +**Одвојте време да истражите и забавите се!** +Обухватили сте пуно теме данас, и то је нешто на шта треба бити поносан! Сада долази забавни део – истраживање тема које су пробудиле вашу радозналост. Запамтите, ово није домаћи задатак – ово је авантура! -**Уроните дубље у оно што вас узбуђује:** +**Зароните дубље у оно што вас узбуђује:** -**Практично ради са програмским језицима:** -- Посетите званичне веб-сајтове 2-3 језика који су вам запали за око. Сваки има своју личност и причу! -- Испробајте неке онлајн кодирачке платформе као што су [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), или [Replit](https://replit.com/). Не бојте се да експериментишете – не можете ништа покварити! -- Прочитајте како је ваш омиљени језик настaо. Заиста, неке од ових прича о пореклу су фасцинантне и помоћи ће вам да разумете зашто језици функционишу онако како функционишу. +**Пробајте програмирање кроз праксу:** +- Посетите званичне сајтове 2-3 језика која су привукла вашу пажњу. Сваки има своју личност и причу! +- Испробајте неке онлајн кодирајуће платформе као што су [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), или [Replit](https://replit.com/). Не бојте се експериментисања – ништа не можете покварити! +- Прочитајте о томе како је ваш омиљени језик настао. Заиста, неке од тих прича о пореклу су фасцинантне и помоћи ће вам да разумете зашто језици раде онако како раде. -**Упознајте се са новим алатима:** -- Преузмите Visual Studio Code ако већ нисте – бесплатан је и сигурно ћете га заволети! -- Потрошите неколико минута прегледајући Extensions marketplace. То је као апликациони продавница за ваш уређивач кода! -- Отворите Developer Tools у вашем претраживачу и само кликајте по њима. Не брините да ћете све разумети – само се упознајте са тим шта се тамо налази. +**Уживајте у новим алаткама:** +- Преузмите Visual Studio Code ако то већ нисте урадили – бесплатан је и свиђаће вам се! +- Проведите неколико минута истражујући Marketplace за Extensions. То је као продавница апликација за ваш код уредник! +- Отворите Developer Tools у прегледачу и кликајте по њима. Немојте бринути да разумете све – само се упознајте са оним што тамо има. + +**Приклучите се заједници:** +- Пратите неке програмерске заједнице на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), или [GitHub](https://github.com/). Програмерска заједница је невероватно пријатељска према почетницима! +- Гледајте видео записе за почетнике на YouTube-у. Постоји много сјајних креатора који још памте како је то почети. +- Размотрите придруживање локалним састанцима или онлајн заједницама. Верујте ми, програмери воле да помажу почетницима! + +> 🎯 **Слушајте, ево шта желим да запаметите**: Не очекује се да постанете чаробњак програмирања преко ноћи! Тренутно само упознајете овај невероватни нови свет у који улазите. Узмите време, уживајте у путовању, и запамтите – сваки програмер кога поштујете једном је седео управо тамо где сте ви сада, узбуђен и можда мало преплављен. То је сасвим нормално и показује да сте на добром путу! -**Придружите се заједници:** -- Пратите неке програмерске заједнице на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), или [GitHub](https://github.com/). Програмерска заједница је изузетно добродошла за новајлије! -- Погледајте неке почетничке видео снимке о кодирању на YouTube-у. Постоји толико сјајних креатора који се сећају како је када се почиње. -- Размислите о придруживању локалним састанцима или онлајн заједницама. Верујте ми, програмери воле да помажу новајлијама! -> 🎯 **Слушајте, ово желим да запамтите**: Не очекује се од вас да преко ноћи постанете чаробњак у програмирању! Тренутно просто упознајете овај невероватан нови свет у који ћете ући. Уземите време, уживајте у путовању, и запамтите – сваки појединачни програмер кога цените јединка је некада седео баш тамо где сте ви сада, узбуђен и можда мало преоптерећен. То је сасвим нормално и значи да радите како треба! ## Задатак [Reading the Docs](assignment.md) -> 💡 **Мали подстицај за ваш задатак**: Баш бих волео да видим да истражите неке алате које још нисмо обрадили! Прескочите уређиваче, претраживаче и командне линије које смо већ поменули – постоји цео невероватан универзум сјајних развојних алата који само чекају да буду откривени. Тражите оне који су активно одржавани и имају живе, корисне заједнице (они обично имају најбоље туторијале и најпомоћније људе када се заглавите и затреба вам пријатељска помоћ). +> 💡 **Мали подстицај за ваш задатак**: Волео бих да видим како истражујете неке алате које још нисмо обрадили! Прескочите уреднике, прегледаче и командне алате о којима смо већ причали – постоји цела невероватна универзума сјајних развојних алата који чекају да буду откривени. Тражите оне који се активно одржавају и имају живе, корисне заједнице (они имају најбоље туторијале и најпожељније људе када се заглавите и затреба вам пријатељска помоћ). --- -## 🚀 Времеплов вашег програмирачког путовања +## 🚀 Ваш временски план путовања програмирања ### ⚡ **Шта можете урадити у наредних 5 минута** -- [ ] Обележите 2-3 веб-сајта програмских језика који су вам запали за око -- [ ] Преузмите Visual Studio Code ако већ нисте -- [ ] Отворите DevTools у претраживачу (F12) и кликћајте по неком сајту +- [ ] Обележите 2-3 сајта програмских језика која су вам привукла пажњу +- [ ] Преузмите Visual Studio Code ако то већ нисте урадили +- [ ] Отворите DevTools у прегледачу (F12) и кликајте по било ком сајту - [ ] Придружите се једној програмерској заједници (Dev.to, Reddit r/webdev, или Stack Overflow) -### ⏰ **Шта можете постићи у току овог сата** -- [ ] Завршите квиз након лекције и размислите о својим одговорима -- [ ] Поставите VS Code са GitHub Copilot додатком -- [ ] Испробајте "Hello World" пример у 2 различита програмска језика онлајн -- [ ] Погледајте видео "Дан у животу програмера" на YouTube-у -- [ ] Почните истраживање програмских језика (из изазова) - -### 📅 **Ваша авантура у току седмице** -- [ ] Завршите задатак и истражите 3 нова развојна алата -- [ ] Пратите 5 програмера или налоге о програмирању на друштвеним мрежама -- [ ] Испробајте направити нешто мало у CodePen-у или Replit-у (чак и само "Hello, [Ваше име]!") -- [ ] Прочитајте један блог пост програмера о његовом путу у програмирању -- [ ] Придружите се виртуелном састанку или погледајте програмерски разговор -- [ ] Почните учење изабраног језика уз онлајн туторијале - -### 🗓️ **Ваша трансформација у току месеца** -- [ ] Направите свој први мали пројекат (чак и једноставна веб страница важи!) -- [ ] Допринесите отвореном коду (започните са исправкама документације) -- [ ] Будите ментор некоме ко тек почиње са програмирањем -- [ ] Креирајте свој веб-сајт програмерског портфолија -- [ ] Повежите се са локалним програмерским заједницама или студијским групама -- [ ] Почните планирати свој следећи образовани корак +### ⏰ **Шта можете постићи у овом часу** +- [ ] Завршите квиз после лекције и размишљајте о вашим одговорима +- [ ] Подесите VS Code са GitHub Copilot додатком +- [ ] Испробајте пример "Hello World" у 2 различита програмска језика онлајн +- [ ] Погледајте видео "Дан у животу програмера" на YouTube-у +- [ ] Започните истраживање о свом изабраном језику (из изазова) + +### 📅 **Ваша авантура у току недеље** +- [ ] Завршите задатак и истражите 3 нова развојна алата +- [ ] Пратите 5 програмера или рачуна везаних за програмирање на друштвеним мрежама +- [ ] Покушајте направити нешто мало на CodePen-у или Replit-у (чак и само "Hello, [Ваше име]!") +- [ ] Прочитајте један блог пост програмера о његовом путу кодирања +- [ ] Придружите се виртуелном састанку или гледајте програмерски говор +- [ ] Почните да учите свој одабрани језик уз онлајн туторијале + +### 🗓️ **Ваша месечна трансформација** +- [ ] Направите свој први мали пројекат (чак и једноставна веб страница рачуна) +- [ ] Допринесите неком open-source пројекту (почните са исправкама у документацији) +- [ ] Менторирајте некога ко тек почиње у програмирању +- [ ] Креирајте свој портфолио вебсајт +- [ ] Повежите се са локалним програмерским заједницама или групама за учење +- [ ] Почните да планирате свој следећи корак у учењу ### 🎯 **Коначна рефлексија** -**Пре него што наставите, одвојите тренутак да прославите:** -- Шта вас је једна ствар у програмирању данас узбудила? -- Који алат или концепт желите прво да истражите? -- Како се осећате поводом почетка овог програмирачког пута? -- Које питање бисте сада желели да поставите програмеру? +**Пре него што наставите, одвојите тренутак да прославите:** +- Шта вас је данас највише узбудило у програмирању? +- Који алат или концепт желите прво да истражите? +- Како се осећате на почетку овог пута у програмирању? +- Које питање бисте желели да поставите програмеру у овом тренутку? ```mermaid journey - title Твој пут ка изградњи самопоуздања + title Твој Пут Ка Самопоуздању section Данас - РАДОЗНАЛИ: 3: You - ПОБРИНУТИ: 4: You - УЗБУЂЕНИ: 5: You - section Ове недеље - Истражујући: 4: You - Учећи: 5: You - Повезујући се: 4: You - section Следећи месец + Рањив: 3: You + Преоптерећен: 4: You + Узбуђен: 5: You + section Ова Недеља + Истраживање: 4: You + Учење: 5: You + Повезивање: 4: You + section Следећи Месец Градња: 5: You Самопоуздан: 5: You - Помагање другима: 5: You -``` -> 🌟 **Запамтите**: Сваки стручњак је једном био почетник. Сваки сениор програмер некада се осећао баш као ви сада – узбуђено, можда мало преплављено, и сигурно радознало шта је све могуће. Ви сте у сјајном друштву, и овај пут ће бити невероватан. Добродошли у дивни свет програмирања! 🎉 + Помагање Другима: 5: You +``` +> 🌟 **Запамтите**: Сваки стручњак је некада био почетник. Сваки искусни програмер је некада осећао управо као ви сада – узбуђено, можда мало преплављено, и свакако радознало о могућностима. Ви сте у сјајном друштву и ово путовање ће бити изванредно. Добродошли у диван свет програмирања! 🎉 --- -**Изјава о одрицању одговорности**: -Овај документ је преведен коришћењем AI услуге за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом оригиналном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални превод од стране људског преводиоца. Нисмо одговорни за било каква неспоразуми или погрешне интерпретације које могу настати употребом овог превода. +**Изјавa о одрицању одговорности**: +Овај документ је преведен коришћењем АИ преводилачке услуге [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, молимо имајте у виду да аутоматизовани преводи могу садржати грешке или неточности. Изворни документ на изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или нетачне тумачења која могу настати употребом овог превода. \ No newline at end of file diff --git a/translations/sr/AGENTS.md b/translations/sr/AGENTS.md index b75feed07..9ce8a0040 100644 --- a/translations/sr/AGENTS.md +++ b/translations/sr/AGENTS.md @@ -2,64 +2,64 @@ ## Преглед пројекта -Ово је репозиторијум за образовни програм за подучавање основа веб развоја почетницима. Програм је обухватан 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, примере кода и решења +- Самостални пројекти у засебним директоријумима (quiz-app, различити пројекти лекција) +- Систем превођења користећи GitHub Actions (co-op-translator) +- Документација послужена преко Docsify-а и доступна као PDF -## Команде за постављање +## Команде за подешавање -Овај репозиторијум је првенствено намењен за конзумирање образовног садржаја. За рад са специфичним пројектима: +Овај репозиторијум је углавном за конзумирање образовног садржаја. За рад са специфичним пројектима: -### Постављање главног репозиторијума +### Основно подешавање репозиторијума ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Постављање Quiz апликације (Vue 3 + Vite) +### Подешавање Quiz App (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Покрени сервер за развој -npm run build # Направи верзију за продукцију -npm run lint # Погонски ESLint +npm run dev # Покрени развојни сервер +npm run build # Направи билд за продукцију +npm run lint # Покрени ESLint ``` -### Банкарски API Пројекат (Node.js + Express) +### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Покрени API сервер npm run lint # Покрени ESLint -npm run format # Форматирај помоћу Prettier-а +npm run format # Форматирај са Prettier ``` -### Пројекти прегледачких додатака +### Пројекти проширења прегледача ```bash cd 5-browser-extension/solution npm install -# Пратите упутства за учитавање додатака специфична за прегледач +# Пратите упутства за учитавање проширења специфична за прегледач ``` -### Свемирски пројекат +### Пројекти Свемирске игре ```bash cd 6-space-game/solution @@ -67,216 +67,216 @@ npm install # Отворите index.html у прегледачу или користите Live Server ``` -### Чат пројекат (Python Backend) +### Chat Пројекат (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# Поставите GITHUB_TOKEN променљиву окружења +# Подеси GITHUB_TOKEN променљиву окружења python api.py ``` -## Радни ток развоја +## Работни ток развоја ### За сараднике на садржају -1. **Правите fork** репозиторијума на свој GitHub налог -2. **Клонирајте свој fork** локално -3. **Креирајте нову грану** за измене -4. Извршите промене у садржају лекција или примерима кода -5. Тестирајте измене кода у релевантним директоријумима пројеката -6. По шаљите pull request-ове у складу са смерницама за допринос +1. **Направите fork** репозиторијума на свој GitHub налог +2. **Клонирајте свој fork** локално +3. **Направите нову грану** за ваше измене +4. Правите измене у садржају лекција или примерима кода +5. Тестирајте измене кода у релевантним директоријумима пројеката +6. Пошаљите pull requests пратећи смернице за допринос ### За ученике -1. Направите fork или клонирајте репозиторијум -2. Навигајте кроз директоријуме лекција редом -3. Прочитајте README фајлове за сваку лекцију -4. Попуните квизове пре лекције на https://ff-quizzes.netlify.app/web/ -5. Радите на примерима кода у фолдерима лекција -6. Завршите задатке и изазове -7. Урадите квизове после лекције +1. Направите fork или клонирајте репозиторијум +2. Користите се директоријумима лекција по редоследу +3. Прочитајте README фајлове за сваку лекцију +4. Решевајте пред-лекцијске квизове на https://ff-quizzes.netlify.app/web/ +5. Радите кроз примере кода у фасциклама лекција +6. Завршите задатке и изазове +7. Решите пост-лекцијске квизове ### Ливе развој -- **Документација**: Покрените `docsify serve` у корену (порт 3000) -- **Quiz Апликација**: Покрените `npm run dev` у директоријуму quiz-app -- **Пројекти**: Користите VS Code Live Server екстензију за HTML пројекте +- **Документација**: Покрените `docsify serve` из корена (порта 3000) +- **Quiz App**: Покрените `npm run dev` у директоријуму quiz-app +- **Пројекти**: Користите VS Code Live Server проширење за HTML пројекте - **API Пројекти**: Покрените `npm start` у одговарајућим API директоријумима ## Упутства за тестирање -### Тестирање Quiz апликације +### Тестирање Quiz App-а ```bash cd quiz-app -npm run lint # Проверите проблеме у стилу кода -npm run build # Потврдите да је израда успешна +npm run lint # Проверите проблеме са стилом кода +npm run build # Потврдите да је изградња успела ``` -### Тестирање Bank API +### Тестирање Bank API-ја ```bash cd 7-bank-project/api -npm run lint # Провери проблеме са стилом кода -node server.js # Верификуј да ли сервер почиње без грешака +npm run lint # Провери стил кода за проблеме +node server.js # Потврди да се сервер покреће без грешака ``` ### Општи приступ тестирању -- Ово је образовни репозиторијум без свеобухватних аутоматизованих тестова -- Ручно тестирање се фокусира на: - - Извршавање примера кода без грешака - - Ради исправност линкова у документацији - - Успешна изградња пројеката - - Примери следе најбоље праксе +- Ово је образовни репозиторијум без свеобухватних аутоматизованих тестова +- Ручно тестирање фокусира се на: + - Примери кода се извршавају без грешака + - Линкови у документацији исправно раде + - Пројекти се успешно граде + - Примери следе добре праксе ### Провере пре слања -- Покрените `npm run lint` у директоријумима који имају package.json -- Проверите валидност markdown линкова -- Тестирајте примере кода у претраживачу или Node.js -- Проверите да преводи чувају правилну структуру +- Покрените `npm run lint` у директоријумима са package.json фајлом +- Верификујте да су markdown линкови валидни +- Тестирајте примере кода у прегледачу или Node.js-у +- Проверите да преводи очувају исправну структуру -## Смјернице за стил кода +## Упутства за стил кода ### JavaScript -- Користите модерни ES6+ синтакс -- Пратите стандардне ESLint конфигурације у пројектима -- Користите значајне називе променљивих и функција ради јасноће -- Додајте коментаре који објашњавају концепте за ученике -- Форматирајте код помоћу Prettier где је конфигурисано +- Користите модерну ES6+ синтаксу +- Пратите стандардне ESLint конфигурације у пројектима +- Користите значења у именима променљивих и функција ради образовне јасноће +- Додајте коментаре који објашњавају концепте за ученике +- Форматирајте користећи Prettier где је конфигурисан ### HTML/CSS -- Семантички HTML5 елементи -- Принципи прилагодљивог дизајна -- Јасне конвенције именовања класа +- Семантички HTML5 елементи +- Принципи одзивног дизајна +- Јасне конвенције именовања класа - Коментари који објашњавају CSS технике за ученике ### Python -- Пратећи PEP 8 смернице стила -- Јасни, образовни примери кода -- Типске наговештаје где помаже учењу +- Поштујте PEP 8 стилске смернице +- Јасни, образовни примери кода +- Типске наговештаје где су корисни за учење ### Markdown документација -- Јасна хијерархија наслова -- Код блокови са спецификацијом језика -- Линкови ка додатним ресурсима -- Скриншотови и слике у фасциклама `images/` +- Јасна хијерархија наслова +- Блокови кода са одређеним језиком +- Линкови ка додатним ресурсима +- Скриншотови и слике у `images/` директоријумима - Alt текст за слике ради приступачности ### Организација фајлова -- Лекције бројењене секвенцијално (1-getting-started-lessons, 2-js-basics, итд.) -- Сваком пројекту припадају `solution/` и често `start/` или `your-work/` фасцикле -- Слике се чувају у специфичним `images/` фолдерима лекција -- Преводи су у структури `translations/{language-code}/` +- Лекције нумерисане по редоследу (1-getting-started-lessons, 2-js-basics, итд.) +- Сваки пројекат има `solution/` и често `start/` или `your-work/` директоријуме +- Слике смештене у лекцијски специфичне `images/` фасцикле +- Преводи у структури `translations/{language-code}/` -## Изградња и деплоирање +## Изградња и деплој -### Деплоирање Quiz апликације (Azure Static Web Apps) +### Деплој Quiz App-а (Azure Static Web Apps) -quiz-app је конфигурисан за деплој Azure Static Web Apps: +quiz-app је конфигурисан за деплој на Azure Static Web Apps: ```bash cd quiz-app -npm run build # Креира фасциклу dist/ -# Деплој преко GitHub Actions рада током пусха на main +npm run build # Креира dist/ фасциклу +# Објављује преко GitHub Actions рада на притисак на main ``` - -Azure Static Web Apps конфигурација: -- **Локација апликације**: `/quiz-app` -- **Локација излаза**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Генерација документације у PDF формату +Конфигурација Azure Static Web Apps: +- **Локација апликације**: `/quiz-app` +- **Локација излазног фајла**: `dist` +- **Радни ток**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### Генерација PDF документације ```bash -npm install # Инсталирајте docsify-to-pdf -npm run convert # Генеришите PDF из докумената +npm install # Инсталирај docsify-to-pdf +npm run convert # Креирај PDF из докс ``` - + ### Docsify документација ```bash -npm install -g docsify-cli # Инсталирајте Доксифи глобално +npm install -g docsify-cli # Инсталирајте Docsify глобално docsify serve # Покрените на localhost:3000 ``` - -### Изградња специфична за пројекте -Сваком пројекту може припадати свој процес изградње: -- Vue пројекти: `npm run build` креира продукцијске пакете -- Статички пројекти: Нема корака изградње, датотеке се служе директно +### Изградња специфична по пројекту -## Смернице за Pull Request +Свако директоријум пројекта може имати свој процес изградње: +- Vue пројекти: `npm run build` ствара продукционе пакете +- Статички пројекти: Нема корака изградње, фајлови се директно служе + +## Смернице за Pull Request-ове ### Формат наслова -Користите јасне и описне наслове који указују на област измене: -- `[Quiz-app] Додај нови квиз за лекцију X` -- `[Lesson-3] Исправка словне грешке у терраријум пројекту` -- `[Translation] Додај шпански превод за лекцију 5` -- `[Docs] Ажурирај упутства за постављање` +Користите јасне, описне наслове који указују на подручје измене: +- `[Quiz-app] Додај нови квиз за лекцију X` +- `[Lesson-3] Исправка грешке у терраријум пројекту` +- `[Translation] Додај шпански превод за лекцију 5` +- `[Docs] Ажурирај упутства за подешавање` ### Обавезне провере -Пре слања PR: +Пре слања PR-а: -1. **Квалитет кода**: - - Покрените `npm run lint` у погођеним пројектним директоријумима +1. **Квалитет кода**: + - Покрените `npm run lint` у погођеним директоријумима - Исправите све грешке и упозорења -2. **Провера изградње**: - - Покрените `npm run build` ако је примењиво - - Осигурајте да нема грешака при изградњи +2. **Верификација изградње**: + - Покрените `npm run build` ако је применљиво + - Уверите се да нема грешака приликом изградње -3. **Валидација линкова**: - - Тестирајте све markdown линкове - - Потврдите да све слике функционишу +3. **Валидација линкова**: + - Тестирајте све markdown линкове + - Проверите да референце слика раде -4. **Преглед садржаја**: - - Превијте правопис и граматику - - Потврдите тачност и образовност примера кода - - Проверите да преводи чувају оригинално значење +4. **Преглед садржаја**: + - Прочитајте и проверите правопис и граматику + - Уверите се да су примери кода тачни и образовни + - Проверите да преводи очувају оригинално значење ### Захтеви за допринос -- Прихватите Microsoft CLA (аутоматска провера при првом PR) -- Пратите [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Погледајте [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљна упутства -- У опису PR наведите бројеве релевантних ишјуева ако постоје +- Прихватите Microsoft CLA (аутоматска провера при првом PR-у) +- Пратите [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Погледајте [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљна упутства +- Унесите бројеве issue-ја у опис PR-а ако је применљиво -### Процес рецензије +### Процес ревизије -- PR-ови се ревидирају од стране одржавача и заједнице -- Приоритет је образовна јасноћа -- Примери кода треба да прате савремене најбоље праксе +- PR-ове прегледају одржаваоци и заједница +- Приоритет је образовна јасноћа +- Примери кода требају пратити најбоље праксе - Преводи се прегледају ради тачности и културне прикладности ## Систем превођења ### Аутоматски превод -- Користи GitHub Actions са co-op-translator workflow -- Аутоматски преводи на више од 50 језика -- Изворни фајлови у главним директоријумима -- Преведени фајлови у `translations/{language-code}/` фасциклама +- Користи GitHub Actions са co-op-translator радним током +- Аутоматски преводи на преко 50 језика +- Иза изворних фајлова у главним директоријумима +- Преведени фајлови у `translations/{language-code}/` директоријумима ### Додавање ручних побољшања превода -1. Пронађите фајл у `translations/{language-code}/` -2. Унесите побољшања док очувате структуру -3. Потврдите да примери кода остају функционални -4. Тестирајте сваки локализовани квиз садржај +1. Пронађите фајл у `translations/{language-code}/` +2. Направите побољшања уз очување структуре +3. Уверите се да примери кода остају функционални +4. Тестирајте локализовани квиз садржај -### Метаподаци о преводу +### Мета подаци превода -Преведени фајлови садрже заглавље са метаподацима: +Преведени фајлови укључују заглавље са мета подацима: ```markdown ``` - -## Дебаговање и решавање проблема -### Чести проблеми +## Отстрањивање грешака и решавање проблема + +### Уобичајени проблеми -**Quiz апликација не почиње**: -- Проверите верзију Node.js (препоручено v14+) -- Обришите `node_modules` и `package-lock.json`, па покрените поново `npm install` -- Проверите да нема конфликта портова (стандардно: Vite користи порт 5173) +**Quiz app не може да се покрене**: +- Проверите верзију Node.js (препоручује се v14+) +- Обришите `node_modules` и `package-lock.json`, покрените поново `npm install` +- Проверите конфликте портова (подразумевано: Vite користи порт 5173) -**API сервер не почиње**: -- Уверите се да верзија Node задовољава минимум (node >=10) -- Проверите да ли је порт већ заузет -- Осигурајте све зависности са `npm install` +**API сервер се не покреће**: +- Потврдите да је Node.js верзија најмање 10 +- Проверите да ли је порт у употреби +- Уверите се да су све зависности инсталиране са `npm install` -**Прегледачки додатак се не учитава**: -- Проверите да је manifest.json правилно форматиран -- Погледајте конзолу прегледача за грешке -- Пратите упутства за инсталацију додатака за прегледач +**Проширење прегледача се не учитава**: +- Проверите да је manifest.json правилно форматиран +- Прегледајте конзолу прегледача за грешке +- Пратите упутства специфична за инсталацију проширења прегледача -**Проблеми са Python чат пројектом**: -- Уверите се да је OpenAI пакет инсталиран: `pip install openai` -- Проверите да је GITHUB_TOKEN окружење постављено -- Проверите дозволе приступа GitHub Models +**Проблеми са Python chat пројектом**: +- Уверите се да је OpenAI пакет инсталиран: `pip install openai` +- Проверите да је окружење променљива GITHUB_TOKEN подешена +- Проверите дозволе за приступ GitHub Models -**Docsify не служи документацију**: -- Инсталирајте docsify-cli глобално: `npm install -g docsify-cli` -- Покрените из корена репозиторијума -- Проверите да фајл `docs/_sidebar.md` постоји +**Docsify не служи документацију**: +- Глобално инсталирајте docsify-cli: `npm install -g docsify-cli` +- Покрените из корена репозиторијума +- Проверите да `docs/_sidebar.md` постоји ### Савети за развојно окружење -- Користите VS Code са Live Server екстензијом за HTML пројекте -- Инсталирајте ESLint и Prettier екстензије за доследно форматирање -- Користите DevTools претраживача за дебаговање JavaScript-а -- За Vue пројекте инсталирајте Vue DevTools екстензију за прегледач +- Користите VS Code са Live Server проширењем за HTML пројекте +- Инсталирајте ESLint и Prettier проширења за доследно форматирање +- Користите DevTools прегледача за дебаговање JavaScript-а +- За Vue пројекте, инсталирајте Vue DevTools проширење за прегледач -### Перформанс и ограничења +### Примедбе у вези перформанси -- Велики број преведених фајлова (50+ језика) значи да су пун клонирања заузетни -- Користите shallow clone ако радите само на садржају: `git clone --depth 1` -- Искључите преводе из претраге када радите на енглеском садржају -- Процеси изградње могу бити спори приликом првог покретања (npm install, Vite build) +- Велики број преведених фајлова (50+ језика) резултира великим клоновима +- Користите shallow clone ако радите само на садржају: `git clone --depth 1` +- Искључите преводе из претрага када радите на енглеском садржају +- Процеси изградње могу бити спори при првом покретању (npm install, Vite build) -## Безбедносни аспекти +## Безбедносне примедбе -### Променљиве окружења +### Окружне променљиве -- API кључеви никада не смеју бити комитовани у репозиторијум -- Користите `.env` фајлове (већ у `.gitignore`) -- Документујте потребне променљиве окружења у README фајловима пројеката +- API кључеви никада не смеју бити комитовани у репозиторијум +- Користите `.env` фајлове (већ у `.gitignore`) +- Документујте потребне окружне променљиве у README фајловима пројеката ### Python пројекти -- Користите виртуална окружења: `python -m venv venv` -- Одржавајте зависности ажурним -- GitHub token-ови треба да имају минималне потребне дозволе +- Користите виртуелна окружења: `python -m venv venv` +- Одржавајте зависности ажурним +- GitHub токени требају имати минималне потребне дозволе ### Приступ GitHub Models -- Захтевају се Personal Access Tokens (PAT) за GitHub Models -- Токени треба да се чувају као променљиве окружења -- Нико не сме да комитује токене или креденцијале +- Лични приступни токени (PAT) су неопходни за GitHub Models +- Токени треба да се чувају као окружне променљиве +- Никад не комитујте токене или креденцијале ## Додатне напомене ### Циљна публика -- Потпуни почетници у веб развоју -- Студенти и самоуки -- Наставници који користе програм у учионицама -- Садржај је дизајниран за приступачност и постепени развој вештина +- Потпуни почетници у веб развоју +- Студенти и самоученици +- Наставници који користе курикулум у учионицама +- Садржај је дизајниран за приступачност и постепено стицање вештина ### Образовна филозофија -- Приступ учењу заснован на пројектима -- Честа провера знања (квизови) -- Практичне вежбе кодирања -- Примери из стварног света -- Фокус на основама пре фрејмворка +- Приступ учењу заснован на пројектима +- Чести провери знања (квизови) +- Практичне вежбе кода +- Примери примене у реалном свету +- Фокус на основе пре рада са фрејмворковима ### Одржавање репозиторијума -- Активна заједница ученика и сарадника -- Редовна ажурирања зависности и садржаја -- Праћење ишјујева и дискусија од стране одржавача -- Ажурирања превода аутоматизована преко GitHub Actions +- Активна заједница учесника и сарадника +- Редовна ажурирања зависности и садржаја +- Праћење проблема и дискусија од стране одржаваоца +- Аутоматско ажурирање превода преко GitHub Actions -### Повољни ресурси +### Повезани ресурси -- [Microsoft Learn модули](https://docs.microsoft.com/learn/) -- [Student Hub ресурси](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручен за ученике -- Додатни курсеви: Generative AI, Data Science, ML, IoT наставни планови доступни +- [Microsoft Learn модули](https://docs.microsoft.com/learn/) +- [Student Hub ресурси](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручен за ученике +- Додатни курсеви: Generative AI, Data Science, ML, IoT курикулуми доступни ### Рад са специфичним пројектима -За детаљна упутства о појединачним пројектима погледајте 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](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом матичном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или погрешна тумачења која произилазе из коришћења овог превода. +**Ограничење одговорности**: +Овај документ је преведен помоћу AI преводилачке услуге [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо имајте у виду да аутоматизовани преводи могу садржати грешке или нетачности. Изворни документ на његовом оригиналном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква непоразумевања или погрешне тумачења која произилазе из коришћења овог превода. \ No newline at end of file diff --git a/translations/sr/README.md b/translations/sr/README.md index 45ebf9135..3e8ef7249 100644 --- a/translations/sr/README.md +++ b/translations/sr/README.md @@ -1,58 +1,88 @@ +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + # Веб развој за почетнике - Наставни план -Научите основе веб развоја уз наш свеобухватни 12-недељни курс који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко истражује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, прегледачки екстензије и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје кодирање данас! +Нauчите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улазе у JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења за прегледаче и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну методологију засновану на пројектима. Почните своје путовање у програмирање већ данас! Придружите се Azure AI Foundry Discord заједници -Пратите ове кораке да бисте почели да користите ове ресурсе: -1. **Направите форк репозиторијума**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Придружите се Azure AI Foundry Discord-у и упознајте стручњаке и друге програмере**](https://discord.com/invite/ByRwuEEgH4) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +Пратите ове кораке да бисте започели коришћење ових ресурса: +1. **Форкујте Репозиторијум**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Клонирајте Репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Придружите се Azure AI Foundry Discord-u и упознајте експерте и друге програмере**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Подршка за више језика -#### Подржано преко GitHub акције (аутоматски и увек ажурирано) +#### Подржано кроз GitHub Акцију (аутоматски и увек ажурирано) -> **Претпочитате локално клонирање?** + +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](./README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> Овај репозиторијум садржи преко 50 превода језика што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout: +> **Претпочитате да клонирате локално?** +> +> Овај репозиторијум садржи 50+ превода на језике што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Ово вам је све што вам је потребно за завршетак курса са много бржим преузимањем. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Ово вам даје све што вам треба за завршетак курса са много бржим преузимањем. + + +**Ако желите да додатне језике за превод подржимо, они су наведени [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -**Ако желите додатне поддержане преводе језика, погледајте [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _Јесте ли студент?_ +#### 🧑‍🎓 _Јеси ли студент?_ -Посетите [**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 мод, он није само за генерисање текста већ може и да креира и уређује фајлове, извршава команде и још много тога. -### 📣 Обзнање - _Нови пројекат за израду помоћу генеративне АИ_ +### 📣 Обавештење - _Нови пројекат за изградњу користећи генеративну вештачку интелигенцију_ -Нови AI Assistant пројекат је управо додат, погледајте [проект](./9-chat-project/README.md) +Управо додат нови AI Assistant пројекат, погледајте [пројекат](./9-chat-project/README.md) -### 📣 Обзнање - _Нови наставни план_ о генеративној АИ за JavaScript је управо објављен +### 📣 Обавештење - _Нови наставни план_ о генеративној вештачкој интелигенцији за JavaScript управо је објављен -Не пропустите наш нови генеративни AI наставни план! +Не пропустите наш нови наставни план о генеративној вештачкој интелигенцији! Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете! ![Background](../../translated_images/sr/background.148a8d43afde5730.webp) -- Лекције покривају све од основа до RAG-а. +- Лекције обухватају све од основа до RAG-а. - Интеракција са историјским ликовима користећи GenAI и нашу пратећу апликацију. -- Забавна и занимљива прича, путоваћете кроз време! +- Забавна и ангажована прича, путоваћете кроз време! ![character](../../translated_images/sr/character.5c0dd8e067ffd693.webp) -Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас оспособљава за учење тема као што су: -- Израда упита и инжењеринг упита +Свака лекција укључује задатак за завршетак, проверу знања и изазов који ће вас усмеравати у учењу тема као што су: +- Писање упита и инжењеринг упита - Генерисање апликација за текст и слике - Апликације за претрагу @@ -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" у горњем десном углу ове странице. 2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Покретање курса у Codespace-у +#### Покретање наставног плана у Codespace-у -У својој копији овог репозиторијума коју сте креирали, кликните на дугме **Code** и одаберите **Open with Codespaces**. Ово ће креирати нови Codespace у коме ћете радити. +У својој копији репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити. ![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.webp) -#### Покретање курса локално на вашем рачунару +#### Покретање наставног плана локално на вашем рачунару -Да бисте покренули овај курс локално на рачунару, потребан вам је уређивач текста, прегледач и алат командне линије. Наша прва лекција, [Увод у програмске језике и алате струке](../../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) и покрените следећу команду, замењујући `` 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) и покрените следећу команду, замењујући `` УРЛ-ом који сте управо копирали: ```bash git clone ``` -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 Наш тим производи и друге курсеве! Погледајте: @@ -194,7 +224,7 @@ PDF свих лекција може се пронаћи [овде](https://micr [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / агенти +### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -202,7 +232,7 @@ PDF свих лекција може се пронаћи [овде](https://micr --- -### Серия генеративне AI +### Серти генеративног AI [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -221,29 +251,29 @@ PDF свих лекција може се пронаћи [овде](https://micr --- -### Серия Copilot +### Серти Копилот [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Добијање помоћи +## Како добити помоћ -Ако запнете или имате питања о креирању AI апликација. Придружите се другим учесницима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели. +Ако застакнете или имате било каквих питања у вези са прављењем AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP-у. То је подршка заједница где су питања добродошла и знање се слободно дели. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ако имате повратне информације о производу или грешке током прављења посетите: +Ако имате повратне информације о производу или грешке приликом прављења, посетите: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Лиценца -Овај репозиторјум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација. +Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација. --- **Одрицање од одговорности**: -Овај документ је преведен коришћењем AI услуге за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, молимо вас да имате у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати коначним и ауторитетним извором. За критичне информације препоручује се професионални људски превод. Ми нисмо одговорни за било каква неспоразуми или погрешна тумачења која могу настати употребом овог превода. +Овај документ је преведен помоћу AI сервиса за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуми или неправилна тумачења проистекла из коришћења овог превода. \ No newline at end of file