Cos'è Boolean?

Siamo una Tech Academy online internazionale e

offriamo un corso intensivo di 6 mesi per persone
che partono da zero nel mondo della
programmazione, da seguire in diretta online.

Al termine del percorso affianchiamo i nostri

studenti nella ricerca di un lavoro e li aiutiamo a
iniziare la loro carriera come Full Stack Web
Developer.

#BooleanCodingWeek
 I nostri numeri

1700+ 95%
Studenti hanno scelto Boolean Tasso assunzione
per diventare sviluppatori post-corso

#57 1300+
Le edizioni del corso partite tra Aziende utilizzano
il 2018 e il 2022 la Boolean Hiring Platform

#BooleanCodingWeek
 Il corso per Full Stack
Web Developer
Open Day
6 mesi di lezioni in diretta online

Frequenza full-time Mar 25 Gennaio

Supporto one-to-one con Tutor ogni giorno 18:30 - 19:30
Career coaching per 6 mesi

Inserimento nella Boolean Hiring Platform

Garanzia Money Back Under 30

Prestito agevolato con Intesa Sanpaolo

#BooleanCodingWeek
 Perché abbiamo creato
la Coding Week?
La Coding Week è una delle tante iniziative che
Boolean organizza per far conoscere il mondo della
programmazione a più persone possibile, e in
maniera completamente gratuita.

L’obiettivo è quello di sfatare qualche mito sul

coding: non bisogna essere geni in matematica per
imparare, e soprattutto è una skill molto creativa, che
permette di creare tutto quello che si vuole
semplicemente scrivendone il codice!

#BooleanCodingWeek
 Cosa imparerai a fare?

#BooleanCodingWeek
 Programma e insegnanti
Dom 16 Introduzione a HTML e CSS
> 18:00-20:00 Marco

Lun 17 Introduzione a JavaScript

> 18:00-20:00 Filippo

Mar 18 Tris
> 18:00-20:00 Marco
Filippo
Mer 19 Memory
> 18:00-20:00 Filippo

Gio 20 Acchiappa la talpa

> 18:00-20:00 Marco

Ven 21 Infinite Runner

> 18:00-20:00 Filippo

Marco
Sab 22 Space Invaders
> 15:00-18:00 Filippo

#BooleanCodingWeek
 consigli utili / cose da sapere

01. 03.
Concentrati e segui la lezione Nessuna pressione
Non provare a scrivere codice in diretta. Rilassati, è come guardare una puntata
Segui, ragionando, su quello che vedi. su Netflix: siamo qui per divertirci.

02. 04.
Le lezioni sono registrate Non ti basta?
Potrai riguardare, seguendo il tuo ritmo, le lezioni. Se vuoi sapere ancora altro su Boolean e
Riceverai il link domani mattina con le imparare altro, c’è Fundamentals Camp!
registrazioni!

#BooleanCodingWeek
 Scopri gli altri contenuti
Guarda i nostri video sul canale Youtube @boolean
e seguici su Instagram @boolean.careers

#BooleanCodingWeek
1
HTML

2
HTML

Che cos'è l'HTML?

HyperText Markup Language

Non è un linguaggio di programmazione ma un linguaggio di markup

Si occupa della parte visiva dei contenuti del sito
Non contiene "logica"
Se...allora
Fai fino a che

3
HTML

HTML
I tag

Questo è un titolo grande

Questo è un paragrafo

4
HTML

HTML - La struttura base

5
HTML

Diversi tipi di tag

Block level tags

Crea un elemento di tipo "block" che occupa una intera linea; gli
elementi successivi occuperanno una nuova linea (es. <p>).

Inline tags
Gli elementi occupano solamente lo spazio del loro contenuto;
Altri elementi inline possono affiancarsi sulla stessa linea.

 
Self closing tags
Tag che possono essere sia Inline che Block ma che non
prevedono contenuto (un testo, un titolo); per questo motivo non
hanno apertura e chiusura. Ad esempio <br> che non ha
contenuto ma obbliga il testo ad andare a capo.

6
HTML

HTML
I tag più utilizzati

Intestazione
Paragrafo

1. Elemento Lista

2. Elemento Lista

Elemento Lista

Elemento Lista

Bottone

Corsivo

Grassetto

7
CHECKPOINT

8
HTML

HTML - Attributi

Gli attributi sono delle informazioni

aggiuntive che si possono inserire nel tag
di apertura degli elementi HTML.
 
Tutti i tag HTML possono avere uno o più
attributi, definiti sempre con la sintassi
nome="valore".

9
HTML

Link ad altre pagine

Tag <a> con attributo href

Per generare un link utilizziamo il tag <a>.

Il suo attributo href segnala al browser
l'indirizzo verso il quale portare l'utente al click.

10
HTML

Immagini
Tag <img> con attributo src

Per visualizzare un'immagine all'interno

della pagina, utilizziamo il tag <img>.
Il suo attributo src indica al browser il
percorso del file da visualizzare.
 
