Progetti HTML e CSS per fare pratica con il Frontend

Quasi tutti i principianti del frontend, prima o poi, si scontrano con questo muro.

I tutorial iniziano a confondersi nella mente. Sai cos'è un div. Riesci a dare un'occhiata al foglio di stile di qualcun altro e a capire cosa succede. Tre video su Flexbox? Visti. Ma quando apri un file index.html vuoto e il cursore lampeggia, il cervello si spegne completamente.

Un altro tutorial non è la soluzione. La soluzione è un progetto.

Qualcosa di abbastanza piccolo da essere completato in un fine settimana, con un risultato visibile da mostrare a un amico. L'HTML e il CSS si fissano in testa solo quando li scrivi, li rompi e poi torni indietro a riparare quello che hai combinato.

I percorsi di HTML e CSS sono tra i più attivi sulla piattaforma Coddy. E chi va avanti abbastanza a lungo da acquisire sicurezza con il codice frontend fa una cosa ben precisa: completa piccoli progetti con regolarità. Non aspetta di "saperne abbastanza". Crea, sbatte la testa contro i problemi, fa ricerche e va avanti.

Questa guida ti propone 18 progetti HTML e CSS ordinati per livello di difficoltà, da un sito a pagina singola fino a un carosello realizzato esclusivamente in CSS. Non devi per forza crearli tutti. Scegline uno per questo fine settimana e portalo a termine.

Perché i progetti battono i tutorial

Leggere il codice dà una sensazione di produttività. Il problema è che non lo è.

Un mese di video su YouTube può comunque lasciarti incapace di mettere insieme una landing page di base, perché guardare e scrivere attivano muscoli diversi. Il CSS, in particolare, va scritto a mano per essere assimilato, poiché gran parte del lavoro consiste in piccoli e meticolosi aggiustamenti che si imparano solo provando e sbagliando.

Inoltre, i progetti ti costringono a fare ricerche! Il lavoro di un frontend developer è per il 30% scrivere codice e per il 70% cercare su MDN, leggere la documentazione e capire perché un elemento è spostato di due pixel. I tutorial nascondono tutto questo.

L'altro vantaggio dei progetti è che ti danno qualcosa di concreto da mostrare. È difficile sentirsi realizzati dicendo "Sto imparando l'HTML e il CSS". Ma "Ho creato la pagina di questo ristorante, ecco il link" è qualcosa che puoi inviare a un amico. Quella sensazione del "l'ho fatto io" è ciò che spinge ad andare avanti nelle settimane più difficili.

Come configurare l'ambiente (salta se lo hai già fatto)

Non serve nessuna configurazione complessa per HTML e CSS. Bastano solo queste tre cose:

1. Un editor di testo. VS Code è la scelta standard per la maggior parte delle persone. È gratuito e, dopo aver completato i primi progetti, ci sono diverse estensioni CSS che vale la pena installare.
2. Un browser. Quello che usi abitualmente va benissimo. Gli strumenti per sviluppatori (tasto destro, Ispeziona o Inspect) sono fondamentali per fare il debug dei problemi di layout. Prendi questa abitudine fin da subito.
3. Una cartella per ogni progetto. Solo index.html e style.css per iniziare! Non preoccuparti di build tool, framework o "best practice" per il tuo primissimo progetto.

Se preferisci saltare la fase di configurazione, la lezione di HTML e la lezione di CSS di Coddy si eseguono direttamente nel browser senza installare nulla. È l'ideale quando vuoi fare pratica su un concetto specifico senza dover creare un intero progetto. Altrimenti, una cartella e un editor di testo sono più che sufficienti.

Progetti HTML e CSS per principianti

Questi cinque progetti utilizzano le basi: intestazioni, paragrafi, immagini, elenchi, link e un pizzico di colore e spaziatura. Dopo una manciata di lezioni di HTML e CSS, ognuno di essi è realizzabile in poche ore.

1. Pagina tributo

Scegli qualcuno che ammiri (un musicista, uno scrittore, un atleta, uno scienziato) e crea una pagina tributo a pagina singola. Un'intestazione principale, un'immagine in evidenza (hero image), una breve biografia, una cronologia della sua vita e un elenco di link per approfondire. L'intero progetto utilizza intestazioni, paragrafi, immagini, elenchi e CSS di base per la tipografia e la spaziatura. È il classico primo progetto HTML per un motivo ben preciso: non c'è nulla di difficile.

