Web-Dev-For-Beginners/translations/hr

Web razvoj za početnike - Kurikulum

Naučite osnove web razvoja uz naš sveobuhvatni 12-tjedni tečaj koji su osmislili Microsoft Cloud Advocates. Svaka od 24 lekcije istražuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu metodologiju temeljenu na projektima. Započnite svoje kodersko putovanje već danas!

Pridružite se Azure AI Foundry Discord zajednici

Slijedite ove korake kako biste započeli 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

🌐 Podrška za više jezika

Podržano putem GitHub Action (Automatizirano i uvijek ažurirano)

Arapski | Bengalski | Bugarski | Burmanski (Mjanmar) | Kineski (pojednostavljeni) | Kineski (tradicionalni, Hong Kong) | Kineski (tradicionalni, Macau) | Kineski (tradicionalni, Tajvan) | Hrvatski | Češki | Danski | Nizozemski | Estonski | Finski | Francuski | Njemački | Grčki | Hebrejski | Hindski | Mađarski | Indonezijski | Talijanski | Japanski | Korejski | Litvanski | Malajski | Marathi | Nepalski | Norveški | Perzijski (Farsi) | Poljski | Portugalski (Brazil) | Portugalski (Portugal) | Pandžapski (Gurmukhi) | Rumunjski | Ruski | Srpski (ćirilica) | Slovački | Slovenski | Španjolski | Svahili | Švedski | Tagalog (Filipinski) | Tamilski | Tajlandski | Turski | Ukrajinski | Urdu | Vijetnamski

Ako želite da se podrže dodatni jezici, popis podržanih jezika možete pronaći ovdje

🧑‍🎓 Jeste li student?

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

📣 Najava - Novi projekt za izradu pomoću generativne AI

Upravo je dodan novi projekt AI asistenta, pogledajte projekt

📣 Najava - Novi kurikulum o generativnoj AI za JavaScript upravo je objavljen

Ne propustite naš novi kurikulum o generativnoj AI!

Posjetite https://aka.ms/genai-js-course kako biste započeli!

• Lekcije koje pokrivaju sve od osnova do RAG-a.
• Interakcija s povijesnim likovima pomoću GenAI i naše prateće aplikacije.
• Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!

Svaka lekcija uključuje zadatak za dovršavanje, provjeru znanja i izazov koji će vas voditi kroz teme poput:

• Pisanje upita i inženjering upita
• Generiranje aplikacija za tekst i slike
• Aplikacije za pretraživanje

Posjetite https://aka.ms/genai-js-course kako biste započeli!

🌱 Početak

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

Učenici, za svaku lekciju započnite s kvizom prije predavanja, nastavite čitanjem materijala predavanja, dovršite razne aktivnosti i provjerite svoje razumijevanje kvizom nakon predavanja.

Kako biste poboljšali svoje iskustvo učenja, povežite se s kolegama kako biste zajedno radili na projektima! Rasprave su poticane u našem forumu za raspravu gdje će naš tim moderatora biti dostupan za odgovaranje na vaša pitanja.

Za daljnje obrazovanje, toplo preporučujemo istraživanje Microsoft Learn za dodatne materijale za učenje.

📋 Postavljanje vašeg okruženja

Ovaj kurikulum ima razvojno okruženje spremno za korištenje! Kada započnete, možete odabrati pokretanje kurikuluma u Codespace (okruženje temeljeno na pregledniku, bez potrebe za instalacijom), ili lokalno na vašem računalu koristeći tekstualni editor poput Visual Studio Code.

Kreirajte svoj repozitorij

Kako biste lako spremili svoj rad, preporučuje se da kreirate vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb Use this template na vrhu stranice. Ovo će kreirati novi repozitorij u 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 Codespaceu

U vašoj kopiji ovog repozitorija koju ste kreirali, kliknite na gumb Code i odaberite Open with Codespaces. Ovo će kreirati novi Codespace u kojem možete raditi.

Pokretanje kurikuluma lokalno na vašem računalu

Kako biste pokrenuli ovaj kurikulum lokalno na vašem računalu, trebat će vam tekstualni editor, preglednik i alat za naredbeni redak. Naša prva lekcija, Uvod u programske jezike i alate, provest će vas kroz razne opcije za svaki od ovih alata kako biste odabrali ono što vam najbolje odgovara.

