Web Design

prof.ssa Cristina Iurissevich

[email protected]
 1. Come è fatto un sito web
a. Struttura dei contenuti
Indice lezione: b. Anatomia del sito
c. Elementi di navigazione
2. I linguaggi di programmazione
3. HTML
a. Struttura documento
b. Anatomia elemento HTML
c. Struttura dei tag e attributi
d. Tag di blocco e inline
e. Elementi nidificati
f. Elementi vuoti
g. Tag semantici - HTML5
4. CSS
a. Stili CSS interni, esterni e inline
b. Struttura
5. Esercizi in aula
6. Reference
7. Esercizio a casa
Come è fatto un sito web
Struttura dei contenuti

Per architettura di un sito web si intende la strutturazione dei contenuti di un sito, cioè il
modo in cui essi sono organizzati in categorie e pagine secondo una logica stabilita a priori.

Ci sono tipologie differenti di strutture web che possono essere utilizzate.

● Struttura gerarchica (o ad albero)

● Struttura sequenziale
● Modello Network
 Struttura gerarchica (o ad albero)

La struttura più utilizzata è basata su una pagina

principale (Home) e “pagine figlie” (Categorie e
sotto categorie) collegate direttamente alla pagina
principale.
 Struttura sequenziale

Utilizzata quando vogliamo che l’utente segua dei passaggi o una sequenza
specifica. Il classico esempio è la struttura del questionario
Struttura sequenziale

Questa tipologia di struttura risulta

comune nei giornali online.

L'architettura del sito, sebbene

presente, non è chiara come nel
modello gerarchico.
Come scegliere la struttura?
Il principio alla base della struttura del sito Web è l'architettura dell'informazione (IA) che
serve a garantire che i contenuti siano organizzati, strutturati ed etichettati in modo
efficace e coerente.
Gli elementi da tenere in considerazione sono:
● Percorso dell'utente: è importante considerare come l’utente potrebbe interagire con
il sito e quali potrebbero essere le sue aspettative su come dovrebbe funzionare.
● Contenuto: la struttura del sito web sarà anche determinata dal tipo e dal volume dei
contenuti del sito. La struttura di un sito di e-commerce sarà diversa dalla struttura di
un sito accademico.
● Contesto: il contesto di un sito Web è determinato dai suoi obiettivi, dal contesto
culturale in cui si trova e dalle risorse disponibili.
Anatomia del sito
HEADER
L’anatomia di un sito web identifica quali sono le principali
sezioni che lo compongono e a cosa servono.
MENU
Una pagina web, normalmente, sarà composta da:

● header: la parte alta del sito (l’intestazione, se fosse un

documento Word)
● menù di navigazione CONTENT SIDEBAR

● contenuto variabile della pagina

● sidebar: la barra laterale
● footer: la parte finale del sito

FOOTER
 Header

Quando un utente atterra sul sito web, la prima sezione che noterà sarà l’header.

Questa parte del sito è quella che ne definisce l’identità e solitamente contiene il logo
dell’attività o del professionista.

All’interno dell’header può essere incorporato il menù di navigazione, ma anche una call to
action specifica per invitare l’utente a compiere un’azione che può essere l’iscrizione alla
newsletter, il download di un prodotto digitale o qualsiasi altro tipo di conversione o
interazione.
 Menu

La profondità di navigazione deve essere minima: l’utente dovrebbe essere in grado di

raggiungere qualsiasi contenuto del sito con il minor numero di click possibile.

Nel caso di siti corposi e dalla struttura molto articolata, invece, si possono aprire menù a
discesa o mega menù a tutto schermo quando l’utente passa con il mouse sopra alle voci del
menù di ‘primo livello’.

Alcuni accorgimenti:

● Le voci principali del menù non dovrebbero mai essere più di sei o sette, per non
confondere l’utente.
● Il menù e le sue voci devono essere chiari per l’utente
● Il menù di navigazione principale non deve mai spezzarsi su più righe.
● Uno strumento utile da inserire nel menù o nell’header è il modulo di ricerca.
 Contenuto

Il contenuto della pagina è generalmente inserito sulla parte sinistra del sito, il motivo è
relativo al senso di lettura del testo nella cultura occidentale: l’occhio cade prima sulla parte
sinistra di una pagina. Per i siti in lingue che hanno senso di lettura da destra verso sinistra,
si applica il ragionamento opposto.
Questa sezione della pagina è per definizione quella più variabile e va quindi analizzata
nello specifico volta per volta.
Il blocco del contenuto può anche occupare l’intera larghezza della pagina in quanto non
sempre la sidebar è presente.
 Sidebar

