# Compito Pratico HTML: Creare un Mockup di Blog ## Obiettivi di Apprendimento Applica le tue conoscenze di HTML progettando e codificando la struttura completa di una homepage di un blog. Questo compito pratico rafforzerà i concetti di HTML semantico, le migliori pratiche di accessibilità e le competenze di organizzazione del codice professionale che utilizzerai durante il tuo percorso di sviluppo web. **Completando questo compito, sarai in grado di:** - Pianificare il layout di un sito web prima di codificarlo - Utilizzare correttamente gli elementi HTML semantici - Creare markup accessibili e ben strutturati - Sviluppare abitudini di codifica professionali con commenti e organizzazione ## Requisiti del Progetto ### Parte 1: Pianificazione del Design (Mockup Visivo) **Crea un mockup visivo della homepage del tuo blog che includa:** - Intestazione con il titolo del sito e la navigazione - Area contenuti principali con almeno 2-3 anteprime di post del blog - Barra laterale con informazioni aggiuntive (sezione "Chi siamo", post recenti, categorie) - Footer con informazioni di contatto o link **Opzioni per la Creazione del Mockup:** - **Schizzo a mano**: Usa carta e matita, poi fotografa o scansiona il tuo design - **Strumenti digitali**: Figma, Adobe XD, Canva, PowerPoint o qualsiasi applicazione di disegno - **Strumenti di wireframe**: Balsamiq, MockFlow o software simili **Etichetta le sezioni del tuo mockup** con gli elementi HTML che intendi utilizzare (es. "Intestazione - `

`", "Post del Blog - `

`"). ### Parte 2: Pianificazione degli Elementi HTML **Crea un elenco che mappa ogni sezione del tuo mockup agli specifici elementi HTML:** ``` Example: - Site Header →

- Main Navigation →