Vai al contenuto

Videocorso HTML e CSS CGFA

Da zero a un sito vero: struttura, grafica, layout moderno, responsive e accessibile

  • Partenza: Da zero
  • 14 ore con gli esercizi
  • 10 lezioni in 3 livelli
  • 2 lezioni gratis
Inizia la prima lezioneSblocca il corso

A chi serve

Principianti assoluti, commercianti, grafici e chiunque voglia costruire o capire un sito web

Cosa serve per iniziare

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

Cosa installare

Visual Studio CodeEditor gratuito da code.visualstudio.com, dove scrivi HTML e CSS
Un browser modernoChrome, 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

  • 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

Programma del corso

10 lezioni in 3 livelli. Ogni lezione: video, spiegazione, codice da copiare o provare, esercizio con soluzione e quiz.

1

Base

Struttura della pagina, contenuti, moduli e primo stile

1La prima pagina HTMLCapire cos'è HTML, creare e aprire la prima pagina web.Gratis20 min2Testi, link, immagini ed elenchiUsare i tag principali per titoli, paragrafi, collegamenti, immagini ed elenchi.Gratis25 min3Struttura semantica, tabelle e moduliOrganizzare la pagina in sezioni significative e creare tabelle e moduli.30 min4Il primo CSS: selettori, colori e testoCollegare un foglio di stile e cambiare colori, caratteri e spaziature.30 min
2

Intermedio

Box model, Flexbox e Grid: i layout di oggi

1Il box model e il displayCapire che ogni elemento è una scatola e controllarne dimensioni e spazi.30 min2Flexbox: allineare senza faticaDisporre gli elementi su una riga o colonna con Flexbox.30 min3CSS Grid: layout a due dimensioniCostruire griglie con righe e colonne e impaginare una pagina intera.30 min
3

Avanzato

Responsive, accessibilità e CSS moderno

1Responsive design: un sito per ogni schermoFar funzionare il sito su telefono, tablet e computer con l'approccio mobile first.35 min2Accessibilità: un sito per tuttiRendere il sito utilizzabile da chiunque, con tastiera, lettori di schermo e buon contrasto.35 min3CSS moderno e progetto: la pagina della pizzeriaUsare variabili, transizioni e nesting e preparare il progetto finale.40 min

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.

I passi

  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.

Esame e attestato

Alla fine del corso fai l'esame: 15 domande, serve il 75% di risposte giuste. Superato l'esame ottieni l'attestato stampabile con nome, ore, punteggio e un codice di controllo che chiunque può verificare.

Vai all'esame

Glossario di HTML e CSS

Tag
Un'etichetta HTML tra parentesi angolari che dice cos'è un contenuto.
Elemento
Un tag di apertura, il contenuto e il tag di chiusura insieme.
Attributo
Un'informazione in più dentro un tag, come href o alt.
HTML semantico
Usare i tag secondo il significato dei contenuti, non per l'aspetto.
Selettore
La parte della regola CSS che dice a quali elementi si applica.
Cascata
Il meccanismo che decide quale regola CSS vince quando ce ne sono più di una.
Box model
Il modello a scatola: contenuto, padding, bordo e margine.
Flexbox
Sistema di layout per disporre gli elementi in riga o in colonna.
Grid
Sistema di layout per disporre gli elementi in righe e colonne insieme.
Responsive
Un sito che si adatta a ogni dimensione di schermo.
Media query
Una regola CSS che si attiva solo in certe condizioni, come la larghezza dello schermo.
Accessibilità
Rendere il sito utilizzabile da tutti, comprese le persone con disabilità.

Le prime 2 lezioni sono gratis

Per il corso completo, scuole e aziende: chiedi le condizioni.

Inizia oraRichiedi maggiori informazioni