2. Pagina personale "Chi sono"

Un sito personale di una sola pagina per presentarti. Una foto, una breve biografia, un elenco dei tuoi interessi e una sezione con i tuoi contatti. Punti bonus se lo pubblichi online. GitHub Pages è gratuito e richiede solo pochi minuti. In questo modo avrai un vero link da condividere.

3. Scheda ricetta

Una ricetta con un'immagine del piatto, un elenco di ingredienti, passaggi numerati e il tempo di preparazione mostrato in un piccolo box informativo. Ti insegnerà la differenza tra elenchi ordinati e non ordinati, il ridimensionamento delle immagini e come organizzare una pagina ricca di contenuti per non farla sembrare disordinata.

4. Pagina con modulo di contatto

Una pagina con un modulo (form): nome, email, messaggio e pulsante di invio. Il modulo non deve ancora inviare dati da nessuna parte (quella è la parte di JavaScript). L'obiettivo è familiarizzare con gli elementi dei moduli HTML (input, textarea, label, button) e applicare lo stile per evitare l'aspetto predefinito e anonimo del browser. I moduli sono presenti in quasi tutti i progetti frontend, quindi prenderci la mano fin da subito ti tornerà molto utile.

5. Menu semplice per ristorante

Un menu a pagina singola per un ristorante fittizio. Suddividilo in categorie (antipasti, primi/secondi, dessert), con ogni piatto accompagnato da nome e breve descrizione. Aggiungi un banner in evidenza in alto e un piccolo piè di pagina (footer) con gli orari di apertura. Ti aiuterà a fare pratica con il raggruppamento dei contenuti in sezioni, la ripetizione dei layout e la scelta di una combinazione di colori coerente.

Progetti intermedi (Flexbox, Grid, Layout)

Qui inizierai a strutturare i layout in modo corretto, a gestire più sezioni e a ottenere un risultato simile alle pagine web reali. La maggior parte di questi progetti si basa su Flexbox o CSS Grid, che sono esattamente le competenze che devi allenare.

6. Landing page per un prodotto fittizio

Scegli un prodotto (un'app, uno strumento SaaS, un'azienda di candele, qualsiasi cosa) e crea il tipo di landing page che vedresti sulla sua homepage. Una sezione principale (hero) con un titolo accattivante e un pulsante di chiamata all'azione (call-to-action). Sotto, una sezione con tre caratteristiche chiave. Testimonianze. Piè di pagina con i link. L'intero progetto è un ottimo allenamento per Flexbox e Grid, oltre a essere una lezione pratica su spaziature e gerarchia visiva.

7. Sito portfolio

Una pagina multi-sezione per mostrare i tuoi lavori, anche se al momento i tuoi "lavori" consistono solo in due pagine tributo e una scheda ricetta. Un'intestazione (header) con navigazione, una sezione hero, una griglia di progetti, una sezione "chi sono" e una sezione contatti. Usa Grid per il layout dei progetti e Flexbox per la barra di navigazione e la sezione hero.

È un progetto utile anche se pensi di non aver ancora bisogno di un portfolio. Nel momento in cui inizierai a candidarti per un lavoro o a fare freelance, ne avrai già uno pronto.

8. Tabella dei prezzi

Tre piani tariffari affiancati, ognuno all'interno di una scheda con nome, elenco delle funzionalità e un pulsante di invito all'azione (CTA). Aggiungi un badge "Più popolare" per mettere in evidenza la scheda centrale. Le tabelle dei prezzi sembrano semplici ma nascondono diverse insidie: schede della stessa altezza, elenchi puntati allineati, stati hover sui pulsanti. Un ottimo esercizio per fare pratica con Flexbox.

9. Homepage di un blog

L'indice di un blog: intestazione con navigazione e barra di ricerca, un articolo in evidenza in alto, una griglia di post recenti in basso, una barra laterale (sidebar) con categorie e commenti recenti, e infine il piè di pagina. Questo progetto ti insegnerà a gestire un layout di contenuti con più aree distinte, avvicinandoti a come si presenta il frontend in un ambiente di produzione reale.

