<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:57:11+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "hr"
}
-->
# HTML Praktična Zadaća: Izrada Mockupa Bloga

## Cilj

Dizajnirajte i ručno napišite HTML strukturu za početnu stranicu osobnog bloga. Ova vježba pomoći će vam u vježbanju semantičkog HTML-a, planiranja izgleda i organizacije koda.

## Upute

1. **Dizajnirajte Mockup Svojeg Bloga**
   - Nacrtajte vizualni mockup početne stranice bloga. Uključite ključne sekcije poput zaglavlja, navigacije, glavnog sadržaja, bočne trake i podnožja.
   - Možete koristiti papir i skenirati svoj nacrt ili koristiti digitalne alate (npr. Figma, Adobe XD, Canva ili čak PowerPoint).

2. **Identificirajte HTML Elemente**
   - Napravite popis HTML elemenata koje planirate koristiti za svaku sekciju (npr. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, itd.).

3. **Napišite HTML Kod**
   - Ručno napišite HTML za svoj mockup. Fokusirajte se na semantičku strukturu i najbolje prakse.
   - Uključite najmanje 10 različitih HTML elemenata.
   - Dodajte komentare kako biste objasnili svoje izbore i strukturu.

4. **Predajte Svoj Rad**
   - Prenesite svoj nacrt/mockup i HTML datoteku.
   - Opcionalno, napišite kratku refleksiju (2–3 rečenice) o svojim dizajnerskim odlukama.

## Rubrika

| Kriterij         | Izvrsno                                                                                   | Zadovoljavajuće                                                                  | Potrebno Poboljšanje                                                            |
|------------------|-------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Vizualni Mockup  | Jasno, detaljno izrađen mockup s označenim sekcijama i promišljenim izgledom              | Osnovni mockup s nekim označenim sekcijama                                       | Minimalan ili nejasan mockup; nedostaju oznake sekcija                          |
| HTML Elementi    | Koristi 10+ semantičkih HTML elemenata; pokazuje razumijevanje strukture i najboljih praksi | Koristi 5–9 HTML elemenata; djelomično semantička struktura                      | Koristi manje od 5 elemenata; nedostaje semantička struktura                    |
| Kvaliteta Koda   | Dobro organiziran, čitljiv kod s komentarima; slijedi HTML standarde                      | Uglavnom organiziran kod; malo komentara                                         | Neorganiziran kod; nedostaju komentari                                          |
| Refleksija       | Promišljena refleksija o dizajnerskim odlukama i izazovima                               | Osnovna refleksija                                                               | Nema refleksije ili nedostatak relevantnosti                                    |

## Savjeti

- Koristite semantičke HTML oznake za bolju pristupačnost i SEO.
- Organizirajte svoj kod s uvučenim redovima i komentarima.
- Pogledajte [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) za smjernice.
- Razmislite o tome kako bi se vaš izgled mogao proširiti ili stilizirati u budućim zadacima.

---

**Odricanje od odgovornosti**:  
Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizašle iz korištenja ovog prijevoda.