Videocorso HTML e CSS CGFA — Da zero a un sito vero: struttura, grafica, layout moderno, responsive e accessibile

Pubblicato il 29 Ottobre 2026 · Aggiornato il 30 Ottobre 2026 · Autore: CityGraph Napoli (Claudia D'Urso, titolare)

Guarda la presentazione del videocorso HTML e CSS

Apri le prime 2 lezioni gratis · Scarica il video in MP4

Perché imparare HTML e CSS

Ogni sito che vedi è fatto di HTML (la struttura) e CSS (la grafica). Saperli usare vuol dire poter costruire la pagina della propria attività, sistemare un tema WordPress o Shopify senza chiamare nessuno, oppure cominciare il lavoro di web designer. Il corso arriva fino al layout moderno con Flexbox e Grid, al sito che si adatta al telefono e all'accessibilità.

A chi è rivolto

Il corso è pensato per: principianti assoluti, commercianti, grafici e chiunque voglia costruire o capire un sito web. Partenza: Da zero.

• Un computer Windows, Mac o Linux
• Saper creare cartelle e file
• Nessuna esperienza di programmazione

Il programma: 10 lezioni in 3 livelli

Circa 14 ore di studio con gli esercizi, in lezioni da 20 a 40 minuti. Le prime 2 sono gratis.

Base: Struttura della pagina, contenuti, moduli e primo stile

• La prima pagina HTML (20 min, gratis): Capire cos'è HTML, creare e aprire la prima pagina web.
• Testi, link, immagini ed elenchi (25 min, gratis): Usare i tag principali per titoli, paragrafi, collegamenti, immagini ed elenchi.
• Struttura semantica, tabelle e moduli (30 min): Organizzare la pagina in sezioni significative e creare tabelle e moduli.
• Il primo CSS: selettori, colori e testo (30 min): Collegare un foglio di stile e cambiare colori, caratteri e spaziature.

Intermedio: Box model, Flexbox e Grid: i layout di oggi

• Il box model e il display (30 min): Capire che ogni elemento è una scatola e controllarne dimensioni e spazi.
• Flexbox: allineare senza fatica (30 min): Disporre gli elementi su una riga o colonna con Flexbox.
• CSS Grid: layout a due dimensioni (30 min): Costruire griglie con righe e colonne e impaginare una pagina intera.

Avanzato: Responsive, accessibilità e CSS moderno

• Responsive design: un sito per ogni schermo (35 min): Far funzionare il sito su telefono, tablet e computer con l'approccio mobile first.
• Accessibilità: un sito per tutti (35 min): Rendere il sito utilizzabile da chiunque, con tastiera, lettori di schermo e buon contrasto.
• CSS moderno e progetto: la pagina della pizzeria (40 min): Usare variabili, transizioni e nesting e preparare il progetto finale.

Il progetto finale: La pagina della pizzeria

Costruisci la pagina di una pizzeria napoletana: intestazione con menu, sezione principale, griglia di pizze con prezzi, modulo di prenotazione e piè di pagina. Deve essere responsive, accessibile e usare le variabili CSS.

1. Crea index.html e stile.css, collegali e scrivi lo scheletro con header, nav, main e footer.
2. Aggiungi una griglia di quattro pizze con immagine (con alt), titolo, descrizione e prezzo.
3. Inserisci il modulo di prenotazione con label, tipi di campo corretti e pulsante.
4. Impagina con Flexbox il menu e con Grid la lista di pizze, partendo dal telefono (mobile first).
5. Controlla l'accessibilità: navigazione con Tab, focus visibile, contrasto, un solo h1.

Cosa ti serve

• Visual Studio Code: Editor gratuito da code.visualstudio.com, dove scrivi HTML e CSS
• Un browser moderno: Chrome, Edge o Firefox: con il tasto F12 apri gli strumenti per sviluppatori e ispezioni qualsiasi pagina
• Estensione Live Server (facoltativa): Si installa da VS Code e aggiorna la pagina nel browser ogni volta che salvi

A cosa ti serve dopo il corso

• Creare il sito della tua attività
• Web designer e sviluppatore front-end
• Personalizzare temi WordPress e Shopify
• Base per JavaScript e per tutti i framework web

Come si studia

• Video breve per ogni lezione, con i sottotitoli e il testo del video da leggere.
• Spiegazione scritta con esempi italiani (prezzi in euro, negozi, città) e codice da copiare con un tocco.
• Prova qui: modifichi il codice ed esegui il risultato direttamente nella lezione, con gli errori spiegati.
• Esercizio con la soluzione, appunti personali e quiz di tre domande per segnare la lezione come fatta.
• Esame finale di 15 domande (si supera con il 75%) e attestato stampabile con codice di controllo verificabile.
• App installabile su PC, tablet e telefono: niente account, i progressi restano sul dispositivo e si salvano con il backup.

Per privati, scuole e aziende

• Singolo corso: per chi vuole imparare un linguaggio, con tutte le lezioni, il progetto finale, l'esame e l'attestato.
• Tutti i corsi: l'accesso a tutto il catalogo CGFA Academy, per passare da un linguaggio all'altro quando vuoi.
• Aziende: formazione dei dipendenti su programmazione, dati, automazione e scrittura, con gli attestati nel registro.
• Scuole e centri di formazione: licenza per sede, per le classi e i laboratori, con la verifica dei codici degli attestati.
• White label: l'Academy con il nome, i colori e il dominio di chi la offre, per enti di formazione, agenzie e consulenti.

Le condizioni si concordano in base alle persone da formare: scrivici con Richiedi maggiori informazioni o su WhatsApp.

L'attestato è un attestato di frequenza con codice di controllo, non un titolo di studio né una certificazione pubblica. I programmi indicati nel corso sono gratuiti o già presenti nel computer, salvo dove è scritto diversamente.