Osnove web dizajna u Hrvatskoj
Što se stvarno uči iz HTML-a i CSS-a
Tečajevi koji u nazivu imaju HTML, CSS i responzivni dizajn zvuče slično, a razlikuju se u tome koliko vremena stvarno posvećuju svakom dijelu. Ova stranica opisuje što se pod tim pojmovima konkretno podrazumijeva i kako prepoznati program koji to pokriva ozbiljno.
Tri dijela koja se lako pomiješaju u jedan pojam
HTML, CSS i responzivni dizajn navode se zajedno, ali svaki od njih traži drugačiji način rada. Prvi opisuje sadržaj, drugi pravila izgleda, treći ponašanje rasporeda na različitim širinama ekrana. Kada program sve tri stvari prođe u istom tjednu, malo je vjerojatno da je ostalo vremena za vježbu.
Zato je korisno prije upisa pročitati sadržaj programa i provjeriti koliko je prostora dobio svaki od tih dijelova, a ne samo jesu li navedeni u naslovu.
Što provjeriti u opisu programa
- Je li HTML obrađen kroz elemente i njihovo značenje.
- Objašnjava li se zašto neko CSS pravilo pobjeđuje drugo.
- Ima li responzivni dizajn zasebne vježbe ili je samo jedna rečenica.
HTML: struktura prije svega
HTML opisuje sadržaj stranice. Naslovi, odlomci, slike, veze, liste, tablice i obrasci su elementi koje ćete koristiti svaki dan. Njihovo poznavanje nije stvar napredne razine, nego osnovne pismenosti za web.
Dobar tečaj ovdje ne juri. Ako u prvom danu prođe cijeli HTML i prijeđe dalje, vjerojatno ćete propustiti razliku između semantičkih i nesemantičkih elemenata. Ta razlika utječe na pristupačnost i na to koliko je stranica razumljiva tražilicama.
Provjerite u opisu programa spominje li se pristupačnost ili semantika. Ako ne, to ne znači da je program loš, ali znači da je taj dio na vama.
CSS: kaskada, selektori i prvi pravi layout
CSS je jezik stilova i najveća prepreka za početnike. Kaskada, specifičnost selektora i način na koji se pravila nasljeđuju čine da jednostavne stvari izgledaju nepredvidivo.
Dobar program ovdje ne preskače. Objašnjava zašto neko pravilo pobjeđuje drugo i zašto se margine preklapaju. Bez toga, svaki problem rješavate pokušavanjem dok ne proradi, što je spor i frustrirajuć način rada.
Prvi layout je obično najveći skok. Tu se prvi put susrećete s rasporedom elemenata i shvaćate da HTML redoslijed nije isto što i vizualni raspored.
Znakovi da se CSS ne preskače
Objašnjava se pobjeda pravila
Program pokazuje zašto jedan selektor nadjačava drugi, umjesto da se pravila prepisuju dok nešto ne proradi.
Preklapanje margina je tema
Vježbe pokazuju kako se razmaci stvarno ponašaju, a ne samo koje vrijednosti upisati.
Raspored nije redoslijed
Prvi pravi layout prolazi kroz odnos između poretka u kodu i vizualnog rasporeda na stranici.
Prostor u kojem se gradi raspored
Responzivni dizajn: pravila koja se prilagođavaju
Responzivni dizajn znači da stranica radi na različitim širinama ekrana. U praksi to znači medijske upite, fleksibilne jedinice i slike koje se skaliraju.
Ovo je dio koji početnici najčešće podcijene jer na velikom monitoru sve izgleda dobro. Problemi se pojavljuju na mobitelu, gdje se raspored raspada ili tekst postaje nečitljiv. Danas je mobilni pregled često prvi, ne drugi.
Programi u Hrvatskoj navode responzivni dizajn u sadržaju gotovo redovno. Razlika je u tome je li to zasebna cjelina s vlastitim vježbama ili jedna rečenica u popisu tema. Prva varijanta je znatno korisnija.
Zasebna cjelina
Vlastite vježbe za medijske upite i fleksibilne rasporede, s testiranjem na stvarnim širinama ekrana.
Jedna rečenica u popisu
Tema je navedena, ali bez vježbe. Provjera rasporeda na mobitelu ostaje na vama.
Layout: od fiksnog do fleksibilnog
Riječ layout pokriva način na koji se elementi slažu na stranici. Moderni pristup koristi fleksibilne rasporede koji se prilagođavaju, a ne fiksne širine u pikselima.
Kada u opisu programa vidite da se spominju osnovne funkcije izrade layouta, kao kod Edukacentra, to obično znači rad s elementima, pozicioniranjem i osnovnim rasporedom. To je solidan početak, ali ne uključuje nužno naprednije tehnike.
Za početnika je važnije da razumije logiku rasporeda nego da nauči sve tehnike. Tehnike se mijenjaju, logika ostaje.
Fiksna širina u pikselima
Raspored se lomi čim je ekran uži.
Teško se održava
Fleksibilne jedinice
Raspored se prilagođava širini.
Traži razumijevanje pravila
Raspored koji se sam slaže
Manje ručnog podešavanja po ekranu.
Logika ostaje ista
Slike, ikone, fontovi i animacije
Kada struktura i stilovi rade, dolaze vizualni detalji. Učiona - Web dizajn ih navodi u opisu uz HTML, CSS i responzivni dizajn, što pokazuje da su dio osnovnog paketa, a ne dodatak.
Slike treba pripremiti u odgovarajućim formatima i veličinama, inače stranica postaje spora. Ikone danas najčešće dolaze iz fontova ili iz skupa gotovih rješenja. Fontovi se učitavaju s vanjskih servisa ili lokalno, i svaka opcija ima posljedice na brzinu.
Animacije su najčešće prvo mjesto gdje početnici pretjeraju. Manje je više, i dobar tečaj će to reći umjesto da vas pusti da napunite stranicu pokretima.
Tipografija kao dio CSS-a
Tipografija nije ukras, nego osnovno sredstvo čitljivosti. Veličina teksta, visina retka, razmaci između slova i kontrast boja odlučuju hoće li ljudi čitati stranicu ili otići.
U CSS-u se tipografija postavlja kroz nekoliko pravila, ali odluke iza njih zahtijevaju mjeru. Previše vrsta slova, premali tekst na mobitelu ili predugi redci su česte greške koje se vide na prvi pogled.
Formalni programi, poput Algebrinog, tipografiju stavljaju među glavne teme. To ima smisla ako želite raditi na dizajnerskoj strani. Za tehnički profil dovoljno je solidno razumijevanje osnova.
Praktično pravilo: pročitajte poglavlje naglas i vidite gdje zastajete. Ako se predugi redak gubi, problem nije u čitatelju nego u postavkama retka.
Kako prepoznati kvalitetan program iz ovog područja
Postoji nekoliko znakova koje možete provjeriti u opisu bez ikakvog predznanja. Prvi je da su HTML, CSS i responzivni dizajn navedeni kao zasebne cjeline, a ne kao jedan niz riječi.
Drugi je da program završava projektom koji se može otvoriti u pregledniku i pokazati. Ako završava samo nizom vježbi bez gotove stranice, upitno je koliko se toga zadrži.
Treći je da opis navodi alate i tehnike, a ne samo ishode. Riječi poput layouta, tipografije, slika i fontova pokazuju da je netko razmišljao o sadržaju, ne samo o marketingu.
Tri provjere prije upisa
Jesu li tri područja odvojena u sadržaju programa.
Završava li program stranicom koja se može otvoriti.
Navode li se alati i tehnike, a ne samo ishodi.
Što možete naučiti sami, a što na tečaju
HTML i CSS se mogu naučiti samostalno, i mnogi su tako počeli. Prednost tečaja je struktura i vanjski rok, ne tajno znanje.
Ono što je samostalno teže je responzivni dizajn, jer zahtijeva da testirate na stvarnim uređajima i razumijete zašto nešto ne radi. Povratna informacija nekoga s iskustvom tu skraćuje vrijeme značajno.
Samostalno
- Elementi, obrasci i osnovna pravila stilova
- Vježbanje uz vlastite male stranice
- Testiranje na stvarnim uređajima
Na tečaju
- Struktura i redoslijed koji ne preskače osnove
- Povratna informacija na vlastiti raspored
- Završni projekt koji se može pokazati
Praktičan kompromis: prođite osnove HTML-a sami, pa upišite program koji počinje od CSS-a i responzivnog dizajna. Tako ne trošite sate na ono što možete savladati u tjedan dana.
Česta pitanja prije upisa
Treba li mi predznanje iz programiranja za HTML i CSS?
Ne. HTML i CSS nisu programski jezici u klasičnom smislu. Radite s elementima, pravilima i vrijednostima, a logika se uči kroz vježbu i ponavljanje na malim primjerima.
Koliko traje dio o responzivnom dizajnu?
To ovisi o programu. Provjerite je li responzivnost zasebna cjelina s vježbama i testiranjem na različitim širinama ekrana. Ako je svedena na jednu temu u popisu, vjerojatno ćete taj dio morati vježbati sami.
Mogu li nakon tečaja izraditi vlastitu stranicu?
Ovisi o programu i o vremenu koje uložite izvan nastave. Program koji završava gotovom stranicom i prolazi kroz layout, tipografiju i slike daje realniju osnovu od niza odvojenih vježbi.
Kako usporediti programe ako svi navode isto?
Gledajte dubinu, ne popis tema. Usporedite koliko je prostora dobio svaki dio, završava li program projektom i spominju li se alati i tehnike poput layouta, tipografije i fontova. Više o tome kako čitati opise programa nalazi se na stranici s usporedbom tečajeva.
Kamo dalje
Ako želite vidjeti kako se programi međusobno razlikuju po sadržaju, usporedba tečajeva prolazi kroz iste kriterije koje smo ovdje opisali.
Tovarelim
Ilica 142, 10000 Zagreb, Hrvatska
Pon–Pet: 09:00–18:00, Sub: 10:00–14:00
Pitanja o sadržaju programa možete poslati na kontakt stranicu ili na info@tovarelim.com.