10. Pagina di login e registrazione

Due pagine collegate, una per l'accesso (login) e una per la registrazione (signup), con un modulo centrato, un'intestazione personalizzata con il brand e i link per passare da una pagina all'altra. La sfida sta nel creare qualcosa dall'aspetto professionale senza esagerare. Le migliori pagine di login sono ben allineate e curate nei dettagli più di quanto l'utente si aspetti. Un esercizio di stile spesso sottovalutato.

11. Mockup di una dashboard

Il layout statico di una dashboard: barra di navigazione laterale a sinistra, barra superiore con le informazioni dell'utente, area principale con alcune schede statistiche, un segnaposto per un grafico e un elenco delle attività recenti. Nessuna interattività per ora: si tratta di un progetto puramente di layout. Grid farà la maggior parte del lavoro pesante. Alla fine capirai perché esiste CSS Grid e perché chi non lo ha mai usato continua a lamentarsi della gestione dei layout.

Progetti con animazioni ed effetti CSS

Ora arriva la parte divertente. Progetti più piccoli come portata, ma più complessi sul fronte CSS. Sono ideali per imparare a usare transizioni, keyframe, trasformazioni e pseudo-classi come :hover e :focus.

12. Spinner di caricamento

Uno spinner di caricamento realizzato esclusivamente in CSS. Prova diverse varianti: un anello rotante, tre punti che rimbalzano, un cerchio pulsante o una barra di avanzamento che si riempie continuamente. Ognuno richiede circa 15 righe di CSS e ti insegnerà a usare @keyframes, animation e transform.

13. Galleria di immagini con effetti hover

Una griglia di foto in cui, passando il mouse sopra ognuna di esse, compare una didascalia con una transizione fluida. Prova diversi effetti: un overlay a scorrimento, uno zoom sull'immagine o un filtro colore che sfuma. Questo è il progetto in cui la proprietà transition diventa finalmente chiara per la maggior parte delle persone. Imparerai anche a sovrapporre gli elementi usando position: absolute.

14. Barra di navigazione animata

Una barra di navigazione con un logo a sinistra e le voci di menu a destra, in cui le voci si sottolineano al passaggio del mouse con un'animazione a scorrimento, e la pagina attiva rimane sottolineata. Su dispositivi mobili, il menu si contrae in un'icona a "hamburger" che apre un menu a discesa. Un pattern che userai all'infinito: stati animati su elementi interattivi e comportamento responsive su schermi di varie dimensioni.

15. Effetto rotazione della scheda (Card Flip)

Una scheda che si gira su se stessa al passaggio del mouse per rivelare qualcosa sul retro (una citazione, una definizione, un dettaglio in più). Utilizza transform: rotateY and backface-visibility, due proprietà CSS che non si usano spesso, ma che sembrano magiche la prima volta che funzionano. Un progetto rapido, ma di grande soddisfazione.

16. Slider di immagini solo CSS

Un carosello di immagini a scorrimento orizzontale con controlli precedente/successivo, realizzato interamente in CSS. Niente JavaScript. Il trucco consiste nell'usare pulsanti radio nascosti fuori dallo schermo e il selettore :checked per cambiare l'immagine visibile. Un pattern ingegnoso, che mostra quanto si possa fare con il solo CSS prima di ricorrere a JS. Vale la pena provarlo almeno una volta, anche se normalmente lo realizzeresti con JavaScript.

Progetti HTML e CSS avanzati

Questi ultimi progetti sono pensati per quando le basi sono ormai consolidate e cerchi una vera sfida. Sono comunque realizzati in puro HTML e CSS (senza bisogno di JavaScript), ma metteranno alla prova le tue abilità di layout, precisione e pazienza.

17. Clonare una homepage famosa

Scegli un sito reale (la homepage di Netflix, la landing page di Spotify, la pagina di un prodotto Apple) e ricostruisci la parte visibile in HTML e CSS nel modo più fedele possibile. Non c'è bisogno di renderlo funzionante, concentrati solo su layout, tipografia, spaziature e colori.