All’interno della barra laterale possono essere disposti contenuti in evidenza, menu
aggiuntivi e banner pubblicitari o form di contatto / iscrizione alla newsletter, possiamo
inserire anche i widget social: feed di instagram, pinterest, likebox di facebook.

Il contenuto della sidebar può essere diversificato in base alla sezione del sito in cui ci si
trova ma è sempre meglio non crearne troppe versioni diverse per non creare confusione
nell’utente quando cambia pagina: è importante mantenere continuità nel layout del sito.

Ha senso omettere questa sezione quando si progetta una landing page, una pagina di
vendita o una home page, per non disperdere l’attenzione dell’utente.
 Footer

Come chiusura del sito è necessario inserire una sezione conclusiva che si ripeta in maniera
identica su tutte le pagine, esattamente come l’header.

Il footer di un sito aziendale deve contenere obbligatoriamente la ragione sociale e la

partita iva dell’attività rappresentata dal sito web.

Inoltre, il regolamento europeo per la privacy (GDPR) impone di inserire anche chiaramente:

● Il link alla pagina della Privacy Policy del sito

● Il link all’informativa completa sui Cookies
● Le condizioni d’uso dello strumento (specialmente per gli e-commerce)

Altri elementi che possono essere disposti in questa sezione sono i link ai profili social
collegati al sito, i contatti aziendali, …
Elementi di navigazione

La navigazione consiste in tutti gli strumenti che ci fanno muovere attraverso i diversi contenuti e
trovare le informazioni che stiamo cercando. Più gli elementi di navigazione sono visibili, chiari e
coerenti più la ricerca risulterà fluida.
Nella scelta dei sistemi di navigazione l’elemento centrale è l’utente.

Perciò con la navigazione dobbiamo riuscire a rispondere ad alcune necessità:

● Dove mi trovo? (Pagina e “livello del sito”)
● Ci sarà quello che sto cercando? (Chiarezza delle macro categorie)
● Ci sono altre cose che potrebbero interessarmi? (Collegare gli elementi simili)
● Cosa posso fare? (Call to action)
 Menù di navigazione principale

La barra di navigazione (o menù principale) è un elemento fondamentale che guida l’utente

attraverso il sito e lo aiuta a trovare ciò che sta cercando.

Alcune regole per la sua creazione:

● Titoli semplici
● Less is more: 5-10 voci di menu sono un intervallo ottimale
● Mantenere il menù di navigazione coerente in tutto il sito web
● Mettere in risalto la barra di navigazione
● Evidenziare la pagina in cui ci si trova attualmente (stato “active”)
● Mettere in risalto i collegamenti importanti
 Breadcrumb

Servono a far capire all’utente dove si trova e a riportarlo a casa o in altri punti del sito (tradotto è
“briciole di pane”).

Per implementare i breadcrumb, è necessario eseguire i seguenti passaggi:

● Assegnare un'etichetta a ciascuna delle singole pagine all'interno della gerarchia.

● Disporre i breadcrumb nell'ordine in cui appaiono all'interno della gerarchia del sito
● Separare le varie pagine presenti con un segno "maggiore di" (>) o qualche altro simbolo che
aiuti a distanziare i collegamenti.
● Creare un link a tutte le etichette breadcrumb lasciando i simboli divisori inattivi.
● Non sono utili nell’homepage.
 Barra di ricerca

Serve a velocizzare la ricerca nel caso in cui l’utente sappia già dove vuole arrivare.

Possiamo posizionarla in cima alla pagina o in altre zone della pagina in base al suo scopo
 Elementi secondari

Menù footer

Questi sono gli elementi di navigazione

principale ma possiamo aggiungerne altri
come secondari, come ad esempio: Sidebar,
menù footer, pulsanti Call to Action.

Possono essere aggiunti anche altri elementi

Sidebar
a seconda delle necessità. L’importante è
creare delle gerarchie molto chiare.
Call to Action
I linguaggi di programmazione
Un linguaggio di programmazione è un linguaggio formale, dotato di
lessico, sintassi e semantica ben definiti, utilizzabile per il controllo e la
gestione di un computer.