Opzionalmente è possibile aggiungere
l'attributo alt per definire un testo
alternativo all'immagine: non è obbligatorio
ma è una buona prassi.

11
CHECKPOINT

12
 CSS
CASCADING STYLE SHEET

O come dicono i romantici:

i CSS sono gli aggettivi in un mondo di parole (l’HTML)

13
CSS

A cosa servono i CSS?

14
CSS

Dove si scrive il codice CSS?

Separato dall’HTML, possibilmente!

In un file dedicato con estensione .css, il quale viene collegato alla pagina nel tag head 

index.html style.css

15
CSS

CSS - Sintassi

La prima cosa da fare è stabilire un modo

per assegnare una regola di formattazione
ad un <tag>.

16
CSS

Selezione con il tag

Tutti i tag di quel tipo avranno le proprietà definite nel css.

In questo caso, tutti i paragrafi saranno di colore rosso.

index.html style.css

17
CSS

Selezione con *

Il selettore universale serve a dare delle regole generali a tutti gli elementi.
Queste regole potranno poi essere sovrascritte da altri selettori inseriti successivamente.

index.html style.css

18
CSS

Selezione con id

Il tag cui è stato assegnato l'id sarà soggetto alle proprietà definite nel css.
In una pagina, un particolare id può essere assegnato ad un unico elemento.

index.html style.css

19
CSS

Selezione con classe

Tutti i tag a cui è stata assegnata la stessa classe avranno le proprietà definite nel css.
In questo esempio, tutti gli elementi con classe "bot" saranno di colore rosso.

index.html style.css

20
CSS

Selezione per discendenza

Possiamo selezionare un elemento che si trova all'interno di un altro elemento separando i due
selettori con uno spazio.
In questo esempio, solo i p che si trovano all'interno di un div saranno di colore rosso.

index.html style.css

21
CHECKPOINT

22
CSS

Spazio al Colore!
La tavolozza del web developer

Gli spazi colore più utilizzati:

RGB - Red Green Blue - rgb(X,X,X)

X è un numero da 0 a 255
RGBA - Red Green Blue Alpha - rgba(X,X,X,Y)
Y è un decimale da 0.0 a 1.0, e gestisce la trasparenza
HEX - Esadecimale - #ZZZZZZ
Z è una cifra esadecimale (da 0 a F)

A seconda dello spazio colore utilizzato avremo a

disposizione una gamma di colori più o meno ampia
 

23
CSS

Font

Il font è lo "stile" delle lettere utilizzate per

il testo. Lo stesso termine viene utilizzato
anche in editoria.
 
Con il CSS possiamo andare a modificare
l'aspetto del testo in tanti modi,
impostando ad esempio, la tipologia di
font, la dimensione o lo spessore. 

24
CSS

Font Family

Web Safe Fonts

Font che sono (molto probabilmente)
installati sul pc dell’utente e quindi sono
"sicuri" da utilizzare (Arial, Verdana, …)
(web safe fonts)
 
Google Fonts
Font che non sono installati sul pc
dell’utente ma ogni utente dovrà
scaricarne una copia da Google Fonts
(fonts.google.com)

25
CSS

Il Testo

La presentazione del testo può essere

modificata in vari modi.
 
Possiamo ad esempio rendere il testo
sottolineato, maiuscolo oppure modificarne
l'allineamento o l'interlinea.

Allineamento del testo

26
CSS

La pseudo-classe :hover
La prima interazione con l'utente

Applicando la pseudo-classe :hover

al selettore di un elemento è possibile
intercettare il passaggio del mouse su
di esso e cambiarne l'aspetto.

27
CHECKPOINT

28
CSS

Width e Height
Per impostare la larghezza e l'altezza del contenuto dell'elemento

Ci sono numerose unità di misura utilizzabili,

ma le unità più comunemente usate sono:

px (pixel)
% (percentuale rispetto al tag contenitore)

29
CSS

Bordi, Margini e Padding, cosa sono?

Surprise surprise, non è così banale

30
CSS

Border
Esterno al contenuto

La proprietà border imposta lo spessore, stile

e il colore del bordo del blocco.
Lo spessore viene indicato con un'unità di
misura, preferibilmente in pixel, oppure con le
parole chiave thin, medium e thick.
 
Lo spessore del bordo si somma alle
dimensioni totali del blocco per stabilire lo
spazio occupato nella pagina.
Inoltre, è possibile  impostare singolarmente
ogni lato o usare la forma abbreviata.
31
CSS

Margin
Esterno al bordo

Specifica la distanza tra il bordo di un elemento ed il

bordo degli elementi adiacenti.
Può essere indicato in uno dei seguenti modi:

Con un'unità di misura, preferibilmente in pixel

Come percentuale delle dimensioni del
"contenitore"
Con la parola chiave auto, che indica al browser
di calcolare automaticamente la distanza

Inoltre, è possibile  impostare singolarmente ogni

lato o usare la forma abbreviata.
32
CSS

Padding
Interno al bordo

Il padding imposta la distanza tra il contenuto ed il

bordo del blocco. 
 
