Il progetto
Connettiamoci
Prima di iniziare, nessuno di loro aveva mai pubblicato una pagina web. Alla fine del percorso il sito di Oltre il Blu era online, scritto da loro: una pagina per ciascuno.
- Corso di sviluppo web
- Termoli
- Con Oltre il Blu
- 5
- Ragazzi hanno scritto il sito
- 2 ore
- Ogni lezione, sempre con la stessa struttura
- 8
- Fasi, dall’avvio alla pubblicazione
- 1
- Sito online, raggiungibile da chiunque
Che cos’era
Costruire il sito era il corso
Connettiamoci è il percorso in cui il sito di Oltre il Blu è stato progettato e sviluppato internamente. Invece di far esercitare i ragazzi su un progetto d’esempio, il progetto d’esempio è stato tolto di mezzo: si lavorava sul sito vero, quello che sarebbe rimasto online.
Un sito per l’associazione
Completo, curato, e soprattutto aggiornabile da chi ci lavora dentro senza dover chiamare nessuno.
Competenze vere per i ragazzi
Spendibili, imparate su un progetto destinato ad andare davvero online — non su un esercizio finto che dopo l’ultima lezione si butta.
Quello che hanno costruito è la base del sito che state guardando adesso.
Le persone
Chi ha costruito cosa
Ognuno è stato responsabile di una parte precisa. Non pezzi decorativi: parti vere, che oggi sono online e funzionano.
Emanuele
Navbar e footer
I componenti condivisi: quelli che compaiono su ogni pagina del sito, e che quindi, sbagliati, si vedono dappertutto.
Mi piace tantissimo Shrek!
Diego
Contatti e Come aiutarci
Le due pagine da cui passa chi ha deciso di fare qualcosa: scrivere, oppure dare una mano.
Mi piace Linux! 🐧
Giada
Hero e sezioni della homepage
La prima cosa che si vede arrivando sul sito, e le fasce che la seguono.
Elio
Chi siamo
Compresa la sezione «La Sede» con lo slider fotografico: la parte con più movimento di tutto il sito.
Ilaria
Hero e sezioni della homepage
Entrata a percorso avviato, accanto a Giada: ha dovuto leggere e capire codice scritto da altri prima di poterci mettere mano.
I tutor
A seguirli, lezione dopo lezione, Simone e Marco, di Nuvola Agency.
I file sono stati assegnati per ridurre al minimo le sovrapposizioni: ognuno con la propria pagina, e sulla homepage una divisione per sezioni fra Giada e Ilaria. È una scelta tecnica precisa, pensata per rendere semplice il lavoro in parallelo e lasciare pochissimi conflitti da risolvere. Inserirsi in un progetto già avviato — leggere e capire codice scritto da altri prima di poterci mettere mano — è poi la situazione che nella realtà capita più spesso a chi sviluppa.
Il metodo
Ogni lezione uguale, il percorso no
Due ore, quattro blocchi di lavoro e una pausa, sempre nello stesso ordine. La routine fissa è stata una scelta consapevole: sapere già cosa aspettarsi riduce il carico cognitivo, e lascia tutta l’attenzione disponibile per la cosa nuova.
Il percorso invece è cresciuto oltre il piano iniziale. Alcune sessioni hanno seguito una guida strutturata, altre sono state di puro sviluppo, sul codice vero del sito e senza materiale preparato. Si sono aggiunte lezioni straordinarie dove serviva approfondire, e sessioni di recupero per chi era stato assente: il percorso si è adattato al gruppo, non il contrario.
Mai partire dal foglio bianco
Ogni lezione forniva file già impostati, con gli spazi da completare segnati in chiaro. L’attenzione andava sul concetto nuovo, non sul ricopiare l’impalcatura.
Una guida per ciascuno
Dalla terza lezione ogni ragazzo ha avuto la propria guida interattiva, autosufficiente: barra di avanzamento, esercizi da completare, suggerimenti e soluzioni a scomparsa, elenco degli obiettivi.
Difficoltà calibrata sulla persona
Stesso progetto, stesso traguardo, percorsi diversi. Più codice già scritto dove serviva, più autonomia dove era possibile.
Analogie prima della teoria
Git spiegato come i salvataggi di un disegno. Live Server come un documento condiviso che si aggiorna da solo. Prettier come il correttore automatico del telefono.
Ogni lezione finisce con qualcosa di visibile
Alla fine di ogni incontro c’era un pezzo di sito in più da guardare nel browser. Non un compito per casa: una cosa fatta.
Guide quando servono, codice quando basta
Con il crescere dell’autonomia diverse sessioni sono diventate di sviluppo diretto: si apriva il progetto e si lavorava, senza materiale intermedio.
Le scelte
Tradurre, non inventare
Dal design al codice
Prima della prima riga di codice esisteva già un design completo su Figma: colori, spaziature, caratteri, ogni sezione di ogni pagina.
Il compito dei ragazzi non è stato inventare, ma tradurre: guardare il design e riprodurlo il più fedelmente possibile. È esattamente il lavoro di chi sviluppa front-end, ed è anche il modo più efficace per imparare — c’è un obiettivo oggettivo, e si capisce subito se ci si è arrivati.
Git: cinque persone, un progetto
La gestione del codice condiviso è stata la decisione più delicata. I rami separati sarebbero stati la strada «professionale», ma avrebbero aggiunto complessità senza insegnare niente di più.
La scelta: un ramo solo, commit separati, file separati. Ognuno lavora sul proprio file, fa il proprio commit, lo manda. Nessun conflitto da risolvere, e il concetto di controllo di versione resta chiaro e concreto.
addcommitpush
È diventato il rituale di chiusura di ogni lezione.
Gli strumenti
Quelli veri, non le versioni per finta
Tutto ciò che hanno usato è quello che si usa nel mestiere. Nessuna versione semplificata, nessun ambiente costruito apposta per la lezione.
- HTMLLa struttura di ogni pagina
- Tailwind CSSLo stile, con i colori dell’associazione
- JavaScriptMenu, slider, banner dei cookie
- FigmaIl design da replicare
- Git e GitHubIl versionamento e il lavoro in parallelo
- VS Code e Live ServerL’ambiente di lavoro quotidiano
- GitHub PagesLa pubblicazione online
Il percorso
Fase per fase
Avvio
Setup di VS Code, Git, primo file HTML
Gli strumenti sono pronti
Fondamenta
Basi di Tailwind, navbar e footer condivisi
Il sito ha una sua identità
Costruzione
Ognuno costruisce le proprie sezioni
Homepage completa
Rifinitura
Confronto con Figma, correzioni, banner dei cookie
Il sito somiglia al design
Interattività
JavaScript: menu, slider, interazioni
Il sito «fa cose»
Completamento
Contatti, Come aiutarci, Chi siamo
Tutte le pagine esistono
Ottimizzazione
Responsive, meta tag, favicon, immagini
Il sito funziona su ogni schermo
Pubblicazione
Deploy su GitHub Pages
Il sito è online
Fra una fase e l’altra si sono inserite sessioni di sviluppo libero: nessuna guida, solo il codice vero del sito da portare avanti insieme. Sono state, alla fine, quelle in cui i ragazzi hanno lavorato più da sviluppatori veri.
Da lì in poi
La base è rimasta, il sito è cresciuto
Il sito pubblicato nell’ultima lezione era il traguardo del corso, non quello del sito. Da lì Nuvola Agency — la stessa che teneva le lezioni — ha continuato a lavorarci: il blog e gli eventi, la ricerca interna, il pannello di lettura per chi ha bisogno di testi più grandi o meno movimento, e soprattutto un pannello di redazione con cui l’associazione può pubblicare da sola, senza chiamare nessuno.
Quello che i ragazzi hanno costruito non è stato buttato e rifatto: l’impianto delle pagine, i colori, il modo in cui le sezioni si susseguono sono partiti da lì e sono ancora qui sotto. È il motivo per cui questa pagina esiste — un sito su cui hanno lavorato in cinque non è una cosa da mettere in una riga di crediti in fondo.
Cosa resta
Competenze acquisite
- Scrivere HTML e comporre interfacce con Tailwind CSS
- Leggere un design e tradurlo in codice
- Usare Git e GitHub per lavorare in gruppo sullo stesso progetto
- Muoversi con il terminale e con un editor professionale
- Pubblicare online e tenere aggiornato un sito
I crediti
Chi ha fatto cosa
- Progetto e formazione
- Nuvola Agency
- Tutor
- Simone e Marco
- Studenti sviluppatori
- Emanuele, Diego, Giada, Elio, Ilaria
- Design e sviluppo del sito
- Nuvola Agency
- Per
- Associazione Oltre il Blu, Termoli