Web-Dev-For-Beginners/translations/hr

Web razvoj za početnike - kurikulum

Naučite osnove web razvoja uz naš sveobuhvatan dvanaestotjedni tečaj kojeg vode Microsoft Cloud Advocates. Svaka od 24 lekcije duboko uvodi u JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, diskusijama i praktičnim zadacima. Unaprijedite svoje vještine i optimizirajte zadržavanje znanja našom učinkovito projektno usmjerenom pedagogijom. Započnite svoje kodiranje već danas!

Pridružite se Azure AI Foundry Discord zajednici

Slijedite ove korake da započnete s korištenjem ovih resursa:

1. Forkajte repozitorij: Kliknite
2. Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere

🌐 Višejezična podrška

Podržano putem GitHub akcije (automatizirano i uvijek ažurirano)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Radije klonirate lokalno?

Ovaj repozitorij uključuje više od 50 prijevoda na jezike, što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda koristite sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Ovo vam daje sve što trebate za završetak tečaja uz mnogo brže preuzimanje.

Ako želite da budu podržani dodatni prijevodi jezika, pogledajte ovdje

🧑‍🎓 Jeste li student?

Posjetite Student Hub stranicu gdje ćete pronaći izvore za početnike, studentske pakete i čak načine kako dobiti besplatni certifikacijski kupon. Ovo je stranica koju želite označiti i povremeno provjeravati jer mjesečno mijenjamo sadržaje.

📣 Obavijest - Novi izazovi GitHub Copilot Agent moda za dovršiti!

Dodani novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate završiti koristeći GitHub Copilot i Agent mod. Ako niste koristili Agent mod, on može ne samo generirati tekst nego i stvarati i uređivati datoteke, pokretati naredbe i još mnogo toga.

📣 Obavijest - Novi projekt za izgraditi koristeći generativnu AI

Novi AI Assistant projekt upravo dodat, pogledajte projekt

📣 Obavijest - Novi kurikulum o Generativnoj AI za JavaScript upravo objavljen

Ne propustite naš novi kurikulum o Generativnoj AI!

Posjetite https://aka.ms/genai-js-course da započnete!

• Lekcije koje pokrivaju sve od osnova do RAG-a.
• Komunikacija s povijesnim likovima koristeći GenAI i našu prateću aplikaciju.
• Zabavna i zanimljiva priča, putovat ćete kroz vrijeme!

Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za usmjerenje na teme kao što su:

• Promptanje i inženjering prompta
• Generiranje tekstualnih i slikovnih aplikacija
• Pretraživačke aplikacije

Posjetite https://aka.ms/genai-js-course da započnete!

🌱 Početak

Nastavnici, uključili smo neke prijedloge o tome kako koristiti ovaj kurikulum. Voljeli bismo vaše povratne informacije u našem forumu za raspravu!

Učenici, za svaku lekciju, započnite s pripremnim kvizom prije predavanja i nastavite s čitanjem materijala predavanja, dovršavanjem raznih aktivnosti i provjerom razumijevanja pomoću poslije-predavanja kviza.

Za poboljšanje vašeg iskustva učenja, povežite se sa svojim kolegama kako biste zajedno radili na projektima! Diskusije su poticane na našem forum za rasprave gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.

Za dodatno obrazovanje, toplo preporučujemo istraživanje Microsoft Learn za dodatne studijske materijale.

📋 Postavljanje vašeg okruženja

Ovaj kurikulum ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u Codespace-u (okruženje bazirano na pregledniku, bez potrebe za instalacijama), ili lokalno na vašem računalu koristeći uređivač teksta poput Visual Studio Code.

Kreirajte svoj repozitorij

Da biste jednostavno spremali svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb Use this template na vrhu stranice. Time će se kreirati novi repozitorij na vašem GitHub računu s kopijom kurikuluma.

Slijedite ove korake:

1. Forkajte repozitorij: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
2. Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Pokretanje kurikuluma u Codespace-u

U svojoj kopiji ovog repozitorija koju ste napravili, kliknite na gumb Code i odaberite Open with Codespaces. To će vam kreirati novi Codespace za rad.

Pokretanje kurikuluma lokalno na vašem računalu