Naša preporuka je korištenje Visual Studio Code kao vašeg editora, koji također ima ugrađeni Terminal. Možete preuzeti Visual Studio Code ovdje.

1. Klonirajte svoj repozitorij na svoje 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> s URL-om koji ste upravo kopirali:

   git clone <your-repository-url>
   

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

Preporučeni Visual Studio Code dodaci:

• Live Server - za pregled HTML stranica unutar Visual Studio Code
• Copilot - za brže pisanje koda

📂 Svaka lekcija uključuje:

• opcionalni sketchnote
• opcionalni dopunski video
• kviz za zagrijavanje prije lekcije
• pisana lekcija
• za lekcije temeljene na projektima, vodiči korak po korak o tome kako izraditi projekt
• provjere znanja
• izazov
• dodatno čitanje
• zadatak
• kviz nakon lekcije

Napomena o kvizovima: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova, svaki s tri pitanja. Dostupni su ovdje, a aplikacija za kviz može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi quiz-app.

🗃️ Lekcije

	Naziv projekta	Poučeni koncepti	Ciljevi učenja	Povezana lekcija	Autor
01	Početak rada	Uvod u programiranje i alati za rad	Naučite osnovne temelje većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom poslu	Uvod u programske jezike i alate za rad	Jasmine
02	Početak rada	Osnove GitHuba, uključujući rad u timu	Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi	Uvod u GitHub	Floor
03	Početak rada	Pristupačnost	Naučite osnove web pristupačnosti	Osnove pristupačnosti	Christopher
04	Osnove JS-a	JavaScript tipovi podataka	Osnove JavaScript tipova podataka	Tipovi podataka	Jasmine
05	Osnove JS-a	Funkcije i metode	Naučite o funkcijama i metodama za upravljanje logičkim tokom aplikacije	Funkcije i metode	Jasmine i Christopher
06	Osnove JS-a	Donošenje odluka s JS-om	Naučite kako stvoriti uvjete u svom kodu koristeći metode za donošenje odluka	Donošenje odluka	Jasmine
07	Osnove JS-a	Nizovi i petlje	Radite s podacima koristeći nizove i petlje u JavaScriptu	Nizovi i petlje	Jasmine
08	Terarij	HTML u praksi	Izradite HTML za stvaranje online terarija, fokusirajući se na izradu izgleda	Uvod u HTML	Jen
09	Terarij	CSS u praksi	Izradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a, uključujući prilagodljivost stranice	Uvod u CSS	Jen
10	Terarij	JavaScript zatvaranja, manipulacija DOM-a	Izradite JavaScript kako bi terarij funkcionirao kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-a	JavaScript zatvaranja, manipulacija DOM-a	Jen
11	Igra tipkanja	Izradite igru tipkanja	Naučite kako koristiti događaje s tipkovnice za upravljanje logikom svoje JavaScript aplikacije	Programiranje vođeno događajima	Christopher
12	Zeleni dodatak za preglednik	Rad s preglednicima	Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente dodatka za preglednik	O preglednicima	Jen
13	Zeleni dodatak za preglednik	Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu	Izradite JavaScript elemente svog dodatka za preglednik kako biste pozvali API koristeći varijable pohranjene u lokalnoj pohrani	API-ji, obrasci i lokalna pohrana	Jen
14	Zeleni dodatak za preglednik	Pozadinski procesi u pregledniku, web performanse	Koristite pozadinske procese preglednika za upravljanje ikonom dodatka; naučite o web performansama i nekim optimizacijama za poboljšanje	Pozadinski zadaci i performanse	Jen
15	Svemirska igra	Napredniji razvoj igara s JavaScriptom	Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub uzorak, kao pripremu za izradu igre	Uvod u napredni razvoj igara	Chris
16	Svemirska igra	Crtanje na platno	Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na ekranu	Crtanje na platno	Chris
17	Svemirska igra	Pomicanje elemenata po ekranu	Otkrijte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API	Pomicanje elemenata	Chris
18	Svemirska igra	Detekcija sudara	Napravite da se elementi sudaraju i međusobno reagiraju koristeći pritiske tipki te osigurajte funkciju hlađenja za performanse igre	Detekcija sudara	Chris
19	Svemirska igra	Vođenje rezultata	Izvršite matematičke izračune na temelju statusa i performansi igre	Vođenje rezultata	Chris
20	Svemirska igra	Završavanje i ponovno pokretanje igre	Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli	Završni uvjet	Chris
21	Bankovna aplikacija	HTML predlošci i rute u web aplikaciji	Naučite kako stvoriti strukturu arhitekture višestranične web stranice koristeći rute i HTML predloške	HTML predlošci i rute	Yohan
22	Bankovna aplikacija	Izrada obrasca za prijavu i registraciju	Naučite o izradi obrazaca i rukovanju rutinama za validaciju	Obrasci	Yohan
23	Bankovna aplikacija	Metode dohvaćanja i korištenja podataka	Kako podaci teku u i iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti	Podaci	Yohan
24	Bankovna aplikacija	Koncepti upravljanja stanjem	Naučite kako vaša aplikacija zadržava stanje i kako njime upravljati programatski	Upravljanje stanjem	Yohan
25	Preglednik/VScode kod	Rad s VScodeom	Naučite kako koristiti uređivač koda	Koristite VScode uređivač koda	Chris
26	AI asistenti	Rad s AI-jem	Naučite kako izraditi vlastitog AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogija

