✦ Razvoj veb aplikacija uz Django Stilizuj svoju veb stranicu

L3 · Koncept 05 · Osnove veba

Učini da tvoj HTML
Neka izgleda kao tvoja.

Nastavi lokalni projekat <code>my-project-hub</code>. CSS daje HTML strukturi koju si napravio jasan vizuelni dizajn koji se prilagođava manjim ekranima.

Cilj učenjaPoveži CSS fajl i čitaj CSS pravilo kao selektor → svojstvo → vrednost → rezultat u pregledaču. Zatim koristi Box Model, jednostavne rasporede i DevTools da praviš promišljene izmene.

01 Uredi style.css02 Proveri u pregledaču03 Pregledaj pomoću DevTools-a

Slobyjev savet — Zašto učimo CSS?

Python i Django ostaju naš fokus za pravljenje veb aplikacija. CSS kontroliše kako te aplikacije izgledaju, zato se usredsredi na čitljive i upotrebljive stranice i na istraživanje problema sa stilovima, umesto na pamćenje svakog svojstva.

01 Osnove CSS-a

HTML opisuje sadržaj, dok CSS kontroliše kako on izgleda. Poveži style.css u head delu fajla index.html. Svako pravilo čitaj ovako: izaberi ove elemente → promeni ovo svojstvo → upotrebi ovu vrednost → pregledač prikazuje rezultat.

