02 maggio - 08 maggio

Cos'è Boolean?
Boolean è una Tech Academy online internazionale,
che nasce con l’ambizione di rivoluzionare il mondo
della formazione informatica, attraverso una modalità
d’insegnamento innovativa e coinvolgente.

Offriamo un percorso intensivo di 6 mesi per persone

senza esperienza di programmazione, a tempo pieno,
da seguire in diretta online.

Al termine del percorso formativo 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

1200+ #37 650+

Studenti hanno scelto Boolean Le edizioni del corso partite tra Aziende utilizzano
per diventare sviluppatori il 2018 e il 2021 la Boolean Hiring Platform

#BooleanCodingWeek
 Cos'è la Coding Week?
La Coding Week nasce dall’esperienza di Boolean e ha
l’obiettivo di sfatare i miti sulla programmazione.

Programmare è difficile, noioso e bisogna essere

dei geni della matematica? Non è vero.

La programmazione è creativa e accessibile, anche se si

parte totalmente da zero e non si è mai scritto codice.

In queste 7 lezioni in diretta faremo un viaggio nel

programmazione e impareremo tutto il necessario per
creare una pagina web interattiva.

#BooleanCodingWeek
I teacher

Sofia Fabio Michele

Teacher coordinator Co-Founder Head of teaching

#BooleanCodingWeek
Programma
Dom 02 Introduzione a HTML e CSS
> 18:00-20:00 Fabio

Lun 03 Layout con CSS Flexbox

> 18:00-20:00 Michele

Mar 04 Live Coding - Layout

> 18:00-20:00 Michele

Mer 05 Programmare in JavaScript

> 18:00-20:00 Fabio

Gio 06 VueJS
> 18:00-20:00 Sofia

Ven 07 Chiamate API con Axios

> 18:00-20:00 Sofia

Sab 08 Progetto e final show

> 10:00-13:00 Fabio & Michele

#BooleanCodingWeek
 Cos’è il progetto finale?
Sabato, dalle 10 alle 13, costruiremo insieme in 3h di live
coding una pagina interattiva che unisce tutte
le tecnologie viste durante la settimana.

Definiremo la struttura in HTML, personalizzeremo la

pagina con CSS, e creeremo funzioni interattive con
JavaScript e API esterne.

Obiettivo: creare un database di videogiochi interattivo

e consultabile.

#BooleanCodingWeek
 Cosa è la Coding Week?
Una occasione per capire cosa vuol dire programmare e
creare pagine web con HTML, CSS e JS, guidati da
professionisti.

#BooleanCodingWeek
 Cosa è la Coding Week?
Una occasione per capire cosa vuol dire programmare e
creare pagine web con HTML, CSS e JS, guidati da
professionisti.

Cosa NON è la Coding Week?

Non è un corso per diventare programmatori, non è
un esempio di come è il corso Boolean full time (per
quello c’è il FundamentalsCamp!)

#BooleanCodingWeek
 Cosa vi serve .per iniziare.

schermo e tastiera editor wifi webcam

#BooleanCodingWeek
 consigli utili / cose da sapere

01.
Concentrati e segui la lezione
Non provare a scrivere codice in diretta. Segui,
ragionando, su quello che vedi.

02.
Le lezioni sono registrate
Potrai riguardare, seguendo il tuo ritmo, le
lezioni.

03.
Nessuna pressione
Rilassati, è come guardare una puntata su
Netflix: siamo qui per divertirci.

#BooleanCodingWeek
 Registrazioni delle lezioni
Tutte le lezioni e le slide vengono registrate e
caricate su:

https://booleancodingweek.teachable.com

entro la mattina del giorno successivo

#BooleanCodingWeek
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa facciamo oggi?

Introduzione a HTML e CSS
Impariamo a creare semplici pagine web
utilizzando tag HTML e regole CSS

Boolean Coding Week

PRONTI?
SI PARTE!
 Installazione editor di testo
Il codice è testo.

Potremmo scrivere tutto con Blocco Note ma esistono dei

programmi che aiutano gli sviluppatori nello scrivere
codice (colorazione degli elementi, autocompletamento)

Durante la coding week useremo VSCode ma è solo una

delle possibili scelte.

Ci sono infinite possibilità di colori e plugin da installare:

limitatevi all’essenziale.

#BooleanCodingWeek
LIVE CODING
 Cos’è l’HTML

E un linguaggio che si occupa del contenuto delle pagine

web.

Non è un linguaggio di programmazione ma un linguaggio

di markup (HyperText Markup Language) perchè non
contiene "logica" (se...allora, ripeti fino a quando)

Non esiste alternativa. Qualsiasi sito usa HTML.

#BooleanCodingWeek
 La regola base

<tag>testo</tag>

<tag>
delimita l’inizio della parte di testo

</tag>
delimita la fine della parte di testo

A seconda di quello che si scrive al posto di “tag” si

avrà un effetto - e un significato - diverso.

#BooleanCodingWeek
 La regola base

<tag>testo</tag>

<p>Questo è un paragrafo</p>
<h1>Questo è il titolo più Questo è un paragrafo
importante</h1>
<h6>Questo è il titolo più
importante</h6> Questo è il titolo più importante
Questo è il titolo meno importante

#BooleanCodingWeek
LIVE CODING
 Tag contenitori
