# HTML Övningsuppgift: Skapa en bloggmockup ## Lärandemål Använd dina HTML-kunskaper genom att designa och koda en komplett struktur för en bloggsida. Denna praktiska uppgift kommer att stärka dina kunskaper om semantisk HTML, bästa praxis för tillgänglighet och färdigheter i professionell kodorganisering som du kommer att använda under hela din resa inom webbutveckling. **Genom att slutföra denna uppgift kommer du att:** - Öva på att planera webbplatslayouter innan kodning - Använda semantiska HTML-element på rätt sätt - Skapa tillgänglig och välstrukturerad markup - Utveckla professionella kodvanor med kommentarer och organisering ## Projektkrav ### Del 1: Designplanering (Visuell Mockup) **Skapa en visuell mockup av din bloggsida som inkluderar:** - Header med webbplatsens titel och navigering - Huvudinnehållsområde med minst 2-3 förhandsvisningar av blogginlägg - Sidopanel med ytterligare information (om-sektion, senaste inlägg, kategorier) - Footer med kontaktinformation eller länkar **Alternativ för att skapa mockup:** - **Handritad skiss**: Använd papper och penna, fotografera eller skanna din design - **Digitala verktyg**: Figma, Adobe XD, Canva, PowerPoint eller någon annan ritapplikation - **Wireframe-verktyg**: Balsamiq, MockFlow eller liknande wireframe-programvara **Märk mockupens sektioner** med de HTML-element du planerar att använda (t.ex. "Header - `

`", "Blogginlägg - `

`"). ### Del 2: Planering av HTML-element **Skapa en lista som kopplar varje sektion i din mockup till specifika HTML-element:** ``` Example: - Site Header →

- Main Navigation →