Proprio come gli umani parlano diverse lingue, anche le

macchine utilizzano linguaggi differenti.
I linguaggi di programmazione sono linguaggi specifici molto
precisi e delimitati, il più possibile privi di ambiguità.
 Lessico, sintassi, semantica

LESSICO
L’insieme delle regole formali per la scrittura di parole in un linguaggio. Insieme di parole chiave che
identificano alcune operazioni basilari conosciute dalla macchina.
SINTASSI
L’insieme delle regole formali per la scrittura di frasi in un linguaggio che stabiliscono la grammatica
del linguaggio stesso. Specifica la modalità e la forma con cui tali comandi vanno impartiti alla
macchina.
SEMANTICA
L’insieme dei significati da attribuire alle frasi (sintatticamente corrette) costruite nel linguaggio.
Abbina a ciascun comando un significato, che si traduce in un concetto chiaro e condiviso per gli
informatici che lo utilizzano.
Tipologie di linguaggi - i paradigmi

Un paradigma è un modello che permette di descrivere astrattamente l’algoritmo (cioè il

metodo per la soluzione di un problema). I diversi paradigmi si differenziano la
rappresentazione degli elementi (ad esempio le funzioni, gli oggetti, le variabili, ecc.) e i
procedimenti utilizzati per la risoluzione.

Le due tipologie principali di linguaggi di programmazione, sulla base dei paradigmi, sono:

● IMPERATIVI
● DICHIARATIVI
 Imperativi

Un programma viene inteso come un insieme di istruzioni (dette anche direttive o comandi),
ciascuna delle quali può essere pensata come un "ordine" che viene impartito alla macchina virtuale
del linguaggio di programmazione utilizzato.
Esempio:

1: read i
2: print i
3: goto 1
 Dichiarativi

Viene definito il risultato che deve essere ottenuto e non la modalità per ottenerlo.
Esempio:
<table border= “1”>
<tr>
<td>Nome:</td>
<td>Mario</td>
</tr> Nome: Mario
<tr>
Cognome: Rossi
<td>Cognome:</td>
<td>Rossi</td>
</tr>
</table>
HTML
Web Demystified, Episode 1
HTML è l’acronimo di HyperText Markup Language (“Linguaggio di
contrassegno per gli Ipertesti”) e non è propriamente un linguaggio di
programmazione.
Si tratta invece di un linguaggio di markup (di ‘contrassegno’ o ‘di
marcatura’), che permette di indicare come disporre gli elementi
all’interno di una pagina.

Le indicazioni vengono date attraverso degli appositi marcatori,

detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra
parentesi angolari (es: <img> è il segnaposto di un’immagine).
Attraverso i tag indichiamo quali elementi dovranno apparire sul
browser e come essi debbano essere disposti. Tutte queste
indicazioni sono contenute in un documento HTML, spesso detto
“Pagina HTML” che, nella pratica, è un file che possiamo modificare
con programmi come notepad e hanno un nome che finisce con
l’estensione .html.
Struttura di un documento .html

<!doctype html> I browser visualizzano solo ciò che è stato

<html lang="it"> scritto nel corpo quindi fra i tag <body> e
<head> </body>, perciò:
<title>Ciao Mondo!</title>
</head>
Questa è la nostra prima pagina HTML!
<body>
<h1>Ciao Mondo!</h1> I tag che sono contenuti all'interno del tag
<p>Questa è la nostra prima pagina HTML!</p> 'head' servono per definire le proprietà del
</body> documento e sono leggibili dal browser ma
</html>
non dagli utenti.
<!DOCTYPE html> Dichiara che il file è una pagina HTML.

Serve a identificare l'inizio e la fine del documento HTML. Il tag <html> </html>
contiene tutti gli altri tag e ci permette ad esempio di definire quale sia la
<html> lingua della pagina, come nel nostro caso in cui abbiamo definito che il
documento è in Italiano grazie all’attributo lang="it", la lingua di default è
l'inglese ('en').

Tag che contiene una serie di informazioni utili per la gestione della pagina, nel
nostro caso abbiamo definito ad esempio quale sarà il titolo che apparirà sui
motori di ricerca e sulle linguette del browser (tag <title>) ma questa sezione è
<head>
destinata a contenere molto di più: dall’inserimento di librerie alla definizione
dell’insieme di caratteri. Tutti gli elementi presenti al suo interno non saranno
visibili nella pagina.

