< Nazad na kurseve

Uvod u web dizajn

Nauči da praviš funkcionalne stranice sa tekstom, slikama, vezama, multimedijom. Nauči da ulepšavaš stranice, koristeći prilagodljivi dizajn, tipografiju, boje i animacije. Nauči temelje web razvoja.

Kurs je za apsolutne početnike.

Uvod

• Čemu služe HTML, CSS i Javascript?
• Uvod u HTML?
• Uvod u CSS?
• Kratka istorija weba

Alati

• Instalacija editora i dodataka
• Razvojni alati pregledača
• Tvrdo osvežavanje (hard refresh)

Web stranica

• HTML elementi
  • Gneždenje elemenata
• HTML atributi
  • Upotreba navodnika
• Pravljenje HTML fajla
• Imenovanje fajlova i foldera
• Vežba: Postavi stranicu na Github

Dodajemo boje

• Dodavanje CSS-a
• Osnovni selektori
• Boje u CSS-u
  • Bonus: Heksadecimalni brojevi
• Podrazumevani stilovi pregledača
• Vežba: Promeni boju slova i pozadine

Tipografija

• Tipografija i web development
• Merne jedinice
• Upotreba ema za tipografiju
• Osobina kaskadiranja
• Vežba: Promeni porodicu i veličinu slova

HTML struktura

• Osnovna HTML struktura
• HTML kao stablo
• Provera validnosti stranica
• Vežba: proveri validnost stranica

Linkovi i putanje

• Linkovi
• URL, jedinstvena adresa resursa
  • Relativne i apsolutne putanje
  • Unutrašnje veze ka delu stranice
• Stilizovanje veza
  • Podvlačenje linka
  • Link kao dugme
  • Razlikovanje linkova po sadržaju
  • Isticanje posećenih veza

Liste i navigacija

• Liste (uređene i neuređene)
  • Liste definicija
  • Ugnježdene liste
• Navigacija
• Vežba: napravi mobilnu navigaciju
• Vežba: napravi unutrašnju navigaciju
• Vežba: napravi padajući meni

Prikaz elemenata

• Osnovni prikazi: block, inline i inline-block
• Fleksibilni prikaz (display: flex)
• Vežba: fleksibilno prikaži navigaciju

Pozicija elemenata

• Pozicija elemenata
• Promena redosleda slojeva (z-index)
• Vežba: napravi fiksirano zaglavlje

Prilagodljivi web dizajn

• Prilagodljivi web dizajn
• Upiti o mediju
• Tačke preloma
• Prvo mobilni dizajn
• Bootstrap biblioteka
• Vežba: napravi prilagodljivu navigaciju

Box model

• Box model
• Margine i razmaci
• Prelivanje sadržaja

Slike i multimedija

• Slike u HTML-u
  • Formati slika za web
  • Pozadinska slika
  • Mapirana slika
  • picture tag za razne rezolucije
• Rad sa SVG-om
• Video u HTML-u
• Vežba: napravi fotogaleriju

Kontakt stranica

• Kontakt forma
• Umetnuti okvir
• Slanje formulara serveru (POST metoda)
• Kako napraviti kontakt formu bez bekenda?
• Vežba: validiraj unos i odredi obavezna polja

Korisničko iskustvo

• Korisničko iskustvo
• Pristupačnost

Dobre CSS prakse

• Dobre CSS prakse
• Saveti za rad sa Bootstrapom

Napredni selektori

• Selektori naslednika i dece
• Selektori atributa
• Pseudo-klase
• Vežba: oboj svaki drugi red
• Primer: otvaranje navigacije na klik

Optimizacija stranica

• Optimizacija brzine učitavanja
  • Optimizacija slika
  • Minifikacija koda
• SEO optimizacija