Tovarelim — Kursevi veb dizajna Tovarelim
Stubište u školskoj zgradi s hladnim jutarnjim svjetlom na stepenicama

Vodič kroz put učenja

Put od početnika do gotove web stranice

Redoslijed kojim se znanje nadograđuje: HTML, CSS, responzivni dizajn, osnove UX-a i UI-a te WordPress. Sedam koraka, bez preskakanja.

Usporedba tečajeva Kreni od prvog koraka
Koraci

Zašto redoslijed učenja nije stvar osobnog izbora

Većina ljudi koji počinju učiti web dizajn pita isto: kojim redoslijedom učiti? Odgovor nije proizvoljan. Postoji slijed u kojem se znanje nadograđuje, i ako ga preskočite, kasnije se vraćate.

Ovaj vodič opisuje taj slijed u koracima, od prvog HTML dokumenta do stranice objavljene na serveru. Nije vezan za jedan tečaj, nego za putanju koju većina hrvatskih programa slijedi.

Cilj ovog vodiča

Da nakon čitanja znate na kojem ste koraku i koji program odgovara upravo toj razini.

Koristite ga prije nego što gledate cijenu ili trajanje — razina predznanja je prvi filter.

Prva tri koraka: struktura, izgled i prilagodba

Korak 1 HTML kao struktura

Prvo naučite što stranica jest, pa kako izgleda

HTML je jezik koji opisuje što se nalazi na stranici: naslovi, odlomci, slike, veze, liste, obrasci. Bez njega nema stranice, samo skup datoteka.

Prvi susret s HTML-om je obično brz i ohrabrujuć. Nekoliko oznaka i već imate nešto što se otvara u pregledniku. To je važno jer daje osjećaj napretka, ali ne zavaravajte se: HTML sam izgleda ružno i to je normalno.

Kratki tečajevi u Hrvatskoj zato HTML stavljaju na početak, često u prvom danu ili prvim satima. To je ispravan redoslijed.

Što provjeriti u programu

  • Počinje li od nule, bez pretpostavljenog predznanja.
  • Objašnjava li razliku između sadržaja i izgleda stranice.
  • Radi li se prvi dokument već na prvom susretu.
Detaljnije o HTML-u i CSS-u
Korak 2 CSS i prvi layout

Tu počinje pravo učenje

CSS je ono što HTML pretvara u nešto što izgleda kao stranica. Ima više načina da se postigne isti rezultat, a neki od njih stvaraju probleme koje ćete rješavati mjesecima.

Prvi layout je najčešća prepreka. Elementi se preklapaju, margine se ponašaju neočekivano, a vertikalno poravnanje izgleda nemoguće. Ovo nije znak da niste za to, nego normalna faza.

Kvalitetan program ovdje ne preskače objašnjenje. Ako tečaj prođe CSS u dva sata i prijeđe na alate, vjerojatno ćete se vraćati na osnove.

Korak 3 Responzivni dizajn

Pravila koja se prilagođavaju, ne fiksni raspored

Responzivni dizajn znači da stranica radi na različitim širinama ekrana: mobitelu, tabletu, monitoru. To je danas obavezan dio, ne dodatak.

Učenje responzivnosti uvodi novi način razmišljanja. Ne crtate fiksni raspored, nego pravila koja se prilagođavaju. Tu se prvi put ozbiljno susrećete s medijskim upitima i s fleksibilnim jedinicama.

Većina hrvatskih programa navodi responzivni dizajn u sadržaju. Provjerite je li naveden kao zasebna cjelina, jer to obično znači da mu se posvećuje vrijeme, a ne samo spominje.

Rub radne plohe u radionici pod hladnim jutarnjim svjetlom

Ovdje se prvi layout prestaje raspadati.

Od vizualnog sloja do objavljene stranice

Kad stranica funkcionira bez raspadanja, sljedeća četiri koraka daju joj izgled, smisao i konačnu adresu na kojoj je drugi mogu otvoriti.

Papiri i uzorci boja raspoređeni na hladnoj podlozi uz olovku
Korak 4 Vizualni elementi i tipografija

Malo pravila, velik učinak

Tu ulaze slike, ikone, fontovi i animacije. Učiona - Web dizajn ih navodi u svom opisu uz HTML, CSS i responzivni dizajn, što pokazuje da su dio osnovnog paketa.

Tipografija je dio koji najviše utječe na dojam, a najmanje se uči. Dvije vrste slova, jasna hijerarhija naslova i dovoljno prostora između redaka čine više od bilo kojeg ukrasa.

Formalni programi poput Algebrinog ovdje idu dublje, kroz vizualni identitet, boju i fotografiju. Ako vas zanima dizajnerska strana, tu je težište.

Korak 5 Osnove UX-a i UI-a

Stranica koja radi, ne samo koja izgleda dobro

UX i UI nisu treći jezik koji učite, nego način razmišljanja o stranici. UI je vizualno oblikovanje sučelja, rasporeda i komponenti. UX je širi okvir: kako ljudi koriste stranicu, gdje se zbunjuju i zašto odustaju.

Za početnika je korisno rano naučiti nekoliko UX pravila. Primjerice, da navigacija mora biti predvidiva i da gumb mora izgledati kao gumb. Ta pravila ne zahtijevaju poseban alat, samo pažnju.

U Hrvatskoj se UX sve češće pojavljuje u opisima treninga uz web dizajn, s fokusom na upotrebljivost i prototipove. To je korak koji odvaja stranicu koja izgleda dobro od stranice koja radi.

Osnove UX-a i front-end razvoja
Korak 6 WordPress i objava

Trenutak kad stranica dobije adresu

