Progetto finale: mini sito personale

Obiettivo della lezione

Realizzare un piccolo sito personale usando struttura HTML5, sezioni, link, immagini, form e organizzazione dei file.

Spiegazione

Il progetto finale mette insieme tutto il percorso. L’obiettivo non è creare un sito complesso, ma una struttura corretta: homepage, pagina chi sono, pagina servizi o portfolio, pagina contatti e menu di navigazione.

Il progetto può poi essere migliorato con CSS3-LAB per la parte grafica.

Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.

Codice di esempio

Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.

sito-personale/
  default.asp
  chi-sono.asp
  portfolio.asp
  contatti.asp
  assets/css/style.css
  assets/img/foto-profilo.jpg

Errori comuni

Iniziare dalla grafica prima di avere contenuti e struttura.
Creare pagine scollegate tra loro.
Non controllare il sito su smartphone.

Esercizio pratico

Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.

Apri il tuo editor.
Crea o aggiorna un file .html o .asp.
Inserisci il codice della lezione.
Modifica testi e attributi.
Apri la pagina nel browser e controlla il risultato.

Lezioni collegate

Continua il laboratorio

Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.

Precedente Successiva