< Nazad na kurseve

Uvod u web i 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

Upoznavanje alata

• Instalacija editora (Notepad++, Atom, Brackets, Sublime, Code…)
• Instalacija dodataka za: prepoznavanje jezika, ulepšavanje koda, otkrivanje grešaka
• Razvojni alati pregledača
• Tvrdo osvežavanje (hard refresh)

Moja prva stranica

• HTML elementi
  • Razlikovanje block i inline elemenata
  • Gneždenje elemenata
• HTML atributi
  • Upotreba navodnika
• Pravljenje HTML fajla
• Imenovanje fajlova i foldera
• Vežba: Napravi stranicu koja ima naslov, tekst, sliku i link
• 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
• Vežba: Otkrij ko ne nasleđuje boju od roditelja?

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: postavi osnovnu strukturu stranice
• 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
  • pravljenje navigacije pomoću liste
  • pravljenje navigacije pomoću linkova
  • menjanje boje na hover
• 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
• Vežba: fleksibilno prikaži krugove

Pozicija elemenata

• Pozicija elemenata
• Plutanje elemenata (float) kao loša praksa
• 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
• Vežba: prilagodi prikaz stranica za razne uređaje

Box model

• Box model
• Margine i razmaci
• Unutrašnje praznine (padding) i širina elementa
• Prelivanje sadržaja
• Vežba: promeni box-sizing elemenata u border-box, menjaj pading, uporedi razliku

Slike i multimedija

• Slike u HTML-u
  • Formati slika za web
  • Pozadinska slika
  • Mapirana slika
  • picture tag za razne rezolucije
• Video u HTML-u
• Vežba: dodaj više veličina slike
• 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
• Vežba: pošalji kontakt formu (koristi formspree.io)

Korisničko iskustvo

• Korisničko iskustvo
• Pristupačnost

Dobre CSS prakse

• Dobre CSS prakse
• Upotreba !important kao loša praksa
• Skraćene direktive i opasnost od gaženja
• Vežba: organizuj kod u logične celine
• Vežba: podeli CSS u manje fajlove i uvezi ih u glavni fajl

Napredni selektori

• Selektori naslednika i dece
• Selektori atributa
• Pseudo-klase
• Blizanački selektori: adjacent sibling (+) i general sibling (~)
• n-to dete i n-ti tip
• Vežba: oboj svaki drugi red
• Vežba: napravi otvaranje i zatvaranje navigacije samo sa CSS-om
• Primer: otvaranje padajućeg menija na klik
• Primer: otvaranje navigacije na klik

CSS animacije

• Tranzicije i animacije
• Vežba: animiraj HTML element
• Primer: animirani meni
• Primer: avionče (animacija sa rotacijom)

Serviranje fajlova

• Server
• Protokoli
• HTTP protokol
• Sistem imena domena
• Web hosting

Optimizacija brzine

• Merenje brzine učitavanja (PageSpeed Insights)
• Optimizacija brzine učitavanja
  • Optimizacija slika
  • Minifikacija koda
  • Uklanjanje ostalih prepreka

SEO optimizacija

• Identifikacija ključnih reči
• Sređivanje sadržaja, naslova, linkova, titlova, meta opisa…
• Sređivanje slika (jasni nazivi fajlova, alt i title atributi)
• Čitljive URL adrese
• PageRank algoritam: dodavanje veza ka sajtu (društvene mreže, blog, Github)