Rappresenta il corpo del documento. Tutti gli elementi presenti nel tag <body>
<body>
vengono visualizzati nella pagina del browser.
Anatomia di un elemento HTML
tag di apertura tag di chiusura

<p> Building a Cat Photo App </p>

contenuto

elemento HTML
L'anatomia del nostro elemento è:

Il tag di apertura: consiste nel nome dell'elemento (p per il paragrafo), racchiuso tra parentesi
angolari di apertura e chiusura. Questo tag di apertura indica il punto in cui l'elemento inizia o
inizia ad avere effetto. In questo esempio precede l'inizio del testo del paragrafo.

Il contenuto: questo è il contenuto dell'elemento. In questo esempio è il testo del paragrafo.

Il tag di chiusura: è uguale al tag di apertura ma include una barra prima del nome
dell'elemento che segna dove finisce l'elemento.
Struttura del tag e attributi

I tag HTML possono essere corredati di uno o più attributi, che servono per meglio
specificare la funzione o la tipologia dell’elemento, per memorizzare dati o per arricchire di
significato il contenuto.
apertura tag chiusura tag

<tag attributo1="valore1" attributo2="valore2"> </tag>

attributo valore
attributo

Un attributo dovrebbe avere:

● Uno spazio tra esso e il nome dell'elemento. (Per un elemento con più di un attributo,
anche gli attributi dovrebbero essere separati da spazi.)
● Il nome dell'attributo, seguito da un segno di uguale.
● Un valore di attributo, racchiuso tra virgolette di apertura e chiusura.
Alcuni esempi di attributi di base:

Serve ad associare un identificatore univoco ad un elemento. Una volta

id assengato un identificatore, non si dovrà assegnarlo a nessun altro
elemento della pagina.

Serve a stabilire che l’elemento appartiene ad una serie di “classi”.

Possiamo applicare a tutti gli elementi di una classe proprietà simili e
class possiamo inserire quante classi vogliamo, tutte separate da uno spazio.
Es. <p class="testo-grande testo-nero">ciao</p>, ha due classi:
“testo-grande” e “testo-nero”.

Serve ad assegnare delle proprietà grafiche (Stili CSS) all’elemento,

style
questo tipo di assegnamento degli stili viene detto stilizzazione “inline”.
Tag di blocco e inline

Gli elementi del body si dividono in due grandi categorie:

● elementi di blocco
● elementi inline

Si dicono di tipo blocco quegli elementi che vengono visualizzati per mezzo di un "blocco"
autonomo all'interno della pagina, isolato dal resto della pagina con un'andata a capo e una
riga vuota. Per esempio <p> è un elemento di tipo blocco, perché isola una porzione di testo,
creando un paragrafo separato.

Gli elementi inline sono invece quelli che vengono visualizzati all'interno della pagina senza
separazioni, cioè senza interrompere il flusso con un'andata a capo. Per esempio <a> (che
inserisce un link) è un elemento inline, perché non separa il testo evidenziato dal resto della
frase.
Alcuni esempi di TAG blocco:

<p>I'm a paragraph</p> I'm a paragraph

<p> paragrafo
<p>I'm another paragraph</p> I'm another paragraph

<ul>
elenco <li>I'm an item</li> ● I'm an item
<ul>
puntato <li>I'm another item</li> ● I'm another item
</ul>

<ol>
elenco <li>I'm the first item</li> 1. I'm the first item
<ol>
numerato <li>I'm the second item</li> 2. I'm the second item
</ol>

This is Heading 1
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2> This is Heading 2
<h3> This is Heading 3 </h3> This is Heading 3
<h1> - <h6> Titoli
<h4> This is Heading 4 </h4>
This is Heading 4
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6> This is Heading 5
This is Heading 6
Alcuni esempi di TAG inline:

<a href="https://example.org">
<a> link A link to example.org</a>
A link to example.org.

<img> immagine <img src="beast.png" width="25" />

<i> corsivo Mark a phrase in <i>italics</i>. Mark a phrase in italics.

<b> grassetto Bold <b>a word or phrase</b>. Bold a word or phrase.

Line 1
<br> a capo Line 1<br>Line 2
Line 2
Elementi nidificati

<p> Building a <strong>Cat</strong> Photo App </p>

