Web programiranje → HTML, CSS i JavaScript → Projekat Logo kreator: plan i struktura sajta

Projekat Logo kreator: plan i struktura sajta

Lekcija 13 od 17 · HTML, CSS i JavaScript

Sada sve naučeno spajamo u jedan projekat: sajt Logo kreator, na kome korisnik upiše naziv, izabere boju i oblik i preuzme svoj logo. U ovoj lekciji planiramo sajt kao pravi programeri: šta treba da radi, kako izgleda (skica) i kako se organizuju fajlovi.

Pre nego što počneš: potrebno predznanje – lekcije 1–12 ovog kursa (bar HTML, CSS i Bootstrap).
Kako da učiš: zadatke na kraju prvo uradi sam/a u svom editoru; uputstvo i rešenje otvori tek posle toga. Svaki primer ima kod i živi rezultat ispod njega; kod prekucaj u svoj fajl i menjaj ga.

Šta pravimo

Ceo projekat ima više delova; u ovom kursu pravimo frontend – sve što radi u pregledaču:

Strana / deoŠta radiGde
naslovna (naslovna.html)predstavlja sajt, meni, polje za naziv, tri koraka, primeri logoa, podnožjelekcija 14 i 15
generator (generator.html)korisnik bira boju, oblik i font, vidi logo uživo i preuzima ga kao slikulekcija 16
objavljivanjesajt postaje dostupan svima na internetulekcija 17
prijava, registracija, čuvanje logoazahteva server i bazu (backend)kasnije – Django projekat

Tako se radi i u stvarnim projektima: prvo se napravi deo koji može da radi sam (ovde: ceo frontend), pa se postepeno dodaje ostalo.

Skica naslovne strane (wireframe)

Pre kodiranja nacrtaj grubu skicu – na papiru ili u alatu kao što je Excalidraw. Skica pokazuje delove, ne boje i slike:

┌──────────────────────────────────────────────────┐
│ LOGO KREATOR          Naslovna  O nama  Primeri ▾│  ← meni (navbar)
├──────────────────────────────────────────────────┤
│                                                  │
│          Logo Kreator                            │  ← glavni deo (hero):
│   Napravi jednostavan logo za minut              │     naslov, opis,
│   [ upiši naziv ............ ] [ Kreiraj ]       │     forma
│                                                  │
├────────────────┬────────────────┬────────────────┤
│ 1. Upiši naziv │ 2. Izaberi stil│ 3. Preuzmi     │  ← traka sa koracima
├────────────────┴────────────────┴────────────────┤
│        Primeri kreiranih logoa                   │
│     [ logo1 ]     [ logo2 ]     [ logo3 ]        │  ← galerija
├──────────────────────────────────────────────────┤
│   Linkovi        Linkovi        © 2026           │  ← podnožje (footer)
└──────────────────────────────────────────────────┘

Na telefonu se isti delovi ređaju jedan ispod drugog: meni se skuplja u dugme, koraci i logotipi idu u jednu kolonu.

Struktura foldera

logo_kreator/
├── naslovna.html        ← naslovna strana
├── generator.html       ← generator logoa
├── css/
│   └── main.css         ← naši stilovi (posle Bootstrap-a)
├── js/
│   └── generator.js     ← JavaScript generatora
└── images/
    ├── pozadina.jpg     ← slika za glavni deo
    ├── logo1.png
    ├── logo2.png
    └── logo3.png        ← primeri logoa
PraviloZašto
svaka vrsta fajlova u svom folderulakše se snalaziš kada fajlova bude mnogo; isti raspored koristi i Django (static/css, static/js, static/images)
imena malim slovima, bez razmaka i naših slovarade na svakom serveru
relativne putanje (css/main.css)sajt radi i na tvom računaru i na internetu

Slike za primere logoa možeš napraviti u generatoru iz lekcije 16 ili u bilo kom programu za crtanje. Za pozadinu koristi fotografiju sa besplatnih sajtova, npr. Unsplash, i smanji je na širinu do 1600px.

Tehnologije u projektu

ŠtaZa štaLekcija
HTMLstruktura svih stranalekcije 1–4
Bootstrap 5meni, mreža, forma, kartice – brz i responzivan rasporedlekcije 11–12
sopstveni CSSboje, pozadina, efekti – ono po čemu je sajt prepoznatljivlekcije 5–8
JavaScriptgenerator: živi prikaz logoa i preuzimanje slikelekcije 9–10
Prva verzija projekta (2020) bila je napravljena sa Bootstrap-om 4 i jQuery-jem. Ova verzija koristi Bootstrap 5 i običan JavaScript; stari kod je sačuvan na dnu strana, ali ga ne preporučujemo za nove projekte.
Naslovna strana sajta Logo kreator iz prve verzije projekta
Slika 1: Naslovna strana iz prve verzije projekta – raspored je isti kao na skici.

Plan rada

  1. Naslovna – struktura: HTML i Bootstrap komponente za svaki deo sa skice.
  2. Naslovna – stil: sopstveni main.css, pozadina, boje, efekti, provera na telefonu.
  3. Generator: forma + JavaScript koji crta logo i omogućava preuzimanje.
  4. Povezivanje: forma sa naslovne vodi na generator i prenosi upisani naziv.
  5. Objavljivanje: provera i postavljanje sajta na internet.

Posle svakog koraka sajt treba da radi – otvori ga u pregledaču (ili sa Live Server-om) i proveri pre nego što kreneš dalje.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

ZADATAK 01Težina: lako

Tvoj plan

Izaberi temu svog sajta (npr. sajt odeljenja, kluba, hobija) i napiši: 3 rečenice šta sajt radi, spisak strana, skicu naslovne strane (tekstom, kao gore) i strukturu foldera.

Česte greške i saveti
  • Ne kreći od boja i slika – prvo skica i struktura, pa izgled.
  • Odmah napravi foldere css, js i images; kasnije premeštanje kvari putanje.
  • Projekat čuvaj na jednom mestu i redovno pravi rezervnu kopiju (ili koristi Git – lekcija 17).

Proveri znanje

Otvori kviz

Plan projekta

1. Čemu služi skica (wireframe)?




2. Gde ide fajl main.css?




3. Šta se u ovom kursu NE pravi, jer zahteva server?