msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5fb78cc2d1'
${ noResults }
Web-Dev-For-Beginners/translations/hr/3-terrarium/1-intro-to-html/assignment.md

4.0 KiB
Raw Blame History Escape

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 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. 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.