Gli elementi possono essere posizionati all'interno di altri elementi.

Questa operazione si chiama nidificazione.

Nell’esempio abbiamo messo in grassetto la parola Cat. Abbiamo potuto farlo perché il
tag <strong> è un tag inline.
Elementi vuoti

<img src="https://picsum.photos/200/300" alt="Picsum Photo" />

Non tutti gli elementi seguono lo schema di tag di apertura, contenuto e tag di chiusura.
Alcuni elementi sono costituiti da un singolo tag, che in genere viene utilizzato per
inserire/incorporare qualcosa nel documento. Tali elementi sono chiamati elementi vuoti.
Ad esempio l'elemento <img> che incorpora un file immagine in una pagina.
Tag semantici - HTML 5

I nuovi tag di HTML5 ci permettono di

rappresentare in modo mirato le diverse parti
di cui la pagina si compone, aiutandola a
raggiungere il miglior significato a livello
semantico.

In HTML5, infatti, la struttura della pagina è

meno anonima e il markup diventa più
<main>
descrittivo, dato che ogni elemento denota il
proprio contenuto in modo chiaro, a tutto
vantaggio dei motori di ricerca in grado di
interpretare e indicizzare al meglio il testo in
funzione dei tag presenti nel markup.

https://www.freecodecamp.org/italian/news/
gli-elementi-semantici-html5/
<div> <header>
<span>Navigazione</span> <h1>Navigazione</h1>
<div> <nav>
<a>A</a> <a>A</a>
<a>B</a> <a>B</a>
<a>C</a> <a>C</a>
</div> </nav>
</div> </header>
<div> <main>
<div> <header>
<div>Tre parole</div> <h1>Tre parole</h1>
</div> </header>
<div> <section>
<div>Ciao</div> <h2>Ciao</h2>
<div>Forse</div> <p>Forse</p>
<div>Circa</div> <p>Circa</p>
</div> </section>
</div> </main>
<div> <footer>
<span>Fine</span> <p>Fine</p>
</div> </footer>

Tag semantici
 L'elemento <main> identifica i contenuti principali del documento. Deve essere presente un solo <main> per
<main>
pagina.

<article> Rappresenta una sezione indipendente, contenente principalmente un contenuto testuale, ma non solo

Rappresenta una sezione che include un contenuto che è collegato a quanto trattato nella pagina, ma che è
<aside>
comunque distinto da esso

Rappresenta un blocco di intestazione all’interno della pagina o di una sezione (elementi section, article, aside
<header>
e nav)

<hgroup> Rappresenta l’intestazione di una sezione e raggruppa uno o più elementi h1, h2, h3, h4, h5 e h6

<figure> Rappresenta un blocco distinto dal testo principale, pensato per contenere immagini, diagrammi, esempi, …

<figcaption> Rappresenta la didascalia per un elemento figure ed è opzionale

Rappresenta un blocco di chiusura all’interno della pagina o di una sezione (elementi section, article, aside e
<footer>
nav)

Rappresenta una sezione che contiene una serie di link che permettono di accedere ad altre pagine o ad altre
<nav>
sezioni della pagina corrente

<section> Rappresenta una sezione generica della pagina, senza una connotazione specifica
CSS
Web Demystified, Episode 2
Il Cascading Style Sheet language (CSS) viene utilizzato per stilizzare
gli elementi scritti in un linguaggio di markup come HTML.
Separa il contenuto dalla rappresentazione visiva del sito.
Stili CSS interni, esterni e inline

Ci sono tre modi di inserire lo stile all’interno di una pagina HTML:

● Stile interno: gli stili si trovano nello stesso file dell’HTML.

● Foglio di stile esterno: le direttive CSS si trovano in un file separato
(stylesheet) con estensione .css che viene richiamato dal documento HTML
● Stile CSS Inline: viene inserito l'attributo style su un singolo elemento HTML
 Stile interno

<html>
<head>
<style> Lo stile si trova all’interno della sezione
p { <head> della pagina HTML racchiuso
color:red;
css all’interno del tag <style>.
font-size:12px;
}
● aumenta il tempo di caricamento della
</style>
</head> pagina
<body> ● lo stile CSS riguarderà solo la pagina
<p>Prova</p> HTML su cui si trova
</body>
</html>
 Stile esterno

foglio HTML (.html) foglio CSS (.css)