Za pokretanje ovog kurikuluma lokalno na vašem računalu trebat će vam uređivač teksta, preglednik i alat za naredbenu liniju. Naša prva lekcija, Uvod u programske jezike i alate tradea, provest će vas kroz različite opcije za svaki od ovih alata da odaberete ono što vam najviše odgovara.

Naša preporuka je korištenje Visual Studio Code kao uređivača, koji također ima ugrađeni Terminal. Visual Studio Code možete preuzeti ovdje.

1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb Code i kopiranjem URL-a:

   CodeSpace Zatim otvorite Terminal unutar Visual Studio Code i pokrenite sljedeću naredbu, zamjenjujući <your-repository-url> URL-om koji ste upravo kopirali:

   git clone <your-repository-url>
   

2. Otvorite mapu u Visual Studio Codeu. To možete učiniti klikom na File > Open Folder i odabirom mape koju ste upravo klonirali.

Preporučene Visual Studio Code ekstenzije:

• Live Server - za pregled HTML stranica unutar Visual Studio Codea
• Copilot - za pomoć pri bržem pisanju koda

📂 Svaka lekcija uključuje:

• opcionalnu sketchnote bilješku
• opcionalni dodatni video
• kratki kviz za zagrijavanje prije lekcije
• pisanu lekciju
• za lekcije temeljene na projektima, vodiče korak po korak kako izgraditi projekt
• provjere znanja
• izazov
• dodatno čitanje
• zadatak
• kviz nakon lekcije

Napomena o kvizovima: Svi su kvizovi sadržani u mapi Quiz-app, ukupno 48 kvizova sa tri pitanja svaki. Dostupni su ovdje; aplikacija za kviz može se pokretati lokalno ili postaviti na Azure; slijedite upute u mapi quiz-app.

🗃️ Lekcije

	Naziv Projekta	Koncepti koji se podučavaju	Ciljevi učenja	Povezana lekcija	Autor
01	Početak rada	Uvod u programiranje i alate struke	Naučite osnovne koncepte koji stoje iza većine programskih jezika i o softveru koji pomaže profesionalnim developerima	Uvod u programske jezike i alate	Jasmine
02	Početak rada	Osnove GitHub-a, uključuje rad u timu	Kako koristiti GitHub u vašem projektu te kako surađivati s drugima na kodu	Uvod u GitHub	Floor
03	Početak rada	Pristupačnost	Naučite osnove web pristupačnosti	Osnove pristupačnosti	Christopher
04	Osnove JS	Tipovi podataka u JavaScriptu	Osnove tipova podataka u JavaScriptu	Tipovi podataka	Jasmine
05	Osnove JS	Funkcije i metode	Upoznajte se s funkcijama i metodama za upravljanje logikom aplikacije	Funkcije i metode	Jasmine i Christopher
06	Osnove JS	Donošenje odluka s JS	Naučite kako stvoriti uvjete u vašem kodu koristeći metode donošenja odluka	Donošenje odluka	Jasmine
07	Osnove JS	Nizovi i petlje	Radite s podacima koristeći nizove i petlje u JavaScriptu	Nizovi i petlje	Jasmine
08	Terrarium	HTML u praksi	Izgradite HTML za online terarij, fokusirajući se na izgradnju izgleda	Uvod u HTML	Jen
09	Terrarium	CSS u praksi	Kreirajte CSS za stilizaciju online terarija, fokusirajući se na osnove CSS-a uključujući responzivnost stranice	Uvod u CSS	Jen
10	Terrarium	JavaScript zatvaranja, manipulacija DOM-om	Izgradite JavaScript koji omogućava funkcioniranje terarija kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-om	JavaScript zatvaranja i manipulacija DOM-om	Jen
11	Typing Game	Izgradnja igre tipkanja	Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije	Programiranje vođeno događajima	Christopher
12	Green Browser Extension	Rad s preglednicima	Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente ekstenzije za preglednik	O preglednicima	Jen
13	Green Browser Extension	Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u local storage	Izgradite JavaScript elemente vaše ekstenzije preglednika za pozivanje API-ja koristeći varijable pohranjene u local storage	API-ji, Obrasci i Local Storage	Jen
14	Green Browser Extension	Pozadinski procesi u pregledniku, web performanse	Iskoristite pozadinske procese preglednika za upravljanje ikonama ekstenzije; naučite o web performansama i nekim optimizacijama	Pozadinski zadaci i performanse	Jen
15	Space Game	Napredniji razvoj igara s JavaScriptom	Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrasce, u pripremi za izgradnju igre	Uvod u napredni razvoj igara	Chris
16	Space Game	Crtanje na platnu	Saznajte o Canvas API-ju, koji se koristi za crtanje elemenata na zaslonu	Crtanje na platnu	Chris
17	Space Game	Premještanje elemenata po zaslonu	Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API	Pomicanje elemenata	Chris
18	Space Game	Detekcija sudara	Učinite da se elementi sudaraju i međusobno reagiraju koristeći pritiske tipki te dodajte cooldown funkciju za očuvanje performansi igre	Detekcija sudara	Chris
19	Space Game	Vođenje bodova	Izvršavajte matematičke izračune temeljene na statusu i performansama igre	Vođenje bodova	Chris
20	Space Game	Završetak i ponovno pokretanje igre	Naučite o završetku i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli	Uvjet završetka	Chris
21	Banking App	HTML predlošci i rute u web aplikaciji	Naučite kako stvarati kostur arhitekture višestranične web stranice koristeći rute i HTML predloške	HTML predlošci i rute	Yohan
22	Banking App	Izgradnja obrasca za prijavu i registraciju	Naučite o izgradnji obrazaca i rukovanju rutinama provjere valjanosti	Obrasci	Yohan
23	Banking App	Metode dohvaćanja i korištenja podataka	Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti	Podaci	Yohan
24	Banking App	Koncepti upravljanja stanjem	Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati	Upravljanje stanjem	Yohan
25	Browser/VScode Code	Rad sa VScode	Naučite kako koristiti uređivač koda	Koristite VScode uređivač koda	Chris
26	AI Assistants	Rad s AI	Naučite kako izgraditi vlastitog AI asistenta	AI Assistant projekt	Chris