I tag possono contenere a loro volta altri tag, non solo testo.

<section>
<h2>Questo è un titolo della sezione</h2>
<p>Questo è un paragrafo della sezione</p>
</section>

Altri tag contenitore: <div>,<nav>,<article>,...

#BooleanCodingWeek
 Indentazione
Fondamentale per scrivere codice leggibile
(e non fare la figura di chi si improvvisa programmatore)

<section>
<h2>Questo è un titolo della sezione</h2>
<p>Questo è un paragrafo della sezione</p>
</section>

#BooleanCodingWeek
 Commenti
Non hanno effetto sul risultato in pagina ma aiutano gli
sviluppatori.

<!-- Inizio della sezione -->

<section>
<h2>Questo è un titolo della sezione</h2>
<p>Questo è un paragrafo della sezione</p>
</section>

#BooleanCodingWeek
 Always code as if the guy who
ends up maintaining your code will
be a violent psychopath who
knows where you live
 La struttura base di ogni pagina HTML

<!DOCTYPE html>
<html>
<head>
<!-- Head contiene informazioni aggiuntive che servono alla pagina -->
</head>

<body>
<!-- Body contiene il corpo della pagine, tutto il contenuto va qui -->
<p>Questo è un paragrafo</p>
</body>
</html>

#BooleanCodingWeek
 Diversi tipi di tag

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

Inline tag: gli elementi occupano solamente lo spazio del loro

contenuto; Altri elementi inline possono affiancarsi sulla stessa linea

Self closing tag: non prevedono contenuto per questo motivo non
hanno apertura e chiusura. Ad esempio <br> che non ha contenuto ma
obbliga il testo ad andare a capo.

#BooleanCodingWeek
 I tag inline

<tag>testo</tag>

<div>Questa è una <strong>parola

importante</strong> e anche Questa è una parola importante e anche questa lo è
<em>questa lo è</em></div>

#BooleanCodingWeek
 Gli attributi di un tag

<tag attributo=”valore”>testo</tag>

<img src=”immagine.jpg”>
<div class=”speciale”>testo</div>

#BooleanCodingWeek
 Googlare non vuol dire barare

Non è un gioco di memoria:

Google
MDN
W3School
StackOverflow

Sono strumenti fondamentali per ogni developer.

#BooleanCodingWeek
LIVE CODING
 Cos’è CSS, in parole

Anche detto “fogli di stile”, CSS (Cascading Style Sheets) è

un linguaggio utilizzato per la formattazione e lo stile di una
pagina HTML.

Come per HTML, è uno standard. Non ci sono alternative.

#BooleanCodingWeek
Cos’è CSS, in immagini
Cos’è CSS, in immagini
Cos’è CSS, in immagini
Cos’è CSS, in immagini
 Un passo alla volta...

Andiamo per gradi.

Se HTML si occupa del contenuto e CSS dell’estetica

diamoci un primo semplice obiettivo: colorare di rosso
un <h1>

#BooleanCodingWeek
 La regola base di CSS

selettore {
proprietà: valore;
proprietà: valore;
}

selettore
quale elemento voglio modificare?

proprietà: valore
quale proprietà voglio cambiare? e
come? (es. colore: rosso)

#BooleanCodingWeek
 Selettori

.speciale {
color: red;
}
<tag class=”speciale”>

Tutti i tag a cui è stata assegnata la classe

"speciale" avranno le proprietà definite
(ovvero, avranno colore rosso)

#BooleanCodingWeek
 Dove si scrive il codice CSS?

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>CODING WEEK 2021</h1>
</body>
</html>

index.html style.css

#BooleanCodingWeek
 Dove si scrive il codice CSS?

<!DOCTYPE html> .speciale {

<html> color: red;
<head> }
</head>
<body>
<h1>CODING WEEK 2021</h1>
</body>
</html>

index.html style.css

#BooleanCodingWeek
 Dove si scrive il codice CSS?

<!DOCTYPE html> .speciale {

<html> color: red;
<head> }
</head>
<body>
<h1 class=”speciale”>CODING WEEK 2021</h1>
</body>
</html>

index.html style.css

#BooleanCodingWeek
 Dove si scrive il codice CSS?

<!DOCTYPE html> .speciale {

<html> color: red;
<head> }
<link rel="stylesheet" href="master.css">
</head>
<body>
<h1 class=”speciale”>CODING WEEK 2021</h1>
</body>
</html>

index.html style.css

#BooleanCodingWeek
LIVE CODING
 Altre proprietà CSS

background: red
border: 1px solid red
border-radius: 5px

/* solo per gli elementi tipo block */

height: 150px
width: 150px

#BooleanCodingWeek
 Il box model

/* la distanza tra il bordo e il mondo

esterno */
margin: 5px;

/* la distanza tra il contenuto e il

bordo */
padding: 5px;

#BooleanCodingWeek
LIVE CODING
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa abbiamo fatto oggi?

Introduzione a HTML e CSS
Abbiamo creato la prima pagina utilizzando HTML e
CSS

#BooleanCodingWeek
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa faremo domani?

Layout con CSS Flexbox
Impareremo una nuova proprietà di CSS (display:
flex) che ci permetterà di posizionare gli elementi
dove vogliamo nella pagina, creando dei veri
layout.

#BooleanCodingWeek