Può essere indicato in uno dei seguenti modi:

Con un'unità di misura, preferibilmente in pixel

Come percentuale delle dimensioni del
"contenitore"

Inoltre, è possibile  impostare singolarmente ogni

lato o usare la forma abbreviata.

33
⚠ Di default le dimensioni del border e del
padding si sommano alle dimensioni di width e
height del blocco, quindi aumentano le
dimensioni totali del blocco.

34
CSS

Box Sizing
La rivoluzione nel calcolo del dimensionamento dei blocchi

Prima dell'introduzione del concetto di box-sizing, il dimensionamento dei blocchi avveniva

solo in una modalità:
width ed height determinano la dimensione del contenuto, e padding e border-width vengono
ad esso aggiunti per stabilire lo spazio realmente occupato dal blocco.
 
Adesso è possibile utilizzare due metodi diversi di box-sizing:

content-box
la "vecchia" modalità, di default.
border-box
padding e border vengono sottratti/assorbiti da width e height.
In pratica un blocco con width: 200px occuperà sempre e solo 200 pixel nella pagina.
35
CSS

Background
Lo sfondo di un elemento

Ci sono molteplici proprietà che si possono

utilizzare per definire lo stile di sfondo di un
elemento. 
 
In particolar modo, se lo sfondo è costituito
da un'immagine, se ne possono definire
dimensione, posizione e comportamento.

36
CHECKPOINT

37
FLEXBOX

38
CSS

CSS Flexbox
Che cosa fa Flexbox?

Il CSS3 FlexBox è una modalità di layout che prevede la disposizione

degli elementi in una pagina in modo «flessibile», con la possibilità di
adattare il contenuto più facilmente a schermi e dispositivi diversi.

Gli elementi che vogliamo siano disposti in modo flessibile devono

essere contenuti in un genitore «Flex», detto «Flex-Container».
 
Gli elementi ‘‘figli’’ in un contenitore «Flex» sono detti «Flex-Item».

39
CSS

CSS Flexbox
Display: flex è una proprietà del genitore!

La proprietà display: flex va data al tag genitore (flex-container).

I suoi figli diventeranno automaticamente flex-item.

flex item flex item flex item

flex container

40
CSS

CSS Flexbox
flex-direction - Flex-container rule

Di default, la direzione in cui vengono allineati i

flex-item è row: qualunque tipo di elemento
verrà sistemato sulla stessa riga.

41
CSS

CSS Flexbox
flex-direction:row flex-direction: column

MAIN AXIS CROSS AXIS

flex item
flex item flex item flex item
CROSS AXIS

MAIN AXIS
flex item

flex container
flex item

flex container
42
CSS

Possiamo allineare gli item sul Main-Axis

justify-content - Flex-container rule

justify-content: flex-start; justify-content: flex-end;

MAIN AXIS MAIN AXIS

flex item flex item flex item flex item flex item flex item
CROSS AXIS

flex-direction: row

CROSS AXIS
flex container flex container

43
CSS

CSS Flexbox
justify-content - Flex-container rule

Questa proprietà definisce in che modo i Flex-Item sono disposti lungo il Main Axis.
Può assumere principalmente i seguenti valori:

flex-start
flex-end
center
space-between
space-around

44
CSS

Se cambiamo la direction tutto si sposta!

justify-content - Flex-container rule

justify-content: flex-start; justify-content: flex-end;

CROSS AXIS CROSS AXIS

flex item flex container

MAIN AXIS

flex item

MAIN AXIS
flex item flex-direction: column flex item

flex item

flex item
flex container

45
CSS

Possiamo allineare gli item sul Cross-Axis

align-items - Flex-container rule

align-items: flex-start; align-items: flex-end;

MAIN AXIS MAIN AXIS

flex container
flex item flex item flex item
CROSS AXIS

CROSS AXIS
flex-direction: row
flex container
flex item flex item flex item

46
CSS

CSS Flexbox
align-items - Flex-container rule

Questa proprietà definisce in che modo i Flex-Item sono disposti lungo il Cross Axis.
Può assumere principalmente i seguenti valori:

flex-start
flex-end
center
stretch

47
CSS

Se cambiamo la direction tutto si sposta!

align-items - Flex-container rule

align-items: flex-start; align-items: flex-end;

CROSS AXIS CROSS AXIS

flex item flex item

MAIN AXIS

flex item flex item

MAIN AXIS
flex item flex-direction: column flex item

flex container flex container

48
CSS

CSS Flexbox
flex-wrap - Flex-container rule

Questa proprietà specifica se i Flex-Items si debbano disporre su un’unica fila sul proprio main-axis,
o su più file, nel caso eccedano in ingombro il Flex-container.
Può assumere principalmente i seguenti valori:

nowrap (è il valore di default)

wrap

align-content - Flex-container rule

Questa proprietà, utilizzata insieme a flex-wrap, specifica come distribuire lo spazio tra le righe dei
vari Flex-Items. Puà assumere gli stessi valori di justify-content.

49
CONGRATULATIONS!

50