🏫 Pedagogija

Naš kurikulum je dizajniran s dva ključna pedagoška principa u vidu:

• učenje temeljeno na projektima
• česti kvizovi

Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje danas koriste web developeri. Studenti će imati priliku steći praktično iskustvo izgradnjom igre tipkanja, virtualnog terarija, ekološke ekstenzije preglednika, igre nalik space invaderu i bankarske aplikacije za poslovne korisnike. Do kraja serije studenti će imati čvrsto razumijevanje web razvoja.

🎓 Možete proći prve lekcije ovog kurikuluma kao Put učenja na Microsoft Learn!

Osiguravanjem da sadržaj odgovara projektima, proces učenja postaje zanimljiviji studentima, a zadržavanje koncepata je bolje. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u paru s videom iz zbirke "Serija za početnike o: JavaScript" video tutorijala, od kojih su neki autori doprinijeli ovom kurikulumu.

Nadalje, kviz niskog rizika prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje znanja. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te ga se može pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.

Premda smo namjerno izbjegli uvođenje JavaScript okvira da bismo se koncentrirali na osnovne vještine potrebne kao web developer prije usvajanja okvira, dobar sljedeći korak nakon dovršetka ovog kurikuluma bio bi učiti o Node.js putem druge zbirke videa: "Serija za početnike o: Node.js".

Posjetite naše smjernice Kodeksa ponašanja i Doprinos. Dobrodošli su vaši konstruktivni komentari!

🧭 Izvanmrežni pristup

Možete pokretati ovu dokumentaciju izvan mreže koristeći Docsify. Forkajte ovaj repozitorij, instalirajte Docsify na svojem računalu, a zatim u korijenskoj mapi ovog repozitorija upišite docsify serve. Web stranica će se poslužiti na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF svih lekcija možete pronaći ovdje.

🎒 Ostali tečajevi

Naš tim proizvodi i druge tečajeve! Pogledajte:

LangChain

---

Azure / Edge / MCP / Agent

---

Serija generativne umjetne inteligencije

---

Temeljno učenje

---

Copilot serija

Dobivanje pomoći

Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se ostalim učenicima i iskusnim programerima u raspravama o MCP-u. To je poticajna zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.

Ako imate povratne informacije o proizvodu ili greške tijekom izrade, posjetite:

Licenca

Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku LICENSE za više informacija.

---

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prijevod Co-op Translator. Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.