Html

Programmazione | Web

Crea una pagina web con Html

Vuoi capire come funzionano i siti web che visiti ogni giorno? In questo laboratorio, ti immergerai nell’affascinante mondo dello sviluppo web con HTML e CSS. Imparerai a costruire lo scheletro di una pagina web e a dargli stile, colore e design.

Con l’aiuto di Visual Studio Code e l’affiancamento dei nostri mentor, imparerai le basi del linguaggio HTML e CSS. Sarà un’esperienza pratica e creativa, dove potrai dare forma alle tue idee e, come un vero designer, dare vita alla tua prima pagina web.

Riserva il tuo posto
età: 11 anni +
COMPETENZE RICHIESTE

Non è richiesta alcuna conoscenza pregressa di programmazione o sviluppo web.

APPROCCIO

Seguiremo un approccio didattico sia "frontale" sia "collaborativo. Avrai bisgono di un pc portatile con un editor di codice (Visual Studio Code).

ATTITUDINE

Ai nostri ninja è richiesto di dimostrarsi collaborativi e ben disposti verso gli altri e avere voglia di dare vita alle proprie idee sullo schermo!

finalità

L’obiettivo principale del laboratorio è far avvicinare i partecipanti al mondo della creazione di contenuti per il web in un modo divertente e accessibile, mostrando loro che possono essere creatori di tecnologia e non solo semplici consumatori. Comprenderanno i concetti di base che stanno dietro ad ogni pagina web che visitano e costruiranno qualcosa di tangibile con le proprie mani (e il codice) vedendo il risultato immediato del loro lavoro.

Organizzazione

Svolgimento del laboratorio

Tappa 1

La scatola magica di Internet

Introduzione a cosa sono i siti web, come funzionano e qual è il ruolo di HTML e CSS. Scopriamo insieme la “cassetta degli attrezzi” che useremo: Visual Studio Code. Iniziamo a scrivere i primi tag base come <html>, <head>, e <body>.

Tappa 1

Tappa 2

Il primo mattoncino: i testi

In questa tappa, impariamo a dare forma al contenuto. Scopriamo come usare i tag per i titoli (<h1> a <h6>), i paragrafi (<p>) e le liste (<ul>, <ol>, <li>). Il nostro primo obiettivo è creare una pagina che sia una vera e propria “enciclopedia” di parole.

Tappa 2

Tappa 3

Immagini e link: la finestra sul mondo

Un sito web non è solo testo! Impariamo a inserire immagini (<img>) e a collegare le nostre pagine con i link (<a>), creando una navigazione interna. Questa è la tappa in cui la nostra pagina comincia a prendere vita e a connettersi con l’esterno.

Tappa 3

Tappa 4

Struttura e ordine: la mappa della nostra pagina

Come si organizzano i contenuti? Qui introduciamo l’uso dei <div> per raggruppare gli elementi. È una tappa fondamentale per iniziare a pensare come un designer, pianificando la disposizione di testi e immagini in modo logico e funzionale.

Tappa 4

Tappa 5

Il tocco magico: l’introduzione al CSS

Ora che abbiamo la struttura, è il momento di renderla bella! In questa tappa, faremo un’introduzione a CSS e a come si usa per dare stile alla nostra pagina. Sperimenteremo con colori di sfondo, tipi di carattere e margini per rendere la nostra creazione esteticamente accattivante.

Tappa 5

Tappa 6

Funzionalità interattive: i pulsanti e i form

Un sito non è completo senza interazione. In questa sessione, impariamo a creare elementi interattivi come pulsanti (<button>) e semplici form di contatto (<form>, <input>), per permettere agli utenti di interagire con la nostra pagina.

Tappa 6

Tappa 7

Progetto finale: La tua pagina web

È il momento di mettere tutto insieme! Ogni partecipante creerà una pagina web completa e funzionale, unendo la struttura HTML, lo stile CSS e le funzionalità interattive apprese. Sarà un vero e proprio “portfolio” del lavoro svolto, da mostrare con orgoglio a genitori e amici.

Tappa 7
Al termine del laboratorio

COMPETENZE CHE SVILUPPERAI

COMPETENZE TECNICHE

Al termine del laboratorio acquisirai le nozioni fondamentali del linguaggio HTML e capirai come utilizzare il CSS per applicare stili e design; acquisirai capacità di scrivere e modificare codice e familiarità con un ambiente di sviluppo integrato (Visual Studio Code).

COMPETENZE TRASVERSALI

Problem solving analitico e pensiero logico per comprendere la logica dietro ad una pagina web, usare il codice come mezzo per esprimere la propria creatività digitale, acquisire gli strumenti per realizzare in autonomia i propri progetti.

Resta in contatto con CoderDojo Brianza

Iscriviti alla nostra newsletter per rimanere sempre informato sui nostri corsi ed eventi!

* indicates required

Intuit Mailchimp

Torna in alto