<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:56:55+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "sv"
}
-->
# HTML Övningsuppgift: Skapa en Bloggmockup

## Syfte

Designa och handkoda HTML-strukturen för en personlig bloggs startsida. Denna övning hjälper dig att öva på semantisk HTML, layoutplanering och kodorganisering.

## Instruktioner

1. **Designa Din Bloggmockup**
   - Skissa en visuell mockup av din bloggs startsida. Inkludera viktiga sektioner som header, navigering, huvudinnehåll, sidopanel och footer.
   - Du kan använda papper och skanna din skiss, eller använda digitala verktyg (t.ex. Figma, Adobe XD, Canva eller till och med PowerPoint).

2. **Identifiera HTML-element**
   - Lista de HTML-element du planerar att använda för varje sektion (t.ex. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` osv.).

3. **Skriv HTML-koden**
   - Handkoda HTML för din mockup. Fokusera på semantisk struktur och bästa praxis.
   - Inkludera minst 10 olika HTML-element.
   - Lägg till kommentarer för att förklara dina val och din struktur.

4. **Lämna in Ditt Arbete**
   - Ladda upp din skiss/mockup och din HTML-fil.
   - Valfritt: Skriv en kort reflektion (2–3 meningar) om dina designval.

## Bedömningskriterier

| Kriterier        | Exemplariskt                                                                               | Tillräckligt                                                                     | Behöver Förbättras                                                              |
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Visuell Mockup   | Tydlig, detaljerad mockup med märkta sektioner och genomtänkt layout                       | Grundläggande mockup med några märkta sektioner                                  | Minimal eller otydlig mockup; saknar sektionens etiketter                       |
| HTML-element     | Använder 10+ semantiska HTML-element; visar förståelse för struktur och bästa praxis       | Använder 5–9 HTML-element; viss semantisk struktur                               | Använder färre än 5 element; saknar semantisk struktur                          |
| Kodkvalitet      | Välorganiserad, läsbar kod med kommentarer; följer HTML-standarder                         | Mest organiserad kod; få kommentarer                                             | Oorganiserad kod; saknar kommentarer                                            |
| Reflektion       | Insiktsfull reflektion om designval och utmaningar                                         | Grundläggande reflektion                                                         | Ingen reflektion eller saknar relevans                                          |

## Tips

- Använd semantiska HTML-taggar för bättre tillgänglighet och SEO.
- Organisera din kod med indrag och kommentarer.
- Referera till [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) för vägledning.
- Fundera på hur din layout kan utökas eller stylas i framtida uppgifter.

---

**Ansvarsfriskrivning**:  
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.