# HTML-harjoitustehtävä: Blogimallin rakentaminen
## Oppimistavoitteet
Käytä HTML-osaamistasi suunnittelemalla ja koodaamalla blogin etusivun rakenne. Tämä käytännön tehtävä vahvistaa semanttisen HTML:n käsitteitä, saavutettavuuden parhaita käytäntöjä ja ammattimaisia koodauskäytäntöjä, joita tarvitset verkkokehityksen urallasi.
**Tehtävän suorittamalla:**
- Harjoittelet verkkosivuston ulkoasun suunnittelua ennen koodaamista
- Käytät semanttisia HTML-elementtejä tarkoituksenmukaisesti
- Luot saavutettavaa ja hyvin jäsenneltyä merkkausta
- Kehität ammattimaisia koodauskäytäntöjä kommenttien ja organisoinnin avulla
## Projektivaatimukset
### Osa 1: Suunnittelun suunnittelu (visuaalinen mallinnus)
**Luo visuaalinen mallinnus blogisi etusivusta, joka sisältää:**
- Otsikko, jossa sivuston nimi ja navigaatio
- Pääsisältöalue, jossa vähintään 2-3 blogipostauksen esikatselua
- Sivupalkki, jossa lisätietoja (esittelyosio, viimeisimmät postaukset, kategoriat)
- Alatunniste, jossa yhteystiedot tai linkit
**Mallinnusvaihtoehdot:**
- **Käsin piirretty luonnos**: Käytä paperia ja kynää, ja valokuvaa tai skannaa suunnitelmasi
- **Digitaaliset työkalut**: Figma, Adobe XD, Canva, PowerPoint tai mikä tahansa piirto-ohjelma
- **Wireframe-työkalut**: Balsamiq, MockFlow tai vastaavat wireframe-ohjelmistot
**Merkitse mallinnuksen osiot** HTML-elementeillä, joita aiot käyttää (esim. "Otsikko - ``", "Blogipostaukset - ``").
### Osa 2: HTML-elementtien suunnittelu
**Laadi lista, joka yhdistää mallinnuksen jokaisen osion tiettyihin HTML-elementteihin:**
```
Example:
- Site Header →
- Main Navigation →