h1 { color: #1d4ed8; }
.site-title { font-size: 2rem; }

CSS pravilo ima selektor, svojstvo i vrednost. U pravilu .project-card { padding: 1rem; }, .project-card bira odgovarajuće elemente, padding imenuje ono što se menja, a 1rem je vrednost. Pregledač primenjuje to pravilo i prikazuje unutrašnji prostor oko sadržaja.

Jednom poveži eksterni stylesheet unutar head dela fajla index.html: <link rel="stylesheet" href="style.css">. Pregledač zatim čita oba fajla.

↳

Drži izvorne fajlove odvojeno: Sačuvaj izmene u style.css, zatim osveži pregledač osim ako to Live Server ne radi umesto tebe. Privremena izmena u DevTools-u se ne čuva automatski u tvom fajlu.

Selektori elemenata i class selektori

<article class="project-card">
  ...
</article>

h1 { color: #1d4ed8; }
.project-card { padding: 1rem; }

body, nav i h1 su selektori elemenata. U HTML-u class="project-card" imenuje ponovljivu grupu; u CSS-u .project-card bira elemente sa tom klasom. Tačka znači „izaberi ovu klasu“.

Tipografija i boja

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #f4f7fb;
}
a { color: #1d4ed8; }

Koristi color, background, font-family, font-size i line-height da sadržaj bude čitljiv pre nego što dodaš dekoraciju.

02 Box Model

Jedan element čitaj iznutra ka spolja: sadržaj → padding → border → margin. Padding je prostor unutar ivice, a margin je prostor izvan nje, između susednih elemenata.

.project-card { padding: 1rem; margin: 1rem 0; border: 1px solid #cbd5e1; }

Box model

.card {
  box-sizing: border-box;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

Čitaj od sadržaja ka spolja: padding stvara prostor unutar border-a, border je ivica, a margin stvara prostor izvan nje, između susednih elemenata.

Margin — spoljašnji prostor

Border — ivica

Padding — unutrašnji prostor

Sadržaj

03 Flexbox

Linkovi navigacije kao što su Početna, O projektu i Projekti prirodno prate uobičajeni HTML tok. Kada želiš da ih rasporediš kao jedan navigacioni red, njihov roditelj nav pretvori u flex container pomoću display: flex. Njegovi direktni potomci linkovi tada mogu da se raspoređuju duž glavnog smera: gap dodaje razmak između njih, justify-content ih raspoređuje duž tog glavnog smera, a align-items ih poravnava po poprečnoj osi.

nav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }

Napravi jedno Flexbox pravilo za navigaciju korak po korak

nav { display: flex; }
nav { gap: 1rem; }
nav { justify-content: space-between; }
nav { align-items: center; }

Počni od display: flex: nav postaje flex container, a njegovi direktni linkovi mogu da formiraju red. Dodaj gap: 1rem za razmak između linkova. Zatim justify-content: space-between raspoređuje linkove duž glavne ose, dok align-items: center poravnava linkove po poprečnoj osi. Kompletno pravilo objedinjuje te odluke; isti HTML i CSS fajl ostaju u upotrebi i na malom ekranu.

↕ Poprečna osa — align-items poravnava linkove

PočetnaO projektuProjekti

↔ Glavna osa — justify-content raspoređuje linkove

04 CSS Grid

Zamisli više kartica projekata: dve u jednom redu, a dve ispod njih. Flexbox je koristan kada prvenstveno raspoređuješ stavke duž jednog smera; Grid je koristan početnički model kada želiš redove i kolone. Najpre pretvori .projects-grid u grid container pomoću display: grid, a zatim koristi grid-template-columns: repeat(2, 1fr) za dve jednake kolone. Ovde 1fr znači jedan jednak deo dostupnog prostora, a gap dodaje razmak između kartica.

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

05 Responzivni dizajn i DevTools

Isti HTML i CSS fajl mogu dati drugačiji raspored kada se promeni viewport — vidljiva širina stranice u pregledaču. Odgovarajuće @media pravilo primenjuje se samo za taj viewport; @media (max-width: 768px) znači širinu od 768 piksela ili manju, a ne novu stranicu. DevTools su alati ugrađeni u pregledač koji omogućavaju da pregledaš prikazani HTML i CSS, a zatim privremeno eksperimentišeš pre nego što korisnu ispravku sačuvaš u style.css.

@media (max-width: 768px) { nav { flex-direction: column; } }

DevTools: pregledaj, eksperimentiši, zatim sačuvaj

.project-card {
  padding: 16px;
}

DevTools su alati ugrađeni u pregledač za pregled prikazane stranice. Desni klik na karticu projekta i izaberi Inspect; pregledač otvara DevTools i bira tu karticu u panelu Elements, koji prikazuje HTML. U Styles pronađi .project-card i privremeno promeni padding: 16px u padding: 32px. Unutrašnji prostor odmah postaje veći. Computed prikazuje konačnu vrednost koju pregledač koristi. Osveži stranicu da ukloniš eksperiment ili vrednost koja ti se sviđa prenesi u style.css, sačuvaj fajl i osveži. DevTools služi za pregled i eksperimentisanje, a nije zamena za editor.

Čitaj i otklanjaj CSS probleme korak po korak

Pronađi HTML elementPočni od tačnog elementa koji želiš da stilizuješ u index.html ili DevTools-u.
Pronađi njegov selektorOdluči da li ga bira selektor elementa kao h1 ili class selektor kao .project-card.
Odredi jedno svojstvo i vrednostZapitaj se šta menjaš i koju vrednost mu daješ, na primer padding: 1rem.
Potvrdi vezu sa CSS fajlomProveri da li je style.css povezan iz index.html i da li su oba fajla sačuvana.
Koristi DevTools kao dokazPregledaj element i proveri da li se očekivano pravilo pojavljuje u Styles ili se primenjuje neka druga vrednost.
Neka eksperimenti ostanu privremeni dok ih ne sačuvašPromeni jedno malo pravilo u DevTools-u da testiraš ideju, zatim korisnu izmenu kopiraj u style.css. Osvežavanje uklanja izmene napravljene samo u DevTools-u.

Česte početničke CSS greške

DevTools je izmenio moj izvorni fajlDevTools je privremen. Konačnu ispravku unesi u style.css, sačuvaj je i osveži stranicu.
CSS fajl nije povezanProveri da li je link u head delu i da li href="style.css" odgovara imenu sačuvanog fajla.
Class selektor ne odgovara HTML-uPravilo kao .project-card radi samo kada HTML ima class="project-card". Precizno proveri pravopis.
Zaboravljanje tačke kod class selektoraproject-card bira HTML element sa tim imenom; .project-card bira klasu.
Mešanje padding-a i margin-aPadding stvara prostor unutar border-a, oko sadržaja. Margin stvara prostor izvan border-a, između elemenata.
Pregledanje pogrešnog elementaPomoću Inspect-a izaberi element koji si nameravao pre nego što zaključiš da pravilo nedostaje ili se ignoriše.
Tretiranje media query-ja kao posebne straniceMedia query menja koja se pravila primenjuju za viewport. Ne pravi drugu mobilnu HTML stranicu.

02 Proveri u pregledaču

Vođena vežba — stilizuj My Project Hub

Radi ovo u VS Code-u

Nastavi sa folderom <code>my-project-hub</code> iz Koncepta 04. Zadrži HTML koji si napravio; svaki korak dodaje malo CSS poboljšanje koje možeš odmah proveriti u pregledaču.

Tvoj postojeći lokalni projekat

my-project-hub/
├── index.html
└── style.css

Otvori oba fajla u VS Code-u. Možeš koristiti adresu fajla u pregledaču ili opcioni Live Server iz Koncepta 04; nisu potrebni ni Django ni Python server.

Osam malih koraka stilizovanja

Poveži CSS fajlNapravi style.css pored index.html. Zadrži postojeći HTML. Unutar head dela dodaj link ispod postojećih meta tagova. CSS ispod upiši u style.css, sačuvaj oba fajla i osveži. Pozadina stranice bi trebalo da se promeni.
```
<link rel="stylesheet" href="style.css">

/* style.css */
body { background: #f4f7fb; }
```
Počni od selektoraOtvori index.html i dodaj class="site-title" svom postojećem h1 elementu. Zadrži njegov tekst. U style.css dodaj ova pravila ispod postojećeg body pravila, sačuvaj i osveži. Naslov bi trebalo da postane plav i veći.
```
h1 { color: #1d4ed8; }
.site-title { font-size: 2rem; }
```
Poboljšaj boju i tipografijuZadrži svako prethodno pravilo. U style.css proširi pravilo za body i dodaj pravilo za link ispod njega. Sačuvaj i osveži; tekst bi trebalo da bude čitljiviji, a linkovi da imaju jasnu boju.
```
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #1f2937;
}
a { color: #1d4ed8; }
```
Pogledaj Box ModelU index.html dodaj class="project-card" postojećoj section sekciji Projekti. Dodaj ovo pravilo u style.css; ne uklanjaj ranija pravila. Sačuvaj i osveži. Trebalo bi da vidiš sekciju sa border-om, prostorom unutar nje i razmakom oko nje.
```
.project-card {
  box-sizing: border-box;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #ffffff;
}
```
Napravi kartice projekataZadrži sekciju Projekti. U njenoj listi dodaj class="project-card" svakom postojećem li elementu. Zatim zameni pravilo za karticu na nivou sekcije pravilom ispod u style.css. Sačuvaj i osveži; svaki projekat bi sada trebalo da izgleda kao zasebna kartica.
```
.project-card {
  list-style: none;
  padding: 1rem;
  margin: 0.75rem 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #ffffff;
}
```
Rasporedi navigaciju pomoću FlexboxaZadrži postojeći nav i njegove linkove iz Koncepta 04. Dodaj ovo pravilo u style.css, sačuvaj i osveži. Linkovi navigacije bi trebalo da se pojave u fleksibilnom redu sa vidljivim razmakom između njih.
```
nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
```
Učini raspored responzivnimZadrži sav prethodni CSS. Dodaj ovo media pravilo na kraj style.css. Suzi prozor pregledača ili koristi Device Toolbar u DevTools-u. Na manjem ekranu navigacija i kartice treba da se poređaju jedna ispod druge umesto da zaguše red.
```
@media (max-width: 768px) {
  nav { flex-direction: column; }
  .project-card { margin: 0.5rem 0; }
}
```
Jedna stranica, dva korisna rasporeda
Desktop — navigacija ima mesta da ostane u redu
HomeAboutProjects
Kartice projekataKartice projekata
Mobilni prikaz — navigacija se ređa da bi ostao čitljiv prostor
HomeAboutProjects
Kartice projekataKartice projekata
Ovo odražava tvoje @media (max-width: 768px) pravilo. Promeni veličinu pregledača ili otvori Device Toolbar da uporediš oba rasporeda.
Pregledaj i ispravi jednu CSS greškuNajpre desnim klikom izaberi ispravno stilizovanu karticu projekta u pregledaču i odaberi Inspect. DevTools se otvara sa tim izabranim elementom: Elements prikazuje njegov HTML, a Styles njegova CSS pravila. U Styles privremeno promeni padding: 16px u padding: 32px i posmatraj kako unutrašnji prostor raste; osveži stranicu da poništiš taj eksperiment. Zatim promeni .project-card u netačno .projects-card u style.css, sačuvaj i primeti da kartice gube stil. Ponovo pregledaj karticu i pomoću Styles i Computed utvrdi zašto se nijedno odgovarajuće pravilo ne primenjuje. Vrati ispravan selektor u style.css, sačuvaj i osveži. Izmene napravljene samo u DevTools-u su privremene.

↳

Provera u pregledaču: style.css → saved → browser refresh small screen → navigation stacks Tačne boje su tvoj izbor. Potvrdi da se CSS fajl učitava, da kartice imaju unutrašnji padding i spoljašnji razmak, i da stranica ostaje čitljiva na uskom ekranu.

Kada CSS ne izgleda kako treba

Ništa se ne menjaProveri da li je <code>link</code> unutar <code>head</code> dela, da li <code>href="style.css"</code> odgovara imenu fajla, da li su oba fajla sačuvana i da li je pregledač osvežen.
Pravilo za karticu se ne primenjujeProveri da li klasa u <code>index.html</code> potpuno odgovara selektoru u <code>style.css</code>, uključujući tačku ispred class selektora.
Raspored na malom ekranu se nije promenioSuzi pregledač na manje od 768 piksela ili koristi Device Toolbar. Proveri da li je <code>@media</code> pravilo na kraju CSS fajla i da li ima odgovarajuće vitičaste zagrade.

↳

Sledeće ćeš povezati vizuelni frontend sa odgovornostima na serverskoj strani koje će Django obrađivati.

03 Pregledaj pomoću DevTools-a

Koje svojstvo stvara prostor unutar kartice, između njenog border-a i teksta?

Uporedi unutrašnju i spoljašnju stranu Box Modela.

.card {
  border: 1px solid #cbd5e1;
  padding: 16px;
  margin: 24px 0;
}

Ne moraš da pamtiš svaki CSS selektor ili svojstvo. Ako umeš da pronađeš pravilo, razumeš šta ono radi i prilagodiš ga svojoj stranici, ostvario si cilj ove lekcije.

Izgrađuj samopouzdanje samostalnim radom

Prilagodi My Project Hub sebi

Koristi CSS koji razumeš da svom postojećem projektu daš lični vizuelni smer.

Vaš ciljPromeni paletu boja, tipografiju ili izgled kartica; zadrži čitljivu navigaciju; zatim pomoću DevTools-a pregledaj jedan element i potvrdi da je konačno pravilo sačuvano u style.css.

my-project-hub/
├── index.html
└── style.css

Otvori index.html i style.css u VS Code-u

Nagoveštaji korak po korak

Promeni jedno CSS pravilo odjednom i osveži pregledač.
Koristi klasu kada više kartica treba da deli isti stil.
Pomoću DevTools-a pregledaj rezultat, zatim konačnu izmenu sačuvaj u style.css.

Pitaj Slobyja jedno usmeravajuće CSS pitanje. Check My Code nije CSS validator, zato stvarni rezultat pregledaj u svom pregledaču i DevTools-u.

Tvoj mentor za učenje

Napravite besplatan nalog ili se prijavite za AI smernice tokom učenja.

Napravite besplatan nalog Prijavi se

04 Provera razumevanja

Napravite besplatan nalog ili se prijavite da biste dobili AI povratnu informaciju i sačuvali napredak u učenju.

Napravite besplatan nalog Prijavi se

Učini da tvoj HTMLNeka izgleda kao tvoja.

Učiš kao gost — sačuvaj svoj napredak!