Model kutije, dimenzije u CSS-u

1. Objasni što je model kutije i od kojih se dijelova sastoji. Skiciraj primjer kutije.
2. Objasni što je margina, obrub, popuna i sadržaj. Kako ih definiramo u CSS-u?
3. Što se događa ukoliko neki sadržaj ne stane u neku kutiju? Kako riješiti taj problem?
4. Na koji način određujemo ukupnu širinu i visinu nekog elementa?
5. O čemu ovisi visina i širina elementa ukoliko mu ta svojstva nisu podešena u CSS-u?
6. Navedi na koje sve načine možemo u CSS-u odrediti margine, obrube i padinge. Objasni na primjerima.
7. Hoće li se obrub prikazati ukoliko mu nije podešena debljina ili stil? Zašto?
8. Objasni sažimanje margina. Skiciraj primjer.
9. Izračunaj ukupne dimenzije neke kutije po izboru.

Blok i linijski elementi

1. Koja je razlika između blok i linijskih elemenata? Navedi nekoliko primjera za svaki od njih.
2. Na koji način možemo u CSS-u neki linijski element pretvoriti u element na razini bloka? Objasni kako možemo neki blok element pretvoriti u linijski?
3. Čemu služi div, a čemu span? Navedi primjere korištenja.
4. je li slika blok ili linijski element? Objasni! Kako možemo sliku poravnati po sredini?
5. Objasni na koji način možemo glavni kontejner poravnati po sredini stranice.

Grupiranje i ugnježđivanje selektora

1. Objasni grupiranje selektora. Navedi nekoliko primjera.
2. Objasni ugnježđivanje selektora. Navedi nekoliko primjera.

Pozicioniranje

1. Što to znači kada velimo da je neki element u normalnom tijeku HTML dokumenta?
2. Čemu služi svojstvo 'position' i koje vrijednosti može imati?
3. Nabroji četiri metode pozicioniranja korištenjem svojstva 'position'.
4. Objasni čemu služe svojstva 'top', 'left', 'bottom' i 'right'.
5. Objasni statičko pozicioniranje. Kada se ono koristi?
6. Utječu li gornja svojstva na pomicanje elementa koji je statički pozicioniran?
7. Na primjerima objasni relativno, apsolutno i fiksno pozicioniranje. Usporedi navedene metode pozicioniranja.
8. U odnosu na koji element će se odrediti pomak apsolutno pozicioniranog elementa?
9. Čemu služi z-index?

Plutanje i poravnavanje elemenata

1. Koja je osnovna namjena svojstva 'float'? Koje vrijednosti može imati navedeno svojstvo?
2. Objasni na koji način možemo složiti raspored web stranice korištenjem plutanja. Koji se problem pritom može pojaviti s kontejnerom i kako ga možete riješiti?

Responzivnost

1. Objasni razliku između fiksnog, fluidnog, adaptivnog i responzivnog web dizajna.
2. Zbog čega se očekuje da većina današnjih web stranica bude responzivna? Objasni što je to responzivnost.
3. Koje su tri komponente potrebne za realizaciju responzivnosti? Objasni svaku od njih.
4. Čemu služe upiti o mediju? Napiši konkretan primjer upita o mediju te ga objasni. Odredi okvirne točke prekida za mobitele, tablete i stolna računala. Što su i o čemu ovise te točke prekida?