<html> p {
<head> color:red;
<link rel="stylesheet" type="text/css" href="stile.css" /> font-size:12px;
</head> }
<body>
<p>Prova</p>
</body>
</html>

Lo stile si trova all’interno di un altro foglio (nell’esempio denominato stile.css) che viene
richiamato nella sezione <head> della pagina HTML.
● miglior tempo di caricamento della pagina
● lo stile può essere applicato a più pagine differenti
 Stile inline

<html>
<head>
...
</head>
<body>
<p style="color:red;font-size:12px;">Prova</p>
</body>
css
</html>

Le regole di stile vengono inserite nei singoli elementi della pagina HTML.
● utile se si vuole modificare un singolo elemento o se non si ha accesso ai file CSS
● da non utilizzare abitualmente perché rende il codice HTML difficile da leggere e
modificare.
Struttura
La struttura della sintassi Cascading Style Sheet è composta da un selettore e un blocco di
dichiarazione. Si seleziona un elemento e quindi si dichiara cosa si vuole fare con esso.

<body> Il selettore identifica la parte di

<h1>Prima pagina</h1> contenuto della pagina di cui si vuole
HTML <p>Questa è una pagina di prova</p>
</body>
modificare l'aspetto.
</html>
La proprietà CSS identifica il tipo di
formattazione che si intende modificare.
selettore blocco di dichiarazione
Colori, font, allineamento, o altro.

Il valore viene assegnato alla proprietà

CSS h1 { color: #CE5937;} scelta.

proprietà CSS valore

Alcuni esempi di Selettori:

elemento
elemento Seleziona tutti gli elementi con nome (es.) h1
(es. h1)

.classe Seleziona tutti gli elementi il cui attributo class è definito

classe
(es. .testo-grande) come (es.) testo-grande

#id
Seleziona tutti gli elementi il cui attributo id è definito
id (es. come (es.) #testo-iniziale.
#testo-iniziale)

selettore1,selettor
e2,... Seleziona gli elementi indicati da uno qualsiasi dei
combinazione
selettori.
(es. h1,h2,h3 )

universale * Seleziona tutti gli elementi

https://flukeout.github.io/
 Alcuni esempi di Proprietà:

color Colore del testo

colori
background-color Colore dello sfondo

margin Margine dell’elemento (esiste anche margin-right, margin-left, margin-top e margin-bottom)

spaziatura
Il padding di un elemento è lo spazio fra il suo contenuto e il suo bordo (esiste anche
padding
padding-right, padding-left, padding-top e padding-bottom)

Famiglia del font (es. Arial). Possono essere inseriti più font che verranno selezionati
font-family nell’ordine di dichiarazione a second di quali sono a disposizione del browser. Posso inserire
una famiglia specifica di font (es. Arial) o una tipologia generica (es. Sans-serif)

font
font-size Grandezza del font (es. 15px, 150%, large)

font-weight Peso del font (es. bold, normal, 900)

width Larghezza di un elemento

dimensioni
height Altezza di un elemento
Alcuni esempi di unità di misura:

px Pixel

pt Punto tipografico

1em corrisponde alla dimensione del font corrente. 2em è 2 volte la dimensione del font
corrente.
em
Ad esempio se il font è di 12pt 2em sono 24pt. Questa unità è particolarmente utile per i CSS,
perché scala automaticamente in proporzione al font in uso.

vh Percentuale della viewport del browser. Utile ma non ancora standardizzato

% Percentuale della dimensione dell'elemento che contiene quello selezionato

Reference
 https://html.spec.whatwg.org/multipage/
Reference
ufficiale
https://www.w3.org/TR/?filter-tr-name=CSS

Corso per
imparare a
https://www.freecodecamp.org/
utilizzare il
linguaggio

Cheat sheet https://www.freecodecamp.org/news/html-cheat-sheet-html-elements-list-reference/

(lista dei tag e
degli attributi) https://cheatsheets.shecodes.io/css

Editor online https://codepen.io/

 1. Iniziamo la certificazione “Responsive Web
Design” facendo il primo modulo “Learn
HTML by Building a Cat Photo App” e il
secondo “Learn Basic CSS by Building a

Esercizio a casa Cafe menu”

2. Guarda e studia i tag presenti nel

https://www.freecodecamp.org/news/html
-cheat-sheet-html-elements-list-reference/
e https://cheatsheets.shecodes.io/css