Passerai ore a chiederti come abbiano ottenuto quel padding esatto, poi capirai perché le griglie vengono misurate in quel modo e inizierai a notare le scelte di layout su ogni sito che visiterai. Gli sviluppatori frontend continuano a consigliare questo tipo di esercizio anche a distanza di anni.

18. CSS Art

Disegna qualcosa usando solo elementi div e CSS. Molti sviluppatori hanno creato illustrazioni incredibilmente dettagliate in questo modo: personaggi dei cartoni animati, paesaggi, animali e persino ritratti. Inizia con qualcosa di semplice: una tazza di caffè, una faccina sorridente o un robot elementare.

Sembra un'idea bizzarra finché non ci provi. Poi si trasforma in una lezione pratica su position, border-radius, box-shadow, gradienti e transform. Alla fine, capirai il CSS a un livello che la maggior parte dei principianti non raggiunge mai, solo per aver provato a disegnare un cerchio dentro un rettangolo.

Come si inserisce Coddy in tutto questo

La lezione di HTML e la lezione di CSS di Coddy sono progettate proprio per colmare il divario tra "Voglio imparare questo" e "Sono in grado di creare un progetto". Ogni lezione dura circa cinque minuti, scrivi codice reale direttamente nel browser e Bugsy (l'assistente AI integrato) è pronto ad aiutarti quando ti blocchi su problemi come capire perché margin: auto non centra verticalmente il tuo elemento.

L'intera struttura è basata sulla pratica quotidiana. Cinque minuti qui, cinque minuti là: lo stesso meccanismo che spinge le persone ad aprire le app di lingue ogni mattina, applicato alla programmazione. Se hai mai abbandonato un corso online autonomo intorno al 30% del percorso, questo formato in pillole è probabilmente ciò che ti mancava.

Sia HTML che CSS sono inclusi nel piano gratuito, per ogni singola lezione e senza alcuna configurazione. Questo spesso sorprende le persone: non ti scontrerai con un paywall a metà dello studio di Flexbox!

Alcune buone abitudini che aiutano

Prima di scegliere un progetto, ecco tre piccoli accorgimenti che fanno una differenza sorprendente:

Usa gli strumenti per sviluppatori del browser. Fai clic con il tasto destro su qualsiasi elemento, seleziona Ispeziona (Inspect) e guarda il pannello degli stili. Puoi modificare il CSS in tempo reale nel browser per vedere cosa succede. È il miglior strumento di debug che userai mai, ed è già integrato gratuitamente in ogni browser.

Sviluppa in ottica mobile-first. Scrivi il CSS partendo dagli schermi piccoli, poi aggiungi le media query per adattarlo a quelli più grandi. Fare il contrario è molto più difficile. Questo è l'approccio utilizzato nella maggior parte del codice frontend moderno, quindi abituarsi fin da subito ti eviterà di dover riscrivere il codice in seguito.

Pubblica prima la versione "brutta". Fai in modo che la pagina funzioni con contenuti segnaposto e uno stile di massima. Penserai a rifinirla in un secondo momento. L'errore in cui cadono molti principianti è passare tre ore a perfezionare un singolo pulsante, per poi accorgersi che il layout generale della pagina non funziona e che bisogna rifare tutto da capo.

Cosa creare dopo

Se finisci un progetto e quello successivo ti sembra una scelta naturale, è un ottimo segno. Significa che sei pronto!

Scegli il prossimo progetto da questo elenco e comincia. Non aspettare di sentirti "abbastanza pronto", perché quella sensazione non arriverà mai. Semplicemente, un giorno ti accorgerai di aver creato sei cose e che la settima ti sembrerà assolutamente alla tua portata.

Se non sai cosa scegliere, opta per quello che ti incute un po' di timore. I veri salti di qualità avvengono quando esci dalla tua zona di comfort, non quando ci rimani dentro.

E se ti scontri con problemi legati alle basi (selettori che non funzionano, layout che saltano, Flexbox che non risponde), metti da parte il progetto per una sessione e segui alcune lezioni mirate per colmare le lacune.

I percorsi di HTML e CSS di Coddy sono pensati proprio per questo: una pratica breve e mirata sul concetto che ti blocca, per poi tornare subito al tuo progetto.