Naš kurikulum osmišljen je s dva ključna pedagoška principa:

• učenje temeljeno na projektima
• česti kvizovi

Program podučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu svemirskih osvajača i bankovne aplikacije za poslovanje. Do kraja serije, studenti će steći solidno razumijevanje web razvoja.

🎓 Prve lekcije ovog kurikuluma možete pohađati kao Put učenja na Microsoft Learn!

Osiguravanjem da sadržaj odgovara projektima, proces postaje zanimljiviji za studente, a zadržavanje koncepta se povećava. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u kombinaciji s videom iz kolekcije "Serija za početnike: JavaScript" video tutorijala, čiji su neki autori doprinijeli ovom kurikulumu.

Osim toga, kviz s niskim rizikom prije predavanja postavlja namjeru studenta prema učenju teme, dok drugi kviz nakon predavanja osigurava daljnje zadržavanje. Ovaj kurikulum osmišljen je da bude fleksibilan i zabavan te se može pohađati u cijelosti ili djelomično. Projekti počinju malim i postaju sve složeniji do kraja 12-tjednog ciklusa.

Iako smo namjerno izbjegavali uvođenje JavaScript okvira kako bismo se koncentrirali na osnovne vještine potrebne kao web programer prije usvajanja okvira, dobar sljedeći korak nakon završetka ovog kurikuluma bio bi učenje o Node.js-u putem druge kolekcije videa: "Serija za početnike: Node.js".

Posjetite naše Pravila ponašanja i Smjernice za doprinos. Vaše konstruktivne povratne informacije su dobrodošle!

🧭 Pristup bez interneta

Ovu dokumentaciju možete pokrenuti offline koristeći Docsify. Forkajte ovaj repo, instalirajte Docsify na svom lokalnom računalu, a zatim u korijenskoj mapi ovog repo-a upišite docsify serve. Web stranica će se posluživati 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:

• MCP za početnike
• Edge AI za početnike
• AI agenti za početnike
• Generativni AI za početnike .NET
• Generativni AI s JavaScriptom
• Generativni AI s Javom
• AI za početnike
• Data Science za početnike
• ML za početnike
• Kibernetička sigurnost za početnike
• Web razvoj za početnike
• IoT za početnike
• XR Razvoj za početnike
• Savladavanje GitHub Copilota za agentičku upotrebu
• Savladavanje GitHub Copilota za C#/.NET programere
• Odaberi svoju Copilot avanturu

Dobivanje pomoći

Ako zapnete ili imate pitanja o izradi AI aplikacija, pridružite se:

Ako imate povratne informacije o proizvodu ili naiđete na greške tijekom izrade, posjetite:

Licenca

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

---

Izjava o odricanju odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.