WordPress se u hrvatskim programima pojavljuje kao praktičan alat za implementaciju, obično na kraju. Njegova vrijednost je u tome što vas vodi od dizajna do stvarne objave bez dubokog programiranja.

Naučiti WordPress znači naučiti postaviti temu, prilagoditi je, unijeti sadržaj i objaviti stranicu na serveru. To je konkretan, vidljiv rezultat. Za mnoge polaznike to je trenutak kada učenje prestaje biti apstraktno.

Granica je poznata: WordPress vas ne nauči pisati vlastiti CSS. Ako ga učite prije HTML-a i CSS-a, zapet ćete na svakoj prilagodbi koja izlazi iz okvira teme.

WordPress i objava stranice
Korak 7 JavaScript i front-end smjer

Korak koji se ne preskače ako želite posao u razvoju

Ako želite raditi kao front-end developer, JavaScript je sljedeći korak. Polaznici ga često traže jer tržište web dizajn sve više veže uz tu karijernu metu.

JavaScript se ne uči u kratkim uvodnim tečajevima, osim kao demonstracija. Za ozbiljno bavljenje njime treba poseban program ili dugotrajno samostalno učenje nakon osnova.

Zato je važno znati unaprijed gdje želite završiti. Ako je cilj vlastita stranica, WordPress je dovoljan završetak. Ako je cilj posao u razvoju, ovo je korak koji ne možete preskočiti.

Koliko traje cijeli put

Nekoliko mjeseci, ne nekoliko dana

Realno, od nule do samostalne izrade jednostavne stranice treba nekoliko mjeseci rada. Kratki tečaj od četiri dana ili 20 školskih sati daje strukturu i osnovu, ali ne i vještinu.

Vještina dolazi kroz ponavljanje. Napravite tri stranice umjesto jedne. Prva će biti ružna, druga funkcionalna, treća nešto na što ste ponosni.

Tri stranice donose više od tri sata gledanja videa.

Kako odabrati tečaj za svoj korak

Nema smisla upisivati napredni program ako još niste otvorili HTML datoteku. Isto tako, nema smisla ponavljati osnove ako već radite s CSS-om u praksi.

Pozicionirajte se na ovoj ljestvici prije nego što birate. Ako ste na prvom koraku, tražite program koji počinje od nule i ne pretpostavlja predznanje.

Još niste otvorili HTML datoteku

Tražite program koji počinje od nule

Osnovni tečaj, bez pretpostavljenog predznanja

Korak 1

Znate napisati HTML, ali vam se layout raspada

Tražite veći naglasak na CSS-u

Program koji ne prolazi CSS u dva sata

Korak 1–2

Radili ste s CSS-om i responzivnošću u praksi

Tražite projektni rad

Program s responzivnim dizajnom kao zasebnom cjelinom

Korak 3–4

Ciljate posao u front-end razvoju

Tražite program s JavaScriptom

Tečaj nakon osnova, ne uvodna demonstracija

Korak 5–7

Usporedba tečajeva na ovom portalu ima stupac za preporučenu razinu predznanja upravo zato. Koristite ga prije nego što gledate cijenu.

Otvori usporedbu tečajeva Pošaljite pitanje o putu učenja

Pitanja koja se ponavljaju

Kratki odgovori na nedoumice koje se javljaju prije upisa. Ako vaše pitanje nije ovdje, javite se i odgovorit ćemo na njega.

Postavite pitanje
Mogu li preskočiti HTML i odmah učiti WordPress?

Možete, ali ćete na svakoj prilagodbi koja izlazi iz okvira teme zapeti. WordPress vas ne nauči pisati vlastiti CSS, pa je HTML prvi korak bez obzira na to kojim alatom kasnije radite.

Je li responzivni dizajn dovoljan u opisu tečaja ili mora biti zasebna cjelina?

Zasebna cjelina obično znači da mu se posvećuje vrijeme, a ne da se samo spominje u jednom predavanju. Medijski upiti i fleksibilne jedinice zahtijevaju vježbu, ne nabrajanje.

Treba li mi UX/UI ako želim samo izraditi vlastitu stranicu?

Nekoliko osnovnih UX pravila pomaže odmah: predvidiva navigacija i gumb koji izgleda kao gumb ne zahtijevaju poseban alat, samo pažnju. Dublji UX smjer ima smisla ako radite sučelja za druge.

Koliko stranica trebam napraviti da pređem iz osnova u vještinu?

Tri stranice donose više od tri sata gledanja videa. Prva će biti ružna, druga funkcionalna, treća nešto na što ste ponosni — i tek na trećoj većina ljudi radi bez gledanja u primjer.

Gdje mogu vidjeti kako se pojedini programi razlikuju?

Na stranici Usporedba tečajeva nalaze se redovi po programu, s razinom predznanja i temama koje pokriva. Koristite je zajedno s ovim vodičem — prvo razina, pa cijena.

Prazno radno mjesto uz prozor s hladnim dnevnim svjetlom

Sljedeći korak je jedan, ne pet

To je putanja koju većina ljudi prođe, bez obzira na to koji program upišu. Tečaj skraćuje vrijeme, ali ne zamjenjuje rad.

Ako još niste sigurni na kojem ste koraku, pogledajte usporedbu tečajeva i filtrirajte po razini predznanja. Ako imate konkretno pitanje o putu učenja, javite se — odgovaramo radnim danom od 09:00 do 18:00, subotom od 10:00 do 14:00.

Usporedba tečajeva Kontakt

Tovarelim · Ilica 142, 10000 Zagreb, Hrvatska · info@tovarelim.com · +385 1 4824 224