From b9f13b99b8684676ef492432f18b378b60e69d64 Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 27 Mar 2026 23:39:19 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes) --- translations/hr/.co-op-translator.json | 6 +- .../README.md | 626 ++++++++------- translations/hr/AGENTS.md | 380 +++++----- translations/sl/.co-op-translator.json | 6 +- .../README.md | 696 +++++++++-------- translations/sl/AGENTS.md | 300 ++++---- translations/sr/.co-op-translator.json | 6 +- .../README.md | 716 +++++++++--------- translations/sr/AGENTS.md | 336 ++++---- 9 files changed, 1533 insertions(+), 1539 deletions(-) diff --git a/translations/hr/.co-op-translator.json b/translations/hr/.co-op-translator.json index eb7074503..3d7db5dd9 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T15:06:23+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T23:32:42+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-03-06T15:15:01+00:00", + "translation_date": "2026-03-27T23:38:18+00:00", "source_file": "AGENTS.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 68b333745..08141f4b0 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,93 +1,93 @@ # 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! -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š! +Bok, budući programeru! 👋 Mogu li ti reći nešto što me svaki dan iznova oduševi? Upravo ćeš otkriti da programiranje nije samo o računalima – to su zapravo supermoći kojima oživljavaš svoje najluđe ideje! -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! +Znaš onaj trenutak kad koristiš svoju omiljenu aplikaciju i sve savršeno klikne? Kad pritisneš gumb i dogodi se nešto zaista čarobno što te natjera da kažeš "wow, kako su TO napravili?" Pa, netko baš poput tebe – vjerojatno sjedeći u svojoj omiljenoj kafiću u 2 ujutro s trećom kavom – napisao je kod koji je stvorio tu magiju. I evo što će ti razbit um: do kraja ovog sata nećeš samo shvatiti kako su to napravili, nego ćeš jedva čekati sam pokušati! -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! +Gledaj, potpuno razumijem ako ti programiranje sada izgleda zastrašujuće. Kad sam ja počinjao, iskreno sam mislio da moraš biti neki matematički genij ili da kodiraš od pete godine. Ali evo što mi je u potpunosti promijenilo pogled na stvari: programiranje je točno kao učenje razgovora na novom jeziku. Počneš s "bok" i "hvala", onda se naučiš naručivati kavu, a prije nego što shvatiš, vodiš duboke filozofske razgovore! Samo što u ovom slučaju razgovaraš s računalima i, iskreno? Oni su najstrpljiviji sugovornici – nikad ne sude tvoje pogreške i uvijek s oduševljenjem pokušavaju ponovo! + +Danas ćemo istražiti nevjerojatne alate koji čine moderni web razvoj ne samo mogućim, već ozbiljno zaraznim. Govorim o točno istim editorima, preglednicima i radnim procesima koje programeri u Netflixu, Spotifyju i tvojoj omiljenoj indie studio aplikaciji koriste svaki dan. I evo onog djelića koji će te učiniti sretnim: većina ovih profesionalnih, industrijskih alata je potpuno besplatna! ![Intro Programming](../../../../translated_images/hr/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote autora [Tomomija Imure](https://twitter.com/girlie_mac) ```mermaid journey - title Vaše Putovanje Programiranjem Danas + title Vaše programsko putovanje danas section Otkrijte - Što je Programiranje: 5: You - Programski Jezici: 4: You - Pregled Alata: 5: You + Š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 + Uređivači koda: 4: You + Preglednici i alati za programere: 5: You + Naredbeni redak: 3: You section Vježbajte - Detektiv Jezika: 4: You - Istraživanje Alata: 5: You - Povezivanje Zajednice: 5: You + Detektiv jezika: 4: You + Istraživanje alata: 5: You + Povezivanje zajednice: 5: You ``` -## Vidimo što već znaš! +## Pogledajmo što već znaš! -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! +Prije nego uskočimo u zabavne stvari, zanima me – što već znaš o ovom programerskom svijetu? I slušaj, ako gledaš ova pitanja misleći "Doslovno nemam pojma o ničemu od ovoga," to nije samo u redu, to je savršeno! To znači da si na pravom mjestu. Razmišljaj o ovom kvizu kao o istezanju prije treninga – samo zagrijavamo te moždane mišiće! -[Prođi kviz prije lekcije](https://ff-quizzes.netlify.app/web/) +[Odradi predsatni kviz](https://ff-quizzes.netlify.app/web/) -## Avantura koja nas čeka zajedno +## Avantura u koju 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: +Ok, iskreno sam presretan zbog onoga što ćemo danas istražiti! Stvarno, volio bih vidjeti tvoj izraz lica kad ti neki od ovih koncepata konačno kliknu. Evo nevjerojatnog putovanja koje ćemo zajedno proći: -- **Š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! +- **Što je zapravo programiranje (i zašto je to najcool stvar ikad!)** – Otkrit ćemo kako je kod doslovno nevidljiva magija koja pokreće sve oko tebe, od onog alarma koji nekako zna da je ponedjeljak ujutro do algoritma koji savršeno kreira tvoje Netflix preporuke +- **Programsci jezici i njihove nevjerojatne osobnosti** – Zamisliti da uđeš na zabavu gdje svaki čovjek ima posve različite supermoći i načine rješavanja problema. Tako izgleda svijet programskih jezika i uživat ćeš u upoznavanju s njima! +- **Temeljni gradivni blokovi koji stvaraju digitalnu magiju** – Razmišljaj o njima kao o ultimativnom LEGO setu za kreativce. Kad shvatiš kako se ti dijelovi uklapaju, shvatit ćeš da doslovno možeš izgraditi bilo što što tvoja mašta zamisli +- **Profesionalni alati koji će te natjerati da se osjećaš kao da ti je netko dao čarobni štapić** – Nisam pretjerivao – ovi alati će te stvarno natjerati da se osjećaš kao da imaš supermoći, a najbolji dio? To su isti alati koje koriste profesionalci! -> 💡 **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! +> 💡 **Evo jedna stvar**: Ne pokušavaj sve danas pamtiti! Sada samo želim da osjetiš taj plamen uzbuđenja oko svega što je moguće. Detalji će ti prirodno ostati dok zajedno vježbamo – to je pravi način učenja! -> 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)! +> Ovaj sat možeš odraditi 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 je točno *programiranje*? -Ok, uhvatimo milijunsko pitanje: što je programiranje, zapravo? +Dobro, riješimo milijunsko pitanje: što je zapravo programiranje? -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? 😅 +Dat ću ti jednu priču koja mi je u potpunosti promijenila pogled na ovo. Prošli tjedan pokušavao sam objasniti mami kako koristiti naš novi smart TV daljinski. Uhvatih se kako govorim stvari poput "Pritisni crveni gumb, ali ne veliki crveni gumb, mali crveni gumb lijevo... ne, tvoj drugi lijevi... ok, sad drži dvije sekunde, ne jednu, ne tri..." Zvuči poznato? 😅 -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). +To je programiranje! To je umjetnost davanja izuzetno detaljnih, korak-po-korak uputa nečemu što je vrlo moćno, ali mu se mora sve savršeno objasniti. Samo umjesto da objašnjavaš mami (koja može pitati "koji crveni gumb?"), objašnjavaš računalu (koje točno radi ono što mu kažeš, čak i ako ono što si rekao nije baš ono što si mislio). -Š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. +Evo što me oduševilo kad sam ovo prvi put naučio: računala su zapravo prilično jednostavna u svojoj biti. Oni doslovno razumiju samo dvije stvari – 1 i 0, što je otprilike "da" i "ne" ili "uključeno" i "isključeno." To je to! Ali tu nastupa magija – ne moramo govoriti u 1-icama i 0-kama kao da smo u Matrici. Tu na scenu stupaju **programski jezici**. Oni su poput najboljeg prevoditelja na svijetu koji uzima tvoje sasvim normalne ljudske misli i pretvara ih u računalni jezik. -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! +I evo što me i dalje svaki dan ujutro oduševljava: doslovno *sve* digitalno u tvom životu počelo je s nekim poput tebe, vjerojatno u pidžami s šalicom kave, tipkajući kod na svom laptopu. Taj Instagram filter koji te čini besprijekornom? Netko ga je kodirao. Preporuka zbog koje si otkrila novu omiljenu pjesmu? Programer je sastavio 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... napravio je! -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? +Kad naučiš programirati, ne samo da usvajaš novu vještinu – postaješ dio te nevjerojatne zajednice rješavatelja problema koji provode dane razmišljajući "Što ako mogu napraviti nešto što nekome uljepša dan, makar malo?" Iskreno, postoji li išta fora od toga? -✅ **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. +✅ **Zabavna potraga za činjenicama**: Evo nešto super kul što možeš potražiti kad imaš slobodnu minutu – tko je, po tvom mišljenju, bio prvi računalni programer na svijetu? Dat ću ti nagovještaj: možda nije onaj koga očekuješ! Priča o toj osobi je potpuno 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š?** -**Odvoji trenutak za razmišljanje:** +**Posveti trenutak i razmisli:** - 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? +- Možeš li smisliti neki svakodnevni zadatak koji bi želio/la automatizirati programiranjem? +- Koja pitanja ti se vrzmaju po glavi o svemu vezanom za programiranje? -> **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! +> **Zapamti**: Normalno je ako ti neki koncepti sada djeluju zbunjujuće. Učenje programiranja je kao učenje novog jezika – treba vremena da tvoj mozak izgradi te neuronske puteve. Dobro ti ide! -## Programski jezici su kao različiti okusi magije +## Programsci jezici su poput različitih vrsta magije -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. +Ok, ovo će možda zvučati čudno, ali druž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 izravan, klasiku koja je elegantna i strukturirana, te hip-hop koji je kreativan i izražajan. Svaki stil ima svoju vibru, svoje zajednice strastvenih obožavatelja i svaki je savršen za različita raspoloženja i prilike. -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! 😄). +Programsci jezici funkcioniraju točno na isti način! Ne bi koristio isti jezik za izradu zabavne mobilne igre kakav bi koristio za analiziranje golemih količina klimatskih podataka, baš kao što ne bi puštao death metal na satu joge (pa, većina satova joge, u svakom slučaju! 😄). -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! +Ali evo što me svaki put iznova oduševi kada o tome razmišljam: ovi jezici su poput najstrpljivijeg, briljantnog prevoditelja na svijetu koji sjedi pored tebe. Možeš izraziti svoje ideje na način koji je prirodan za tvoj ljudski mozak, a oni rješavaju sav nevjerojatno složen posao prevođenja toga u 1-ke i 0-ke koje računala zapravo razumiju. To je kao imati prijatelja koji je savršeno tečan u oba "ljudske kreativnosti" i "računalne logike" – i nikad nije umoran, nikad ne treba pauzu za kavu i nikad te ne osuđuje ako dva puta pitaš isto! -### Popularni programski jezici i njihova namjena +### Popularni programski jezici i njihove primjene ```mermaid mindmap - root((Programski Jezici)) + root((Programsko Jezici)) Web Razvoj JavaScript - Čarobnjak za Frontend + Čarolija Frontenda Interaktivne Web Stranice TypeScript JavaScript + Tipovi @@ -95,7 +95,7 @@ mindmap Podaci i AI Python Znanost o Podacima - Strojno Učenje + Strojarno Učenje Automatizacija R Statistika @@ -103,53 +103,53 @@ mindmap Mobilne Aplikacije Java Android - Poslovno + Poslovni Sustav Swift iOS Apple Ekosustav Kotlin - Moderan Android - Višestruka Platforma + Moderni Android + Višeplatformski Sustavi i Performanse C++ Igre Kritično za Performanse Rust Sigurnost Memorije - Sistemsko Programiranje + Programska Sustava Go - Oblak Usluge + Cloud Usluge Skalabilni Backend ``` | Jezik | Najbolji za | Zašto je popularan | |----------|----------|------------------| -| **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 | +| **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 Microsoft ekosustava | | **Go** | Cloud servisi, backend sustavi | Brz, jednostavan, dizajniran za modernu računalnu tehnologiju | -### Jezici višeg i nižeg nivoa +### Jezici visokog i niskog nivoa -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! +Ok, ovo je iskreno bio koncept koji mi je srušio mozak kad sam počinjao, pa ću podijeliti analogiju koja mi je napokon sve objasnila – i stvarno se nadam da će i tebi pomoći! -Zamisli da posjećuješ zemlju u kojoj ne govoriš jezik, i hitno ti treba najbliži WC (svi smo bili tamo, zar ne? 😅): +Zamisli da si u zemlji gdje ne govoriš jezik i hitno ti trebaš naći najbliži WC (svi smo to doživjeli, zar ne? 😅): -- **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. +- **Programiranje niskog nivoa** je kao da naučiš lokalni dijalekt 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 odrastao tamo. Super impresivno i nevjerojatno efikasno... ako si fluentan! Ali prilično zbunjujuće ako samo pokušavaš pronaći WC. -- **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. +- **Programiranje visokog nivoa** je kao da imaš tog super lokalnog prijatelja koji te shvaća. Možeš reći "Stvarno mi treba WC" na običnom engleskom i on prevede sve kulturne faze i da ti upute koje savršeno razumije tvoj nemjesni mozak. -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! +U terminima programiranja: +- **Jezici niskog nivoa** (kao Assembly ili C) ti daju mogućnost da imaš iznimno detaljne razgovore s stvarnim računalnim hardverom, ali moraš razmišljati kao stroj, što je... pa, recimo da je to veliki mentalni zaokret! +- **Jezici visokog nivoa** (kao JavaScript, Python ili C#) ti omogućuju da razmišljaš kao čovjek dok oni rješavaju sav strojni govor u pozadini. Plus, imaju ove iznimno dobrodošle zajednice punu ljudi koji se sjećaju kako je biti početnik i iskreno žele pomoći! -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! +Pogodi koje ću ti preporučiti da počneš koristiti? 😉 Jezici visokog nivoa su kao pomoćne kotačiće na biciklu koje nikad zapravo ne želiš skinuti jer cijeli proces čine puno zabavnijim! ```mermaid flowchart TB A["👤 Ljudska misao:
'Želim izračunati Fibonaccijeve brojeve'"] --> B{Odaberi razinu jezika} - B -->|Visoka razina| C["🌟 JavaScript/Python
Lako za čitanje i pisanje"] + B -->|Visoka razina| C["🌟 JavaScript/Python
Jednostavno za čitanje i pisanje"] B -->|Niska razina| D["⚙️ Assembly/C
Izravna kontrola hardvera"] C --> E["📝 Piši: fibonacci(10)"] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Pokažem ti zašto su jezici visokog nivoa toliko prijateljskiji +### Pokažimo zašto su jezici visokog nivoa toliko prijateljskiji -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š! +Ok, upravo ću ti pokazati nešto što savršeno ilustrira zašto sam se zaljubio u jezike visokog nivoa, ali prvo – obećaj mi nešto. Kad vidiš prvi kod, nemoj paničariti! Trebao bi izgledati teško. Točno to želim pokazati! -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!) +Pogledat ćemo isti zadatak napisan u dva potpuno različita stila. Oba stvaraju tzv. Fibonacci niz – to je prekrasan matematički uzorak gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8, 13... (Zabavna činjenica: ovaj se uzorak doslovno pojavljuje svuda u prirodi – spirale suncokretovih sjemenki, uzorci češera, čak i način na koji galaksije nastaju!) -Jesi spreman vidjeti razliku? Idemo! +Spreman za vidjeti razliku? Idemo! -**Jezik visokog nivoa (JavaScript) – Ljudski prijateljski:** +**Jezik visokog nivoa (JavaScript) – prilagođen ljudima:** ```javascript -// Korak 1: Osnovna postavka Fibonaccijevog niza +// Korak 1: Osnovna postavka Fibonačijevog 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 kojom određujemo koliko Fibonacci brojeva želimo generirati -- **Inicijalizira** dvije varijable da prati trenutni i sljedeći broj u nizu +- **Deklarira** konstantu da odredi koliko Fibonacci brojeva želimo generirati +- **Inicijalizira** dvije varijable koje prate 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 +- **Prikazuje** zaglavlje za identifikaciju našeg izlaza ```javascript -// Korak 2: Generiraj niz pomoću petlje +// Korak 2: Generirajte niz pomoću petlje for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Izračunaj sljedeći broj u nizu + // Izračunajte sljedeći broj u nizu const sum = current + next; current = next; next = sum; } ``` -**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 +**Razlaganje što se događa:** +- **Petlja** kroz svaku poziciju u našem nizu koristeći `for` petlju +- **Prikazuje** svaki broj s njegovom pozicijom koristeći template literal formatiranje +- **Računa** sljedeći Fibonacci broj zbrajanjem trenutne i sljedeće vrijednosti +- **Ažurira** varijable za praćenje kako bi prešao na sljedeću iteraciju ```javascript // Korak 3: Moderan funkcionalni pristup @@ -219,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Primjer upotrebe +// Primjer korištenja const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**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 +**U gornjem primjeru smo:** +- **Napravili** ponovnu funkciju koristeći modernu sintaksu strelice +- **Izgradili** polje za spremanje cijelog niza umjesto prikaza brojeva jedan po jedan +- **Koristili** indeksiranje polja za izračunavanje svakog novog broja iz prethodnih - **Vratili** cijeli niz za fleksibilnu upotrebu u drugim dijelovima programa -**Jezik niskog nivoa (ARM Assembly) – Računalu prijateljski:** +**Jezik niskog nivoa (ARM Assembly) – prilagođen računalu:** ```assembly area ascen,code,readonly @@ -257,28 +257,28 @@ back add r0,r1 end ``` -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. +Primijeti kako verzija u JavaScriptu čita skoro kao upute na engleskom, dok verzija u Assemblyju koristi šifrirane naredbe koje izravno kontroliraju procesor računala. Oba obavljaju isti zadatak, ali je jezik visokog nivoa mnogo lakši za ljude da razumiju, pišu i održavaju. **Ključne razlike koje ćeš primijetiti:** -- **Č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 +- **Čitljivost**: JavaScript koristi opisna imena poput `fibonacciCount`, dok Assembly koristi šifrirane oznake poput `r0`, `r1` +- **Komentari**: Jezici višeg nivoa potiču objašnjavajuće komentare koji čine kod samodokumentirajućim +- **Struktura**: Logički tijek JavaScript-a 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 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! +✅ **O Fibonaccijevom nizu**: Ovaj apsolutno prekrasan obrasac brojeva (gdje je svaki broj jednak zbroju prethodna dva: 0, 1, 1, 2, 3, 5, 8...) pojavljuje se doslovno *posvuda* u prirodi! Pronaći ćete ga u spiralama suncokreta, obrascima češera, načinu na koji se uvijaju školjke nautilusa, pa čak i u načinu na koji grane drveća rastu. Nevjerojatno je kako nam matematika i kod mogu pomoći razumjeti i stvoriti obrasce koje priroda koristi za stvaranje ljepote! -## Gradivni elementi koji stvaraju magiju +## Građevni blokovi koji čine magiju -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! +Dobro, sada kada ste vidjeli kako programski jezici izgledaju u akciji, razložimo osnovne dijelove koji čine doslovno svaki ikada napisan program. Razmislite o njima kao o osnovnim sastojcima vaše omiljene recepture – kad jednom razumijete što svaki radi, moći ćete čitati i pisati kod u gotovo bilo kojem jeziku! -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! 😄 +Ovo je kao učenje gramatike programiranja. Sjećate se kad ste u školi učili o imenica, glagolima i kako slagati rečenice? Programiranje ima svoju vlastitu gramatiku, i iskreno, ona je puno logičnija i popustljivija nego što je ikad bila engleska gramatika! 😄 -### Izjave: upute korak po korak +### Izjave: Upute korak po korak -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." +Započnimo s **izjavama** – one su kao pojedinačne rečenice u razgovoru s vašim računalom. Svaka izjava kaže računalu da učini jednu specifičnu stvar, kao da dajete upute: "Skreni lijevo ovdje," "Stani na crveno svjetlo," "Parkiraj na tom mjestu." -Ono što volim kod izjava jest koliko su obično čitljive. Pogledajte ovo: +Ono što volim kod izjava je koliko su obično čitljive. Pogledajte ovo: ```javascript // Osnovne naredbe koje izvode pojedinačne radnje @@ -287,10 +287,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Ovo kod radi:** +**Evo što ovaj kod radi:** - **Deklarira** konstantnu varijablu za pohranu korisničkog imena -- **Prikazuje** poruku dobrodošlice na konzolu -- **Računa** i pohranjuje rezultat matematičke operacije +- **Prikazuje** pozdravnu poruku na konzoli +- **Izračunava** 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, ovo se događa:** -- **Mijenja** naslov web stranice koji se prikazuje u kartici preglednika +**Korak po korak, evo što se događa:** +- **Mijenja** naslov web stranice koji se pojavljuje na kartici preglednika - **Mijenja** boju pozadine cijelog tijela stranice -### Varijable: memorijski sustav vašeg programa +### Varijable: Memorijski sustav vašeg programa -Ok, **varijable** su iskreno jedan od mojih omiljenih koncepata za podučavanje jer su toliko slične stvarima koje svakodnevno koristite! +Dobro, **varijable** su iskreno jedan od mojih najdražih pojmova za podučavanje jer su toliko slične stvarima koje svakodnevno koristite! -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. +Razmislite o imeniku na vašem telefonu na trenutak. Ne pamtiš brojeve svih ljudi – umjesto toga, spremaš "Mama," "Najbolji prijatelj" ili "Pizzerija koja dostavlja do 2 ujutro" i tvoj telefon pamti prave brojeve. Varijable rade upravo na isti način! One su kao označeni spremnici gdje vaš program može pohraniti informacije i kasnije ih dohvatiti koristeći smisleno ime. -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 što je stvarno cool: varijable se mogu mijenjati dok program radi (otuda i ime "varijabla" – vidite što su napravili?). Baš kao što biste mogli ažurirati kontakt pizzerije kada pronađete nešto još bolje, varijable se mogu mijenjati dok vaš program uči nove informacije ili dok se okolnosti mijenjaju! -Dopustite da vam pokažem koliko to može biti jednostavno: +Pogledajmo kako ovo može biti prekrasno jednostavno: ```javascript // Korak 1: Kreiranje osnovnih varijabli @@ -320,11 +320,11 @@ let temperature = 75; let isRaining = false; ``` -**Razumijevanje ovih koncepata:** -- **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 +**Razumijevanje ovih pojmova:** +- **Pohranjuj** nepromjenjive vrijednosti u `const` varijable (poput naziva stranice) +- **Koristi** `let` za vrijednosti koje se mogu mijenjati tijekom rada programa +- **Dodijeli** različite tipove podataka: stringove (tekst), brojeve i booleove (true/false) +- **Odaberi** opisna imena koja objašnjavaju što varijabla sadrži ```javascript // Korak 2: Rad s objektima za grupiranje povezanih podataka @@ -335,10 +335,10 @@ const weatherData = { }; ``` -**U gornjem smo:** -- **Kreirali** objekt za grupiranje povezanih vremenskih podataka +**U gornjem primjeru smo:** +- **Stvorili** objekt za grupiranje povezanih vremenskih podataka - **Organizirali** više podataka pod jednim imenom varijable -- **Koristili** parove ključ-vrijednost za jasnu oznaku svakog podatka +- **Koristili** parove ključ-vrijednost za jasno označavanje informacija ```javascript // Korak 3: Korištenje i ažuriranje varijabli @@ -351,31 +351,31 @@ temperature = 68; ``` **Razumimo svaki dio:** -- **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 +- **Prikazi** informacije koristeći template literale s `${}` sintaksom +- **Pristupi** svojstvima objekta koristeći točkastu notaciju (`weatherData.windSpeed`) +- **Ažuriraj** varijable deklarirane s `let` kako bi prikazale promjene uvjeta +- **Kombiniraj** više varijabli za stvaranje smislenih poruka ```javascript -// Korak 4: Moderno destrukturiranje za čišći kod +// Korak 4: Moderna destrukturacija za čišći kod const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Što trebate znati:** -- **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 +**Što morate znati:** +- **Izdvoji** specifična svojstva iz objekata koristeći destrukturiranje +- **Stvori** nove varijable automatski sa istim imenima kao ključevi objekta +- **Pojednostavi** kod izbjegavajući ponavljanje točaste notacije -### Kontrola toka: učenje vašeg programa da razmišlja +### Kontrolni tijek: Poučavanje programa da razmišlja -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. +Dobro, ovdje programiranje postaje zaista 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 o tome ne razmišljate. -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! +Zamislite ovo: jutros ste vjerojatno prošli nešto kao "Ako pada kiša, uzet ću kišobran. Ako je hladno, obucit ću jaknu. Ako kasnim, preskočit ću doručak i uzet ću kavu usput." Vaš mozak prirodno slijedi tu if-then logiku desetke puta dnevno! -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! +Ovo je ono što programima daje osjećaj inteligencije i živosti umjesto da samo slijede neki dosadni, predvidljivi scenarij. Oni zapravo mogu pogledati situaciju, procijeniti što se događa i odgovoriti prikladno. Kao da vašem programu dajete mozak koji se može prilagoditi i donositi odluke! -Želite vidjeti kako to lijepo funkcionira? Dopustite da vam pokažem: +Želite vidjeti kako ovo prekrasno funkcionira? Dopustite da vam pokažem: ```javascript // Korak 1: Osnovna uvjetna logika @@ -389,11 +389,11 @@ if (userAge >= 18) { } ``` -**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 vremena preostaje do kvalifikacije za glasanje ako je ispod 18 -- **Pruža** specifične i korisne povratne informacije za svaki scenarij +**Evo što ovaj kod radi:** +- **Provjerava** ispunjava li korisnik dobni zahtjev za glasanje +- **Izvršava** različite blokove koda na temelju rezultata uvjeta +- **Izračunava** i prikazuje koliko još treba do prihvatljivosti za glasanje ako je mlađi od 18 +- **Pruža** specifičan i koristan odgovor za svaki scenarij ```javascript // Korak 2: Više uvjeta s logičkim operatorima @@ -409,11 +409,11 @@ if (userAge >= 18 && hasPermission) { } ``` -**Razlaganje što se događa:** +**Raščlanjivanje što se događa:** - **Kombinira** više uvjeta koristeći `&&` (i) operator -- **Stvara** hijerarhiju uvjeta koristeći `else if` za više scenarija -- **Obrađuje** sve moguće slučajeve s konačnim `else` iskazom -- **Pruža** jasne i korisne povratne informacije za svaku situaciju +- **Stvara** hijerarhiju uvjeta koristeći `else if` za različite scenarije +- **Rješava** sve moguće slučajeve s konačnim `else` +- **Pruža** jasne, konkretne odgovore za svaku različitu situaciju ```javascript // Korak 3: Sažet uvjet s ternarnim operatorom @@ -421,13 +421,13 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Što treba zapamtiti:** -- **Koristite** ternarni operator (`? :`) za jednostavne uvjete s dvije opcije -- **Napišite** uvjet prvo, zatim `?`, zatim istinit rezultat, zatim `:`, potom lažni rezultat -- **Primijenite** ovaj obrazac kad trebate dodijeliti vrijednosti na temelju uvjeta +**Što morate zapamtiti:** +- **Koristi** ternarni operator (`? :`) za jednostavne uvjete sa dvije opcije +- **Piši** prvo uvjet, zatim `?`, zatim istinit rezultat, zatim `:`, pa lažni rezultat +- **Primijeni** ovaj obrazac kad trebaš dodijeliti vrijednosti na temelju uvjeta ```javascript -// Korak 4: Rješavanje više specifičnih slučajeva +// Korak 4: Rukovanje s više specifičnih slučajeva const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,55 +447,55 @@ switch (dayOfWeek) { } ``` -**Ovaj kod ostvaruje sljedeće:** +**Ovaj kod postiže sljedeće:** - **Uspoređuje** vrijednost varijable s više specifičnih slučajeva -- **Grupira** slične slučajeve zajedno (radni dani vs. vikendi) -- **Izvršava** odgovarajući blok koda kada se nađe podudaranje +- **Grupira** slične slučajeve zajedno (radni dani naspram vikenda) +- **Izvršava** odgovarajući blok koda kad se pronađe podudaranje - **Uključuje** `default` slučaj za neočekivane vrijednosti -- **Koristi** `break` izjave za sprječavanje nastavka na sljedeći slučaj +- **Koristi** `break` izjave da spriječi izvođenje sljedećih slučajeva -> 💡 **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. +> 💡 **Realna analogija**: Razmišljajte o kontrolnom tijeku kao o najstrpljivijem GPS-u na svijetu koji vam daje upute. Možda kaže „Ako je promet na Main Streetu, uzmi autocestu. Ako je gradilište blokira autocestu, pokušaj slikovitiju rutu.“ Programi koriste upravo takvu uvjetnu logiku da inteligentno odgovore na različite situacije i uvijek pruže korisnicima najbolje moguće iskustvo. -### 🎯 **Provjera koncepata: Majstorstvo gradivnih elemenata** +### 🎯 **Provjera pojmova: Ovladavanje građevnim blokovima** -**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? +**Pogledajmo kako vam ide s osnovama:** +- Možete li vlastitim riječima objasniti razliku između varijable i izjave? +- Razmislite o stvarnom scenariju gdje biste koristili if-then odluku (kao u našem primjeru s glasovanjem) +- Koja vam je jedna stvar o logici programiranja iznenadila? **Brzi poticaj samopouzdanja:** ```mermaid flowchart LR - A["📝 Izjave
(Upute)"] --> B["📦 Varijable
(Pohrana)"] --> C["🔀 Tijek kontrole
(Odluke)"] --> D["🎉 Radni program!"] + A["📝 Izjave
(Naredbe)"] --> B["📦 Varijable
(Pohrana)"] --> C["🔀 Kontrola toka
(Odluke)"] --> D["🎉 Radni program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Š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! +✅ **Što slijedi**: Zabavit ćemo se istražujući dublje ove pojmove dok nastavljamo ovo nevjerojatno putovanje zajedno! 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 usvojiti kako budemo zajedno vježbali – obećavam, ovo će biti puno zabavnije nego što možda očekujete! ## Alati zanata -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. +Evo, iskreno, oduševljen sam i jedva se 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. -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! +Znate kako kuhar ima savršeno izbalansirane noževe koji mu se čine kao produžetak ruku? Ili kako glazbenik ima onaj jedan gitaru koja počne pjevati čim je dotakne? Pa, razvojni programeri imaju vlastitu verziju tih magičnih alata, i evo što će vam potpuno izbaciti mozak iz glave – većina njih je potpuno besplatna! -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. +Doslovno skačem na stolici dok razmišljam o dijeljenju ovih alata s vama jer su u potpunosti revolucionirali način na koji gradimo softver. Govorimo o AI-pokretanim asistentima za kodiranje koji vam pomažu pisati kod (nisam ni šala!), oblak okruženjima gdje možete graditi cijele aplikacije doslovno s bilo kojeg mjesta s Wi-Fi-jem, te alatima za ispravljanje pogrešaka tako sofisticiranima da su kao rendgenski vid za vaše programe. -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! +I evo dijela koji mi i dalje daje jezu: ovo nisu "alati za početnike" koje ćete prerasti. Ovo su isti profesionalni alati koje programeri u Googleu, Netflixu i onom indie studiju aplikacija koje volite koriste upravo sada. Osjećat ćete se kao pravi profesionalac koristeći ih! ```mermaid graph TD 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)"] + B --> C["🌐 Alati za razvoj preglednika
(Testiranje i ispravljanje pogrešaka)"] + C --> D["⚡ Komandna linija
(Automatizacija i alati)"] D --> E["📚 Dokumentacija
(Učenje i referenca)"] E --> F["🚀 Nevjerojatna web aplikacija!"] B -.-> G["🤖 AI asistent
(GitHub Copilot)"] - C -.-> H["📱 Testiranje uređaja
(Prilagodljiv dizajn)"] - D -.-> I["📦 Upravljanje paketima
(npm, yarn)"] + C -.-> H["📱 Testiranje uređaja
(Responzivni dizajn)"] + D -.-> I["📦 Upravitelji paketa
(npm, yarn)"] E -.-> J["👥 Zajednica
(Stack Overflow)"] style A fill:#fff59d @@ -505,106 +505,105 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Uređivači koda i IDE-ovi: vaši novi digitalni najbolji prijatelji +### Uređivači koda i IDE-ovi: Vaši novi digitalni najbolji prijatelji -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. +Razgovarajmo o uređivačima koda – oni će vam uskoro postati najdraža mjesta za druženje! Zamislite ih kao svoj osobni svetište za kodiranje gdje ćete provoditi većinu vremena stvarajući i usavršavajući svoje digitalne kreacije. -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! +Ali evo što je apsolutno magično kod modernih uređivača: oni nisu samo pomodni uređivači teksta. Oni su poput najsjajnijeg, najpodršnijeg mentora za kodiranje koji sjedi pored vas 24/7. Uhvate vaše tipfelere prije nego što ih primijetite, predlažu poboljšanja koja vas čine genijalcem, pomažu vam razumjeti što svaka linija koda radi, a neki od njih čak mogu predvidjeti što ćete upisati i ponuditi da vam dovrše misao! -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! +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 mislio na ovu funkciju koja radi upravo ono što trebaš?" Kao da imate čitača misli za kodnog prijatelja! -**Što ove uređivače čini nevjerojatnima?** +**Što ove uređivače čini tako nevjerojatnima?** -Moderni uređivači koda nude impresivan niz značajki dizajniranih za povećanje vaše produktivnosti: +Moderne uređivače koda nude impresivan niz značajki dizajniranih za povećanje vaše produktivnosti: | Značajka | Što radi | Zašto pomaže | |---------|--------------|--------------| -| **Isticanje sintakse** | Boji različite dijelove vašeg koda | Čini kod lakšim za čitanje i pronalazak grešaka | +| **Isticanje sintakse** | Boji različite dijelove vašeg koda | Olakšava čitanje i pronalaženje pogreš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 | +| **Alati za ispravljanje pogrešaka** | Pomaže pronaći i popraviti greške | Štedi sate traženja 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 vidjeti ove alate u akciji? Pogledajte ovaj [video Alati zanata](https://youtube.com/watch?v=69WJeXGBdxg) za sveobuhvatan pregled. +> 🎥 **Video resurs**: Želite vidjeti ove alate u akciji? Pogledajte ovaj [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) za cjelovit pregled. #### Preporučeni uređivači za web razvoj -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (besplatan) -- Najpopularniji među web programerima -- Izvrsna ekosustav proširenja +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Besplatno) +- Najpopularniji među web developerima +- Izvrsna ekstenzijska zajednica - 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) - pronalaženje tipfelera u kodu - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (plaćeni, besplatan za studente) -- Napredni alati za otklanjanje grešaka i testiranje +- **Must-have ekstenzije**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-pokretane sugestije 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) - Pronalaženje tipfelera u kodu + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Plaćeno, besplatno za studente) +- Napredni alati za ispravljanje grešaka i testiranje - Inteligentno dovršavanje koda -- Ugrađeno upravljanje verzija +- Ugrađeni sustav kontrole verzija -**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 +**IDE-ovi u oblaku** (Različite cijene) +- [GitHub Codespaces](https://github.com/features/codespaces) - Cijeli VS Code u pregledniku +- [Replit](https://replit.com/) - Izvrsno za učenje i dijeljenje koda +- [StackBlitz](https://stackblitz.com/) - Instantni razvoj full-stack web aplikacija -> 💡 **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-om – besplatan je, široko korišten u industriji i ima ogromnu zajednicu koja stvara korisne tutorijale i proširenja. -### Web preglednici: vaš tajni razvojni laboratorij +### Web preglednici: Vaša tajna razvojna laboratorija -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! +Dobro, pripremite se da vam se potpuno pomuti razum! Znate kako ste koristili preglednike za pregledavanje društvenih mreža i gledanje videa? Pa, ispostavilo se da su cijelo vrijeme skrivali ovu nevjerojatnu tajnu razvojnu laboratoriju, samo čekajući da je otkrijete! -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! +Svaki put kad desnim klikom miša kliknete na web stranicu i odaberete "Inspect Element" (Ispitaj element), otvarate skriveni svijet razvojnih alata koji su iskreno moćniji od nekog skupog softvera za koji sam prije plaćao stotine dolara. Kao da otkrivate da je vaša obična kuhinja skrivala profesionalnu kuhinjsku laboratoriju iza tajnog panela! +Prvi put kad mi je netko pokazao DevTools u pregledniku, proveo sam oko tri sata samo klikajući i govoreći: "ČEKAJ, I TO MOŽE?!" 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! -**Evo zašto su preglednici tvoje tajno oružje:** +**Evo zašto su preglednici tvoja tajna moć:** -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. +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 detaljne povratne informacije o performansama, pristupačnosti i potencijalnim problemima. -#### Alati za razvoj preglednika (DevTools) +#### Alati za razvoj u pregledniku (DevTools) -Moderni preglednici uključuju sveobuhvatne razvojne pakete: +Moderni preglednici uključuju sveobuhvatne razvojne alate: -| 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 | +| Kategorija alata | Što radi | Primjer uporabe | +|------------------|----------|-----------------| +| **Preglednik elemenata** | Pregled i uređivanje HTML/CSS-a u stvarnom vremenu | Podešavanje stila s trenutnim rezultatima | +| **Konzola** | Pregled poruka o greškama i testiranje JavaScripta | Debugiranje problema i eksperimentiranje s kodom | +| **Mrežni monitor** | Praćenje učitavanja resursa | Optimizacija performansi i vremena učitavanja | +| **Provjera pristupačnosti** | Testiranje inkluzivnog dizajna | Osiguranje da 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 +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Standardni 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 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 na svim glavnim preglednicima kako bi osigurali dosljedno korisničko iskustvo. +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Baziran na Chromiumu s Microsoftovim razvojnim resursima +> ⚠️ **Važan savjet za testiranje**: Uvijek testiraj svoje web stranice u više preglednika! Ono što savršeno radi u Chromeu možda izgleda drugačije u Safariju ili Firefoxu. Profesionalni developeri testiraju kroz sve glavne preglednike kako bi osigurali konzistentno korisničko iskustvo. -### Alati naredbenog retka: tvoje vrata u supermoći programera +### Alati naredbenog retka: tvoj ulaz u supermoći developera -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!" 😅 +Dobro, budimo potpuno iskreni oko naredbenog retka, jer želim da ovo čuješ od nekoga tko to zaista razumije. Kad sam ga prvi put vidio – samo ovaj zastrašujući crni ekran s bljeskajućim tekstom – doslovno sam mislio: "Ne, apsolutno ne! Ovo izgleda kao nešto iz hakera 80-ih, a ja definitivno nisam dovoljno pametan za ovo!" 😅 -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." +Ali evo što bih volio da mi je netko tada rekao, a što sada tebi govorim: naredbeni redak nije zastrašujuć – on je zapravo kao izravan razgovor s tvojim računalom. Zamislite ga kao razliku između naručivanja hrane preko složene aplikacije s fotografijama i jelovnicima (što je lijepo i jednostavno) i ulaska u omiljeni lokalni restoran gdje kuhar točno zna što voliš i može skuhati nešto savršeno samo ako kažeš "iznenadi me s nečim fantastičnim". -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! +Naredbeni redak je mjesto gdje developeri postaju apsolutni čarobnjaci. Upišeš nekoliko naizgled čarobnih riječi (dobro, to su samo naredbe, ali zvuče kao čarolija!), pritisneš enter i BOOM – kreirao si cijelu strukturu projekta, instalirao moćne alate iz cijelog svijeta ili objavio svoju aplikaciju na internetu da je milijuni ljudi vide. Kad jednom osjetiš tu moć, stvarno postaje zarazno! -**Zašto će naredbeni redak postati tvoj omiljeni alat:** +**Zašto će ti naredbeni redak postati omiljeni alat:** -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. +Iako su grafička sučelja odlična za mnoge zadatke, naredbeni redak briljira u automatizaciji, preciznosti i brzini. Mnogi razvojni alati rade uglavnom preko naredbenog retka, a učenje učinkovitog korištenja može dramatično poboljšati tvoju produktivnost. ```bash -# Korak 1: Kreirajte i navigirajte do direktorija projekta +# Korak 1: Kreirajte i pridružite se direktoriju projekta mkdir my-awesome-website cd my-awesome-website ``` -**Evo što ovaj kod radi:** -- **Stvara** novi direktorij nazvan "my-awesome-website" za tvoj projekt -- **Ulazi** u nedavno kreirani direktorij za početak rada +**Ovo radi ovaj kod:** +- **Kreira** novi direktorij pod nazivom "my-awesome-website" za tvoj projekt +- **Ulazi** u novo kreirani direktorij kako bi započeo s radom ```bash # Korak 2: Inicijalizirajte projekt s package.json @@ -616,10 +615,10 @@ npm install --save-dev @eslint/js ``` **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 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 +- **Inicijalizira** novi Node.js projekt s default postavkama pomoću `npm init -y` +- **Instalira** Vite kao moderan alat za brzu izradu i produkcijske buildove +- **Dodaje** Prettier za automatsko formatiranje koda i ESLint za provjere kvalitete koda +- **Koristi** `--save-dev` flag za označavanje ovih paketa kao razvojnih ovisnosti ```bash # Korak 3: Kreirajte strukturu projekta i datoteke @@ -630,27 +629,27 @@ echo 'My Site

Hello Wo npx vite ``` -**U gore navedenom smo:** +**Iz navedenog smo:** - **Organizirali** projekt stvaranjem zasebnih mapa za izvorni kod i resurse - **Generirali** osnovnu HTML datoteku s pravilnom strukturom dokumenta -- **Pokrenuli** Vite razvojni server za živo ponovno učitavanje i zamjenu modula u hodu +- **Pokrenuli** Vite razvojni server za live reload i hot module replacement -#### Bitni alati naredbenog retka za web razvoj +#### Ključni alati naredbenog retka za web razvoj | Alat | Svrha | Zašto ti treba | |------|-------|----------------| -| **[Git](https://git-scm.com/)** | Kontrola verzija | Praćenje promjena, suradnja s drugima, sigurnosna kopija rada | +| **[Git](https://git-scm.com/)** | Kontrola verzija | Praćenje promjena, suradnja, backup 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 | +| **[Vite](https://vitejs.dev/)** | Alat za build i razvojni server | Ultra 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 | Drži tvoj kod dosljedno formatiranim i čitljivim | +| **[Prettier](https://prettier.io/)** | Formatiranje koda | Održavanje dosljednog i čitljivog formata koda | -#### Platformno specifične opcije +#### Opcije specifične za platformu **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan, bogat značajkama terminal +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan terminal s puno mogućnosti - **[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 +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - Tradicionalni Windows naredbeni redak **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ugrađena terminal aplikacija @@ -660,126 +659,125 @@ npx vite - **[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 -> 💻 = Pretinstalirano u operativnom sustavu - -> 🎯 **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. +> 💻 = unaprijed instalirano u operativnom sustavu +> 🎯 **Put učenja**: Počni s osnovnim naredbama poput `cd` (promjena direktorija), `ls` ili `dir` (popis datoteka) i `mkdir` (kreiraj mapu). Vježbaj s modernim naredbama poput `npm install`, `git status` i `code .` (otvara trenutni direktorij u VS Code). Kad se osjetiš ugodnije, prirodno ćeš usvojiti naprednije naredbe i tehnike automatizacije. ### Dokumentacija: tvoj uvijek dostupan mentor za učenje -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! +Ok, evo jedne male tajne koja će ti pomoći da se osjećaš puno bolje kao početnik: čak i najiskusniji developeri ogroman dio svog vremena provode čitajući dokumentaciju. I to nije zato što ne znaju što rade – zapravo je znak mudrosti! -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! +Razmišljaj o dokumentaciji kao o pristupu najstrpljivijim, najstručnijim učiteljima na svijetu koji su dostupni 24/7. Zapneš na problem u 2 ujutro? Dokumentacija je tamo s toplim virtualnim zagrljajem i točno odgovorom koji trebaš. Želiš naučiti o nekoj novoj zanimljivoj značajci o kojoj svi pričaju? Dokumentacija je tu s primjerima korak po korak. Pokušavaš razumjeti zašto nešto radi onako kako radiš? Pogodi što – dokumentacija će ti to objasniti na način koji će ti konačno kliknuti! -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. +Evo nešto što mi je potpuno promijenilo pogled na stvari: svijet web razvoja se nevjerojatno brzo mijenja i nitko (doslovno nitko!) ne pamti sve napamet. Gledao sam seniore s 15+ godina iskustva kako gledaju osnovnu sintaksu, i znaš što? To nije sramotno – to je pametno! Ne radi se o savršenom pamćenju, nego o znanju gdje brzo pronaći pouzdane odgovore i kako ih primijeniti. -**Prava magija događa se ovdje:** +**Evo gdje se događa prava magija:** -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. +Profesionalni developeri veliki dio svog vremena provode čitajući dokumentaciju – ne zato što ne znaju, nego zato što se svijet web razvoja toliko brzo mijenja da je stalno učenje nužno. Dobra dokumentacija ti pomaže razumjeti ne samo *kako* nešto koristiti, nego *zašto* i *kada* to koristiti. -#### Neophodni izvori dokumentacije +#### Bitni izvori dokumentacije **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Zlatni standard za dokumentaciju web tehnologija +- Zlato standard za web tehnologije - Sveobuhvatni vodiči za HTML, CSS i JavaScript - Uključuje informacije o kompatibilnosti preglednika -- Sadrži praktične primjere i interaktivne demonstracije +- Sadrži praktične primjere i interaktivne demo-e **[Web.dev](https://web.dev)** (od Googlea) - Najbolje prakse modernog web razvoja - Vodiči za optimizaciju performansi -- Načela pristupačnosti i uključivog dizajna +- Pristupačnost i principi inkluzivnog dizajna - Studije slučaja iz stvarnih projekata **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Resursi za razvoj u pregledniku Edge +- Resursi za razvoj u Edge pregledniku - Vodiči za progresivne web aplikacije -- Uvidi u razvoj za više platformi +- Uvidi u razvoj za različite platforme **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturirani programi učenja +- Strukturirani kurikulumi učenja - 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 efikasno nju koristiti. Označi često korištene reference i vježbaj korištenje funkcija pretraživanja za brzo pronalaženje specifičnih informacija. +> 📚 **Strategija učenja**: Nemoj pokušavati memorirati dokumentaciju – umjesto toga, nauči kako je efikasno pretraživati. Spremi često korištene reference u bookmarke i vježbaj upotrebu tražilica za brzi pronalazak specifičnih informacija. -### 🔧 **Provjera ovladavanja alatima: Što ti rezonira?** +### 🔧 **Provjera majstorstva alata: Što te najviše zanima?** -**Uzmite trenutak da razmisliš:** -- 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? +**Odvoji trenutak da razmisliš:** +- Koji alat jedva čekaš isprobati prvi? (Nema pogrešnog odgovora!) +- Je li ti naredbeni redak i dalje zastrašujuć ili si sada znatiželjan? +- Možeš li zamisliti korištenje DevTools u pregledniku za zavirivanje iza kulisa svojih omiljenih web stranica? ```mermaid -pie title "Vrijeme koje programeri provode s alatima" +pie title "Vrijeme koje programer provodi s alatima" "Uređivač koda" : 40 "Testiranje u pregledniku" : 25 "Naredbeni redak" : 15 - "Čitanje dokumentacije" : 15 + "Čitanje dokumenata" : 15 "Otklanjanje pogrešaka" : 5 ``` -> **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! +> **Zanimljiva spoznaja**: Većina developera provede oko 40% vremena u svom ureñivaču koda, ali primjeti koliko vremena ide na testiranje, učenje i rješavanje problema. Programiranje nije samo pisanje koda – to je stvaranje iskustava! -✅ **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. +✅ **Razmisli o ovome**: Evo jedne zanimljive misli – kako misliš da se alati za izradu web stranica (razvoj) razlikuju od alata za dizajniranje njihovog izgleda (dizajn)? To je kao razlika između arhitekta koji dizajnira prelijepu kuću i izvođača koji je zapravo gradi. Oba su ključna, ali trebaju različite alate! Ovako razmišljanje će ti stvarno pomoći vidjeti širu sliku kako web stranice oživljavaju. ## Izazov GitHub Copilot Agenta 🚀 -Koristi Agent mod za dovršetak sljedećeg izazova: +Koristi Agent način rada da dovršiš sljedeći izazov: -**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. +**Opis:** Istraži mogućnosti modernog uređivača koda ili IDE-a i pokaži kako može poboljšati tvoj radni proces kao web developera. -**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. +**Zadatak:** Izaberi uređivač koda ili IDE (npr. Visual Studio Code, WebStorm ili cloud-based IDE). Nabroji tri značajke ili ekstenzije koje ti pomažu pisati, debugirati ili održavati kod učinkovitije. Za svaku daj kratko objašnjenje kako poboljšava tvoj radni tijek. --- ## 🚀 Izazov -**Dobro, detektive, spreman za svoj prvi slučaj?** +**Dakle, detektive, jesi li spreman za svoj prvi slučaj?** -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! +Sad kad imaš ovu fantastičnu osnovu, pripremio sam avanturu koja će ti pomoći vidjeti koliko je programerski svijet zaista raznolik i fascinantan. I slušaj – ovo nije o pisanju koda još, pa bez pritiska! Zamislite sebe kao detektiva programskih jezika na uzbudljivom prvom slučaju! **Tvoja misija, ako je prihvatiš:** -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! +1. **Postani istraživač jezika**: Izaberi tri programska jezika iz potpuno različitih svjetova – možda jedan za web, jedan za mobilne aplikacije i jedan za znanost i podatke. Pronađi primjere iste jednostavne zadaće napisane u svakom jeziku. Obećajem da ćeš biti zapanjen koliko različito mogu izgledati dok rade isto! -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! +2. **Otkrij njihove priče o nastanku**: Što svaki jezik čini posebnim? Evo kul činjenice – svaki programski jezik nastao je jer je netko mislio: "Znaš što? Mora postojati bolji način za rješavanje ovog problema." Možeš li otkriti koje su to bile potrebe? Neke od tih priča su zaista fascinantne! -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! +3. **Upoznaj zajednice**: Pogledaj koliko su svaka zajednica jezika gostoljubiva i strastvena. Neke imaju milijune developera koji dijele znanje i pomažu jedni drugima, dok su druge manje, ali izuzetno povezane i podržavajuće. Voljet ćeš vidjeti različite "ličnosti" koje zajednice imaju! -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. +4. **Prati svoj instinkt**: Koji ti jezik trenutno najviše "leži"? Ne brini o savršenom izboru – jednostavno slušaj svoj osjećaj! 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š biti iznenađen koje su tehnologije iza Instagrama, Netflixa ili one mobilne igre od koje ne možeš odustati! +**Bonus detektivski zadatak**: Pokušaj saznati koje velike web stranice ili aplikacije koriste svaki od tih jezika. Garantiram ti da će te iznenaditi što pokreće Instagram, Netflix ili onu mobilnu igru koju ne možeš prestati igrati! -> 💡 **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! +> 💡 **Zapamti**: Ne pokušavaš danas postati stručnjak ni u jednom od tih jezika. Samo upoznaješ "kvart" prije nego što odlučiš gdje ćeš se nastaniti. Uzmi si vremena, zabavi se i pusti znatiželju da te vodi! -## Proslavimo ono što si otkrio! +## Proslavimo što si otkrio! -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! +Vau, upio si toliko nevjerojatnih informacija danas! Stvarno sam uzbuđen vidjeti koliko ti je ovog čudesnog putovanja ostalo u sjećanju. I sjeti se – ovo nije test u kojem moraš sve savršeno znati. Ovo je više kao proslava svega zabavnog što si naučio o ovom fascinantnom svijetu u koji ćeš uskoro zakoračiti! -[Posjeti kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) +[Pogledaj kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) -## Pregled & Samostalno učenje +## Pregled i samostalno učenje -**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! +**Uzmi si vremena za istraživanje i zabavu!** +Obuhvatili ste puno toga danas, i to je nešto na što trebate biti ponosni! Sada dolazi zabavni dio – istraživanje tema koje su probudile vašu znatiželju. Sjetite se, ovo nije domaća zadaća – ovo je avantura! **Zaronite dublje u ono što vas zanima:** **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. +- Posjetite službene web stranice 2-3 jezika koji su vam zapeli za oko. Svaki ima svoju osobnost i priču! +- Isprobajte neke online alate za kodiranje poput [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 vaš omiljeni jezik nastao. Ozbiljno, neke od tih priča o nastanku su fascinantne i pomoći će vam shvatiti zašto jezici funkcioniraju onako kako funkcioniraju. -**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. +**Upoznajte se sa svojim novim alatima:** +- Preuzmite Visual Studio Code ako ga još nemate – besplatan je i sigurno će vam se svidjeti! +- Provedite nekoliko minuta pregledavajući Marketplace dodataka. To je poput trgovine aplikacijama za vaš uređivač koda! +- Otvorite alati za razvoj u svom pregledniku i slobodno klikajte. Ne brinite ako sve ne razumijete – samo se upoznajte s onim što je dostupno. **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! +- Pratite neke zajednice programera na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ili [GitHub](https://github.com/). Programerska zajednica je izuzetno gostoljubiva prema početnicima! +- Pogledajte neke videozapise za početnike na YouTubeu. Postoji toliko sjajnih kreatora koji se sjećaju kako je to počinjati. +- Razmislite o pridruživanju lokalnim meetupovima ili online zajednicama. Vjerujte mi, programeri vole pomagati novajlijama! -> 🎯 **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! +> 🎯 **Slušajte, želim da zapamtite ovo**: Ne očekuje se od vas da preko noći postanete čarobnjak za kodiranje! Sada se tek upoznajete s ovim nevjerojatnim novim svijetom kojem ćete pripadati. Uzmite si vremena, uživajte u putovanju i sjetite se – svaki programer kojeg cijenite jednom je sjedio točno tamo gdje ste vi sada, osjećajući uzbuđenje i možda malo preplavljenosti. To je potpuno normalno i znak je da radite kako treba! @@ -787,70 +785,70 @@ Pokrili ste puno toga danas i na to možete biti ponosni! Sada dolazi zabavni di [Reading the Docs](assignment.md) -> 💡 **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ć). +> 💡 **Mali poticaj za vaš zadatak**: Jako bih volio vidjeti kako istražujete neke alate koje još nismo obradili! Preskočite uređivače, preglednike i alate naredbenog retka o kojima smo već razgovarali – postoji cijeli nevjerojatan svemir sjajnih razvojnih alata koji samo čekaju da ih otkrijete. Pronađite one koji se aktivno održavaju i imaju živahne, korisne zajednice (oni obično imaju najbolje tutorijale i najpodržavajuće ljude kad se neizbježno zaglavite i trebate prijateljsku ruku). --- -## 🚀 Vaša vremenska linija programerskog putovanja +## 🚀 Vaš vremenski plan 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 +### ⚡ **Što možete napraviti u sljedećih 5 minuta** +- [ ] Označiti 2-3 web stranice programskih jezika koje su vam zapela za oko +- [ ] Preuzeti Visual Studio Code ako ga još niste instalirali - [ ] 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** +### ⏰ **Što možete postići u sljedećem satu** - [ ] 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) +- [ ] Započeti detektivski posao istraživanja programskog jezika (prema izazovu) ### 📅 **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 +- [ ] Pratiti 5 programera ili razvojnih računa 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 +- [ ] Pročitati jedan blog post programera o nečijem putovanju kroz kodiranje +- [ ] Pridružiti se virtualnom meetup-u ili pogledati predavanje o programiranju +- [ ] Započeti učenje svog odabranog jezika putem online tutorijala ### 🗓️ **Vaša mjesečna transformacija** -- [ ] Izraditi svoj prvi mali projekt (čak i jednostavna web stranica se računa!) +- [ ] Izgraditi svoj prvi mali projekt (čak i jednostavna web stranica vrijedi!) - [ ] 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 +- [ ] Mentorirati nekoga tko tek počinje s programiranjem +- [ ] Napraviti svoju web stranicu portfelja programera +- [ ] Povezati se s lokalnim programerskim zajednicama ili grupama za učenje +- [ ] Početi planirati svoj sljedeći ciljani cilj učenja -### 🎯 **Završna refleksija** +### 🎯 **Završni pregled refleksije** **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? +- Što vas je danas najviše uzbudilo u programiranju? +- Koji alat ili koncept želite istražiti prvo? +- Kako se osjećate povodom početka ovog programerskog putovanja? +- Koje pitanje biste sada postavili nekom programeru? ```mermaid journey title Vaše putovanje izgradnje samopouzdanja section Danas - Radoznao: 3: You + Znatiželjan: 3: You Preplavljen: 4: You Uzbuđen: 5: You section Ovaj tjedan - Istražujem: 4: You - Učim: 5: You - Povezujem se: 4: You + Istraživanje: 4: You + Učenje: 5: You + Povezivanje: 4: You section Sljedeći mjesec - Gradim: 5: You - Samopouzdan: 5: You - Pomažem drugima: 5: You + Izgradnja: 5: You + Samouvjeren: 5: You + Pomoć drugima: 5: You ``` -> 🌟 **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! 🎉 +> 🌟 **Zapamtite**: Svaki stručnjak je jednom bio početnik. Svaki senior developer se jednom osjećao točno kao vi sada – uzbuđeno, možda malo preplavljeno i definitivno znatiželjno o onome što je moguće. U izvrsnom ste društvu, i ovo putovanje će biti nevjerojatno. Dobrodošli u prekrasan svijet programiranja! 🎉 --- -**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. +**Izjava o odricanju odgovornosti**: +Ovaj dokument preveden je pomoću AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati službenim izvorom. Za ključne informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni 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/AGENTS.md b/translations/hr/AGENTS.md index f738a56dd..0f6405d99 100644 --- a/translations/hr/AGENTS.md +++ b/translations/hr/AGENTS.md @@ -2,46 +2,46 @@ ## Pregled projekta -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. +Ovo je edukativni repozitorij za podučavanje temelja web razvoja početnicima. Kurikulum je obuhvatan tečaj u trajanju od 12 tjedana koji je razvijen od strane Microsoft Cloud Advocatesa, a sadrži 24 praktične lekcije pokrivajući JavaScript, CSS i HTML. ### Ključne komponente -- **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 +- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima +- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant +- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (prije/poslije lekcije) +- **Podrška za više jezika**: Automatski prijevodi za 50+ jezika preko GitHub Actions - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte) ### Arhitektura -- Obrazovni repozitorij s lekcijsko-temeljnom strukturom -- Svaka mapa lekcije sadrži README, primjere koda i rješenja -- 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 +- Edukativni repozitorij s organizacijom po lekcijama +- Svaka mapa lekcije sadrži README, primjere koda i rješenja +- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija) +- Sustav za prijevod koristeći GitHub Actions (co-op-translator) +- Dokumentacija dostupna preko Docsify i kao PDF ## Komande za postavljanje -Ovaj repozitorij je prvenstveno za konzumaciju obrazovnog sadržaja. Za rad sa specifičnim projektima: +Ovaj repozitorij je prvenstveno namijenjen za konzumaciju edukativnog sadržaja. Za rad na specifičnim projektima: -### Postavljanje glavnog repozitorija +### Glavno postavljanje repozitorija ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Postavljanje Quiz aplikacije (Vue 3 + Vite) +### Postavljanje Quiz app (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Pokreni razvojni poslužitelj +npm run dev # Pokreni razvojni server npm run build # Izgradi za produkciju npm run lint # Pokreni ESLint ``` -### Bankarski projekt API (Node.js + Express) +### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api @@ -51,15 +51,15 @@ npm run lint # Pokreni ESLint npm run format # Formatiraj s Prettierom ``` -### Projekti proširenja preglednika +### Projekti browser ekstenzija ```bash cd 5-browser-extension/solution npm install -# Slijedite upute za učitavanje proširenja specifična za preglednik +# Slijedite upute za učitavanje proširenja specifične za preglednik ``` -### Projekti svemirske igre +### Projekti Space game ```bash cd 6-space-game/solution @@ -76,128 +76,128 @@ pip install openai python api.py ``` -## Radni tok razvoja +## Razvojni tijek rada ### Za suradnike na sadržaju -1. **Forkajte repozitorij** na svoj GitHub račun -2. **Klonirajte svoj fork** lokalno -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 +1. **Forkajte repozitorij** na svoj GitHub račun +2. **Klonirajte svoj fork** lokalno +3. **Napravite novu granu** za svoje promjene +4. Izvršite izmjene u sadržaju lekcija ili primjerima koda +5. Testirajte promjene koda u relevantnim direktorijima projekata +6. Podnesite pull request slijedeći smjernice za doprinos ### Za učenike -1. Forkajte ili klonirajte repozitorij -2. Prolazite kroz direktorije lekcija redom -3. Čitajte README datoteke za svaku lekciju -4. Riješite pred-lekcijske kvizove na https://ff-quizzes.netlify.app/web/ -5. Radite kroz primjere koda u mapama lekcija -6. Dovršite zadatke i izazove -7. Riješite post-lekcijske kvizove +1. Forkajte ili klonirajte repozitorij +2. Krenite redom kroz mape lekcija +3. Pročitajte README datoteke za svaku lekciju +4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/ +5. Prođite kroz primjere koda u mapama lekcija +6. Završite zadatke i izazove +7. Riješite kvizove nakon lekcije -### Razvoj uživo +### Razvoj u stvarnom vremenu -- **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000) -- **Quiz aplikacija**: Pokrenite `npm run dev` u direktoriju quiz-app -- **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte +- **Dokumentacija**: Pokrenite `docsify serve` u root direktoriju (port 3000) +- **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju +- **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 aplikacije +### Testiranje Quiz app ```bash cd quiz-app -npm run lint # Provjerite probleme sa stilom koda -npm run build # Provjerite uspjeh izgradnje +npm run lint # Provjerite ima li problema sa stilom koda +npm run build # Provjerite je li izgradnja uspješna ``` -### Testiranje Bank API-ja +### Testiranje Bank API ```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 pogrešaka +npm run lint # Provjeri probleme sa stilom koda +node server.js # Provjeri da li se server pokreće bez grešaka ``` -### Općeniti pristup testiranju +### Opći pristup testiranju -- 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 +- Ovo je edukativni repozitorij bez potpune automatizirane testne pokrivenosti +- Ručno testiranje fokusira se na: + - Primjere koda da se izvršavaju bez grešaka + - Da linkovi u dokumentaciji rade ispravno + - Da se projekti mogu uspješno buildati - Primjere koji slijede najbolje prakse -### Provjere prije predaje +### Provjere prije podnošenja -- Pokrenite `npm run lint` u direktorijima s package.json -- Provjerite valjanost markdown poveznica -- Testirajte primjere koda u pregledniku ili Node.js -- Provjerite da prijevodi održavaju pravilnu strukturu +- Pokrenite `npm run lint` u direktorijima s package.json +- Provjerite valjanost markdown linkova +- Testirajte primjere koda u pregledniku ili Node.js +- Provjerite održavanje strukture u prijevodima -## Smjernice za stil koda +## Smjernice za stil kodiranja ### JavaScript -- Koristite modernu ES6+ sintaksu -- 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 pomoću Prettier gdje je konfigurirano +- Koristite modernu ES6+ sintaksu +- Slijedite standardne ESLint konfiguracije iz projekata +- Koristite smisleno imenovanje varijabli i funkcija radi bolje edukativne jasnoće +- Dodajte komentare koji objašnjavaju koncepte za učenike +- Formatirajte kod koristeći Prettier gdje je konfigurirano ### HTML/CSS -- Semantički HTML5 elementi -- Principi responzivnog dizajna -- Jasne konvencije imenovanja klasa +- Semantički HTML5 elementi +- Principi responzivnog dizajna +- Jasne konvencije imenovanja klasa - Komentari koji objašnjavaju CSS tehnike za učenike ### Python -- Smjernice stilskog vodiča PEP 8 -- Jasni, obrazovni primjeri koda -- Tipovi (type hints) gdje pomažu u učenju +- Smjernice za stil PEP 8 +- Jasni, edukativni primjeri koda +- Tipizacija tamo gdje je korisna za učenje ### Markdown dokumentacija -- Jasna hijerarhija naslova -- Blokovi koda s označenim jezikom -- Poveznice na dodatne resurse -- Snimke zaslona i slike u direktorijima `images/` +- Jasna hijerarhija naslova +- Blokovi koda s označenim jezikom +- Linkovi na dodatne izvore +- Screenshoti i slike u mapama `images/` - Alt tekst za slike radi pristupačnosti ### Organizacija datoteka -- 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 lekcijskim `images/` mapama +- Lekcije numerirane sekvencijalno (1-getting-started-lessons, 2-js-basics, itd.) +- Svaki projekt ima mape `solution/` i često `start/` ili `your-work/` +- Slike pohranjene u lekcijski specifičnim mapama `images/` - Prijevodi u strukturi `translations/{language-code}/` -## Izgradnja i postavljanje +## Izrada i deploy -### Postavljanje Quiz aplikacije (Azure Static Web Apps) +### Deploy Quiz app (Azure Static Web Apps) -quiz-app je konfiguriran za Azure Static Web Apps: +quiz-app je podešen za Azure Static Web Apps deployment: ```bash cd quiz-app npm run build # Stvara mapu dist/ -# Objavljuje putem GitHub Actions tijeka rada pri pushu na main +# Postavlja putem GitHub Actions tijeka rada pri pushanju na main ``` -Konfiguracija Azure Static Web Apps: -- **Lokacija aplikacije**: `/quiz-app` -- **Izlazna lokacija**: `dist` -- **Radni tijek**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Konfiguracija Azure Static Web Apps: +- **Lokacija aplikacije**: `/quiz-app` +- **Lokacija izlaza**: `dist` +- **Workflow**: `.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 docsa +npm run convert # Generiraj PDF iz docsa ``` ### Docsify dokumentacija @@ -207,76 +207,76 @@ npm install -g docsify-cli # Instalirajte Docsify globalno docsify serve # Poslužite na localhost:3000 ``` -### Izgradnja specifičnih projekata +### Build specifični za projekte -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 +Svaki direktorij projekta može imati svoj build proces: +- Vue projekti: `npm run build` kreira produkcijske bundleove +- Statički projekti: Nema build koraka, služenje datoteka direktno ## Smjernice za pull requestove ### Format naslova -Koristite jasne, opisne naslove koji označavaju područje promjene: -- `[Quiz-app] Dodaj novi kviz za lekciju X` -- `[Lesson-3] Ispravi tipografsku pogrešku u terrarium projektu` -- `[Translation] Dodaj španjolski prijevod za lekciju 5` +Koristite jasne, opisne naslove koji označavaju područje izmjene: +- `[Quiz-app] Dodaj novi kviz za lekciju X` +- `[Lesson-3] Ispravi tipfelere u terrarium projektu` +- `[Translation] Dodaj španjolski prijevod za lekciju 5` - `[Docs] Ažuriraj upute za postavljanje` -### Obavezne provjere +### Potrebne provjere -Prije slanja PR-a: +Prije podnošenja PR-a: -1. **Kvaliteta koda**: - - Pokrenite `npm run lint` u zahvaćenim projektima - - Ispravite sve lint pogreške i upozorenja +1. **Kvaliteta koda**: + - Pokrenite `npm run lint` u pogođenim projekt direktorijima + - Ispravite sve lint greške i upozorenja -2. **Provjera gradnje**: - - Pokrenite `npm run build` ako je primjenjivo - - Osigurajte da nema grešaka u gradnji +2. **Provjera builda**: + - Pokrenite `npm run build` ako je primjenjivo + - Osigurajte da nema build grešaka -3. **Provjera poveznica**: - - Testirajte sve markdown poveznice - - Provjerite referencirane slike +3. **Provjera linkova**: + - Testirajte sve markdown linkove + - Provjerite da reference na slike rade -4. **Pregled sadržaja**: - - Provjerite pravopis i gramatiku - - Osigurajte da su primjeri koda ispravni i obrazovni - - Provjerite da prijevodi zadržavaju izvorno značenje +4. **Pregled sadržaja**: + - Provjerite pravopis i gramatiku + - Potvrdite da su primjeri koda točni i edukativni + - Osigurajte da prijevodi zadržavaju izvornu poruku ### Zahtjevi za doprinos -- 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 broj/e problema u opisu PR-a ako je primjenjivo +- Prihvatite 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 issue-a u opisu PR-a ako je primjenjivo ### Proces pregleda -- 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 +- PR-ove pregledavaju maintaineri i zajednica +- Prioritet je edukativna jasnoća +- Primjeri koda trebaju slijediti aktualne najbolje prakse +- Prijevodi se pregledavaju radi točnosti i prikladnosti kulture ## Sustav prijevoda ### Automatski prijevod -- Koristi GitHub Actions s co-op-translator workflow -- Automatski prevodi na više od 50 jezika -- Izvorne datoteke u glavnim direktorijima -- Prevedene datoteke u `translations/{language-code}/` direktorijima +- Koristi GitHub Actions s co-op-translator workflowom +- Automatski prevodi na 50+ jezika +- Izvorne datoteke u glavnim direktorijima +- Prevedene datoteke u mapama `translations/{language-code}/` ### Dodavanje ručnih poboljšanja prijevoda -1. Pronađite datoteku u `translations/{language-code}/` -2. Unesite poboljšanja dok održavate strukturu -3. Osigurajte da primjeri koda ostanu funkcionalni -4. Testirajte sve lokalizirane kviz sadržaje +1. Pronađite datoteku u `translations/{language-code}/` +2. Napravite poboljšanja dok čuvate strukturu +3. Osigurajte da primjeri koda ostaju funkcionalni +4. Testirajte lokalizirani kviz sadržaj ### Metapodaci prijevoda -Prevedene datoteke sadrže zaglavlje metapodataka: +Prevedene datoteke sadrže zaglavlje metapodataka: ```markdown -**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. +**Odricanje**: +Ovaj dokument preveden je pomoću AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku smatra se službenim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda. \ No newline at end of file diff --git a/translations/sl/.co-op-translator.json b/translations/sl/.co-op-translator.json index 4078b8fd0..4894ae487 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T15:12:27+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T23:36:11+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-03-06T15:16:09+00:00", + "translation_date": "2026-03-27T23:39:15+00:00", "source_file": "AGENTS.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 f3a70e51c..512dd1a36 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 +# Uvod v programske jezike in sodobna orodja za razvijalce -Ž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! +Živjo, bodoči razvijalec! 👋 Lahko ti povem nekaj, kar mi še vedno vsak dan privabi mravljince? Kmalu boš odkril, da programiranje ni zgolj o računalnikih – temveč o pravih supermočeh, s katerimi uresničiš svoje najbolj divje ideje! -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! +Poznaš tisti trenutek, ko uporabljaš svojo najljubšo aplikacijo in vse enostavno perfektno funkcionira? Ko pritisneš gumb in se zgodi nekaj povsem čarobnega, da si rečeš: "o, kako pa so TO naredili?" No, nekdo prav takšen kot ti – verjetno sedi v svoji najljubši kavarni ob 2. zjutraj s tretjo espreso – je napisal kodo, ki je ustvarila to magijo. In zdaj pa nekaj, kar ti bo odpihnilo misli: do konca tega poglavja ne boš samo razumel/a, kako so to naredili, ampak boš kar čutil/a željo, da poskusiš sam/a! -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! +Vem, da ti programiranje mogoče zdaj deluje zastrašujoče. Ko sem začel/a, sem res mislil/a, da moraš biti nek matematični genij ali da programiraš že od pete leta starosti. Ampak nekaj, kar je popolnoma spremenilo moj pogled: programiranje je natanko kot učenje pogovora v novem jeziku. Začeneš z "živelj" in "hvala", potem naročiš kavo in predno se zavedaš, vodiš globoke filozofske debate! Razlika je v tem, da se tokrat pogovarjaš z računalniki, ki so res najstrapžljivejši sogovorniki, kar jih lahko imaš – nikoli ne sodijo tvoje napake in vedno so navdušeni, da poskusiš še enkrat! -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! +Danes bomo raziskovali neverjetna orodja, ki sodobni spletni razvoj naredijo ne samo mogoč, ampak res zasvojen. Govorim o točno tistih urejevalnikih, brskalnikih in potekih dela, ki jih vsak dan uporabljajo razvijalci pri Netflixu, Spotifyju in tvoji najljubši indie aplikaciji. In najboljši del? Večina teh profesionalnih orodij je popolnoma brezplačna! ![Intro Programming](../../../../translated_images/sl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) @@ -22,140 +22,140 @@ journey Urejevalniki kode: 4: You Brskalniki in orodja za razvijalce: 5: You Ukazna vrstica: 3: You - section Vadite - Jezikovni detektiv: 4: You + section Vadba + Detektiv jezika: 4: You Raziščite orodja: 5: You - Povezava skupnosti: 5: You + Povezovanje skupnosti: 5: You ``` ## Poglejmo, kaj že veš! -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! +Preden skočimo v zabavne stvari, me zanima – kaj že veš o tem svetu programiranja? In poslušaj, če gledaš ta vprašanja in misliš "o tem nimam popolnoma nobene predstave," to ni samo v redu, to je popolno! To pomeni, da si na pravem mestu. Razmišljaj o tem kvizu kot o raztezanju pred vadbo – samo ogrevamo možganske mišice! -[Reši kviz pred lekcijo](https://ff-quizzes.netlify.app/web/) +[Reši predhodni kviz](https://ff-quizzes.netlify.app/web/) -## Pustolovščina, na katero se odpravljava skupaj +## Pustolovščina, na katero bomo šli 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: +V redu, res sem navdušen/a nad tem, kar bomo danes raziskovali! Resno, rad/a bi videl/a tvoj obraz, ko ti bodo nekatere od teh konceptov kliknili. Tukaj je neverjetno potovanje, ki ga ustvarjamo skupaj: -- **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! +- **Kaj programiranje pravzaprav je (in zakaj je najkul stvar vseh časov!)** – 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 popolno izbira tvoje Netflix priporočila +- **Programski jeziki in njihove čudovite osebnosti** – Predstavljaj si, da prideš na zabavo, kjer ima vsak povsem drugačne supermoči in načine reševanja problemov. Tako je svet programskih jezikov, in ti jih boš naravnost oboževal/a! +- **Temeljni gradniki, ki ustvarijo digitalno magijo** – Predstavljaj si jih kot najkreativnejši LEGO komplet. Ko enkrat razumeš, kako se ti deli povezujejo, boš uvidel/a, da lahko gradiš prav karkoli si tvoja domišljija zamisli +- **Profesionalna orodja, ki ti bodo dala občutek, kot da si ravnokar prejel/a čarovniško palico** – Ne pretiravam – ta orodja ti bodo res dala občutek supermoči, najboljši del? To so ista orodja, ki jih uporabljajo strokovnjaki! -> 💡 **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! +> 💡 **Tukaj je nekaj:** Danes si niti ne predstavljaj, da moraš vse zapomniti! Trenutno želim le, da začutiš iskro navdušenja nad mogočim. Podrobnosti se bodo naravno utrdile, ko bomo skupaj vadili – tako se dejansko uči! > 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 pa je pravzaprav *programiranje*? +## Kaj torej točno *je* programiranje? -V redu, lotimo se milijonskega vprašanja: kaj je programiranje, resnično? +V redu, lotimo se milijonskega vprašanja: kaj programiranje pravzaprav je? -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? 😅 +Povedal/a ti bom zgodbo, ki je popolnoma spremenila moj pogled. Prejšnji teden sem poskušal/a mami razložiti, kako uporabljati naš novi pametni daljinec. Ujel/a sem se, da govorim nekaj takega: "Pritisni rdeči gumb, ampak ne tistega velikega rdečega, malega rdečega na levi... ne, tvoj drugi levi... zdaj ga zadrži dve sekundi, ne eno, ne tri..." Zveni znano? 😅 -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). +To je programiranje! Je umetnost dajanja izjemno podrobnih, korak za korakom navodil nečemu, kar je zelo močno, a potrebuje popolnoma natančna navodila. Razlika je, da ne razlagaš mami (ki lahko vpraša "kateri rdeči gumb?!"), temveč računalniku (ki naredi točno to, kar mu rečeš, tudi če to, kar si rekel/a, ni najbolj točno to, kar si mislil/a). -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. +Najbolj me je šokiralo, ko sem se to naučil/a: računalniki so v svoji jedrni biti pravzaprav zelo preprosti. Razumejo samo dve stvari – 1 in 0, kar je v bistvu "da" in "ne" ali "vklopljeno" in "izklopljeno". To je vse! Ampak tukaj se zgodi čarovnija – ni treba, da govorimo v 1 in 0, kot da smo v Matriksi. Tukaj na pomoč pridejo **programski jeziki**. So kot najboljši prevajalec na svetu, ki vzame tvoje povsem normalne človeške misli in jih pretvori v računalniški jezik. -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! +In nekaj, kar mi še vedno vsak jutro povzroča mravljince: dobesedno *vse* digitalno v tvojem življenju se je začelo z nekom prav takšnim kot ti, verjetno v pižami s skodelico kave, kako tipka kodo na prenosniku. Ta Instagram filter, ki te naredi brezhibnega? Nekdo je to zakodiral. Priporočilo, ki te je spodbudilo k tvoji novi najljubši pesmi? Razvijalec je napisal ta algoritem. Aplikacija, ki ti pomaga deliti račune za večerjo s prijatelji? Ja, nekdo je pomislil "to je nadležno, sigurno lahko to popravim" in potem... je naredil! -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? +Ko se naučiš programirati, ne pridobiš samo nove veščine – postaneš del te neverjetne skupnosti reševalcev problemov, ki preživljajo dneve z vprašanjem: "Kaj če bi lahko zgradil/a nekaj, kar nekoga naredi dan malo boljši?" Resno, ali lahko kaj še bolj kul obstaja? -✅ **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. +✅ **Zabavna dejstva**: Tukaj imaš nekaj super zanimivega, ko boš imel/a čas – kdo je bil prvi računalniški programer na svetu? Malce ti napovem: mogoče ni, koga pričakuješ! Zgodba tega človeka je naravnost fascinantna in pokaže, da je programiranje vedno bilo o ustvarjalnem reševanju problemov in razmišljanju izven okvirjev. ### 🧠 **Čas za preverjanje: Kako se počutiš?** **Vzemi trenutek za razmislek:** -- 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? +- Ali idea "davanja navodil računalnikom" zdaj nima smisla? +- Se spomniš katerega dnevnega opravila, ki bi ga rad/a avtomatiziral/a s programiranjem? +- Kakšna vprašanja ti že brbotajo po glavi o vsem tem programiranju? -> **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! +> **Zapomni si**: Popolnoma normalno je, če ti nekateri pojmi zdaj delujejo megleno. Učenje programiranja je kot učenje novega jezika – možgani potrebujejo čas, da vzpostavijo nove povezave. Super delaš! ## Programske jezike lahko primerjamo z različnimi okusi magije -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. +V redu, to bo mogoče zvenelo čudno, a ostani z mano – programski jeziki so kot različni glasbeni stili. Pomisli: imaš jazz, ki je gladek in improvizacijski, rock, ki je močan in neposreden, klasično glasbo, ki je elegantna in strukturirana, in hip-hop, ki je ustvarjalen in izrazit. Vsak stil ima svojo vibracijo, svojo skupnost navdušencev in vsak je primeren za različna razpoloženja in priložnosti. -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! 😄). +Programski jeziki delujejo povsem enako! Ne bi uporabil/a istega jezika za izdelavo zabavne mobilne igre kot za obdelavo ogromnih količin podnebnih podatkov, tako kot ne bi predvajal/a death metala na jogi (no, večinoma jogi! 😄). -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! +Ampak tukaj me vedno znova navduši: ti jeziki so kot najbolj potrpežljiv in briljanten tolmač na svetu, ki sedi zraven tebe. Lahko izraziš svoje ideje na način, ki je naraven tvojemu človeškemu umu, oni pa opravijo vse neverjetno zahtevno delo pretvorbe v 1 in 0, ki jih računalniki dejansko govorijo. To je kot imeti prijatelja, ki perfektno govori tako "človeško ustvarjalnost" kot "računalniško logiko" – in nikoli se ne utrudi, nikoli ne potrebuje odmora za kavo in nikoli ne sodi, če vprašaš isto vprašanje dvakrat! -### Priljubljeni programski jeziki in njihova uporaba +### Priljubljeni programski jeziki in njihove uporabe ```mermaid mindmap - root((Programski jeziki)) - Spletni razvoj + root((Programski Jeziki)) + Spletni Razvoj JavaScript - Čarovnija za frontend - Interaktivne spletne strani + Čarovnija na Sprednji Strani + Interaktivne Spletne Strani TypeScript - JavaScript + tipi - Podjetniške aplikacije - Podatki in AI + JavaScript + Tipi + Poslovne Aplikacije + Podatki & AI Python - Znanost o podatkih - Strojno učenje + Znanost o Podatkih + Strojno Učenje Avtomatizacija R Statistika Raziskave - Mobilne aplikacije + Mobilne Aplikacije Java Android - Podjetniško + Poslovno Swift iOS - Apple ekosistem + Apple Ekosistem Kotlin - Sodobni Android + Moderni Android Večplatformno - Sistemi in zmogljivost + Sistemi & Učinkovitost C++ Igre - Kritična zmogljivost + Kritično za Učinkovitost Rust - Varnost spomina - Sistemsko programiranje + Varnost Pomnilnika + Sistemsko Programiranje Go - Oblačne storitve - Razširljiv backend + Oblak Storitve + Razširljiv Backend ``` | Jezik | Najbolj za | Zakaj je priljubljen | |----------|----------|------------------| -| **JavaScript** | Spletni razvoj, uporabniški vmesniki | Teče v brskalnikih in poganja interaktivne strani | +| **JavaScript** | Spletni razvoj, uporabniški vmesniki | Teče v brskalnikih in poganja interaktivne spletne 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 | +| **Java** | Poslovne aplikacije, Android aplikacije | Neodvisen od platforme, zanesljiv 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 | +| **Go** | Oblačne storitve, backend sistemi | Hiter, preprost, zasnovan za sodobno računalništvo | -### Visokonivojski vs. niskonivojski jeziki +### Visoko-nivojski proti nizko-nivojskim jezikom -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! +V redu, to je bil iskreno koncept, ki mi je zmešal možgane, ko sem začel/a, zato ti bom razložil/a analogijo, ki mi je končno naredila vse jasno – in upam, da ti bo pomagala tudi tebi! -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? 😅): +Predstavljaj si, da obiščeš državo, kjer ne govoriš jezika in obupno iščeš najbližji WC (smo bili vsi tam, kajne? 😅): -- **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. +- **Nizko-nivojsko programiranje** je kot da se naučiš lokalni dialekt tako dobro, da se lahko pogovarjaš z babico, ki prodaja sadje na vogalu, z lokalnimi izrazi, slengom in zafrkancijami, ki jih razume le nekdo, ki je tam odraščal. Zelo impresivno in izjemno učinkovito... če si tekoč! A dokaj zmedeno, če samo iščeš WC. -- **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. +- **Visoko-nivojsko programiranje** je kot da imaš tega čudovitega lokalnega prijatelja, ki te razume. Lahko rečeš "Res rabim najti stranišče" v čisti angleščini, on pa poskrbi za prevod kulture in ti poda navodila, ki so popolnoma razumljiva tvojemu nemestu umu. V programerskih izrazih: -- **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! +- **Nizko-nivojski jeziki** (kot Assembly ali C) ti omogočajo izjemno podrobne pogovore z dejansko strojno opremo računalnika, a moraš razmišljati kot stroj, kar je... no, recimo, velika mentalna sprememba! +- **Visoko-nivojski jeziki** (kot JavaScript, Python ali C#) ti omogočajo razmišljanje kot človek, medtem ko oni skrbijo za vse strojno govorjenje v ozadju. Poleg tega imajo te jezike izjemno gostoljubne skupnosti polne ljudi, ki se spomnijo, kako je bilo biti novinec in resnično želijo pomagati! -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! +Ugani, katere jezike ti bom predlagal/a za začetek? 😉 Visoko-nivojski jeziki so kot pomožni kolesci, ki jih dejansko ne želiš sneti, ker naredijo celotno izkušnjo veliko bolj zabavno! ```mermaid flowchart TB 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["⚙️ Assembler/C
Neposredna kontrola strojne opreme"] + B -->|Visoka raven| C["🌟 JavaScript/Python
Enostavno za brati in pisati"] + B -->|Nizka raven| D["⚙️ Assembler/C
Neposredni nadzor nad strojno opremo"] - C --> E["📝 Zapiši: fibonacci(10)"] - D --> F["📝 Zapiš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čunalniško razumevanje:
Prevajalnik ureja kompleksnost"] + E --> G["🤖 Razumevanje računalnika:
Prevajalnik obvladuje 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 visokonivojski jeziki prijaznejši +### Dovolite, da ti pokažem, zakaj so visoko-nivojski jeziki tako bolj prijazni -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! +Prav, pokazal/a ti bom nekaj, kar popolnoma prikaže, zakaj sem se zaljubil/a v visoko-nivojske jezike, a najprej – želim, da mi nekaj obljubiš. Ko vidiš prvi primer kode, ne paničari! Namenjeno je, da izgleda zastrašujoče. Točno to hočem povedati! -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!) +Ogledali si bomo točno isto nalogo napisano v dveh povsem različnih slogih. Obe ustvarjata tako imenovano Fibonaccijevo zaporedje – to je čudovit matematični vzorec, kjer je vsak naslednji člen vsota dveh prejšnjih: 0, 1, 1, 2, 3, 5, 8, 13... (Zabavna dejstva: ta vzorec najdeš povsod v naravi – spirale sončničnih semen, vzorci storžev, celo kako nastajajo galaksije!) -Pripravljen na primerjavo? Gremo! +Pripravljen/a pogleda razliko? Gremo! -**Visokonivojski jezik (JavaScript) – po človeško:** +**Visoko-nivojski jezik (JavaScript) – Prijazen človeku:** ```javascript -// Korak 1: Osnovna nastavitev Fibonaccija +// Korak 1: Osnovna nastavitev Fibonaccijevega zaporedja const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,29 +183,29 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**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 +**To ta koda naredi:** +- **Določi** konstanto, ki pove, koliko Fibonacci števil želimo ustvariti +- **Inicira** dve spremenljivki za sledenje trenutnemu in naslednjemu številu v zaporedju +- **Nastavi** začetne vrednosti (0 in 1), ki definirajo Fibonacci vzorec +- **Izpiše** naslovno sporočilo za označitev izhoda ```javascript -// Korak 2: Generirajte zaporedje z zanko +// Korak 2: Ustvarite zaporedje z zanko for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Izračunajte naslednjo številko v zaporedju + // Izračunajte naslednje število v zaporedju const sum = current + next; current = next; next = sum; } ``` -**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 +**Tukaj se zgodi to:** +- **Ponavlja** skozi vsako pozicijo v zaporedju s pomočjo zanke `for` +- **Izpiše** vsako številko s pozicijo z uporabo predloge za oblikovanje niza +- **Izračuna** naslednje Fibonacci število z seštevanjem trenutnega in naslednjega +- **Posodobi** spremenljivke za sledenje za premik na naslednjo iteracijo ```javascript // Korak 3: Sodobni funkcionalni pristop @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**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 +**V zgornjem smo:** +- **Ustvarili** ponovno uporabno funkcijo z uporabo sodobne sintakse puščic +- **Zgradili** polje, da shranimo celotno zaporedje namesto, da ga izpisujemo eno po eno +- **Uporabili** indeksiranje polja za izračun vsakega novega števila iz prejšnjih vrednosti +- **Vrnil** celotno zaporedje za prilagodljivo uporabo v drugih delih programa -**Niskonivojski jezik (ARM Assembly) – računalniku prijazno:** +**Nizko-nivojski jezik (ARM Assembly) – Prijazen računalniku:** ```assembly area ascen,code,readonly @@ -257,60 +257,59 @@ back add r0,r1 end ``` -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 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 +Opazi, kako JavaScript različica bere skoraj kot angleška navodila, medtem ko Assembly različica uporablja kriptirane ukaze, ki neposredno upravljajo procesor računalnika. Obe opravita isto nalogo, vendar je visoko-nivojski jezik veliko lažji za razumevanje, pisanje in vzdrževanje ljudi. -✅ **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! +**Ključne razlike, ki jih boš opazil/a:** +- **Berljivost**: JavaScript uporablja opisna imena, kot je `fibonacciCount`, medtem ko Assembly uporablja skrivnostne oznake, kot so `r0`, `r1` +- **Komentarji**: Visokoravni jeziki spodbujajo pojasnjujoče komentarje, ki kodo naredijo samodokumentirajočo +- **Struktura**: Logični tok JavaScripta ustreza načinu, kako ljudje razmišljajo o problemih korak za korakom +- **Vzdrževanje**: Posodabljanje različice v JavaScriptu za različne zahteve je preprosto in jasno +✅ **O zaporedju Fibonaccijevih števil**: Ta popolnoma čudovit vzorec števil (kjer je vsako število vsota predhodnih dveh: 0, 1, 1, 2, 3, 5, 8...) se pojavlja prav povsod v naravi! Najdete ga v spiralah sončnic, vzorcih storžev, načinu, kako se zavijajo školjke nautilusa, in celo v tem, kako rastejo veje dreves. Res je neverjetno, kako lahko matematika in koda pomagata razumeti in znova ustvariti vzorce, ki jih narava uporablja za ustvarjanje lepote! ## Gradniki, ki ustvarjajo čarovnijo -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! +V redu, zdaj ko ste videli, kako izgledajo programski jeziki v akciji, razčlenimo osnovne dele, ki sestavljajo prav vsak program, kar jih je bilo kdaj napisano. Predstavljajte si jih kot bistvene sestavine v vašem najljubšem receptu – ko boste razumeli, kaj vsak del počne, boste lahko brali in pisali kodo skoraj v kateremkoli jeziku! -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! 😄 +To je nekako kot učenje slovnice programiranja. Spomnite se, ko ste v šoli spoznavali samostalnike, glagole in kako sestaviti stavke? Programiranje ima svojo različico slovnice in iskreno, ta je veliko bolj logična in odpuščajoča kot angleška slovnica! 😄 -### Izjave: Navodila korak za korakom +### Stavki: Navodila korak za korakom -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." +Začnimo s **stavki** – ti so kot posamezni stavki v pogovoru z vašim računalnikom. Vsak stavek računalniku pove, naj naredi eno specifično stvar, nekako kot, ko dajete navodila: "Zavij levo tukaj," "Ustavi se na rdeči luči," "Parkiraj na tistem mestu." -Všeč mi je, kako berljive so izjave običajno. Poglejte to: +Kar mi je pri stavkih všeč, je, kako berljivi so običajno. Poglejte to: ```javascript -// Osnovne izjave, ki izvajajo posamezna dejanja +// Osnovne izjave, ki izvajajo enotna dejanja const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **Tukaj je, kaj ta koda počne:** -- **Določi** konstanto za shranjevanje uporabnikovega imena -- **Prikaže** pozdravno sporočilo v konzoli +- **Deklarira** konstantno spremenljivko za shranjevanje uporabnikovega imena +- **Prikaže** pozdravno sporočilo v konzolnem izhodu - **Izračuna** in shrani rezultat matematične operacije ```javascript -// Izjave, ki komunicirajo s spletnimi stranmi +// Izjave, ki sodelujejo z spletnimi stranmi document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Korak za korakom, tu se dogaja:** +**Korak za korakom, kaj se dogaja:** - **Spremeni** naslov spletne strani, ki se prikaže v zavihku brskalnika -- **Zameni** barvo ozadja celotnega telesa strani +- **Spremeni** barvo ozadja celotnega telesa strani -### Spremenljivke: Spominski sistem vašega programa +### Spremenljivke: Pomnilniški sistem vašega programa -Prav, **spremenljivke** so iskreno ena mojih najljubših konceptov za poučevanje, ker so zelo podobne stvarem, ki jih uporabljate vsak dan! +V redu, **spremenljivke** so iskreno eno mojih najljubših konceptov za poučevanje, saj so zelo podobne stvarem, ki jih vsakodnevno uporabljate! -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. +Pomislite za trenutek na svoj seznam stikov v telefonu. Ne pomnite vseh telefonskih številk – raje shranite "Mama," "Najboljši prijatelj," ali "Pizzerija, ki dostavlja do 2. ure zjutraj" in telefon si zapomni dejanske številke. Spremenljivke delujejo natanko tako! So kot označeni zabojniki, kamor vaš program lahko shrani informacije in jih pozneje pridobi z imenom, ki dejansko nekaj pomeni. -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! +Tukaj je nekaj res kul: spremenljivke se lahko spreminjajo, ko vaš program teče (od tod tudi ime "spremenljivka" – vidite, kaj so naredili?). Tako kot lahko posodobite stik za pizzerijo, ko odkrijete še boljšo, lahko spremenljivke posodobite, ko se program nauči novih informacij ali se okoliščine spremenijo! -Pokažem vam, kako enostavno je to lahko: +Dovolite, da vam pokažem, kako lahko to čudovito preprosto izgleda: ```javascript // Korak 1: Ustvarjanje osnovnih spremenljivk @@ -321,10 +320,10 @@ let isRaining = false; ``` **Razumevanje teh konceptov:** -- **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 +- **Shranjuje** nespremenljive vrednosti v `const` spremenljivkah (na primer ime strani) +- **Uporablja** `let` za vrednosti, ki se skozi program lahko spreminjajo +- **Dodeli** različne tipe podatkov: nize (besedilo), številke in logične vrednosti (true/false) +- **Izbere** opisna imena, ki pojasnjujejo, kaj vsaka spremenljivka vsebuje ```javascript // Korak 2: Delo z objekti za združevanje povezanih podatkov @@ -335,26 +334,26 @@ const weatherData = { }; ``` -**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 +**V zgornjem primeru smo:** +- **Ustvarili** objekt za skupno združevanje sorodnih vremenskih informacij +- **Organizirali** več podatkov pod eno ime spremenljivke +- **Uporabili** pare ključ-vrednost za jasno označevanje posameznih informacij ```javascript // Korak 3: Uporaba in posodabljanje spremenljivk console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Posodabljanje spremenljivk, ki se lahko spreminjajo +// Posodabljanje spremenljivk, ki jih je mogoče spreminjati currentWeather = "cloudy"; temperature = 68; ``` -**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 +**Razumevanje vsakega dela:** +- **Prikazuje** informacije s pomočjo predlog (template literals) s sintakso `${}` +- **Dostopa** do lastnosti objekta z uporabo pike (`weatherData.windSpeed`) +- **Posodablja** spremenljivke, deklarirane z `let`, da odražajo spreminjajoče se pogoje +- **Kombinira** več spremenljivk za ustvarjanje smiselnih sporočil ```javascript // Korak 4: Sodobno razstavljanje za čistejšo kodo @@ -362,20 +361,20 @@ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**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 +**Kar morate vedeti:** +- **Izvleče** specifične lastnosti iz objektov z uporabo destrukturiranja +- **Ustvari** nove spremenljivke samodejno z enakimi imeni kot ključi v objektu +- **Poenostavi** kodo z izogibanjem ponavljajoči se uporabi pike -### Nadzor toka: Poučevanje programa razmišljanja +### Nadzorni tok: Učenje programa razmišljanja -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. +V redu, tukaj programiranje postane popolnoma osupljivo! **Nadzorni tok** je pravzaprav učenje vašega programa, kako sprejemati pametne odločitve, natanko tako kot to počnete vi vsak dan, ne da bi se tega sploh zavedali. -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! +Predstavljajte si: zjutraj ste verjetno izpeljali nekaj v slogu "Če dežuje, vzamem dežnik. Če je mrzlo, oblečem jakno. Če zamujam, preskočim zajtrk in vzamem kavo na poti." Vaš možgan naravno sledijo tej if-then logiki desetinekrat na dan! -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! +To je tisto, kar programe naredi za pametne in žive, namesto da bi samo sledili kakšnemu dolgočasnemu, predvidljivemu scenariju. Dejansko lahko pogledajo situacijo, ocenijo, kaj se dogaja, in ustrezno reagirajo. To je kot da vašemu programu daste možgane, ki se lahko prilagajajo in sprejemajo odločitve! -Želite videti, kako lepo to deluje? Pokažem vam: +Želite videti, kako čudovito to deluje? Dovolite, da vam pokažem: ```javascript // Korak 1: Osnovna pogojna logika @@ -390,10 +389,10 @@ if (userAge >= 18) { ``` **Kaj ta koda počne:** -- **Preveri**, ali starost uporabnika ustreza volilnim pogojem +- **Preveri**, ali uporabnikova starost izpolnjuje zahteve za glasovanje - **Izvede** različne bloke kode glede na rezultat pogoja -- **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 +- **Izračuna** in prikaže, koliko časa še do dopolnitve 18 let za volilno pravico +- **Ponudi** specifične in koristne povratne informacije za vsako situacijo ```javascript // Korak 2: Več pogojev z logičnimi operatorji @@ -409,11 +408,11 @@ if (userAge >= 18 && hasPermission) { } ``` -**Razčlenjevanje dogajanja tukaj:** -- **Združi** več pogojev z uporabo `&&` (in) operaterja +**Razčlenitev dogajanja:** +- **Združi** več pogojev z uporabo operatorja `&&` (in) - **Ustvari** hierarhijo pogojev z `else if` za več scenarijev -- **Obravnava** vse možne primere z zaključnim `else` -- **Nudi** jasne in uporabne povratne informacije za vsako situacijo +- **Obravnava** vse možne primere z zadnjim `else` stavkom +- **Ponuja** jasne, uporabne povratne informacije za različne situacije ```javascript // Korak 3: Jedrnat pogoj z ternarnim operatorjem @@ -421,13 +420,13 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**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 +**Kaj si je treba zapomniti:** +- **Uporabi** ternarni operator (`? :`) za preproste pogoje z dvema možnostma +- **Napiši** pogoj najprej, sledijo `?`, nato resnični rezultat, nato `:`, nato lažni rezultat +- **Uporabi** ta vzorec, kadar moraš dodeliti vrednosti glede na pogoje ```javascript -// Korak 4: Obdelava več specifičnih primerov +// Korak 4: Ravnanje z več specifičnimi primeri const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,54 +446,54 @@ switch (dayOfWeek) { } ``` -**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 +**Kaj ta koda doseže:** +- **Primerja** vrednost spremenljivke z več specifičnimi primeri +- **Združi** podobne primere skupaj (delavniki proti vikendom) +- **Izvede** ustrezen blok kode, ko je najdeno ujemanje +- **Vključi** `default` primer za nepričakovane vrednosti +- **Uporabi** izjave `break`, da prepreči nadaljevanje kode v naslednji primer -> 💡 **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. +> 💡 **Analogíja iz resničnega sveta**: Nadzorni tok je kot najbolj potrpežljiv GPS na svetu, ki vam daje navodila. Lahko reče: "Če je na Glavni ulici promet, pojdi po avtocesti. Če je avtocesta zaprta zaradi gradnje, pojdi po panoramski poti." Programi uporabljajo prav tako vrsto pogojne logike, da inteligentno odgovarjajo na različne situacije in vedno nudijo uporabnikom najboljšo možno izkušnjo. -### 🎯 **Preverjanje razumevanja: Mojstrstvo gradnikov** +### 🎯 **Preverjanje konceptov: Mojstrstvo gradnikov** -**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? +**Poglejmo, kako vam gre z osnovami:** +- Ali lahko z lastnimi besedami razložite razliko med spremenljivko in stavkom? +- Pomislite na resnično situacijo, kjer bi uporabili if-then odločitev (kot naš primer glasovanja) +- Kaj vas je pri logiki programiranja najbolj presenetilo? -**Hiter dvig samozavesti:** +**Hitri zagon samozavesti:** ```mermaid flowchart LR - A["📝 Izjave
(Navodila)"] --> B["📦 Spremenljivke
(Shranjevanje)"] --> C["🔀 Krmilni Tok
(Odločitve)"] --> D["🎉 Delujoč Program!"] + A["📝 Izjave
(Navodila)"] --> B["📦 Spremenljivke
(Shranjevanje)"] --> C["🔀 Potek nadzora
(Odločitve)"] --> D["🎉 Delujoč program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **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! +✅ **Kaj sledi**: Čaka nas nori zabavni potop v te koncepte, ko bomo skupaj nadaljevali to neverjetno popotovanje! Zdaj pa se samo osredotočite na občutek navdušenja nad vsemi čudovitimi možnostmi, ki so vam na voljo. Specifična znanja in tehnike vam bodo pristala naravno, ko jih bomo skupaj vadili – obljubim, da bo to veliko bolj zabavno, kot si morda predstavljate! -## Orodja obrti +## Orodja stroke -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. +V redu, iskreno sem tako navdušen, da se komaj zadržim! 🚀 Pogovarjali se bomo o neverjetnih orodjih, ki vam bodo dali občutek, kot da ste pravkar dobili ključe digitalnega vesoljskega plovila. -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! +Veste, kako ima kuhar te popolnoma izbalansirane nože, ki so kot podaljšek njegovih rok? Ali kako ima glasbenik to posebno kitaro, ki začne pela takoj, ko se je dotakne? No, razvijalci imamo svojo različico teh magičnih orodij, in tukaj je nekaj, kar vam bo popolnoma odpihnilo misli – večina njih je popolnoma brezplačnih! -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. +Praktično skačem na stolu, ko razmišljam o tem, da jih lahko delim z vami, saj so popolnoma spremenila način, kako ustvarjamo programsko opremo. Govorimo o asistenti za pisanje kode, ki jih poganja AI in lahko pomagajo pisati vašo kodo (nisem se šalil!), oblačnih okoljih, kjer lahko ustvarjate celotne aplikacije od povsod s Wi-Fi povezavo, ter orodjih za odpravljanje napak, tako dovršenih, kot da imate rentgenski pogled na vaše programe. -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! +In tukaj je del, ki me še vedno navdušuje: to niso orodja samo za začetnike, ki jih boste hitro prerasli. To so povsem ista profesionalna orodja, kot jih trenutno uporabljajo razvijalci v Googlu, Netflixu in tistem indie studiu za aplikacije, ki jih obožujete. Ob uporabi se boste počutili kot pravi profesionalec! ```mermaid graph TD A["💡 Vaša ideja"] --> B["⌨️ Urejevalnik kode
(VS Code)"] - B --> C["🌐 Brskalnik DevTools
(Testiranje in odpravljanje napak)"] + B --> C["🌐 Razvijalska orodja brskalnika
(Testiranje in odpravljanje napak)"] C --> D["⚡ Ukazna vrstica
(Avtomatizacija in orodja)"] - D --> E["📚 Dokumentacija
(Učenje in referenca)"] + D --> E["📚 Dokumentacija
(Učenje in reference)"] E --> F["🚀 Osupljiva spletna aplikacija!"] B -.-> G["🤖 AI pomočnik
(GitHub Copilot)"] - C -.-> H["📱 Preizkušanje naprav
(Prilagodljiva zasnova)"] + C -.-> H["📱 Testiranje naprave
(Prilagodljiva zasnova)"] D -.-> I["📦 Upravljalniki paketov
(npm, yarn)"] E -.-> J["👥 Skupnost
(Stack Overflow)"] @@ -505,124 +504,123 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Urejevalniki kode in IDE-ji: vaši novi digitalni najboljši prijatelji +### Urejevalniki kode in IDE-ji: Vaši novi digitalni najboljši prijatelji -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. +Pogovorimo se o urejevalnikih kode – ti bodo kmalu postali vaša najljubša mesta za ustvarjanje! Predstavljajte si jih kot svoje osebno zatočišče programiranja, kjer boste preživeli večino svojega časa, ustvarjajoč in izpopolnjujoč svoje digitalne stvaritve. -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! +Toda tukaj je nekaj, kar je popolnoma čarobno pri sodobnih urejevalnikih: niso le navadni urejevalniki besedila. So kot najbolj briljanten, podpornik programiranja, ki sedi ob vas 24/7. Ujamejo vaše tipkarske napake, preden jih sploh opazite, predlagajo izboljšave, ki vam dajo videz genija, pomagajo razumeti, kaj vsak del kode počne, nekateri celo napovedo, kaj boste vtipkali in ponudijo, da dokončajo vaše misli! -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! +Spomnim se, ko sem prvič odkril samodejno dokončevanje – dobesedno sem se počutil, kot da živim v prihodnosti. Začnete tipkati nekaj in vaš urejevalnik reče: "Hej, si mislil na to funkcijo, ki točno počne, kar potrebuješ?" Kot da imate bralca misli za programskega prijatelja! **Kaj naredi te urejevalnike tako neverjetne?** -Sodobni urejevalniki kode ponujajo impresiven nabor funkcij, ki povečajo vašo produktivnost: +Sodobni urejevalniki kode ponujajo impresiven nabor funkcij, ki povečujejo vašo produktivnost: -| Funkcija | Kaj naredi | Zakaj pomaga | +| Funkcija | Kaj počne | Zakaj pomaga | |---------|--------------|--------------| -| **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 | +| **Poudarjanje sintakse** | Barva različne dele vaše kode | Olajša branje kode in zaznavanje napak | +| **Samodejno dokončevanje** | Predlaga kodo med tipkanjem | Pospeši pisanje kode in zmanjša tipkarske napake | +| **Orodja za odpravljanje napak** | Pomaga najti in popraviti napake | Prihrani ure reševanja težav | +| **Razširitve** | Dodajo specializirane funkcije | Prilagodite svoj urejevalnik za katero koli tehnologijo | +| **AI asistenti** | Predlaga kodo in pojasnila | Pospeši učenje in produktivnost | -> 🎥 **Video vir**: Želite videti ta orodja v akciji? Oglejte si [video Orodja obrti](https://youtube.com/watch?v=69WJeXGBdxg) za celovit pregled. +> 🎥 **Video gradivo**: Želite videti ta orodja v akciji? Oglejte si ta [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg), ki vam ponudi celovit pregled. #### Priporočeni urejevalniki za spletni razvoj -**[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 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 +**[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 +- **Obvezne razširitve**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-pogona 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) - zaznavanje tipkarskih napak v kodi -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Plačljivo, brezplačno za študente) -- Napredna orodja za odpravljanje napak in testiranje -- Inteligentno samodokončanje kode -- Vgrajeno upravljanje verzij +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (plačljiv, brezplačen za študente) +- Napredna orodja za odpravljanje napak in testiranje +- Inteligentno samodejno dokončevanje kode +- Vgrajen sistem za upravljanje različic -**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čnite z Visual Studio Code – brezplačen je, široko uporabljen v industriji in ima ogromno skupnost, ki ustvarja koristne vodiče in razširitve. +**Oblačni IDE-ji** (različno cenovno) +- [GitHub Codespaces](https://github.com/features/codespaces) - popoln VS Code v brskalniku +- [Replit](https://replit.com/) - odličen za učenje in deljenje kode +- [StackBlitz](https://stackblitz.com/) - takojšnji spletni razvoj celotnih aplikacij +> 💡 **Nasvet za začetek**: Začnite z Visual Studio Code – je brezplačen, široko uporabljen v industriji in ima ogromno skupnost, ki ustvarja koristne vodiče in razširitve. ### Spletni brskalniki: Vaša skrivna razvojna laboratorija -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! +V redu, pripravite se, da vam odpihne razum! Veste, kako ste brskali po družbenih omrežjih in gledali videoposnetke v brskalnikih? No, izkazalo se je, da ves ta čas skrivajo neverjetno skrivno razvojno laboratorijo, ki čaka samo, da jo odkrijete! -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! +Vsakič, ko z desnim klikom kliknete na spletno stran in izberete "Inspect Element" (Preveri element), odpirate skriti svet orodij za razvijalce, ki so iskreno močnejša od nekaterih dragih programov, za katere sem prej plačeval sto tisoče evrov. To je kot odkritje, da vaša stara običajna kuhinja skriva profesionalno kuharsko laboratorijo za skrivnim panelom! +Prvič, ko mi je nekdo pokazal brskalnikova orodja za razvijalce, sem preživel kar tri ure, kako sem klikpal naokoli in govoril: "ČAKAJ, TO LAHKO TUDI TO?!" Dobesedno lahko urejaš katerokoli spletno stran v realnem času, vidiš točno, kako hitro se vse nalaga, testiraš, kako tvoja stran izgleda na različnih napravah, in celo odpraviš napake v JavaScriptu kot pravi profesionalec. To je popolnoma osupljivo! **Tukaj je razlog, zakaj so brskalniki tvoja skrivna orožja:** -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. +Ko ustvariš spletno stran ali spletno aplikacijo, moraš videti, kako izgleda in se obnaša v resničnem svetu. Brskalniki ne prikazujejo samo tvojega dela, ampak tudi ponujajo podrobne povratne informacije o zmogljivosti, dostopnosti in morebitnih težavah. -#### Razvijalska orodja brskalnika (DevTools) +#### Orodja za razvijalce v brskalnikih (DevTools) 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 | Prilagodi stilizacijo in takoj vidi rezultate | -| **Konzola** | Ogled sporočil o napakah in testiranje JavaScripta | Odpravljanje napak in eksperimentiranje s kodo | -| **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 | +|-------------------|------------|----------------| +| **Pregledovalnik elementov** | Ogled in urejanje HTML/CSS v realnem času | Prilagajanje sloga za takojšnje rezultate | +| **Konzola** | Ogled sporočil o napakah in testiranje JavaScripta | Odpravljanje težav in eksperimentiranje s kodo | +| **Mrežni monitor** | Sledenje nalaganju virov | Optimizacija zmogljivosti in časa nalaganja | +| **Preverjevalnik dostopnosti** | Testiranje vključujočega oblikovanja | Zagotovitev, da stran deluje za vse uporabnike | +| **Simulator naprav** | Predogled na različnih velikostih zaslona | Testiranje prilagodljivega 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 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 +- **[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 -> ⚠️ **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. +> ⚠️ **Pomemben nasvet za testiranje**: Vedno preizkušaj svoje spletne strani v več brskalnikih! Kar deluje popolno v Chromu, je lahko videti drugače v Safariju ali Firefoxu. Profesionalni razvijalci testirajo na vseh glavnih brskalnikih, da zagotovijo dosledno uporabniško izkušnjo. -### Orodja ukazne vrstice: Tvoja pot do supermoč razvijalca +### Orodja ukazne vrstice: tvoja vrata do razvijalskih supermoči -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!" 😅 +Prav, bodimo povsem iskreni glede ukazne vrstice, ker želim, da slišite to od nekoga, ki to res razume. Ko sem jo prvič videl – le ta zastrašujoč črni zaslon s svetlečim besedilom – sem dobesedno pomislil: "Ne, prav nič! To je videti kot nekaj iz hekerskega filma iz osemdesetih, in nisem dovolj pameten za to!" 😅 -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." +Ampak tukaj je tisto, kar bi si takrat želel, da mi je nekdo povedal, in kar ti pravim zdaj: ukazna vrstica ni strašljiva – pravzaprav je kot neposreden pogovor s tvojim računalnikom. Pomisli nanjo kot razliko med naročilom hrane preko lepe aplikacije s slikami in meniji (kar je prijetno in enostavno) ter vstopom v tvojo najljubšo lokalno restavracijo, kjer kuhar točno ve, kaj ti je všeč, in lahko hitro pripravi nekaj popolnega samo zato, ker rečeš: "Preseneti me s čim neverjetnim." -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! +Ukazna vrstica je prostor, kjer se razvijalci počutijo kot pravi čarovniki. Vpišeš nekaj na videz čarobnih besed (okej, so samo ukazi, ampak se zdijo čarobni!), pritisneš enter in BOOM – ustvaril si celotno strukturo projekta, namestil močna orodja z vsega sveta ali pa svoj app objavil na internetu za milijone ljudi, da ga vidijo. Ko enkrat okušaš to moč, je resnično precej zasvojljivo! -**Zakaj bo ukazna vrstica tvoja najljubša orodja:** +**Zakaj bo ukazna vrstica tvoje najljubše orodje:** -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. +Medtem ko so grafični vmesniki odlični za mnogo opravil, ukazna vrstica izstopa pri avtomatizaciji, natančnosti in hitrosti. Veliko razvojnih orodij deluje predvsem prek ukaznih vmesnikov, in učenje njihove učinkovite uporabe lahko močno izboljša tvojo produktivnost. ```bash -# Korak 1: Ustvarite in pojdite v imenik projekta +# 1. korak: Ustvarite mapo projekta in se vanjo pomaknite 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 -- **Premakne se** v novo ustvarjeno mapo, da začneš z delom +- **Ustvari** novo imenik z imenom "my-awesome-website" za tvoj projekt +- **Vstopi** v novo ustvarjeni imenik, da začneš delati ```bash -# Korak 2: Inicializirajte projekt z datoteko package.json +# Korak 2: Inicializirajte projekt s package.json npm init -y -# Namestite sodobna orodja za razvoj +# Namestite sodobna razvojna orodja npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **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 +- **Inicializira** nov Node.js projekt z privzetimi nastavitvami z `npm init -y` +- **Namesti** Vite kot moderno orodje za hitro razvojno in produkcijsko gradnjo - **Doda** Prettier za samodejno oblikovanje kode in ESLint za preverjanje kakovosti kode -- **Uporabi** zastavico `--save-dev`, da se zadeve označijo kot odvisnosti samo za razvoj +- **Uporabi** zastavico `--save-dev`, da označi te kot odvisnosti samo za razvoj ```bash -# Korak 3: Ustvarite strukturo in datoteke projekta +# Korak 3: Ustvarite strukturo projekta in datoteke mkdir src assets echo 'My Site

Hello World

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

Hello Wo npx vite ``` -**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 +**Zgornje smo:** +- **Organizirali** svoj projekt z ustvarjanjem ločenih map za izvorno kodo in sredstva +- **Ustvarili** osnovno HTML datoteko s pravilno dokumentno strukturo +- **Zagnali** Vite razvojni strežnik za živo osveževanje in vročo zamenjavo modulov -#### Nujna orodja ukazne vrstice za spletni razvoj +#### Ključna 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 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 | +| **[Git](https://git-scm.com/)** | Nadzor različic | Sledenje spremembam, sodelovanje z drugimi, varnostno kopiranje tvojega dela | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime in upravljanje paketov | Zagon JavaScript izven brskalnikov, namestitev sodobnih razvojnih orodij | +| **[Vite](https://vitejs.dev/)** | Orodje za gradnjo in razvojni strežnik | Strela hitro razvijanje z vročo zamenjavo modulov | +| **[ESLint](https://eslint.org/)** | Kakovost kode | Samodejno iskanje in odpravljanje težav v tvojem JavaScriptu | +| **[Prettier](https://prettier.io/)** | Oblikovanje kode | Ohranjanje dosledne oblike in berljivosti tvoje kode | -#### Platformno specifične možnosti +#### Platformno-specifične možnosti **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 +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - sodoben, bogat z funkcijami terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - zmogljivo skriptno okolje +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - tradicionalna Windows ukazna vrstica **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/)** - naprednejši terminal z dodatnimi funkcijami **Linux:** -- **[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 +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - standardna Linux lupina +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - napreden emulator terminala -> 💻 = Vnaprej nameščen v operacijskem sistemu +> 💻 = Prednameščeno v operacijskem sistemu -> 🎯 **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. +> 🎯 **Pot učenja**: Začni z osnovnimi ukazi, kot so `cd` (spremeni imenik), `ls` ali `dir` (prikaz datotek) in `mkdir` (ustvari mapo). Vadite z ukazi za sodoben potek dela, kot so `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. -### Dokumentacija: Tvoj vedno dostopen učni mentor +### Dokumentacija: tvoj vedno dosegljiv mentor za učenje -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! +Dobro, naj delim majhno skrivnost, zaradi katere se boš počutil veliko bolje kot začetnik: tudi najbolj izkušeni razvijalci preživijo velik del svojega časa z branjem dokumentacije. In to ni zato, ker ne vedo, kaj počnejo – pravzaprav je to znak modrosti! -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! +Dokumentacijo si predstavljaj kot dostop do najbolj potrpežljivih in strokovnih učiteljev na svetu, ki so na voljo 24/7. Zalotiš se pri težavi ob 2. uri zjutraj? Dokumentacija je tam s toplim virtualnim objemom in natanko z odgovorom, ki ga potrebuješ. Hočeš izvedeti kaj o novi zanimivi funkciji, o kateri vsi govorijo? Dokumentacija te pokriva s primeri korak za korakom. Poskušaš razumeti, zakaj nekaj deluje tako, kot deluje? Uganil si – dokumentacija je pripravljena to razložiti na način, ki ti bo končno omogočil razumevanje! -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. +Tukaj je nekaj, kar mi je popolnoma spremenilo pogled na stvari: spletni razvoj se razvija izjemno hitro in nihče (mislim absolutno nihče!) nima vsega v glavi. 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! Ne gre za popoln spomin; gre za to, da veš, kje hitro najti zanesljive odgovore in kako jih uporabiti. -**Prava magija se zgodi tukaj:** +**Tukaj se dogaja prava čarovnija:** -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*. +Profesionalni razvijalci preživijo znatno količino svojega časa z branjem dokumentacije – ne zato, ker ne vedo, kaj počnejo, ampak ker se spletni razvoj spreminja tako hitro, da je zaostajanje potrebno stalno učenje. Odlična dokumentacija ti pomaga razumeti ne samo *kako* nekaj uporabiti, ampak *zakaj* in *kdaj* to uporabiti. -#### Nujni viri dokumentacije +#### Ključni viri dokumentacije **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- 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 +- Zlati standard dokumentacije spletnih tehnologij +- Podrobni vodiči za HTML, CSS in JavaScript +- Vključuje informacije o združljivosti brskalnikov +- Vsebuje praktične primere in interaktivne prikaze -**[Web.dev](https://web.dev)** (Google) -- 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 +**[Web.dev](https://web.dev)** (avtor Google) +- Najboljše prakse sodobnega spletnega razvoja +- Vodiči za optimizacijo zmogljivosti +- Principi 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 med platformami +- Viri za razvoj v brskalniku Edge +- Vodiči za progresivne spletne aplikacije +- Pogledi na razvoj za več platform **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- urejene učne poti -- video tečaji strokovnjakov iz industrije -- praktične vaje s kodo +- Strukturirani učni načrti +- Video tečaji s strokovnjaki iz industrije +- Praktične vaje s kodiranjem -> 📚 **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. +> 📚 **Strategija učenja**: Ne poskušaj napamet naučiti dokumentacije – raje se nauči, kako jo učinkovito uporabljati. Označi pogosto uporabljene vire in vadite uporabo iskalnih funkcij za hitro iskanje specifičnih informacij. -### 🔧 **Preverjanje obvladovanja orodij: Kaj te najbolj nagovarja?** +### 🔧 **Preverjanje obvladovanja orodij: Kaj te najbolj nagovori?** -**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? +**Vzemite si trenutek in premisli:** +- Katero orodje si najbolj navdušen, da ga preizkusiš najprej? (Ni napačnega odgovora!) +- Ali ti je ukazna vrstica še vedno strašljiva ali si že radoveden z njo? +- Si predstavljaš, da bi uporabil brskalnikova DevTools, da pokukaš za zaveso svojih najljubših spletnih strani? ```mermaid -pie title "Čas razvijalca preživet z orodji" +pie title "Čas razvijalca, preživet z orodji" "Urejevalnik kode" : 40 "Testiranje v brskalniku" : 25 "Ukazna vrstica" : 15 "Branje dokumentacije" : 15 "Razhroščevanje" : 5 ``` -> **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! +> **Zabaven vpogled**: Večina razvijalcev preživi približno 40 % časa v svojem urejevalniku kode, a opazijo, koliko časa gre za testiranje, učenje in reševanje problemov. Programiranje ni samo pisanje kode – gre za ustvarjanje izkušenj! -✅ **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. +✅ **Misli za razmislek**: Tukaj je nekaj zanimivega za premisliti – kako misliš, da se orodja za izdelavo spletnih strani (razvoj) razlikujejo od orodij za načrtovanje njihovega izgleda (oblikovanje)? To je kot razlika med arhitektom, ki oblikuje lep dom, in izvajalcem, ki ga dejansko gradi. Oba sta ključna, a potrebujeta različna nabor orodij! Tak način razmišljanja ti bo res pomagal videti večjo sliko, kako spletne strani zaživijo. -## GitHub Copilot Agent izziv 🚀 +## Izziv GitHub Copilot Agent 🚀 -Uporabi način Agent za izpolnitev naslednjega izziva: +Uporabi način Agenta za dokončanje naslednjega izziva: -**Opis:** Raziskuj funkcije sodobnega urejevalnika kode ali IDE ter pokaži, kako izboljšuje tvoj delovni tok kot spletni razvijalec. +**Opis:** Razišči funkcije sodobnega urejevalnika kode ali IDE in pokaži, kako lahko izboljša tvoj delovni tok kot spletni razvijalec. -**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. +**Navodilo:** Izberi urejevalnik kode ali IDE (npr. Visual Studio Code, WebStorm ali oblačni IDE). 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 delovni tok. --- ## 🚀 Izziv -**Prav, detektiv, pripravljen na prvi primer?** +**Prav, detektiv, pripravljen na svoj prvi primer?** -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! +Zdaj, ko imaš to odlično osnovo, imam pustolovščino, ki ti bo pokazala, kako neverjetno raznolik in fascinanten je svet programiranja. In poslušaj – ne gre še za pisanje kode, torej brez pritiska! Razmišljaj o sebi kot o detektivu programskih jezikov pri tvojem prvem razburljivem primeru! -**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! +**Tvoja naloga, če se je odločiš sprejeti:** +1. **Postani raziskovalec jezikov**: Izberi tri programske jezike iz popolnoma različnih svetov – morda en, ki ustvarja spletne strani, enega za mobilne aplikacije in enega, ki obdeluje podatke za znanstvenike. Poišči primere iste preproste naloge, zapisane v vsakem jeziku. Obljubim, da boš navdušen, kako drugačno lahko izgleda isto opravilo! -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! +2. **Razkrij njihovo poreklo**: Kaj naredi vsak jezik poseben? Tukaj je kul dejstvo – vsak programski jezik je bil ustvarjen, ker je nekdo pomislil: "Veš kaj? Mora obstajati boljši način za reševanje tega specifičnega problema." Ali lahko ugotoviš, kateri problemi so bili to? Nekatere od teh zgodb so res fascinantne! -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! +3. **Spoznaj skupnosti**: Poglej, kako prijazne in strastne so skupnosti vsakega jezika. Nekatere imajo milijone razvijalcev, ki delijo znanje in si pomagajo, druge so manjše, a zelo povezan in podpirajoč okoliš. Všeč ti bo ogled različnih osebnosti teh skupnosti! -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. +4. **Poslušaj svoje občutke**: Kateri jezik ti zdaj najbolj ustreza? Ne stresaj se zaradi "popolne" izbire – samo sledite svojemu instinktu! Tukaj ni napačnega odgovora in vedno lahko kasneje raziskuješ druge. -**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! +**Dodatna detektivska naloga**: Poskusi ugotoviti, katere glavne spletne strani ali aplikacije so zgrajene s temi jeziki. Zagotavljam ti, da boš presenečen, ko boš izvedel, kaj poganja Instagram, Netflix ali to mobilno igro, ki je ne moreš nehati igrati! -> 💡 **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! +> 💡 **Zapomni si**: Danes ne poskušaš postati strokovnjak za nobenega od teh jezikov. Samo spoznavaš okolico, preden se odločiš, kje želiš ustvariti svoj dom. Vzemi si čas, zabavaj se in naj te vodi radovednost! ## Praznujmo, kar si odkril! -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! +O, lučka, danes si pa res absorbiral ogromno neverjetnih informacij! Res sem navdušen, da vidim, koliko od tega čudovitega potovanja ti je ostalo v spominu. In ne pozabi – to ni test, kjer moraš vse narediti popolno. To je bolj praznovanje vseh kul stvari, ki si jih spoznal o tem fascinantnem svetu, v katerega se boš kmalu podal! [Reši kviz po lekciji](https://ff-quizzes.netlify.app/web/) ## Pregled in samostojno učenje -**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! +**Vzemi si čas za raziskovanje in zabavo!** +Danes ste prehodili veliko poti, na kar 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! -**Poglobite se v to, kar vas navdušuje:** +**Poglobite se v tisto, kar vas navdušuje:** -**Preizkusite se v programskih jezikih:** -- 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 programske jezike iz prve roke:** +- Obiščite uradne spletne strani 2-3 jezikov, ki so pritegnili vašo pozornost. Vsak ima svojo osebnost in zgodbo! +- Preizkusite spletne igralnice za programiranje, 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 si, kako je nastal vaš najljubši jezik. Resno, nekatere zgodbe o nastanku so fascinantne in vam bodo pomagale razumeti, zakaj jeziki delujejo tako, kot delujejo. -**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. +**Spoznajte svoja nova orodja:** +- Prenesite Visual Studio Code, če ga še niste – je brezplačen in zagotovo vam bo všeč! +- Vzemite si nekaj minut za brskanje po tržnici Extensions. To je kot trgovina z aplikacijami za vaš urejevalnik kode! +- Odprite orodja za razvijalce v brskalniku in klikajte naokoli. Ne skrbite, če ne razumete vsega – samo spoznajte, kaj je tam. **Pridružite se skupnosti:** -- 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! +- Sledite nekaterim razvijalskim skupnostim 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 nekaj video posnetkov za začetnike na YouTubu. Obstaja veliko odličnih ustvarjalcev, ki se spomnijo, kako je začeti. +- Razmislite o vključitvi v lokalne srečanja ali spletne skupnosti. Verjemite mi, 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, to si želim, da si zapomnite**: Od vas ne pričakujem, da boste čez noč postali čarovnik programiranja! Trenutno samo spoznavate ta čudovit nov svet, ki bo postal del vašega življenja. Vzemite si čas, uživajte na poti in ne pozabite – vsak razvijalec, ki ga občudujete, je bil nekoč točno tam, kjer ste vi zdaj, navdušen in morda malo zmeden. To je povsem normalno in pomeni, da delate prav! @@ -787,70 +785,70 @@ Danes ste naredili veliko korakov, na kar ste lahko ponosni! Zdaj pa pride zabav [Reading the Docs](assignment.md) -> 💡 **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č). +> 💡 **Mali spodbujevalnik za vašo nalogo**: Zelo bi bil vesel, če bi raziskali nekaj orodij, o katerih še nismo govorili! Preskočite urejevalnike, brskalnike in ukazne orodne vrstice, o katerih smo že govorili – tam zunaj obstaja cel svet neverjetnih razvojnih orodij, ki čakajo na odkritje. Poiščite tiste, ki se aktivno vzdržujejo in imajo živahne, prijazne skupnosti (ti imajo ponavadi najboljše vodiče in najbolj podporne ljudi, ko se zataknete in potrebujete prijazno roko). --- ## 🚀 Časovnica vaše programerske poti ### ⚡ **Kaj lahko naredite v naslednjih 5 minutah** -- [ ] Dodajte med zaznamke 2-3 spletne strani programskih jezikov, ki so vam pritegnili pozornost +- [ ] Dodajte med zaznamke 2-3 spletne strani programskih jezikov, ki so pritegnile vašo pozornost - [ ] Prenesite Visual Studio Code, če ga še niste -- [ ] 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) +- [ ] Odprite orodja za razvijalce v brskalniku (F12) in klikajte po poljubni spletni strani +- [ ] Pridružite se eni programski skupnosti (Dev.to, Reddit r/webdev ali Stack Overflow) ### ⏰ **Kaj lahko dosežete v tej uri** -- [ ] Zaključite kviz po lekciji in razmislite o svojih odgovorih +- [ ] Opravite kviz po lekciji in razmislite o svojih odgovorih - [ ] Nastavite VS Code z razširitvijo GitHub Copilot -- [ ] 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 predavanje o programiranju -- [ ] Začnite se učiti izbran jezik preko spletnih vodičev +- [ ] Preizkusite primer "Hello World" v 2 različnih programskih jezikih na spletu +- [ ] Oglejte si video "Dan v življenju razvijalca" na YouTubu +- [ ] Začnite svojo raziskovalno pot programerskega jezika (iz izziva) + +### 📅 **Vaša tedenska pustolovščina** +- [ ] Opravite nalogo in raziščite 3 nova razvojna orodja +- [ ] Sledite 5 razvijalcem ali programerskim računom na družbenih omrežjih +- [ ] Poskusite zgraditi nekaj majhnega v CodePenu ali Replitu (tudi samo "Hello, [Vaše ime]!") +- [ ] Preberite en blog prispevek razvijalca o njegovi programerski poti +- [ ] Pridružite se virtualnemu srečanju ali si oglejte programersko predavanje +- [ ] Začnite se učiti izbranega jezika z spletnimi vodiči ### 🗓️ **Vaša mesečna preobrazba** -- [ ] 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 +- [ ] Zgradite svoj prvi majhen projekt (tudi preprosta spletna stran se šteje!) +- [ ] Prispevajte k odprtokodnemu projektu (začnite z odpravljanjem napak v dokumentaciji) +- [ ] Mentorirajte nekoga, ki šele začenja s programiranjem +- [ ] Ustvarite svojo razvijalsko portfolio spletno stran - [ ] Povežite se z lokalnimi razvijalskimi skupnostmi ali študijskimi skupinami -- [ ] Začnite načrtovati naslednjo učno prelomnico +- [ ] Začnite načrtovati naslednji mejnik v učenju -### 🎯 **Zaključni premislek** +### 🎯 **Končni razmislek** **Preden nadaljujete, si vzemite trenutek za praznovanje:** -- Kaj vas je danes v programiranju najbolj navdušilo? +- Kaj vas je danes na 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 radi zdaj zastavili razvijalcu? +- Katero vprašanje bi radi zdaj postavili razvijalcu? ```mermaid journey - title Vaša Pot do Izgradnje Zaupanja + title Vaša pot gradnje zaupanja section Danes Radoveden: 3: You Preobremenjen: 4: You Navdušen: 5: You - section Ta Teden - Raziščem: 4: You - Učim se: 5: You - Povezujem se: 4: You - section Naslednji Mesec - Gradim: 5: You + section Ta teden + Raziščevanje: 4: You + Učenje: 5: You + Povezovanje: 4: You + section Naslednji mesec + Gradnja: 5: You Zaupljiv: 5: You - Pomagam Drugim: 5: You + Pomoč drugim: 5: You ``` -> 🌟 **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! 🎉 +> 🌟 **Ne pozabite**: Vsak strokovnjak je bil nekoč začetnik. Vsak izkušen razvijalec se je nekoč počutil tako kot vi zdaj – navdušeno, morda malo zmedeno in zagotovo radovedno, kaj je mogoče. Ste v odlični družbi in ta pot bo neverjetna. Dobrodošli v čudoviti svet programiranja! 🎉 --- -**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. +**Omejitev odgovornosti**: +Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvorni dokument v njegovem izvirnem jeziku naj velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda. \ No newline at end of file diff --git a/translations/sl/AGENTS.md b/translations/sl/AGENTS.md index 8fa731c49..19e7ec770 100644 --- a/translations/sl/AGENTS.md +++ b/translations/sl/AGENTS.md @@ -2,29 +2,29 @@ ## Pregled projekta -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. +To je repozitorij izobraževalnega učnega načrta za poučevanje osnov spletnega razvoja za začetnike. Učni načrt je obsežen 12-tedenski tečaj, ki so ga razvili Microsoft Cloud Advocates, in vsebuje 24 praktičnih lekcij, ki pokrivajo JavaScript, CSS in HTML. ### Ključne sestavine -- **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 +- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module, ki temeljijo na projektih +- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor in AI Chat Assistant +- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (ocenjevanje pred/potem lekcije) +- **Večjezična podpora**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte) ### Arhitektura -- Izobraževalno skladišče z strukturo po lekcijah +- Izobraževalni repozitorij z strukturo, ki temelji na lekcijah - Vsaka mapa lekcije vsebuje README, primere kode in rešitve -- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekciji) -- Sistem prevajanja z GitHub Actions (co-op-translator) -- Dokumentacija dostopna prek Docsify in kot PDF +- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti) +- Sistem prevajanja, ki uporablja GitHub Actions (co-op-translator) +- Dokumentacija je dostopna preko Docsify in na voljo kot PDF ## Ukazi za nastavitev -To skladišče je primarno namenjeno za uporabo izobraževalne vsebine. Za delo s specifičnimi projekti: +Ta repozitorij je namenjen predvsem za uporabo izobraževalne vsebine. Za delo s specifičnimi projekti: -### Nastavitev glavnega skladišča +### Nastavitev glavnega repozitorija ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -37,18 +37,18 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # Zaženi razvojni strežnik -npm run build # Zgradi za produkcijo +npm run build # Gradnja za produkcijo npm run lint # Zaženi ESLint ``` -### API za bankovni projekt (Node.js + Express) +### Bank Project API (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 # Oblikuj s Prettier +npm run format # Oblikuj s Prettierjem ``` ### Projekti za razširitve brskalnika @@ -56,10 +56,10 @@ npm run format # Oblikuj s Prettier ```bash cd 5-browser-extension/solution npm install -# Sledite navodilom za nalaganje razširitev, značilnim za brskalnik +# Sledite navodilom za nalaganje razširitev, specifičnih za brskalnik ``` -### Projekti vesoljske igre +### Projekti igre Space Game ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # Odprite index.html v brskalniku ali uporabite Live Server ``` -### Projekt klepetalnega pomočnika (Python Backend) +### Chat projekt (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -78,31 +78,31 @@ python api.py ## Razvojni potek dela -### Za prispevajoče vsebino +### Za prispevke vsebin -1. **Razvezi skladišče (fork)** na svoj GitHub račun -2. **Kloniraj svoj fork** lokalno +1. **Razveji repozitorij** na svoj GitHub račun +2. **Kloniraj svoj razvej** lokalno 3. **Ustvari novo vejo** za svoje spremembe 4. Naredi spremembe v vsebini lekcij ali primerih kode -5. Preizkusi spremembe kode v relevantnih projektnikih -6. Pošlji pull requeste v skladu z navodili za prispevke +5. Preizkusi spremembe kode v relevantnih projektnih imenikih +6. Pošlji pull requeste skladno z navodili za prispevke ### Za učence -1. Razvezi ali kloniraj skladišče -2. Postopoma obišči mape lekcij +1. Razveji ali kloniraj repozitorij +2. Po vrsti obišči imenike 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 +4. Izpolni pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/ +5. Delaj skozi primere kode v mapah lekcij +6. Naredi naloge in izzive +7. Reši post-lekcijske kvize -### Živi razvoj +### Razvoj v živo -- **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 +- **Dokumentacija**: zaženi `docsify serve` v korenski mapi (port 3000) +- **Quiz App**: zaženi `npm run dev` v imeniku quiz-app +- **Projekti**: uporabi VS Code Live Server razširitev za HTML projekte +- **API projekti**: zaženi `npm start` v ustreznih API imenikih ## Navodila za testiranje @@ -119,73 +119,73 @@ npm run build # Preverite, ali se gradnja uspešno zaključi ```bash cd 7-bank-project/api npm run lint # Preveri težave s slogom kode -node server.js # Preveri, da strežnik začne brez napak +node server.js # Preveri, če strežnik zažene brez napak ``` -### Splošni pristop k testiranju +### Splošen pristop k testiranju -- To je učni repozitorij brez obsežnih avtomatskih testov +- To je izobraževalni repozitorij brez celovitih avtomatiziranih testov - Ročno testiranje se osredotoča na: - - Primere kode, ki se izvajajo brez napak - - Delovanje povezav v dokumentaciji - - Uspešno gradnjo projektov + - Primeri kode se izvajajo brez napak + - Povezave v dokumentaciji delujejo pravilno + - Projekti se uspešno zgradijo - Primeri sledijo najboljšim praksam ### Preverjanja pred oddajo -- Zaženi `npm run lint` v mapah z datoteko package.json +- Zaženi `npm run lint` v imenikih, kjer je package.json - Preveri, da so markdown povezave veljavne - Testiraj primere kode v brskalniku ali Node.js - Preveri, da prevodi ohranjajo pravilno strukturo -## Smernice glede sloga kode +## Smernice za stil kode ### JavaScript -- 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 +- Uporabi sodobno sintakso ES6+ +- Sledi standardnim ESLint konfiguracijam, predvidenim v projektih +- Uporabi smiselna imena spremenljivk in funkcij za jasnost izobraževanja +- Dodaj komentarje, ki pojasnjujejo koncepte za učence +- Formatiraj z uporabo Prettier, kjer je konfigurirano ### HTML/CSS - Semantični HTML5 elementi -- Principi odzivnega dizajna +- Principi odzivnega oblikovanja - Jasne konvencije poimenovanja razredov - Komentarji, ki pojasnjujejo CSS tehnike za učence ### Python -- Smernice sloga PEP 8 +- Smernice za stil PEP 8 - Jasni, izobraževalni primeri kode -- Tipizacije tam, kjer so uporabne za učenje +- Tipizacije tam, kjer pomagajo pri učenju ### Markdown dokumentacija - Jasna hierarhija naslovov -- Kode v blokih z določeno jezikovno označbo +- Bloki kode z označevanjem jezika - Povezave do dodatnih virov -- Posnetki zaslona in slike v imeniku `images/` -- Alt besedilo za slike zaradi dostopnosti +- Posnetki zaslona in slike v imenikih `images/` +- Alt besedila za slike za dostopnost ### Organizacija datotek -- 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}/` +- Lekcije so zaporedno oštevilčene (1-getting-started-lessons, 2-js-basics itd.) +- Vsak projekt ima imenike `solution/` in pogosto `start/` ali `your-work/` +- Slike so shranjene v lekcijsko specifičnih mapah `images/` +- Prevodi so v strukturi `translations/{language-code}/` -## Gradnja in nameščanje +## Gradnja in namestitev ### Namestitev Quiz App (Azure Static Web Apps) -Quiz-app je konfiguriran za nameščanje na Azure Static Web Apps: +quiz-app je konfiguriran za namestitev v Azure Static Web Apps: ```bash cd quiz-app npm run build # Ustvari mapo dist/ -# Izvede nameščanje prek GitHub Actions poteka dela ob potisku na main +# Izvede nameščanje preko GitHub Actions toka dela ob potisku na main ``` Konfiguracija Azure Static Web Apps: @@ -197,27 +197,27 @@ Konfiguracija Azure Static Web Apps: ```bash npm install # Namestite docsify-to-pdf -npm run convert # Ustvari PDF iz docs +npm run convert # Ustvarite PDF iz docs ``` -### Dokumentacija Docsify +### Docsify dokumentacija ```bash npm install -g docsify-cli # Namestite Docsify globalno -docsify serve # Postrežite na localhost:3000 +docsify serve # Strežite na localhost:3000 ``` -### Gradnje specifične za projekte +### Gradnja specifičnih projektov -Vsak projekt lahko ima svoj postopek gradnje: +Vsak projektni imenik lahko vsebuje svoj gradbeni postopek: - Vue projekti: `npm run build` ustvari produkcijske pakete -- Statični projekti: brez koraka gradnje, streže datoteke neposredno +- Statični projekti: brez gradbenega koraka, streže datoteke neposredno -## Smernice za pull requeste +## Navodila za pull requeste ### Oblika naslova -Uporabi jasne, opisne naslove, ki kažejo področje spremembe: +Uporabi jasne, opisne naslove, ki označujejo 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` @@ -228,55 +228,55 @@ Uporabi jasne, opisne naslove, ki kažejo področje spremembe: Pred oddajo PR: 1. **Kakovost kode**: - - Zaženi `npm run lint` v prizadetih projektnih mapah + - Zaženi `npm run lint` v prizadetih imenikih projektov - Odpravi vse napake in opozorila linterja 2. **Preverjanje gradnje**: - - Zaženi `npm run build`, če je potrebno - - Prepričaj se, da ni napak pri gradnji + - Zaženi `npm run build`, če je primerno + - Zagotovi, da ni napak pri gradnji 3. **Preverjanje povezav**: - Preizkusi vse markdown povezave - - Preveri, da so reference na slike delujoče + - Preveri delovanje slikovnih referenc 4. **Pregled vsebine**: - - Preberi za pravopisne in slovnične napake - - Preveri pravilnost in izobraževalno vrednost primerov kode + - Preveri pravopis in slovnico + - Zagotovi, da so primeri kode pravilni in izobraževalni - Preveri, da prevodi ohranjajo prvotni pomen -### Zahteve za prispevke +### Zahteve za prispevanje -- Sprejmi Microsoftovo CLA (avtomatski pregled ob prvem PR) +- Strinjaj se z Microsoft CLA (avtomatska preverba 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 +- Preberi [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila +- V opisu PR po potrebi navedi številke issue-jev -### Postopek pregleda +### Proces pregleda -- PR pregledujejo vzdrževalci in skupnost -- Prednost ima jasnost izobraževalne vsebine +- PR-je pregledujejo vzdrževalci in skupnost +- Prioriteta je izobraževalna jasnost - Primeri kode naj sledijo trenutnim najboljšim praksam - Prevodi se pregledajo za točnost in kulturno ustreznost ## Sistem prevajanja -### Avtomatizirani prevodi +### Avtomatiziran prevod -- Uporablja GitHub Actions z co-op-translator workflow +- Uporablja GitHub Actions z delovnim tokom co-op-translator - Samodejno prevaja v več kot 50 jezikov -- Izvorne datoteke v glavnih mapah -- Prevedene datoteke v mapi `translations/{language-code}/` +- Izvorne datoteke v glavnih imenikih +- Prevedene datoteke v `translations/{language-code}/` imenikih -### Dodajanje ročnih izboljšav prevodov +### Dodajanje ročnih izboljšav prevoda 1. Najdi datoteko v `translations/{language-code}/` -2. Naredi izboljšave ob ohranjanju strukture +2. Izvedi izboljšave ob ohranjanju strukture 3. Poskrbi, da primeri kode ostanejo funkcionalni -4. Preizkusi vse lokalizirane kviz vsebine +4. Preizkusi vse lokalizirane vsebine kviza -### Metapodatki za prevode +### Metapodatki prevoda -Prevedene datoteke vsebujejo metapodatkovni naslov: +Prevedene datoteke vsebujejo glavo metapodatkov: ```markdown -**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. +**Omejitev odgovornosti**: +Ta dokument je bil preveden z uporabo storitve za avtomatski prevod [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem matičnem jeziku velja za avtoritativni vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za kakršna koli nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo. \ No newline at end of file diff --git a/translations/sr/.co-op-translator.json b/translations/sr/.co-op-translator.json index fd9622b62..cbbdfec69 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T15:00:07+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T23:29:14+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-03-06T15:13:43+00:00", + "translation_date": "2026-03-27T23:37:15+00:00", "source_file": "AGENTS.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 cb612d6cf..88d959caa 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,12 +1,12 @@ -# Увод у програмске језике и савремене алате за програмере - -Здраво, будући програмеру! 👋 Да ли могу да ти кажем нешто што ме и даље сваког дана покреће узбуђење? Ускоро ћеш открити да програмирање није само око рачунара – то је као да имаш супермоћи да оживиш своје најлудље идеје! +# Увод у програмске језике и савремене алате за развој софтвера -Знаш онај тренутак када користиш своју омиљену апликацију и све се савршено поклопи? Када тапнеш на дугме и нешто потпуно магично се догоди и помислиш „вау, како су то УРАДИЛИ?“ Па, неко баш као ти – вероватно седи у свом омиљеном кафићу у 2 ујутру са својим трећим еспресом – написао је код који је створио ту магију. И ево шта ће ти одузети дах: до краја овог часа нећеш само разумети како су то урадили, већ ћеш једва чекати да и сам пробаш! +Здраво, будући програмеру! 👋 Могу ли ти рећи нешто што ми још увек изазива узбуђење сваки дан? Ускоро ћеш открити да програмирање није само о рачунарима – то је као да имаш праве супермоћи да оствариш своје најлуђе идеје! -Гледај, потпуно разумем ако ти програмирање делује застрашујуће сад. Када сам ја почео, искрено сам мислио да мораш бити неки математички геније или да програмериш од пете године. Али ево шта ми је потпуно променило гледиште: програмирање је баш као учење како да водиш разговоре на новом језику. Почнеш са „здраво“ и „хвала“, па се даље научиш да поручи кафу, и пре него што приметиш, водиш дубоке филозофске разговоре! Али у овом случају, разговараш са рачунарима, и искрено? Они су најстрпљивији саговорници које ћеш икада имати – никада не осуђују твоје грешке и увек су спремни да покушају поново! +Знаш онај тренутак када користиш своју омиљену апликацију и све једноставно иде савршено? Када додирнеш дугме и догоди се нешто потпуно магично што те натера да кажеш "вау, како су то УРАДИЛИ?" Па, неко баш као ти – вероватно седи у свом омиљеном кафеу у 2 ујутру са трећим еспресом – написао је код који је створио ту магију. И сад ћу ти рећи нешто што ће ти одузети дах: до краја овог часа ти нећеш само разумети како су то урадили, него ћеш једва чекати да и сам покушаш! -Данас ћемо истражити невероватне алате који чине савремени веб развој не само могућим, већ и озбиљно заразним. Причам о једнаким онлајн уредницима, прегледачима и радним токовима које сваки дан користе програмери у Netflix-у, Spotify-у и твом омиљеном чудесном студију за апликације. А ево дела који ће те натерати на радосни плес: већина ових професионалних, индустријских алата је потпуно бесплатна! +Погледај, потпуно разумем ако ти програмирање тренутно делује застрашујуће. Када сам ја почео, истински сам мислио да треба да будеш неки геније за математику или да кодујеш од пет година. Али ево шта ми је потпуно променило гледиште: програмирање је као учење да водиш разговоре на новом језику. Почнеш са „здраво“ и „хвала“, па временом поручујеш кафу, а пре него што схватиш, водиш дубоке филозофске дискусије! Само што у овом случају водиш разговоре са рачунарима, а искрено? Они су најстрпљивији саговорници које ћеш икада имати – никад не осуђују твоје грешке и увек су спремни да пробају поново! + +Данас ћемо истражити невероватне алате који чине савремени веб развој не само могућим, већ и озбиљно заразним. Причам ти о истим уређивачима, прегледачима и токовима рада које програмери у Netflix-у, Spotify-ју и твојој омиљеној инди апликационој студији користе сваки дан. А ево дела који ће те натерати да заиграш од среће: већина тих професионалних алата светског стандарда је потпуно бесплатна! ![Intro Programming](../../../../translated_images/sr/webdev101-programming.d6e3f98e61ac4bff.webp) > Скетчнот од [Tomomi Imura](https://twitter.com/girlie_mac) @@ -14,165 +14,165 @@ ```mermaid journey title Ваш пут програмирања данас - section Откривање + section Откријте Шта је програмирање: 5: You - Језици програмирања: 4: You + Програмски језици: 4: You Преглед алата: 5: You - section Истраживање - Уредници кода: 4: You + section Истражите + Уређивачи кода: 4: You Прегледачи и алати за развој: 5: You Командна линија: 3: You - section Вежба + section Вежбајте Детектив језика: 4: You Истраживање алата: 5: You Повезивање са заједницом: 5: You ``` -## Видимо шта већ знаш! +## Хајде да видимо шта већ знаш! -Пре него што се упустимо у забавне ствари, радознао сам – шта већ знаш о овом свету програмирања? И слушај, ако гледаш ова питања и помишљаш „немам баш појма о овоме што пише“, то није само ок, то је савршено! То значи да си на баш правом месту. Замисли овај тест као истезање пре вежбања – ми само загревамо оне мишиће мозга! +Пре него што кренемо у забаву, занима ме – шта већ знаш о овом свету програмирања? И слушај, ако гледаш ова питања мислећи „Ја буквално немам појма о овоме“, то није само у реду, то је савршено! То значи да си на потпуно правом месту. Замисли овај квиз као загревање пре тренинга – само припремамо твоје мишиће мозга! -[Уради предчасовни квиз](https://ff-quizzes.netlify.app/web/) +[Уради квиз пре часа](https://ff-quizzes.netlify.app/web/) ## Авантура на коју крећемо заједно -Океј, ја стварно крећем од скакања од узбуђења због онога што ћемо данас истраживати! Заиста, волео бих да видим твоје лице када ти неки од ових појмова буду кликнули. Ево невероватног путовања на које крећемо заједно: +У реду, стварно сам узбуђен због онога што ћемо данас истражити! Искрено, волео бих да видим твоје лице када неки од ових концепата кликну. Ево невероватног путовања на које крећемо заједно: -- **Шта је заправо програмирање (и зашто је најфантомскија ствар икада!)** – Открићемо како је код буквално невидљива магија која покреће све око тебе, од тог аларма који некако зна да је понедељак ујутро до алгоритма који савршено креира твоје Netflix препоруке -- **Програмски језици и њихове невероватне личности** – Замисли да уђеш на журку где свака особа има сасвим различите супермоћи и начине решавања проблема. Е тако изгледа свет програмских језика, и волећеш да их упознаш! -- **Основне градивне јединице које чине дигиталну магију** – Замисли ово као ултимативни креативни LEGO сет. Када разумеш како се ови делићи спајају, схватићеш да буквално можеш да направиш било шта што твоја машта сања -- **Професионални алати који ће те натерати да се осећаш као да си управо добио чаробни штапић** – Нисам драматичан овде – ови алати ће те заиста учинити да се осећаш као да имаш супермоћи, а најбоље од свега? То су исти они које користе професионалци! +- **Шта је заправо програмирање (и зашто је најкул ствар икада!)** – Открићемо како је код буквално невидљива магија која покреће све око тебе, од оног аларма који на неки начин зна да је понедељак ујутру до алгоритма који савршено бира препоруке на Netflix-у +- **Програмски језици и њихове невероватне личности** – Замисли да улазиш на журку где свака особа има потпуно различите супермоћи и начине решавања проблема. Такво је и окружење програмских језика, и биће ми драго да их упознаш! +- **Основни саставни делови који чине да дигитална магија функционише** – Размисли о томе као о најкраћем креативном LEGO сету. Када схватиш како се ови делови слажу заједно, схватићеш да буквално можеш да направиш све што ти замисао пожели +- **Професионални алати који ће ти дати осећај као да си управо добио чаробни штапић** – Нисам драматичан – ови алати ће те заиста учинити да се осећаш као да имаш супермоћи, а најбоље од свега? То су исти алати које користе професионалци! -> 💡 **Ево шта:** Немој ни да помислиш да сада покушаш све да запамтиш! Тренутно желим само да осетиш искру узбуђења о томе шта је могуће. Детаљи ће се природно усадити док вежбамо заједно – тако се заиста учи! +> 💡 **Ево шта је важно**: Немој ни да помислиш да све данас памтиш напамет! Сада само желим да осетиш искру узбуђења о ономе што је могуће. Детаљи ће природно остати како будемо вежбали заједно – такво је право учење! -> Можеш овај час проћи на [Microsoft Learn](https://learn.microsoft.com/en-us/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)! -## Па шта је у ствари *програмирање*? +## Па шта је тачно *програмирање*? -У реду, хајде да решимо питање од милион долара: шта је заправо програмирање? +У реду, хајде да се позабавимо милионски важним питањем: шта је заправо програмирање? -Причаћу ти причу која је потпуно променила мој поглед на ову тему. Прошле недеље сам покушавао да објасним мајци како да користи наш нови даљински за паметни телевизор. Примијетио сам да кажем ствари као „Притисни црвено дугме, али не оно велико црвено, малено црвено са леве стране... не, други твој леви... ок, сад га држи две секунде, не једну, не три...“ Звуче познато? 😅 +Испричаћу ти причу која је потпуно променила мој однос према овоме. Прошле недеље покушавао сам да објасним мами како да користи наш нови паметни даљински управљач за телевизор. Схватио сам да говорим ствари као што су „Притисни црвено дугме, али не оно велико црвено, оно мало црвено лево... не, твоје друго лево... добро, сад држи два секунде, не једну, не три...“ Звуче познато? 😅 -То је програмирање! То је уметност давање невероватно детаљних, корак по корак упутстава нечему што је моћно али мора да се све савршено подеси. Само што уместо да објашњаваш мајци (која би могла да пита „које црвено дугме?!“), ти објашњаваш рачунару (који уради баш оно што му кажеш, чак и ако то што си рекао није баш оно што си мислио). +То је програмирање! То је уметност да се дају невероватно детаљна, корак по корак упутства нечему што је врло моћно али захтева да све буде савршено објашњено. Само што уместо маме (која може да пита "које црвено дугме?!"), објашњаваш рачунару (који ради баш оно што кажеш, чак и ако оно што си рекао није баш оно што си мислио). -Ево шта ми је одузело дах кад сам први пут то научио: рачунари су у основи прилично једноставни. Они буквално разумеју само две ствари – 1 и 0, што је у основи „да“ и „не“ или „укључено“ и „искључено“. То је то! Али ево где постаје магично – не морамо да причамо у 1 и 0 као у Матриксу. Тиме се баве **програмски језици**. Они су као да имаш најбољег преводиоца на свету који узима твоје савршено нормалне људске мисли и претвара их у рачунарски језик. +Ово ми је одузело дах када сам први пут сазнао: рачунари су заправо прилично једноставни у сржи. Они буквално разумеју само две ствари – 1 и 0, што је у основи „да“ и „не“ или „укључено“ и „искључено.“ То је све! Али ево где почиње магија – не морамо говорити у 1 и 0 као у филму Матрикс. Тутор долазе у помоћ – **програмски језици**. Они су као најбољи преводилац на свету који узима твоје потпуно нормалне људске мисли и претвара их у језик рачунара. -И ево шта ми сваки јутар даје праву језу кад се пробудим: буквално *све* дигитално у твом животу почело је са неким као ти, вероватно у пижами са шољом кафе, како куца код на лаптопу. Та Instagram филтер који те чини беспрекорним? Неки програмер је то написао. Препорука која те одвела до твоје нове омиљене песме? Програмер је направио тај алгоритам. Апликација која ти помаже да поделиш рачун за вечеру са пријатељима? Ја, неко је помислио „ово је досадно, могао бих то да поправим“ и онда... урадио је! +И ево шта ми још даје стварну језу сваки пут када се пробудим: буквално *све* дигитално у твом животу почело је са неким баш као ти, вероватно у пиџами с шољом кафе, кодујући на лаптопу. Та Instagram филтер који те чини беспрекорним? Неко је то написао. Препорука која те довела до твоје нове омиљене песме? Девелопер је направио тај алгоритам. Апликација која ти помаже да поделиш рачун за вечеру са пријатељима? Да, неко је помислио „ово је досадно, верујем да могу то да поправим“ и онда... поправио. -Када научиш да програмираш, не добијаш само нову вештину – постајеш део ове невероватне заједнице решавача проблема који проводе дане размишљајући, „Шта ако бих могао да направим нешто што некоме уљепша дан макар мало?“ Искрено, има ли нешто кул од тога? +Када научиш да програмираш, ти не учиш само нову вештину – постајеш део ове невероватне заједнице решавача проблема који проводе дан размишљајући „Шта ако могу направити нешто што ће некоме мало побољшати дан?“ Искрено, има ли нешто кул од тога? -✅ **Занимљива чињеница за трагање**: Ево нешто супер кул што можеш да потражиш кад будеш имао слободан тренутак – ко мислиш да је био први програмер на свету? Дајем ти наговештај: можда није онако како очекујеш! Прича о овој особи је заиста фасцинантна и показује да програмирање увек значи креативно решавање проблема и размишљање изван оквира. +✅ **Занимљива чињеница**: Ево шта чудесно да потражиш кад будеш имао слободан тренутак – ко мислиш да је био први компјутер програмер на свету? Даћу ти савет: можда није онај кога очекујеш! Прича о овој особи је апсолутно фасцинантна и показује да је програмирање увек било о креативном решавању проблема и размишљању ван оквира. -### 🧠 **Временско освежење: Како се осећаш?** +### 🧠 **Пауза за проверу: Како се осећаш?** -**Погледај на ово:** -- Да ли сада разумеш идеју „давања упутстава рачунарима“? -- Можеш ли да смислиш дневни задатак који би волео да аутоматизујеш програмирањем? -- Која питања ти се врзе у глави о овом целом програмирању? +**Одвоји тренутак да размислиш:** +- Да ли ти сада има смисла идеја о „давању упутстава рачунарима“? +- Можеш ли да смислиш неки свакодневни посао који би желео да аутоматизујеш програмирањем? +- Која питања ти муче ум о овом целом програмерском свету? -> **Запамти:** Потпуно је нормално ако ти неки појмови сада изгледају замућено. Учење програмирања је као учење новог језика – треба време да мозак направи те неуронске везе. Сјајно радиш! +> **Запамти**: Потпуно је нормално ако ти неки концепти тренутно делују нејасно. Учење програмирања је као учење новог језика – мозак ти треба време да изгради оне неуралне везе. Одлично ти иде! ## Програмски језици су као различити укуси магије -У реду, ово ће звучати чудно, али остани са мном – програмски језици су као различити музички жанрови. Замисли: имаш џез, који је глатак и импровизаторски, рок који је моћан и директан, класичну музику која је елегантна и структурирана, и хип-хоп који је креативан и изражајан. Свакој стил има свој дух, своју заједницу страствених фанова, и сваки је савршен за различите расположења и прилике. +У реду, ово ће звучати чудно, али остани са мном – програмски језици су много слични различитим врстама музике. Размисли о томе: имаш џез, који је гласан и импровизован, рок који је снажан и директан, класичну музику која је елегантна и структурана, и хип-хоп који је креативан и изражајан. Сваки стил има свој карактер, своју заједницу фанова, и сваки је савршен за различита расположења и прилике. -Програмски језици раде на исти начин! Не би користио исти језик за прављење забавне мобилне игре којим би обрађивао огромну количину климатских података, баш као што не би пуштао дет метaл на јога часу (па, на већини јога часова! 😄). +Програмски језици раде потпуно исто! Не би користио исти језик да направиш забавну мобилну игру као што би користио да обрађујеш огромне количине климатских података, као што не би пуштао дет метъл на часу јоге (па, барем не на већини часова јоге! 😄). -А ево шта ми сваки пут одузима дах: ови језици су као да имаш најстрпљивијег, најпаметнијег тумача света који седи поред тебе. Можеш да изразиш своје идеје на начин који је природан твом мозгу, а они се баве својом невероватно сложеном преводилачком работом у 1 и 0 које рачунари заиста разумеју. Као да имаш пријатеља који је савршено течан у оба „људска креативност“ и „рачунарска логика“ – и никада не умарају, никада не узимају паузе за кафу и никада те не осуђују ако поставиш исто питање два пута! +Али ево шта ми сваки пут одузме дах када о томе размишљам: ти језици су као да имаш најстрпљивијег, најпаметнијег преводиоца на свету који седи поред тебе. Можеш изразити своје идеје на начин који је природан твом људском мозгу, а они обаве сав невероватно сложен посао превођења у 1 и 0 језик који рачунари стварно разумеју. То је као да имаш пријатеља који савршено говори и „људску креативност“ и „рачунарску логику“ – и он никад не умара, никад не иде на паузу за кафу и никад те не осуђује ако исто питање поставиш два пута! -### Популарни програмски језици и њихове примене +### Популарни програмски језици и њихова употреба ```mermaid mindmap - root((Програмски Језици)) - Web Development + root((Програмски језици)) + Веб развој JavaScript - Чаролија на Фронтенду - Интерактивни Вебсајтови + Чаролија на фронтенду + Интерактивни веб сајтови TypeScript - JavaScript + Типови - Предузетничке Апликације - Data & AI + JavaScript + типови + Предузећанске апликације + Подaци и вештачка интелигенција Python - Наука о Подацима - Машинско Учење + Наука о подацима + Машинско учење Аутоматизација R Статистика Истраживање - Mobile Apps + Мобилне апликације Java Андроид Предузеће Swift иОС - Аппле Еко-систем + Екосистем Аппле-а Kotlin - Модерни Андроид - Вишеплатформено - Systems & Performance + Модеран Андроид + Крос-платформски + Системи и перформансе C++ Игре - Критично за Перформансе + Критично за перформансе Rust - Безбедност Меморије - Системско Програмирање + Безбедност меморије + Системско програмирање Go - Облачне Услуге - Скалирајући Бекенд + Облачне услуге + Скалирајући бекенд ``` -| Језик | Најбољи за | Зашто је популаран | +| Језик | Најбоље за | Зашто је популаран | |----------|----------|------------------| | **JavaScript** | Веб развој, кориснички интерфејси | Ради у прегледачима и покреће интерактивне веб сајтове | -| **Python** | Наука о подацима, аутоматизација, вештачка интелигенција | Лако читање и учење, моћне библиотеке | -| **Java** | Пословне апликације, Android апликације | Независност од платформе, робустан за велике системе | -| **C#** | Windows апликације, развој игара | Јак подршка Microsoft екосистема | -| **Go** | Cloud сервиси, backend системи | Брз, једноставан, дизајниран за модерно рачунарство | +| **Python** | Наука о подацима, аутоматизација, вештачка интелигенција | Лак за читање и учење, моћне библиотеке | +| **Java** | Пословне апликације, Android апликације | Независан од платформе, робустан за велике системе | +| **C#** | Windows апликације, развој игара | Јака подршка Microsoft екосистема | +| **Go** | Cloud сервисе, backend системе | Брз, једноставан, дизајниран за савремено рачунарство | -### Језици високог и ниског нивоа +### Језици високог vs. ниског нивоа -Океј, ово је искрено био појам који ми је сломио мозак када сам почео да учим, па ћу поделити аналогју која ми је коначно све разјаснила – и баш се надам да ће помоћи и теби! +Ово је био концепт који ми је највише био тежак када сам почео да учим, па ћу поделити аналогију која ми је коначно помогла да схватим – и надам се да ће помоћи и теби! -Замисли да посећујеш државу чији језик не говориш, и очајнички ти треба најближи тоалет (сви смо то прошли, зар не? 😅): +Замисли да си у посети некој земљи у којој не говориш језик и журиш да пронађеш најближи тоалет (сви смо били ту, зар не? 😅): -- **Програмирање ниског нивоа** је као да тако добро научиш локални дијалекат да можеш да ћаскаш са баком која продаје воће на углу користећи културне референце, локални сленг и унутрашње шале које разуме само онај који је одрастао тамо. Супер импресивно и невероватно ефикасно... ако случајно говориш тај језик као матерњи! Али прилично збуњујуће када само покушаваш да нађеш тоалет. +- **Програмирање ниског нивоа** је као да тако добро научиш локални дијалекат да можеш да ћаскаш са баком која продаје воће на углу користећи културне референце, локални сленг и унутрашње шале које разуме само неко ко је одрастао тамо. Супер импресивно и невероватно ефикасно... ако си флуентан! Али прилично збуњујуће ако само тражиш тоалет. -- **Програмирање високог нивоа** је као да имаш тог невероватног локалног пријатеља који те само разуме. Можеш рећи „како да нађем тоалет?“ на обичном енглеском, а он ће све културне разлике превести и дати ти упутства на начин који твом неместном мозгу потпуно има смисла. +- **Програмирање високог нивоа** је као да имаш тог невероватног локалног пријатеља који те просто разуме. Можеш рећи „Баш ми треба тоалет“ на обичном енглеском, а он се брине о свим културним преводима и даје тебе упутства на начин који ти разумеш. -У програмирању: -- **Језици ниског нивоа** (као Assembly или C) ти дозвољавају да имаш невероватно детаљне разговоре са самим хардвером рачунара, али онда мораш да мислиш као машина, што је... па, рећи ћу само да је велика ментална промена! -- **Језици високог нивоа** (као JavaScript, Python или C#) ти дозвољавају да мислиш као човек док они воде компликовани језик машине иза сцене. Плус, имају невероватно топле заједнице пунe људи који се сећају како је било бити почетник и заиста желе да помогну! +У програмерским терминима: +- **Језици ниског нивоа** (као Assembly или C) ти дају невероватно детаљне разговоре са стварним хардвером рачунара, али мораш да размишљаш као машина, што је... па, рећи ћу само да је то велики ментални преокрет! +- **Језици високог нивоа** (као JavaScript, Python или C#) ти дозвољавају да размишљаш као човек, док они све машине у позадини обрађују. Поред тога, имају невероватно пријатељске заједнице пуне људи који се сећају како је бити почетник и заиста желе да помогну! -Погађаш које ћу ти предложити да започнеш? 😉 Језици високог нивоа су као точкови за учење које никада заправо не желиш да скидаш јер чине целокупно искуство много пријатнијим! +Погоди који ћу ти ја предложити да почнеш? 😉 Језици високог нивоа су као помоћне точкове на бициклу које никад нећеш заиста желети да скинеш јер ти цело искуство чине много пријатнијим! ```mermaid flowchart TB - A["👤 Човечја Мисао:
'Желим да израчунам Фибоначијеве бројеве'"] --> B{Изабери Ниво Језика} + A["👤 Људска мисао:
'Желим да израчунaм Фибоначијеве бројеве'"] --> B{Изаберите ниво језика} - B -->|Висок Ниво| C["🌟 JavaScript/Python
Лако за читање и писање"] - B -->|Низак Ниво| D["⚙️ Ассемблер/C
Директна контрола хардвера"] + B -->|Висок ниво| C["🌟 ЈаваСкрипт/Питхон
Лако за читање и писање"] + B -->|Низак ниво| D["⚙️ Асемблер/Ц
директна контрола хардвера"] 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: Основна поставка Фибоначија @@ -183,14 +183,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Ово код ради:** +**Ево шта овај код ради:** - **Декларише** константу која одређује колико Фибоначијевих бројева желимо да генеришемо -- **Иницијализује** две променљиве које прате тренутни и следећи број у низи +- **Иницијализује** две променљиве које прате тренутни и следећи број у низу - **Поставља** почетне вредности (0 и 1) које дефинишу Фибоначијев образац -- **Приказује** заглавни текст да означи наш резултат +- **Приказује** заглавље као поруку за идентификацију нашег излаза ```javascript -// Корак 2: Генериши низ са петљом +// Корак 2: Генериши низ помоћу петље for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Објашњење шта се овде дешава:** -- **Пролази** кроз сваки положај у низу користећи `for` петљу -- **Приказује** сваки број са његовим положајем користећи шаблонски стринг -- **Израчунава** следећи Фибоначијев број сабирајући тренутне и следеће вредности -- **Ажурира** променљиве да пређе на следећу итерацију +**Разјашњава шта се овде дешава:** +- **Пролази кроз** сваку позицију у низу користећи `for` петљу +- **Приказује** сваки број са његовом позицијом користећи формат шаблонског литерала +- **Израчунава** следећи Фибоначијев број сабирајући тренутну и следећу вредност +- **Ажурира** променљиве за праћење преласка у следећу итерацију ```javascript // Корак 3: Модерни функционални приступ @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**У горе наведеном смо:** -- **Направили** поново употребљиву функцију користећи модерну стрелицу функције -- **Креирали** низ да сачувамо комплетан низ уместо да га приказујемо број по број -- **Користили** индексирање низа за израчунавање сваког новог броја из претходних вредности -- **Вратили** комплетан низ за флексибилну употребу у другим деловима програма +**Горе, ми смо:** +- **Направили** поново употребљиву функцију користећи савремени стрелачки синтакс +- **Направили** низ у који чувамо целу секвенцу уместо да је приказујемо један по један +- **Користили** индексирање низа да израчунамо сваки нови број из претходних вредности +- **Вратили** целу секвенцу за флексибилну употребу у другим деловима програма -**Језик ниског нивоа (ARM Assembly) – пријатељски рачунарима:** +**Језик ниског нивоа (ARM Assembly) – пријатељски према рачунару:** ```assembly area ascen,code,readonly @@ -257,60 +257,60 @@ back add r0,r1 end ``` -Примети како JavaScript верзија изгледа скоро као упутство написано на енглеском, док верзија на асемблеру користи криптичне команде које директно управљају процесором рачунара. Обе обављају исти задатак, али језик високог нивоа је много лакши за разумевање, писање и одржавање од стране људи. +Примети како верзија у JavaScript-у чита скоро као упутства на енглеском, док верзија у Assembly користи криптичке наредбе које директно контролишу процесор рачунара. Оба обављају исти задатак, али језик високог нивоа је много лакши за људе да разумеју, пишу и одржавају. **Кључне разлике које ћеш приметити:** -- **Читљивост**: JavaScript користи описна имена као што је `fibonacciCount`, док Assembly користи шифроване ознаке као `r0`, `r1` -- **Коментари**: Језици вишег нивоа подстичу објашњавајуће коментаре који чине код самодокументованим -- **Структура**: Логички ток JavaScript-а одговара начину на који људи размишљају о проблемима корак по корак -- **Одржавање**: Ажурирање JavaScript верзије за различите захтеве је једноставно и јасно +- **Читљивост**: ЈаваСкрипт користи описна имена као што је `fibonacciCount`, док Ассембли користи криптичке ознаке као `r0`, `r1` +- **Коментари**: Високо ниво језика подстиче објашњавајуће коментаре који чине да код сам себе документује +- **Структура**: Логички ток ЈаваСкрипта одговара начину на који људи размишљају о проблемима корак по корак +- **Одржавање**: Ажурирање ЈаваСкрипт верзије за различите захтеве је једноставно и јасно -✅ **О низу Фибоначија**: Овај апсолутно прелеп образац бројева (где је сваки број једнак збиру претходна два: 0, 1, 1, 2, 3, 5, 8...) појављује се буквално *свуда* у природи! Пронаћи ћете га у спиралама сунцокрета, обрасцима чешера, начину на који школке натилуса коврчају, па чак и у начину раста грана дрвећа. Заиста је фасцинантно како математика и код могу помоћи да разумемо и поново створимо обрасце које природа користи да створи лепоту! +✅ **О низу Фибоначи**: Овај апсолутно предиван бројни образац (где је сваки број једнак збиру претходна два: 0, 1, 1, 2, 3, 5, 8...) појављује се буквално *свуда* у природи! Можете га пронаћи у спиралама сунцокретових семенки, шарама на четинама, како се љуске наутилуса увијају, па чак и у начину раста гранчица дрвећа. Заиста је задивљујуће како математика и код могу помоћи да разумемо и поново створимо обрасце које природа користи да створи лепоту! -## Основни Камењарски Блокови Који Праве Магију +## Грађевински Блокови Који Чине Магију -У реду, сада када сте видели како програмски језици изгледају у пракси, хајде да разложимо основне делове који сачињавају буквално сваки написани програм. Замислите их као суштинске састојке у вашем омиљеном рецепту – када једном разумете шта сваки ради, моћи ћете да читате и пишете код у готово било ком језику! +Добро, сада када сте видели како програмски језици изгледају у пракси, хајде да разложимо основне делове који чине буквално сваки икада написани програм. Замислите их као суштинске састојке у вашем омиљеном рецепту – када разумете шта сваки ради, моћи ћете да читате и пишете код у готово сваком језику! -Ово је нешто као учење граматике програмирања. Сећате се у школи када сте учили о именицама, глаголима и како слагати реченице? Програмирање има своју верзију граматике, и искрено, много је логичнија и опроштенија од енглеске граматике! 😄 +Ово је као учење граматике програмирања. Сећате се када сте у школи учили о именицама, глаголима и како се праве реченице? Програмирање има своју верзију граматике, и искрено, она је много логичнија и подношљивија од енглеске граматике икада била! 😄 -### Наређења: Упутства Корак по Корак +### Наредбе: Упутства Корак по Корак -Хајде да почнемо са **наређењима** – они су као појединачне реченице у разговору са вашим рачунаром. Свако наређење говори рачунару да уради једну специфичну ствар, слично као када дајете упутства: "Скрените лево овде," "Стани на црвено светло," "Паркирaј се на то место." +Хајде да почнемо са **наредбама** – оне су као појединачне реченице у разговору са вашим рачунаром. Свака наредба каже рачунару да уради једну конкретну ствар, као када дајете упутства: "Skreni levo овде," "Станите на црвеном светлу," "Парк на том месту." -Оно што волим код наређења је колико су обично читљива. Погледајте ово: +Што волим код наредби је како су обично читљиве. Погледај ово: ```javascript -// Основне изјаве које извршавају појединачне радње +// Основне наредбе које изводе појединачне радње 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: Креирање основних променљивих @@ -320,11 +320,11 @@ let temperature = 75; let isRaining = false; ``` -**Разумевање ових концепата:** -- **Чува** непроменљиве вредности у `const` променљивама (као назив сајта) -- **Користи** `let` за вредности које могу да се мењају током рада програма -- **Додељује** различите типове података: стрингове (текст), бројеве и булове (тачно/не) -- **Бира** описна имена која објашњавају шта свака променљива садржи +**Разумевање ових појмова:** +- **Чувајте** непромењиве вредности у `const` променљивама (као име сајта) +- **Користите** `let` за вредности које се могу мењати током програма +- **Додељујте** различите типове података: низове (текст), бројеве, и булове (true/false) +- **Изаберите** описна имена која објашњавају шта свака променљива садржи ```javascript // Корак 2: Рад са објектима за груписање повезаних података @@ -335,47 +335,47 @@ const weatherData = { }; ``` -**Горњи код ради:** -- **Креира** објекат за груписање повезаних временских информација -- **Организује** више података под једним именом променљиве -- **Користи** парове кључ-вредност за јасно означавање сваког дела информација +**Горе смо:** +- **Креирали** објекат за груписање повезаних информација о времену +- **Организовали** више података под једним именом променљиве +- **Користили** парове кључ-вредност за јасно означавање сваког дела информације ```javascript // Корак 3: Коришћење и ажурирање променљивих console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Ажурирање променљивих које се мењају +// Ажурирање променљивих које се могу мењати currentWeather = "cloudy"; temperature = 68; ``` -**Разумевање сваког дела:** -- **Приказује** информације користећи шаблоне са `${}` синтаксом -- **Приступа** својствима објекта помоћу нотације тачке (`weatherData.windSpeed`) -- **Ажурира** променљиве декларисане са `let` да прикажу променљиве услове -- **Комбинује** више променљивих да направи смислене поруке +**Хајде да разумемо сваки део:** +- **Прикажи** информације користећи шаблонске литерале са `${}` синтаксом +- **Приступи** својствима објекта користећи нотaцију тачком (`weatherData.windSpeed`) +- **Ажурирај** променљиве декларисане као `let` да одразе променљиве услове +- **Комбинуј** више променљивих да би створио значајне поруке ```javascript -// Корак 4: Модерно распакивање за чистији код +// Корак 4: Модеран деструктурирање за чистији код const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Шта треба да знате:** -- **Извлачи** одређена својства из објеката користећи деструктурирајућу доделу -- **Креира** нове променљиве аутоматски са истим именима као кључеви у објекту -- **Поједностављује** код избегавајући понављајућу нотацију тачке +- **Извуци** одређена својства из објеката коришћењем деструктурирајуће доделе +- **Креирај** нове променљиве аутоматски са истим именима као кључеви објекта +- **Поједностави** код избегавањем понављајуће нотације тачком -### Контролни Ток: Учимо Ваш Програм да Размишља +### Контрола Тока: Учити Ваш Програм Да Размишља -У реду, овде програмирање постаје потпуно невероватно! **Контролни ток** је у ствари учење вашег програма како да доноси паметне одлуке, управо као што то ви радите сваки дан без икаквог размишљања. +Ово је тренутак када програмирање постаје заиста задивљујуће! **Контрола тока** је у основи учење вашег програма да доноси паметне одлуке, баш као што ви то радите сваки дан, чак и без размишљања. -Замислите ово: јутрос сте вероватно пролазили кроз нешто као "Ако пада киша, узећу кишобран. Ако је хладно, обући ћу јакну. Ако касним, прескочићу доручак и купити кафић на путу." Ваш мозак природно прати ову if-then логику десетинама пута сваког дана! +Замислите ово: овај јутро сте вероватно прошли кроз нешто као „Ако пада киша, понећу кишобран. Ако је хладно, обучем јакну. Ако касним, прескочим доручак и купим кафу у пролазу.“ Ваш мозак природно следи ову if-then логику десетинама пута сваки дан! -То је оно што програме чини интелигентним и живим уместо да само прате досадан, предвидив сценарио. Они заправо могу да посматрају ситуацију, процене шта се дешава и одговоре адекватно. Као да дајете програму мозак који се може прилагодити и правити изборе! +Ово је оно што програме чини интелигентним и живим уместо само да прате досадну, предвидиву скрипту. Они заиста могу да погледају ситуацију, процене шта се дешава и одговоре адекватно. Као да дајете свом програму мозак који се може прилагодити и доносити одлуке! -Желите да видите како ово лепо функционише? Пустите да вам покажем: +Желите да видите како ово сјајно ради? Ево примера: ```javascript // Корак 1: Основна условна логика @@ -389,14 +389,14 @@ if (userAge >= 18) { } ``` -**Ево шта овај код ради:** -- **Проверава** да ли је корисникова старост довољна за гласање -- **Извршава** различите блокове кода у зависности од резултата услова -- **Израчунава** и приказује колико дуго треба да чека да гласа ако је испод 18 година -- **Пружа** конкретне, корисне повратне информације за сваку ситуацију +**Овде код ради следеће:** +- **Провери** да ли корисникова старост испуњава услов за гласање +- **Изврши** различите блокове кода у зависности од резултата услова +- **Израчунај** и прикажи колико је времена до права гласа ако је испод 18 +- **Пружи** конкретне, корисне повратне информације за сваку ситуацију ```javascript -// Корак 2: Више услова са логичким операторима +// Корак 2: Вишеструки услови са логичким операторима const userAge = 17; const hasPermission = true; @@ -409,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Разлагање дешавања овде:** -- **Комбинује** више услова користећи `&&` (и) оператор -- **Креира** хијерархију услова користећи `else if` за различите сценарије -- **Обрађује** све могуће случајеве са коначним `else` изјавом -- **Пружа** јасан и користан повратни одговор за сваку различиту ситуацију +**Разлажемо шта се овде дешава:** +- **Комбинуј** више услова коришћењем `&&` (и) оператора +- **Креирај** хијерархију услова користећи `else if` за више сценарија +- **Обради** све могуће случајеве помоћу коначног `else` блока +- **Пружи** јасне, конкретне повратне информације за сваку различиту ситуацију ```javascript -// Корак 3: Кратки услов са тернарним оператором +// Корак 3: Кратак услов са тернарним оператором const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Запамтите ово:** +**То треба да запамтите:** - **Користите** тернарни оператор (`? :`) за једноставне услове са две опције -- **Пишете** услов прво, па `?`, затим резултат ако је тачно, па `:`, затим резултат ако је нетачно -- **Примена** овог обрасца када треба доделити вредности на основу услова +- **Напишите** услов прво, па `?`, затим истински резултат, па `:`, па лажни резултат +- **Примени** овај образац када треба доделити вредности у зависности од услова ```javascript -// Корак 4: Обрада више специфичних случајева +// Корак 4: Руководење са више специфичних случајева const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,53 +448,53 @@ switch (dayOfWeek) { ``` **Овај код постиже следеће:** -- **Упоређује** вредност променљиве са више одређених случајева -- **Групише** сличне случајеве заједно (радни дани против викенда) -- **Извршава** одговарајући блок кода када налази подударање -- **Укључује** `default` случај за руковање неочекиваним вредностима -- **Користи** `break` наредбе да спречи наставак кода у следећем случају +- **Поређује** вредност променљиве са више конкретних случајева +- **Групише** сличне случајеве (радни дани против викенда) +- **Извршава** одговарајући блок кода када се нађе поклапање +- **Укључује** `default` случај за необичне вредности +- **Користи** `break` наредбе да спречи наставак кода у следећи случај -> 💡 **Аналогија из стварног живота**: Размислите о контролном току као о најстрпљивијем GPS-у на свету који вам даје упутства. Може рећи "Ако има гужве на Главној улици, узми ауто-пут уместо тога. Ако је ауто-пут блокиран због радова, пробај пут прелепим предеоm." Програми користе управо овакву врсту условне логике да паметно реагују на различите ситуације и увек пруже корисницима најбоље могуће искуство. +> 💡 **Примера из стварног света**: Размислите о контроли тока као да имате најстрпљивији ГПС са светa који вам даје упутства. Он може рећи „Ако има гужве на Главној улици, вози аутопутем. Ако је путобрана затворен због радова, покушај сценски пут.“ Програми користе исти овакав условни логички модел да интелигентно реагују на различите ситуације и увек пруже корисницима најбоље могуће искуство. -### 🎯 **Провера Концепта: Мајсторство Основних Каменова** +### 🎯 **Провера Концепта: Владање Грађевинским Блоковима** -**Хајде да видимо како стојите са основама:** -- Можете ли објаснити разлику између променљиве и наређења својим речима? -- Замислите ситуацију из стварног живота где бисте користили 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 асистентима за кодирање који могу помоћи да напишете ваш код (нисам се шалилa!), о облачним окружењима где можете градити целе апликације буквално са било ког места са Ви-Фи-јем, и алатима за дебаговање толико софистицираним да су као да имате X-ray вид за ваше програме. -А сада део који ми и даље изазива узбуђење: ово нису „алати за почетнике“ које ћете прерасти. Ово су управо исте професионалне алате које програмери у Google-у, Netflix-у и тој независној студији апликација коју волите користе у овом тренутку. Осетићете се као прави професионалац када их користите! +И ево оног дела који ми и даље даје трнце: ово нису "алати за почетнике" које ћете прерасти. Ово су исто она професионална средства за рад које програмери у Google-у, Netflix-у и тој инди студији апликација коју волите користе баш сада. Осећаћете се као стручњак користећи их! ```mermaid graph TD - A["💡 Ваша Идеја"] --> B["⌨️ Уређивач Кода
(VS Code)"] - B --> C["🌐 Прегледач ДевТулс
(Тестирање и Отклањање грешака)"] - C --> D["⚡ Командна Линија
(Аутоматизација и Алати)"] - D --> E["📚 Документација
(Учење и Референца)"] - E --> F["🚀 Невероватна Веб Апликација!"] + A["💡 Ваша Идеја"] --> B["⌨️ Уредник Кода
(VS Code)"] + B --> C["🌐 ДевТулс Прегледача
(Тестирање и Отстрањивање Грешака)"] + C --> D["⚡ Командна Линија
(Аутоматизација и Алатке)"] + D --> E["📚 Документација
(Учешће и Референца)"] + E --> F["🚀 Феноменална Веб Апликација!"] - B -.-> G["🤖 АИ Асистент
(GitHub Copilot)"] - C -.-> H["📱 Тестирање Уређаја
(Респонзивни Дизајн)"] + B -.-> G["🤖 AI Асистент
(GitHub Copilot)"] + C -.-> H["📱 Тестирање Уређаја
(Адаптивни Дизајн)"] D -.-> I["📦 Менаџери Пакета
(npm, yarn)"] E -.-> J["👥 Заједница
(Stack Overflow)"] @@ -505,352 +505,350 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Уређивачи кода и IDE-ови: Ваши Нови Дигитални Најбољи Пријатељи +### Уредници Кода и IDE-и: Ваши Нови Дигитални Најбољи Пријатељи -Хајде да причамо о уређивачима кода – они ће заиста постати ваша омиљена места за рад! Замислите их као вашу личну светињу програмирања где ћете проводити већину времена стварајући и усавршавајући ваше дигиталне креације. +Разговор о уредницима кода – ово ће вам заиста постати нова омиљена места за провод! Замислите их као ваше лично уточиште кодирања где ћете проводити већину времена правећи и усавршавајући своје дигиталне креације. -Али ево шта је права магија код модерних уређивача: они нису само сјајни уређивачи текста. Они су као најпаметнији и најподржавајући ментор за кодирање који седи поред вас 24/7. Ухвате ваше грешке пре него што их приметите, предлажу побољшања која вас чине генијем, помажу вам да разумете шта сваки део кода ради, а неки чак могу и предвидети шта ћете куцати и понудити да заврше ваше мисли! +Али оно што је апсолутно магично код модерних уредника: они нису само скупљени уређивачи текста. Они су као да имате најсјајнијег, најподржавајућег ментора за кодирање тик поред себе 24/7. Уочавају ваше правописне грешке пре него што их и приметите, предлажу побољшања која вас чине генијалцем, помажу вам да разумете шта сваки део кода ради и неки чак могу предвидети шта ћете куцати и понудити да заврше ваше мисли! -Сећам се када сам први пут открио аутоматско довршавање – буквално сам се осећао као да живим у будућности. Почнете да куцате нешто, а ваш уређивач каже: „Да ли си размишљао о овој функцији која ради баш оно што ти треба?“ Као да имате читаоца мисли као пријатеља за кодирање! +Сећам се када сам први пут открио аутокомплетирање – буквално сам се осећао као да живим у будућности. Почнете да куцате нешто, а ваш уредник каже: „Хеј, да ли си мислио на ову функцију која ради баш оно што ти треба?“ Као да имате телепата за кодирање! -**Шта ове уређиваче чини невероватним?** +**Шта чини ове уреднике невероватним?** -Модерни уређивачи кода нуде импресиван низ функција осмишљених да побољшају вашу продуктивност: +Модерни уредници кода нуде импресиван низ функција дизајнираних да повећају вашу продуктивност: | Функција | Шта ради | Зашто помаже | |---------|--------------|--------------| -| **Истраживање синтаксе** | Боји различите делове вашег кода | Олакшава читање и проналажење грешака | -| **Аутоматско довршавање** | Предлаже код док куцате | Убрзава кодирање и смањује типографске грешке | -| **Алати за дебаговање** | Помажу у проналажењу и исправљању грешака | Штеди сате времена за решавање проблема | -| **Проширења** | Додају специјализоване функције | Прилагодите уређивач било којој технологији | -| **AI помоћници** | Предлажу код и објашњења | Убрзавају учење и продуктивност | +| **Истакнуће синтаксе** | Боји различите делове вашег кода | Олакшава читање и уочавање грешака | +| **Аутокомплетирање** | Предлаже код док куцате | Брже кодирање и мање грешака у куцању | +| **Алатке за дебаговање** | Помажу да пронађете и поправите грешке | Чува време и нерве у решавању проблема | +| **Проширења** | Додају специјализоване функције | Прилагођавају уредник било којој технологији | +| **AI асистенти** | Предлажу код и објашњења | Убрзавају учење и продуктивност | -> 🎥 **Видео ресурс**: Желите да видите ове алате у акцији? Погледајте овај [Видео о алатима заната](https://youtube.com/watch?v=69WJeXGBdxg) за детаљан преглед. +> 🎥 **Видео ресурс**: Желите да видите ове алате у раду? Погледајте овај [Видео о Алатима Трговине](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) - Ухвата типографске грешке у коду +- Уграђени терминал и интеграција са 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/)** (плаћен, бесплатан за студенте) -- Напредни алати за дебаговање и тестирање -- Интелигентно довршавање кода +- Напредне алатке за дебаговање и тестирање +- Интелигентно комплетирање кода - Уграђена контрола верзија -**Облачни 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/) - тренутни, фулл-стек веб развој -> 💡 **Савет за почетак**: Почните са 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/)** - Индустријски стандард DevTools са обимном документацијом +- **[Chrome](https://developers.google.com/web/tools/chrome-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-у са Мицрософтовим ресурсима за развој -> ⚠️ **Важно савет за тестирање**: Увек тестирајте ваше веб странице у више прегледача! Оно што савршено ради у Chrome-у може изгледати другачије у Safari-ју или Firefox-у. Професионални програмери тестирају на свим главним прегледачима како би обезбедили доследно корисничко искуство. +> ⚠️ **Важан савет за тестирање**: Увек тестирате своје сајтове у више претраживача! Оно што савршено ради у Chrome-у може изгледати другачије у Safari-ју или Firefox-у. Професионални развојни инжењери тестирају у свим главним претраживачима ради доследног корисничког искуства. -### Алати командне линије: Ваш пут ка суперсилама програмера +### Алати командне линије: Ваш приступ супермоћима програмера -Хајде да будемо потпуно искрени у вези командне линије, јер желим да то чујете од неког ко заиста разуме. Када сам је први пут видео – само онај страшни црни екран са трепћућим текстом – буквално сам помислио: „Не, никако! Ово изгледа као нешто из хакерског филма из 1980-их, и дефинитивно нисам довољно паметан за ово!“ 😅 +У реду, хајде да имамо потпуно искрен тренутак овде о командној линији, јер желим да то чујеш од некога ко то заиста разуме. Када сам је први пут видео – само овај застрашујући црни екран са трепћућим текстом – буквално сам помислио: "Не, никако! Ово изгледа као из филма о хакерима из 1980-их и дефинитивно нисам довољно паметан за ово!" 😅 -Али ево шта ми је драго што ми тада нико није рекао, а ја вам сада говорим: командна линија није страшна – она је као разговор лице у лице са вашим рачунаром. Замислите то као разлику између наручивања хране преко неке лепо урађене апликације са сликама и менијима (што је лепо и једноставно) и уласка у ваш омиљени локални ресторан где кувар зна тачно шта волите и може спремити нешто сјајно само ако кажете „изненади ме нечем фантастичним“. +Али ево шта бих волео да ми је неко тада рекао, а шта теби сада говорим: командна линија није застрашујућа – она је као директан разговор са твојим рачунаром. Замисли то као разлику између наручивања хране преко шик апликације са сликама и менијима (што је лепо и лако) и уласка у омиљени локални ресторан где кувар тачно зна шта волиш и може ти спремити нешто савршено само ако кажеш "изненади ме с нечим невероватним." -Командна линија је место где програмери осећају као прави чаробњаци. Укуцате неколико наизглед магичних речи (у реду, то су само команде, али делују магично!), притиснете ентер и БУМ – створили сте целокупну структуру пројекта, инсталирали моћне алате из целог света, или поставили вашу апликацију на интернет да је милиони људи виде. Када једном осетите ту моћ, искрено постаје прилично заразно! +Командна линија је место где програмери осећају као апсолутни чаробњаци. Откуцаш неколико наизглед магичних речи (у реду, то су само команде, али делују магично!), укуцаш ентер и БУМ – направио си целе структуре пројеката, инсталирао моћне алате са целог света или поставио своју апликацију на интернет да је милиони људи виде. Када пробаш ту моћ први пут, искрено, прилично је зависно! -**Зашто ће командна линија постати ваш омиљени алат:** +**Зашто ће командна линија постати твој омиљени алат:** -Док су графичка сучеља одлична за многе задатке, командна линија изузетно добро ради у аутоматизацији, прецизности и брзини. Много алата за развој ради углавном кроз командну линију, и учење како их ефикасно користити може драматично побољшати вашу продуктивност. +Док су графички интерфејси сјајни за многе задатке, командна линија блиста у аутоматизацији, прецизности и брзини. Многи развојни алати раде углавном преко командне линије, а учење како их ефикасно користити може драматично побољшати твоју продуктивност. ```bash -# Корак 1: Креирајте и приступите директоријуму пројекта +# Корак 1: Креирајте и идите у директоријум пројекта mkdir my-awesome-website cd my-awesome-website ``` **Ево шта овај код ради:** -- **Креира** нови директоријум под именом "my-awesome-website" за ваш пројекат -- **Улази** у тај новокреирани директоријум да почне рад +- **Креира** нови директоријум "my-awesome-website" за твој пројекат +- **Улази** у новокреирани директоријум да започне рад ```bash -# Корак 2: Иницијализујте пројекат са package.json +# Корак 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 као модеран build алат за брз развој и продукцију +- **Додаје** Prettier за аутоматско форматирање кода и ESLint за проверу квалитета кода +- **Користи** `--save-dev` заставицу да означи ове пакете као зависности само за развој ```bash -# Корак 3: Креирајте структуру пројекта и фајлове +# Корак 3: Креирај структуру пројекта и фајлове mkdir src assets echo 'My Site

Hello World

' > index.html -# Покрените сервер за развој +# Покрени сервер за развој npx vite ``` **Горе смо:** - **Организовали** пројекат креирањем посебних фасцикли за изворни код и ресурсе -- **Генерисали** основни HTML фајл са исправном структуром документа -- **Покренули** Vite развојни сервер за живо рефрешовање и замену модула у ходу +- **Генерисали** основни HTML фајл са правилном структуром документа +- **Покренули** Vite development сервер за живо рефрешовање и хот модул реплацемент #### Основни алати командне линије за веб развој -| Алат | Намена | Зашто ти треба | -|------|--------|----------------| -| **[Git](https://git-scm.com/)** | Контрола верзија | Праћење промена, сарадња са другима, резервне копије | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript извршни систем и управљање пакетима | Покретање JavaScript-а ван прегледача, инсталација модерних алата | -| **[Vite](https://vitejs.dev/)** | Алат за билд и развојни сервер | Вртоглаво брз развој са заменом модула у ходу | -| **[ESLint](https://eslint.org/)** | Квалитет кода | Аутоматско проналажење и исправка проблема у JavaScript-у | -| **[Prettier](https://prettier.io/)** | Форматирање кода | Одржавајте код доследно форматираним и читљивим | +| Алат | Сврха | Зашто ти треба | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Контрола верзија | Прати промене, сарађуј са другима, прави резервне копије | +| **[Node.js & npm](https://nodejs.org/)** | Јаваскрипт окружење и управљање пакетима | Покрени 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)** 💻 - Моћно окружење за скриптове -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиционална 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)** 💻 - Моћно скриптно окружење +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - Традиционална Windows командна линија **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Уграђена терминална апликација - **[iTerm2](https://iterm2.com/)** - Напреднији терминал са додатним функцијама **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандардни Linux шкољка +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандардни Linux shell - **[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 ујутро? Документација је ту са топлим виртуелним загрљајем и управо тачним одговором који вам треба. Желите да научите о некој усађеној новој функцији о којој сви говоре? Документација вас подржава са корак-по-корак примерима. Покушавате да разумете зашто нешто ради онако како ради? Погодили сте – документација је спремна да вам то објасни тако да коначно буде јасно! +Замисли документацију као приступ најстрпљивијим и најпаметнијим учитељима на свету који су ти увек на располагању. Заглавио си у проблему у 2 ујутро? Документација је ту са топлим виртуелним загрљајем и управо онаквим одговором каквом ти треба. Желиш да научиш о некој кул новој функцији о којој сви причају? Документација те покрива са корак-по-корак примерима. Покушаваш да схватиш зашто нешто ради онако како ради? Погађаш – документација је спремна да ти објасни на начин који ти коначно све разјасни! -Ево нечега што ми је потпуно променило перспективу: свет веб развоја се креће невероватном брзином, и нико (мислим нико!) не памти све напамет. Гледао сам искусне програмере са преко 15 година искуства како проверавају основну синтаксу, и знате шта? То није срамота – то је паметно! Није ствар у савршеном памћењу, него у знању где брзо пронаћи поуздане одговоре и разумевању како их применити. +Ево нешто што ми је потпуно променио перспективу: свет веб развоја се невероватно брзо креће, и нико (мислим апсолутно нико!) не памти све напамет. Гледао сам сениоре са 15+ година искуства како траже основну синтаксу, и знаш шта? То није срамота – то је паметно! Није у питању савршено памћење; већ у знању где брзо пронаћи поуздане одговоре и како их применити. **Ево где се дешава права магија:** -Професионални програмери значајан део свог времена проводе читајући документацију – не зато што не знају шта раде, него зато што веб развојне области тако брзо напредују да је стално учење неопходно. Одлична документација вам помаже да разумете не само *како* нешто користити, већ и *зашто* и *када*. +Професионални програмери проводе значајан део свог времена читајући документацију – не зато што не знају шта раде, већ зато што се пејзаж веб развоја толико брзо мења да је непрекидно учење неопходно. Одлична документација ти помаже да разумеш не само *како* нешто користити, већ и *зашто* и *када* то користити. -#### Основни ресурси документације +#### Основни ресурси за документацију **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Златни стандард за документацију о веб технологијама -- Свеобухватни водичи за HTML, CSS и JavaScript -- Укључује информације о компатибилности прегледача -- Садржи практичне примерe и интерактивне демонстрације +- Златни стандард за документацију веб технологија +- Обимни водичи за HTML, CSS и JavaScript +- Укључује информације о компатибилности претраживача +- Садржи практичне примере и интерактивне демое **[Web.dev](https://web.dev)** (од Google-а) -- Најбоље праксе модерног веб развоја +- Савремене најбоље праксе веб развоја - Водичи за оптимизацију перформанси - Принципи приступачности и инклузивног дизајна -- Студије случајева из стварних пројеката +- Студии случајева из реалних пројеката **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ресурси за развој за Edge прегледач +- Ресурси за развој у Edge претраживачу - Водичи за прогресивне веб апликације -- Увид у крос-платформски развој +- Упутства за кросплатформски развој **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структурирани курикулуми за учење -- Видео курсеви од индустријских стручњака -- Вежбе кодирања за праксу +- Структурисани програми учења +- Видео курсеви од стручњака из индустрије +- Практичне вежбе кодирања -> 📚 **Стратегија учења**: Не покушавајте да меморишете документацију – уместо тога научите како да се ефикасно крећете кроз њу. Обележавајте често коришћене референце и вежбајте коришћење претраге да брзо пронађете специфичне информације. +> 📚 **Стратегија учења**: Немој да покушаваш да научиш документацију напамет – уместо тога, научи како да је ефикасно претражујеш. Означи често коришћене референце и вежбај коришћење функција претраге да брзо пронађеш специфичне информације. -### 🔧 **Провера знања алата: Шта вам највише одговара?** +### 🔧 **Провера знања о алатима: Шта ти највише прија?** -**Одвојите тренутак да размислите:** -- Који алат сте највише узбуђени да испробате први? (Нема погрешног одговора!) -- Да ли вам командна линија и даље делује застрашујуће или вас занима? -- Можете ли замислити да користите DevTools у прегледачу да погледате „иза завесе“ ваших омиљених сајтова? +**Одвоји тренутак да размислиш:** +- Који алат си највише узбуђен да прво испробаш? (Нема погрешног одговора!) +- Да ли ти командна линија и даље делује застрашујуће, или те ипак занима? +- Можеш ли да замислиш како користиш ДевТулсе претраживача да завириш иза завесе својих омиљених сајтова? ```mermaid pie title "Време програмера проведено са алатима" - "Уредник кода" : 40 + "Уређивач кода" : 40 "Тестирање у прегледачу" : 25 "Командна линија" : 15 "Читање документације" : 15 - "Отлањење грешака" : 5 + "Отмеравање грешака" : 5 ``` -> **Занимљива чињеница**: Већина програмера проводи око 40% времена у свом едитору кода, али примети колико се времена троши на тестирање, учење и решавање проблема. Програмирање није само писање кода – то је креирање искустава! +> **Забавна чињеница**: Већина програмера проводи око 40% свог времена у уређивачу кода, али примети колико времена иде на тестирање, учење и решавање проблема. Програмирање није само писање кода – већ је креирање искустава! -✅ **За размишљање**: Ево нешто занимљиво за размишљање – како мислите да се алати за прављење веб сајтова (развој) разликују од алата за дизајн како да изгледају? То је као разлика између архитекте који дизајнира лепу кућу и извођача који је заправо гради. Обоје су важни, али им требају другачији алати! Овакав начин размишљања ће вам заиста помоћи да видите ширу слику како веб сајтови оживљавају. +✅ **За размишљање**: Ево једне занимљивости – како мислиш да се алати за израду сајтова (развој) могу разликовати од алата за дизајн њиховог изгледа (дизајн)? То је као разлика између архитекте који дизајнира прелепу кућу и извођача радова који је заиста гради. Обоје су кључни, али имају различите радне алате! Овакво размишљање ће ти заиста помоћи да видиш ширу слику како сајтови оживљавају. -## Изазов GitHub Copilot Агенту 🚀 +## GitHub Copilot Agent Изазов 🚀 -Користите режим Агента да завршите следећи изазов: +Користи Agent режим да завршиш следећи изазов: -**Опис:** Истражите функције модерног кода едитора или IDE-а и покажите како могу побољшати ваш радни ток као веб програмера. +**Опис:** Истражи функције савременог уређивача кода или IDE-а и прикажи како може побољшати твој радни ток као веб програмера. -**Упутство:** Изаберите код едитор или IDE (нпр. Visual Studio Code, WebStorm или cloud-based IDE). Набројте три функције или додатка који вам помажу у писању, дебаговању или одржавању кода ефикасније. За сваки наведе кратко објашњење како унапређује ваш радни ток. +**Наредба:** Изабери уређивач кода или IDE (попут Visual Studio Code, WebStorm-а или cloud-based IDE-а). Наброј три функције или екстензије које ти помажу да ефикасније пишеш, дебагујеш или одржаваш код. За сваку објасни кратко како побољшава твој радни ток. --- ## 🚀 Изазов -**Добро, детективе, спреман за свој први случај?** +**У реду, детективе, спреман за свој први случај?** -Сад кад имаш ову сјајну основу, имам авантуру која ће ти помоћи да видиш колико је свет програмирања невероватно разнолик и фасцинантан. И слушај – ово још није писање кода, тако да нема притиска! Замисли себе као детектива програмских језика на свом првом узбудљивом задатку! +Сада када имаш ову сјајну основу, припремио сам авантуру која ће ти помоћи да видиш колико заиста програмерски свет може бити разнолик и фасцинантан. И слушај – ово још није писање кода, па нема притиска! Замисли себе као детектива програмских језика на свом првом узбудљивом случају! **Твоја мисија, ако је прихватиш:** -1. **Постани истраживач језика**: Изабери три програмска језика из потпуно различитих области – можда један за прављење веб сајтова, један за мобилне апликације и један за анализу података за научнике. Пронађи примере истог једноставног задатка написаног на сва три језика. Обећавам – бићеш запањен колико могу да изгледају различито док раде исто! - -2. **Откриј приче о пореклу**: Шта чини сваки језик посебним? Једна кул чињеница – сваки програмски језик је створен зато што је неко помислио „Знаш шта? Мора постојати бољи начин да се реши овај конкретан проблем.“ Можеш ли да сазнаш који су то проблеми били? Неке од ових прича су заиста фасцинантне! - -3. **Упознај заједнице**: Погледај колико су пријатељске и страствене заједнице сваког језика. Неке имају милионе програмера који деле знање и помажу једни другима, друге су мање али изузетно блиске и подржавајуће. Свидеће ти се различите личности тих заједница! +1. **Постани истраживач језика**: Изабери три програмска језика из потпуно различитих универзума – можда један за прављење сајтова, један за креирање мобилних апликација и један који обрађује податке за научнике. Пронађи примере истог једноставног задатка написаног у сва три језика. Обећавам да ћеш бити потпуно изненађен колико могу да изгледају различито док раде исту ствар! -4. **Слушај свој инстинкт**: Који језик ти сада највише прија? Не брините о „савршеном“ избору – само слушај своје осећаје! Овде нема погрешног одговора, а касније увек можеш истражити друге. +2. **Откриј њихове приче о настанку**: Шта прави сваки језик посебним? Ево једна кул чињеница – сваки програмски језик је настао зато што је неко помислио: „Знаш шта? Мора да постоји бољи начин да се реши ова конкретна дилема.“ Можеш ли да сазнаш који су ти проблеми били? Неке од ових прича су заиста фасцинантне! -**Бонус детективски задатак**: Пробај да сазнаш којим програмским језицима су изграђени велики веб сајтови или апликације. Гарантујем да ћеш бити изненађен када сазнаш шта покреће Instagram, Netflix или ону мобилну игру коју не можеш да оставиш! +3. **Упознај заједнице**: Погледај колико су пријатељске и страствене заједнице сваког језика. Неке имају милионе програмера који деле знање и помажу једни другима, друге су мање али невероватно блиске и потпорно. Свидеће ти се да видиш различите личности које ове заједнице имају! -> 💡 **Запамти**: Не покушаваш данас да постанеш експерт за било који од ових језика. Све што радиш је да упознајеш комшије пре него што одлучиш где ћеш да се установиш. Узми време, забави се и нека те води радозналост! +4. **Прати инстинкт**: Који језик ти тренутно делује приступачније? Не брините о томе да направите „савршен“ избор – само слушај својој интуицији! Нема погрешног одговора, а увек можеш касније испробати друге. -## Хајде да прославимо шта си открио! +**Бонус детективски посао**: Погледај можеш ли сазнати са којим великим сајтовима или апликацијама је сваки језик направљен. Гарантујем да ћеш бити запрепашћен кад научиш шта покреће 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/). Не бојте се експериментисања – ништа не можете покварити! -- Прочитајте о томе како је ваш омиљени језик настао. Заиста, неке од тих прича о пореклу су фасцинантне и помоћи ће вам да разумете зашто језици раде онако како раде. +**Узми времена да истражујеш и забави се!** +Обухватили сте пуно тога данас, и то је нешто на шта треба да будете поносни! Сада долази забаван део – истраживање тема које су пробудиле вашу радозналост. Запамтите, ово није домаћи задатак – ово је авантура! -**Уживајте у новим алаткама:** -- Преузмите Visual Studio Code ако то већ нисте урадили – бесплатан је и свиђаће вам се! -- Проведите неколико минута истражујући Marketplace за Extensions. То је као продавница апликација за ваш код уредник! -- Отворите Developer Tools у прегледачу и кликајте по њима. Немојте бринути да разумете све – само се упознајте са оним што тамо има. +**Зазарите дубље у оно што вас узбуђује:** -**Приклучите се заједници:** -- Пратите неке програмерске заједнице на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), или [GitHub](https://github.com/). Програмерска заједница је невероватно пријатељска према почетницима! -- Гледајте видео записе за почетнике на YouTube-у. Постоји много сјајних креатора који још памте како је то почети. -- Размотрите придруживање локалним састанцима или онлајн заједницама. Верујте ми, програмери воле да помажу почетницима! +**Пробајте практично програмирање:** +- Посетите званичне сајтове 2-3 програмиранска језика који су вам дали пажњу. Сваки од њих има своју личност и причу! +- Испробајте неке онлајн кодирајуће платформе као што су [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), или [Replit](https://replit.com/). Не бојте се да експериментишете – не можете ништа да покварите! +- Прочитајте како је настао ваш омиљени језик. Заиста, неке од тих прича о пореклу су фасцинантне и помоћи ће вам да разумете зашто језици раде онако како раде. -> 🎯 **Слушајте, ево шта желим да запаметите**: Не очекује се да постанете чаробњак програмирања преко ноћи! Тренутно само упознајете овај невероватни нови свет у који улазите. Узмите време, уживајте у путовању, и запамтите – сваки програмер кога поштујете једном је седео управо тамо где сте ви сада, узбуђен и можда мало преплављен. То је сасвим нормално и показује да сте на добром путу! +**Упознајте се боље са својим новим алатима:** +- Преузмите Visual Studio Code ако то већ нисте урадили – бесплатан је и сигурно ћете га вољети! +- Потрошите неколико минута прегледајући пијацу додатака (Extensions marketplace). То је као продавница апликација за ваш код уређивач! +- Отворите Developer Tools у вашем претраживачу и само кликајте. Не брините ако све не разумете – само се упознајте са тим шта је све ту. +**Придружите се заједници:** +- Пратите неке заједнице програмера на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), или [GitHub](https://github.com/). Заједница програмера је изузетно дочекујућа према почетницима! +- Погледајте неке видео снимке за почетнике на YouTube-у. Постоји толико великих креатора који се сећају како је бити на почетку. +- Размислите о прикључењу локалним састанцима или онлајн заједницама. Верујте ми, програмери воле да помажу новајлијама! +> 🎯 **Слушајте, ово желим да запамтите**: Не очекује се да постанете мајстор кодирања преко ноћи! Тренутно се само упознајете са овим невероватним новим светом у који ћете ући. Узмите време, уживајте у путовању и запамтите – сваки програмер којег дивите једном је седео управо тамо где сте ви сада, осећајући узбуђење и можда мало преплављености. То је сасвим нормално и значи да радите како треба! ## Задатак [Reading the Docs](assignment.md) -> 💡 **Мали подстицај за ваш задатак**: Волео бих да видим како истражујете неке алате које још нисмо обрадили! Прескочите уреднике, прегледаче и командне алате о којима смо већ причали – постоји цела невероватна универзума сјајних развојних алата који чекају да буду откривени. Тражите оне који се активно одржавају и имају живе, корисне заједнице (они имају најбоље туторијале и најпожељније људе када се заглавите и затреба вам пријатељска помоћ). +> 💡 **Мали подстицај за ваш задатак**: Волео бих да вас видим како истражујете неке алате које још нисмо покривали! Прескочите уређиваче, прегледаче и алате командне линије о којима смо већ причали – постоји ово цело невероватно универзум сјајних развојних алата који чекају да буду откривени. Тражите оне који се активно одржавају и имају живе, корисне заједнице (они обично имају најбоље туторијале и најподржавајуће људе кад заглавите и треба вам пријатељска помоћ). --- -## 🚀 Ваш временски план путовања програмирања +## 🚀 Ваш временски оквир пута у програмирање ### ⚡ **Шта можете урадити у наредних 5 минута** -- [ ] Обележите 2-3 сајта програмских језика која су вам привукла пажњу +- [ ] Означите као фаворите 2-3 сајта програмиранских језика који су вас заинтересовали - [ ] Преузмите Visual Studio Code ако то већ нисте урадили -- [ ] Отворите DevTools у прегледачу (F12) и кликајте по било ком сајту -- [ ] Придружите се једној програмерској заједници (Dev.to, Reddit r/webdev, или Stack Overflow) +- [ ] Отворите DevTools у свом претраживачу (F12) и кликајте по било ком сајту +- [ ] Придружите се једној заједници програмера (Dev.to, Reddit r/webdev, или Stack Overflow) -### ⏰ **Шта можете постићи у овом часу** -- [ ] Завршите квиз после лекције и размишљајте о вашим одговорима +### ⏰ **Шта можете постићи у овом сату** +- [ ] Завршите квиз након лекције и размислите о вашим одговорима - [ ] Подесите VS Code са GitHub Copilot додатком - [ ] Испробајте пример "Hello World" у 2 различита програмска језика онлајн -- [ ] Погледајте видео "Дан у животу програмера" на YouTube-у -- [ ] Започните истраживање о свом изабраном језику (из изазова) +- [ ] Погледајте видео "Дан из живота програмера" на YouTube-у +- [ ] Почните свој детективски рад у програмирању (из изазова) -### 📅 **Ваша авантура у току недеље** +### 📅 **Ваша авантура током недеље** - [ ] Завршите задатак и истражите 3 нова развојна алата -- [ ] Пратите 5 програмера или рачуна везаних за програмирање на друштвеним мрежама -- [ ] Покушајте направити нешто мало на CodePen-у или Replit-у (чак и само "Hello, [Ваше име]!") -- [ ] Прочитајте један блог пост програмера о његовом путу кодирања -- [ ] Придружите се виртуелном састанку или гледајте програмерски говор -- [ ] Почните да учите свој одабрани језик уз онлајн туторијале - -### 🗓️ **Ваша месечна трансформација** -- [ ] Направите свој први мали пројекат (чак и једноставна веб страница рачуна) -- [ ] Допринесите неком open-source пројекту (почните са исправкама у документацији) -- [ ] Менторирајте некога ко тек почиње у програмирању -- [ ] Креирајте свој портфолио вебсајт -- [ ] Повежите се са локалним програмерским заједницама или групама за учење -- [ ] Почните да планирате свој следећи корак у учењу +- [ ] Пратите 5 програмера или програмерских налога на друштвеним мрежама +- [ ] Покушајте направити нешто мало у CodePen-у или Replit-у (чак и само "Hello, [Ваше име]!") +- [ ] Прочитајте један блог пост програмера о нечјем путовању у програмирању +- [ ] Придружите се виртуелном састанку или погледајте говор о програмирању +- [ ] Почните да учите изабрани језик са онлајн туторијалима + +### 🗓️ **Ваша трансформација током месеца** +- [ ] Направите свој први мали пројекат (чак и једноставна веб страница је довољна!) +- [ ] Допринесите пројекту отвореног кода (почните са поправкама документације) +- [ ] Менторишите неког ко тек почиње своје путовање у програмирање +- [ ] Креирајте своју веб страницу портфолија програмера +- [ ] Повежите се са локалним заједницама програмера или групама за учење +- [ ] Почните планирати свој следећи циљ у учењу ### 🎯 **Коначна рефлексија** **Пре него што наставите, одвојите тренутак да прославите:** -- Шта вас је данас највише узбудило у програмирању? +- Шта вас је једна ствар у програмирању данас узбудила? - Који алат или концепт желите прво да истражите? -- Како се осећате на почетку овог пута у програмирању? -- Које питање бисте желели да поставите програмеру у овом тренутку? +- Како се осећате у вези с почетком овог пута у програмирање? +- Које питање бисте сада желели да поставите програмеру? ```mermaid journey - title Твој Пут Ка Самопоуздању + title Ваше Путовање Ка Изграђивању Самопоуздања section Данас - Рањив: 3: You - Преоптерећен: 4: You - Узбуђен: 5: You - section Ова Недеља + Радозналост: 3: You + Преоптерећеност: 4: You + Увесељен: 5: You + section Ове Неделје Истраживање: 4: You Учење: 5: You Повезивање: 4: You - section Следећи Месец - Градња: 5: You + section Следећег Месеца + Грађење: 5: You Самопоуздан: 5: You Помагање Другима: 5: You ``` -> 🌟 **Запамтите**: Сваки стручњак је некада био почетник. Сваки искусни програмер је некада осећао управо као ви сада – узбуђено, можда мало преплављено, и свакако радознало о могућностима. Ви сте у сјајном друштву и ово путовање ће бити изванредно. Добродошли у диван свет програмирања! 🎉 +> 🌟 **Запамтите**: Сваки експерт је некада био почетник. Сваки сениор програмер се једном осећао баш као што се ви сада осећате – узбуђено, можда мало преплављено и дефинитивно радознало о могућностима. У одличном сте друштву, а овај путовање биће невероватно. Добродошли у диван свет програмирања! 🎉 --- -**Изјавa о одрицању одговорности**: -Овај документ је преведен коришћењем АИ преводилачке услуге [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/AGENTS.md b/translations/sr/AGENTS.md index 9ce8a0040..800eafa42 100644 --- a/translations/sr/AGENTS.md +++ b/translations/sr/AGENTS.md @@ -2,29 +2,29 @@ ## Преглед пројекта -Ово је репозиторијум образовног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватни курс од 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 пројекте) ### Архитектура -- Образовни репозиторијум са структуром заснованом на лекцијама -- Свакa фасцикла лекције садржи README, примере кода и решења -- Самостални пројекти у засебним директоријумима (quiz-app, различити пројекти лекција) +- Едукативни репозиторијум са структуом по лекцијама +- Свака фасцикла лекције садржи README, примере кода и решења +- Самостални пројекти у посебним директоријумима (quiz-app, различити пројекти лекција) - Систем превођења користећи GitHub Actions (co-op-translator) -- Документација послужена преко Docsify-а и доступна као PDF +- Документација доступна преко Docsify и у PDF формату ## Команде за подешавање -Овај репозиторијум је углавном за конзумирање образовног садржаја. За рад са специфичним пројектима: +Овај репозиторијум је првенствено намењен за конзумирање едукативног садржаја. За рад са специфичним пројектима: -### Основно подешавање репозиторијума +### Главно подешавање репозиторијума ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -37,29 +37,29 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # Покрени развојни сервер -npm run build # Направи билд за продукцију +npm run build # Направи за продукцију npm run lint # Покрени ESLint ``` -### Bank Project API (Node.js + Express) +### 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,86 +67,86 @@ npm install # Отворите index.html у прегледачу или користите Live Server ``` -### Chat Пројекат (Python Backend) +### Пројекат чет (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 requests пратећи смернице за допринос +1. **Форкнути репозиторијум** на свој GitHub налог +2. **Клонирати форк** локално +3. **Направити нову грану** за измене +4. Извршити измене у наставном садржају или примерима кода +5. Тестирати промене кода у релевантним директоријумима пројеката +6. Послати pull request према правилима доприноса ### За ученике -1. Направите fork или клонирајте репозиторијум -2. Користите се директоријумима лекција по редоследу -3. Прочитајте README фајлове за сваку лекцију -4. Решевајте пред-лекцијске квизове на https://ff-quizzes.netlify.app/web/ -5. Радите кроз примере кода у фасциклама лекција -6. Завршите задатке и изазове -7. Решите пост-лекцијске квизове +1. Форкнути или клонирати репозиторијум +2. Ићи кроз фасцикле лекција по реду +3. Читати README датотеке за сваку лекцију +4. Решавати предлессон квизове на https://ff-quizzes.netlify.app/web/ +5. Радити на примерима кода у фасциклама лекција +6. Завршавати задатке и изазове +7. Решавати после-лекционе квизове ### Ливе развој -- **Документација**: Покрените `docsify serve` из корена (порта 3000) -- **Quiz App**: Покрените `npm run dev` у директоријуму quiz-app -- **Пројекти**: Користите VS Code Live Server проширење за HTML пројекте -- **API Пројекти**: Покрените `npm start` у одговарајућим API директоријумима +- **Документација**: Покренути `docsify serve` у корену (порт 3000) +- **Quiz App**: Покренути `npm run dev` у директоријуму quiz-app +- **Пројекти**: Користити VS Code Live Server екстензију за HTML пројекте +- **API пројекти**: Покренути `npm start` у одговарајућим API директоријумима ## Упутства за тестирање -### Тестирање Quiz App-а +### Тестирање 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 @@ -157,126 +157,126 @@ node server.js # Потврди да се сервер покреће без ### Python -- Поштујте PEP 8 стилске смернице -- Јасни, образовни примери кода -- Типске наговештаје где су корисни за учење +- Пратите PEP 8 стилске смернице +- Јасни, едукативни примери кода +- Типска анализа где помаже за учење ### Markdown документација - Јасна хијерархија наслова -- Блокови кода са одређеним језиком +- Блокови кода са спецификацијом језика - Линкови ка додатним ресурсима -- Скриншотови и слике у `images/` директоријумима +- Снимци екрана и слике у `images/` фасциклама - Alt текст за слике ради приступачности ### Организација фајлова -- Лекције нумерисане по редоследу (1-getting-started-lessons, 2-js-basics, итд.) -- Сваки пројекат има `solution/` и често `start/` или `your-work/` директоријуме -- Слике смештене у лекцијски специфичне `images/` фасцикле +- Лекције нумерисане узастопно (1-getting-started-lessons, 2-js-basics итд.) +- Сваки пројекат има директоријуме `solution/` и често `start/` или `your-work/` +- Слике се чувају у лекцијским `images/` фасциклама - Преводи у структури `translations/{language-code}/` -## Изградња и деплој +## Изградња и распоређивање -### Деплој Quiz App-а (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` -- **Радни ток**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Излазна локација**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Генерација PDF документације +### Генерисање PDF документације ```bash npm install # Инсталирај docsify-to-pdf -npm run convert # Креирај PDF из докс +npm run convert # Генериши PDF из докса ``` ### Docsify документација ```bash npm install -g docsify-cli # Инсталирајте Docsify глобално -docsify serve # Покрените на localhost:3000 +docsify serve # Сервирајте на localhost:3000 ``` -### Изградња специфична по пројекту +### Изградња специфична за пројекте -Свако директоријум пројекта може имати свој процес изградње: -- Vue пројекти: `npm run build` ствара продукционе пакете -- Статички пројекти: Нема корака изградње, фајлови се директно служе +Сваки пројекат може имати свој процес изградње: +- Vue пројекти: `npm run build` креира продукционе пакете +- Статички пројекти: Нема корака изградње, сервер директно служи фајлове -## Смернице за Pull Request-ове +## Упутства за Pull Request ### Формат наслова -Користите јасне, описне наслове који указују на подручје измене: +Користити јасне, описне наслове који указују на област промене: - `[Quiz-app] Додај нови квиз за лекцију X` -- `[Lesson-3] Исправка грешке у терраријум пројекту` +- `[Lesson-3] Исправи типографску грешку у пројекту тераријум` - `[Translation] Додај шпански превод за лекцију 5` - `[Docs] Ажурирај упутства за подешавање` -### Обавезне провере +### Обавезне проверe -Пре слања PR-а: +Пре слања PR: 1. **Квалитет кода**: - - Покрените `npm run lint` у погођеним директоријумима - - Исправите све грешке и упозорења + - Покренути `npm run lint` у директиоријумима погођеним променама + - Поправити све lint грешке и упозорења -2. **Верификација изградње**: - - Покрените `npm run build` ако је применљиво - - Уверите се да нема грешака приликом изградње +2. **Провера изградње**: + - Покренути `npm run build` ако је применљиво + - Осигурати да нема грешака при изградњи 3. **Валидација линкова**: - - Тестирајте све markdown линкове - - Проверите да референце слика раде + - Тестирати све markdown линкове + - Проверити референце слика 4. **Преглед садржаја**: - - Прочитајте и проверите правопис и граматику - - Уверите се да су примери кода тачни и образовни - - Проверите да преводи очувају оригинално значење + - Проверити правопис и граматику + - Осигурати да су примери кода исправни и образовни + - Верификовати да преводи задржавају оригинално значење ### Захтеви за допринос -- Прихватите Microsoft CLA (аутоматска провера при првом PR-у) -- Пратите [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Погледајте [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљна упутства -- Унесите бројеве issue-ја у опис 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 радним током -- Аутоматски преводи на преко 50 језика -- Иза изворних фајлова у главним директоријумима -- Преведени фајлови у `translations/{language-code}/` директоријумима +- Користи GitHub Actions са co-op-translator workflow-ом +- Преводи на 50+ језика аутоматски +- Изворне датотеке у главним директоријумима +- Преведене датотеке у структури `translations/{language-code}/` ### Додавање ручних побољшања превода 1. Пронађите фајл у `translations/{language-code}/` 2. Направите побољшања уз очување структуре -3. Уверите се да примери кода остају функционални -4. Тестирајте локализовани квиз садржај +3. Осигурајте да примери кода остају функционални +4. Тестирајте било који локализовани квиз садржај -### Мета подаци превода +### Мета подаци о преводима -Преведени фајлови укључују заглавље са мета подацима: +Преведене датотеке укључују заглавље мета података: ```markdown ``` -## Отстрањивање грешака и решавање проблема +## Решавање проблема и дијагностика ### Уобичајени проблеми -**Quiz app не може да се покрене**: -- Проверите верзију 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.js верзија најмање 10 -- Проверите да ли је порт у употреби -- Уверите се да су све зависности инсталиране са `npm install` +**API сервер не почиње**: +- Проверите да Node.js верзија испуњава минимум (node >=10) +- Проверите да ли је порт већ у употреби +- Осигурајте да су све зависности инсталиране преко `npm install` -**Проширење прегледача се не учитава**: -- Проверите да је manifest.json правилно форматиран -- Прегледајте конзолу прегледача за грешке -- Пратите упутства специфична за инсталацију проширења прегледача +**Прегледачки екстензијa не учитава**: +- Проверите да je manifest.json исправно форматиран +- Проверите конзолу прегледача за грешке +- Пратите упутства за инсталацију прегледачких екстензија -**Проблеми са Python chat пројектом**: -- Уверите се да је OpenAI пакет инсталиран: `pip install openai` -- Проверите да је окружење променљива GITHUB_TOKEN подешена -- Проверите дозволе за приступ GitHub Models +**Проблеми са Python чет пројектом**: +- Проверите да је пакет OpenAI инсталиран: `pip install openai` +- Проверите да је постављена GITHUB_TOKEN променљива окружења +- Проверите дозволе за приступ GitHub моделима **Docsify не служи документацију**: -- Глобално инсталирајте docsify-cli: `npm install -g docsify-cli` +- Инсталирајте docsify-cli глобално: `npm install -g docsify-cli` - Покрените из корена репозиторијума -- Проверите да `docs/_sidebar.md` постоји +- Проверите да ли `docs/_sidebar.md` постоји ### Савети за развојно окружење -- Користите VS Code са Live Server проширењем за HTML пројекте -- Инсталирајте ESLint и Prettier проширења за доследно форматирање -- Користите DevTools прегледача за дебаговање JavaScript-а -- За Vue пројекте, инсталирајте Vue DevTools проширење за прегледач +- Користите VS Code са Live Server екстензијом за HTML пројекте +- Инсталирајте ESLint и Prettier екстензије за доследно форматирање +- Користите алате прегледача за дебаговање JavaScript-а +- За Vue пројекте инсталирајте Vue DevTools екстензију за прегледач -### Примедбе у вези перформанси +### Примедбе о перформансама -- Велики број преведених фајлова (50+ језика) резултира великим клоновима +- Већи број преведених фајлова (50+ језика) чини пун клон великим - Користите shallow clone ако радите само на садржају: `git clone --depth 1` -- Искључите преводе из претрага када радите на енглеском садржају +- Изузмите преводе из претрага при раду само на енглеском садржају - Процеси изградње могу бити спори при првом покретању (npm install, Vite build) -## Безбедносне примедбе +## Безбедносне препоруке -### Окружне променљиве +### Променљиве окружења -- API кључеви никада не смеју бити комитовани у репозиторијум +- API кључеви никад не смеју бити снимљени у репозиторијум - Користите `.env` фајлове (већ у `.gitignore`) -- Документујте потребне окружне променљиве у README фајловима пројеката +- Документирајте потребне променљиве окружења у README-јима пројеката ### Python пројекти -- Користите виртуелна окружења: `python -m venv venv` +- Користите виртуелне енвиронменте: `python -m venv venv` - Одржавајте зависности ажурним -- GitHub токени требају имати минималне потребне дозволе +- GitHub токени треба да имају минималне потребне дозволе -### Приступ GitHub Models +### Приступ GitHub моделима -- Лични приступни токени (PAT) су неопходни за GitHub Models -- Токени треба да се чувају као окружне променљиве -- Никад не комитујте токене или креденцијале +- Потребни Personal Access Tokens (PAT) за GitHub Моделе +- Токени требa да се чувају као променљиве окружења +- Никада не комитујте токене или акредитиве ## Додатне напомене ### Циљна публика - Потпуни почетници у веб развоју -- Студенти и самоученици -- Наставници који користе курикулум у учионицама +- Студенти и самоуки учесници +- Наставници који користе наставни план у учионици - Садржај је дизајниран за приступачност и постепено стицање вештина -### Образовна филозофија +### Едукативна филозофија - Приступ учењу заснован на пројектима -- Чести провери знања (квизови) -- Практичне вежбе кода -- Примери примене у реалном свету -- Фокус на основе пре рада са фрејмворковима +- Чести проверавања знања (квизови) +- Практичне вежбе кодирања +- Примери из стварног света +- Фокус на основе пре фронт-енд оквира ### Одржавање репозиторијума -- Активна заједница учесника и сарадника +- Активна заједница ученика и сарадника - Редовна ажурирања зависности и садржаја -- Праћење проблема и дискусија од стране одржаваоца -- Аутоматско ажурирање превода преко GitHub Actions +- Пратња issue-ова и дискусија од стране одржалаца +- Аутоматизовани преводи путем 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 курикулуми доступни +- [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 асистент за чет пројекат +- `5-browser-extension/README.md` - Развој прегледачких екстензија +- `6-space-game/README.md` - Развој Canvas игре +- `9-chat-project/README.md` - Пројекат AI асистента за чет ### Монорепо структура -Иако није традиционално монорепо, овај репозиторијум садржи више независних пројеката: -- Свaka лекција је самостална +Иако није класично монорепо, овај репозиторијум садржи више независних пројеката: +- Свака лекција је самостална - Пројекти не деле зависности - Радите на појединачним пројектима без утицаја на друге -- Клонирајте цео репозиторијум ради пуног искуства курикулума +- Клонирајте цео репозиторијум за потпуно искуство наставног плана --- -**Ограничење одговорности**: -Овај документ је преведен помоћу 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