Mini projekat

Lekcija 10 — Mini projekat: „Moj prvi web sajt“

Cilj lekcije

Konsolidovati sve naučeno kroz kurs.
Primijeniti HTML i CSS (layout, tipografija, boje, responzivnost) u jednoj realnoj, praktičnoj strukturi.
Naučiti organizaciju fajlova i strukturu projekta.
Razviti osećaj za dizajn — raspored elemenata, responzivnost, čitljivost i estetiku.

Šta studenti treba da urade

Napraviti jednostavan, višesekcijski web-sajt koji može da bude, na primer: lični portfolio, mali biznis sajt, landing stranica, stranica sa opisom usluga, mini blog (bez CMS-a), itd.
Sajt mora sadržati: navigaciju (meni), zaglavlje (header / hero sekciju), glavni sadržaj (npr. sekcije: „O nama / O meni“, „Usluge / Portfolio / Projekti / Galerija“, „Kontakt“), footer.
Koristiti HTML strukturu — semantičke oznake (header, nav, main, section, footer, article/div …), klase i ID-eve po potrebi.
Stilizovati sa CSS-om koristeći sve koncepte iz kursa: boje, tipografija, padding/margine, pozicioniranje, layout (grid i/ili flexbox), kao i responzivnost — da sajt izgleda dobro i na mobilnim i na desktop uređajima.

???? Predlog strukture i HTML skeleton

Evo primera strukture fajlova + kostura HTML-a:

/project-folder/
   index.html
   css/
      style.css
   img/    (opciono — slike za sajt)

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Moj prvi sajt — nazivi</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>

  <header class="site-header">
    <nav class="nav">
      <ul class="nav__list">
        <li><a href="#home">Početna</a></li>
        <li><a href="#about">O meni / O nama</a></li>
        <li><a href="#services">Usluge / Portfolio</a></li>
        <li><a href="#contact">Kontakt</a></li>
      </ul>
    </nav>
    <div class="hero">
      <h1>Dobrodošli na moj sajt</h1>
      <p>Ovde je kratki opis / moto / predstavljanje</p>
    </div>
  </header>

  <main>
    <section id="about" class="about">
      <h2>O meni / O nama</h2>
      <p>Par rečenica o tebi / firmi / ideji …</p>
    </section>

    <section id="services" class="services">
      <h2>Usluge / Portfolio</h2>
      <div class="services__grid">
        <div class="card">Projekat / Usluga 1</div>
        <div class="card">Projekat / Usluga 2</div>
        <div class="card">Projekat / Usluga 3</div>
        <!-- po potrebi više -->
      </div>
    </section>

    <section id="contact" class="contact">
      <h2>Kontakt</h2>
      <p>Email, telefon, društvene mreže ili kontakt forma</p>
    </section>
  </main>

  <footer class="site-footer">
    <p>&copy; 2025 — Moje Ime / Naziv firme</p>
  </footer>

</body>
</html>

Predlog CSS-stilova i layout-a

U style.css možeš da uključiš sledeće:

/* Globalno resetovanje / osnovni stilovi */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fafafa;
}
a {
  text-decoration: none;
  color: inherit;
}

/* Navigacija i header */
.site-header {
  background: #004466;
  color: white;
}
.nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.nav__list li {
  margin: 0 15px;
}
.nav__list a {
  color: white;
  font-weight: bold;
}

/* Hero sekcija */
.hero {
  text-align: center;
  padding: 60px 20px;
  background: #006699;
  color: white;
}
.hero h1 {
  margin-bottom: 10px;
  font-size: 2.5rem;
}
.hero p {
  font-size: 1.2rem;
}

/* Sekcije glavnog sadržaja */
main section {
  padding: 40px 20px;
}

/* Grid / kartice (usluge / portfolio) */
.services__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
  background: white;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  /* dodatno: senka, hover efekat ... */
}

/* Footer */
.site-footer {
  background: #004466;
  color: white;
  text-align: center;
  padding: 20px;
}

Ovaj CSS koristi: semantički HTML, reset box-modela, tipografiju i boje, osnovni layout sa grid-om za sekciju “usluge / portfolio”, i jednostavne stilove za navigaciju/header/footer.

Responsive prilagođavanje (Media Queries + fleksibilni grid)

Da sajt lepo radi i na mobilnim i desktop uređajima — možeš dodati:

/* Mobile-first — osnovni stilovi kao iznad */

/* Veći ekrani: širi hero, fleksibilnija navigacija, više kolona u grid-u */ @media (min-width: 768px) { .hero { padding: 100px 20px; } }

@media (min-width: 992px) { .nav__list { justify-content: flex-end; padding-right: 40px; } }

Grid-sekcija (.services__grid) je već “fluidna” jer koristi auto-fit + minmax(), što znači da se broj kolona automatski menja u zavisnosti od širine ekrana — bez potrebe za dodatnim media query-ima. allthingsprogramming.com+2ProCoder 09+2

Ako želiš, možeš dodatno prilagoditi font-veličine, margine ili raspored sekcija za male ekrane — prema estetici i sadržaju koji imaš.

Ekstenzije / opcionalni elementi (za više vežbe)

Da bi projekat bio “bogatiji” i da korisnik vežba više stvari:

Dodaj navigaciju koja “stickuje” na vrhu (sticky / fixed nav)
U “usluge / portfolio” sekciji — slike + opis + linkovi (cards sa slikama)
U “kontakt” sekciji — formular za kontakt (input, textarea, dugme) — uz stilizaciju
Dodaj hover efekte, tranzicije (npr. za dugmad, kartice)
Koristi boje, tipografiju, padding/margine da sajt ima “profesionalan” izgled
(Opcionalno) dodaj favicon, meta-tagove, naslov, opise — da bude sličan realnom sajtu

Šta se time vežba — pregled svega što je kurs pokrivao

HTML struktura (semantički elementi, klase/ID-evi)
CSS selektori, boje, tipografija, dimenzije, padding/margine
Layout tehnike: Grid (za sekcije), opcionalno Flexbox (za navigaciju / mikro layout-e)
Koriste se i koncepti iz lekcija o tipografiji / bojama / rasporedu
Responsive dizajn sa fluidnim grid-om + Media Queries — da sajt bude upotrebljiv na raznim uređajima
Osnove organizacije foldera / fajlova, čistog i strukturiranog koda

Zaključak i smernice

Ovaj mini projekat omogućava da polaznik — koristeći sve što je naučio — napravi konkretan, funkcionalan web sajt. To je odlična priprema za dalje — kada počneš da učiš JavaScript, dinamičke sajtove, ili čak prelazak na neki framework.

Predlažem da sve što dosekneš olakšaš — kôd piši čitljivo, komentariši delove koje možda želiš da proširiš, koristi semantički HTML, vodi računa o responzivnosti i aksesibilnosti.