Yarenulov — Kursevi veb dizajna
Zagreb · Ilica 42 · vodič za samostalno učenje · listopad 2026.
Vodič kroz učenje veb dizajna od nule
Ovaj vodič opisuje realan put od potpunog početnika do trenutka kad sami izradite prvu stranicu u CMS-u. Nema prečaca koji preskaču temelje, ali ima redoslijed koji štedi vrijeme. Ako negdje zapnete, vratite se korak unatrag. Tako se najčešće rješava problem.
Vodič kroz učenje — pregled puta
Redoslijed koji ima smisla pratiti
Većina ljudi koji odustanu od učenja veb dizajna ne odustane zato što je gradivo preteško, nego zato što ga uče nasumično. Preskoče strukturu, krenu od alata, pa se izgube u detaljima. Ovaj vodič slaže teme onim redom kojim se stvarno koriste na projektu: prvo struktura, zatim izgled, pa ponašanje na različitim ekranima i na kraju sustav koji stranicu pokreće.
Svaka cjelina ima isti cilj: da nakon nje znate napraviti nešto konkretno, a ne samo prepoznati pojam. Ako preskočite korak, kasnije ćete se na njega vraćati. Zato je bolje ići malo sporije i završiti prvi projekt nego brzo proći kroz sve i ostati bez ičega gotovog.
- Struktura stranice HTML
- Izgled i tipografija CSS
- Ponašanje na ekranima responzivnost
- Kako se stranica koristi UX
- Izrada i održavanje CMS
- Vlastiti projekt, javno dostupan [cilj]
Početna točka: HTML
HTML je jezik strukture. Njime označavate naslove, odlomke, slike, poveznice i obrasce. Bez njega stranica ne postoji, bez obzira na to koliko lijepo izgledala. Prvih tjedana cilj je da sami složite jednostavnu stranicu s nekoliko sekcija i razumijete što svaki element radi. Ako vam to ide sporo, to je normalno. Tempo se ubrza nakon što osnove sjednu.
Praktično to izgleda ovako: uzmete jednu stranicu koju svakodnevno koristite i prepišete njezinu strukturu u HTML bez ikakvog stila. Naslov ide u naslovni element, tekst u odlomak, popis u listu, a svaka poveznica dobije svoj element. Kad to uspijete, imate kostur na koji se kasnije nadograđuje sve ostalo. Najčešća pogreška početnika je da odmah posežu za bojama i fontovima, a struktura ostane nedovršena.
Nemojte se brinuti ako prvih tjedana ne razumijete svaki atribut. Važnije je da znate gdje tražiti odgovor i da svaki element koji upotrijebite znate objasniti jednom rečenicom. Tako gradite temelj na koji se CSS kasnije naslanja bez pucanja.
CSS i vizualna logika
CSS govori pregledniku kako elementi izgledaju. Tu ulazite u temu selektora, razmaka, boja i tipografije. Važno je razumjeti model kutije, jer većina problema s rasporedom dolazi upravo odatle. Nemojte preskočiti taj dio čak i ako vam se čini dosadnim. Kasnije ćete ga koristiti svaki dan, u svakom projektu.
Model kutije objašnjava zašto element zauzima više mjesta nego što mislite: sadržaj, unutarnji razmak, obrub i vanjski razmak slažu se jedan na drugi. Kad to shvatite, nestaje većina frustracije koju početnici opisuju kao "ništa ne radi kako treba". Selektori su drugi stup: naučite razlikovati oznaku, klasu i stanje, pa ćete izbjeći nasumično prepisivanje stilova.
Najčešće zapinjanje i rješenje
- Raspored se raspada kad se doda sadržaj Provjerite model kutije i zadane širine
- Boje se mijenjaju na svakom elementu Stil piše se na klasi, ne na elementu
- Tekst se ne čita ugodno Duljina retka i prored rješavaju više od fonta
Responzivni dizajn
Kad znate HTML i CSS, sljedeći korak je responzivnost. Stranica mora izgledati dobro na telefonu, tabletu i širokom zaslonu. Uči se kroz medijske upite i fleksibilne mreže, ali i kroz naviku da svaki raspored testirajte na više veličina. Dobar program ne ostavlja ovu temu za kraj. Uklapa je u svaki zadatak od početka.
U praksi to znači da svaki put kad složite novi dio stranice, otvorite je na tri širine: mobilnoj, tabletnoj i desktop. Umjesto da popravljate sve na kraju, probleme rješavate odmah. Fleksibilne mreže i relativne mjere rade većinu posla, a medijski upiti samo dotjeruju razlike. Ako vam raspored puca na malom ekranu, gotovo uvijek je uzrok fiksna širina postavljena negdje u strukturi.
Mali ekran
Sadržaj prvi
Sve što je važno mora stati u jedan stupac bez vodoravnog klizanja i bez teksta koji izlazi iz okvira.
Tablet
Dva stupca
Prostor dopušta usporedni raspored, ali dodir ostaje glavni način rada, pa kontrole nikad nisu premale.
Široki zaslon
Puna širina
Raspored se širi, ali duljina retka ostaje ugodna za čitanje jer širina sama po sebi ne znači bolje.
UX razmišljanje
UX nije alat, nego način razmišljanja o tome kako se stranica koristi. Počinje pitanjima: kome je stranica namijenjena, što ta osoba želi postići i što je prvo što treba vidjeti. Na početku je dovoljno da svaki projekt započnete s kratkim planom, ne odmah u kodu. Taj plan poslije postaje osnova za dizajn i strukturu.
-
Kome je stranica namijenjena
Zapišite jednog stvarnog čitatelja, ne "sve". Ako stranica govori svima, ne govori nikome i prvi posjetitelj to odmah osjeti.
-
Što ta osoba želi postići
Cilj je uvijek radnja: saznati, javiti se, kupiti, preuzeti. Ako ne znate koja je to radnja, raspored nema prema čemu biti složen.
-
Što treba vidjeti prvo
Jedna poruka nosi početak stranice. Sve ostalo je podrška, a ne popis svega što znate o temi.
-
Gdje bi zapeli
Prođite stranicu kao posjetitelj i zapisujte mjesta gdje ste se zbunili. Ta lista je vaš popis zadataka za sljedeću verziju.
Alati uz kod
Uz kod trebate uređivač i preglednik s razvojnim alatima. Za dizajnerski dio koristi se Figma ili sličan program, gdje se radi mockup. Mockup je pojednostavljena skica stranice prije nego što je izradite. Nije obavezan za prvi projekt, ali pomaže da ne mijenjate strukturu deset puta tijekom kodiranja.
Razvojni alati u pregledniku nisu napredna oprema, nego svakodnevna pomoć. Njima provjeravate koji stil je pobijedio, zašto element ima veću širinu nego što biste očekivali i kako se stranica ponaša na maloj širini prije nego što je otvorite na pravom telefonu. Navika da problem pogledate u alatu skraćuje vrijeme rješavanja više nego ijedan dodatak kojeg možete instalirati.
Za rad vam treba
- [01] Uređivač koda s označavanjem sintakse
- [02] Preglednik s ugrađenim razvojnim alatima
- [03] Program za skicu rasporeda (Figma ili slično)
- [04] Mapa s lokalnom kopijom projekta
Bez vlastitih projekata nastava se brzo zaboravi.
CMS i WordPress
Nakon temelja dolazi CMS. WordPress je najčešći izbor u Hrvatskoj, a znanje postavljanja tema, plugina i osnovnog prilagođavanja izgleda traži se na mnogim poslovima. Mnogi programi, uključujući PAR Fakultet, u ishodima učenja navode izradu web sjedišta CMS-om. Cilj je da sami postavite jednostavnu stranicu i znate je održavati. To je vještina koju ćete koristiti češće od naprednog koda.
Praktični zadatak na kraju ove cjeline je jasan: postavite temu, izradite pet do šest stranica, dodate izbornik i objavite sve na privremenoj adresi. Zatim stranicu održavate mjesec dana — dodajete objavu, mijenjate sliku, provjeravate kako izgleda na telefonu. Održavanje je ono što razlikuje nekoga tko je prošao tečaj od nekoga tko zna raditi.
Koliko vremena treba
Kratki tečajevi traju dvadesetak školskih sati, formalniji programi preko sto. Razlika nije samo u broju sati, nego u količini samostalnog rada. PAR Fakultet navodi 135 sati nastave i 90 sati samostalnog rada, što je realan omjer. Bez vlastitih projekata nastava se brzo zaboravi. Računajte barem isto toliko vremena kod kuće koliko provedete na nastavi.
Profesionalni standardi
Kad svladate osnove, vrijedi pogledati kako rade profesionalci. Smashing Magazine objavljuje članke o web dizajnu, UX-u, frontendu i pristupačnosti, s duginskim analizama i praktičnim vodičima. Awwwards ocjenjuje web stranice prema dizajnu, kreativnosti, upotrebljivosti i sadržaju, pa je koristan za inspiraciju i praćenje trendova. Ne kopirajte ono što vidite, ali proučavajte zašto nešto funkcionira.
Članci i analize
Tekstovi o frontendu, pristupačnosti i UX-u. Korisni kad želite razumjeti zašto neka odluka postoji, a ne samo kako se piše.
Galerije radova
Stranice koje prate dizajn, upotrebljivost i sadržaj. Dobre za inspiraciju i za uočavanje obrazaca koji se ponavljaju.
Vlastita vježba
Odaberite jedan rad koji vam se sviđa i pokušajte objasniti njegov raspored u pet rečenica. To je vježba koja se isplati više od pregledavanja.
Zastoj
Kad zapnete
Najčešći zastoj nije nerazumijevanje koda, nego nedostatak projekta. Ako ne znate što graditi, uzmite stranicu koju svakodnevno koristite i pokušajte je ponovno složiti. Ograničite se na tri sekcije i jednu stranicu. Cilj je završiti nešto, a ne napraviti savršeno. Dovršen mali projekt vrijedi više od započetog velikog.
Ne znate što graditi. Uzmite stranicu koju koristite svaki dan i složite je ispočetka po svojoj strukturi.
[vježba]
Projekt se oteo. Smanjite ga na tri sekcije i jednu stranicu, pa dovršite taj manji obim do kraja.
[ograniči]
Raspored puca. Vratite se korak unatrag i provjerite strukturu prije nego što dodate novi stil.
[korak natrag]
Nema motivacije. Dovršite nešto malo i objavite ga, pa tek onda krenite na sljedeće.
[dovrši]
Česta pitanja prije početka
Koliko HTML i CSS trebam znati prije prvog projekta? [otvori]
Dovoljno da sami složite jednostavnu stranicu s nekoliko sekcija i razumijete model kutije u CSS-u. Ostatak učite kroz rad.
Trebam li Figmu ili je dovoljno znati samo WordPress? [otvori]
Za prvi projekt Figma nije obavezna, ali mockup pomaže da ne mijenjate strukturu tijekom kodiranja. WordPress je vještina koju ćete koristiti često.
Koliko traje put od tečaja do prve samostalne stranice? [otvori]
Zavisi od tempa. Uz nastavu računajte barem isto toliko samostalnog rada kod kuće, jer se bez vlastitih projekata gradivo brzo zaboravi.
Nakon vodiča
Kad prođete ovaj put, sljedeći korak je portfolio. Na stranici o portfoliju i prvim projektima pišemo koje projekte napraviti i kako ih predstaviti. Ako još birate program, usporedba kurseva pokazuje razlike u formatu i trajanju. Za konkretno pitanje o svom putu pišite nam putem kontakt stranice.
Sažetak puta
Od prvog retka koda do objavljene stranice
Šest cjelina, jedan vlastiti projekt i mjesec održavanja nakon objave. To je minimum na kojem se dalje gradi znanje o responzivnom dizajnu, UX-u i CMS-u.
- [OK] Kostur stranice ispisan u HTML-u
- [OK] Stil, tipografija i model kutije u CSS-u
- [OK] Isti raspored na telefonu, tabletu i širokom zaslonu
- [OK] Stranica izrađena i održavana u WordPressu