La creazione di questo sito non è nata come un progetto obbligatorio o come parte di un compito assegnato. È stata, piuttosto, un' iniziativa personale, spinta dalla curiosità e dalla voglia di imparare qualcosa di nuovo e stimolante.

Da sempre sono affascinata dal mondo della tecnologia e, in particolare, dal modo in cui i siti web vengono progettati e realizzati. Mi sono sempre chiesta: come funziona davvero un sito? Come fanno le immagini, i testi e i pulsanti a combinarsi per creare esperienze così intuitive e coinvolgenti?

Per rispondere a queste domande, ho deciso di approfondire il mondo dei linguaggi di programmazione per il web. Non avevo esperienze pregresse in questo campo, quindi ho iniziato da zero, studiando i tre pilastri della creazione di un sito web: HTML, CSS e JavaScript. Questo progetto non è stato solo un esercizio tecnico, ma anche un modo per mettermi alla prova e capire come affrontare problemi complessi con soluzioni creative.

In questo documento, voglio condividere il percorso che mi ha portato a realizzare il sito, spiegando in modo semplice come i vari linguaggi si integrano per costruire un progetto completo.

HTML (HyperText Markup Language) è il linguaggio che costruisce la base di ogni sito web. È un po' come i mattoni di una casa: definisce cosa ci sarà nella pagina e dove ogni elemento andrà posizionato.

In questa fase, ho organizzato i contenuti principali del sito, come i titoli, i paragrafi di testo, le immagini e i collegamenti. Per esempio, nella mia pagina ho utilizzato una struttura che include sezioni come il menu, l’introduzione, il corso e una parte dedicata ai contatti. Ogni elemento è stato definito con precisione, in modo che tutto fosse chiaro e ben organizzato (si spera).

Ecco un esempio del codice HTML che ho usato per creare una sezione della pagina:

• class: la classe, specifica una o più nomi di classe per un elemento.
• section: la sezione, crea una divisione logica della pagina.
• h6: definisce i titoli delle sezioni, la cui grandezza dipende dal numero (in ordine decrescente: da h1 a h6)
• a: serve ad inserire un link e una descrizione del testo fisico dell'hyperlink.
• p: non visibile, è il tag usato per scrivere paragrafi di testo

Grazie a HTML, ho costruito una base solida su cui lavorare per migliorare l’aspetto estetico con CSS e aggiungere interattività con JavaScript.

CSS (Cascading Style Sheets) è stato il passo successivo.

Dopo aver definito la struttura del sito con HTML, ho utilizzato CSS per dare stile e personalità al progetto. È come decorare una casa: puoi scegliere i colori delle pareti, la disposizione dei mobili e i dettagli che rendono ogni stanza unica.

CSS mi ha permesso di:

• Scegliere colori coerenti per trasmettere un’immagine moderna e professionale.
• Personalizzare i caratteri (font) per garantire che il testo fosse leggibile e piacevole da vedere.
• Rendere il sito "responsive", cioè adatto a schermi di diverse dimensioni.

Ad esempio, per migliorare l’estetica delle pagine e il font, ho utilizzato il seguente codice CSS:

Grazie a CSS, il sito non è solo funzionale, ma anche esteticamente accattivante e gradevole da navigare.

Per rendere il sito più dinamico e interattivo, ho utilizzato JavaScript, un linguaggio che permette di aggiungere movimento e funzionalità avanzate.

Un esempio concreto è il pulsante "Torna Su", che appare quando si scorre verso il basso e consente di tornare rapidamente all’inizio della pagina. Questo pulsante è stato progettato per migliorare l’esperienza dell’utente, rendendo la navigazione più fluida.

Ecco il codice JavaScript che ho utilizzato per implementarlo:

Grazie a JavaScript, il sito non è solo statico, ma reagisce alle azioni dell’utente, offrendo un’esperienza moderna e coinvolgente.

Un aspetto fondamentale nella creazione di un sito è l’attenzione all’accessibilità e all’ottimizzazione. Ho lavorato per garantire che il sito fosse facile da usare per tutti, indipendentemente dal dispositivo o dalle capacità degli utenti.

• Accessibilità: Ho aggiunto descrizioni testuali (alt) alle immagini e utilizzato un contrasto cromatico adeguato per rendere i contenuti leggibili anche per chi ha difficoltà visive.
• Ottimizzazione: Ho compresso le immagini e ridotto il peso dei file CSS e JavaScript per migliorare la velocità di caricamento.
• Responsive Design: Grazie alle media queries, il sito si adatta automaticamente a schermi grandi e piccoli.

Ecco un esempio di codice CSS per rendere il sito adatto ai dispositivi mobili:

Per chi è curioso di vedere come i diversi linguaggi collaborano, ecco un esempio completo che combina HTML, CSS e JavaScript:

HTML

CSS

JAVASCRIPT

Realizzare questo sito è stato un viaggio emozionante nel mondo della programmazione web. Ho imparato a utilizzare tre linguaggi fondamentali – HTML, CSS e JavaScript – e ho scoperto quanto sia stimolante combinare creatività e logica per creare qualcosa di utile e bello.

Non è stato solo un progetto tecnico, ma un’esperienza di apprendimento che mi ha permesso di crescere e di apprezzare ancora di più la complessità e la bellezza del web.

Ho deciso di caricare il progetto su GitHub per condividerlo con chiunque voglia esplorare il codice, imparare o contribuire. GitHub è una piattaforma utilizzata da sviluppatori di tutto il mondo per collaborare e condividere progetti open source.
Puoi consultare il codice sorgente completo di questo progetto sul mio repository GitHub. Qui troverai tutti i file utilizzati per la realizzazione di questa pagina, incluse le risorse aggiuntive.
Clicca sul link qui sotto per accedere:
Repository Github