introduzione
metodologia
- iterazione
  #Data01
- comunità dei pari
  #Data01
- comunità degli esperti
  #Data01
setting
- brackets
  #Data01
- browser
  #Data01
- root / folders
  #Data01
- github
  #Data01
  - nome utente: libero
  - repository name: fed23nomeDiBattesimo
    (le omonimie si risolveranno in aula)
  - configurazione di GitHub Pages →
  - tutti i repositories verranno condivisi con la classe
  - README.md #avanzato →
- indirizzo: URI / URL / PATH
  #Data01-05
- disegna una nave #es-03: utilizza un software grafico (consigliato adobe illustrator), utilizza soltanto rettangolo/i e/o cerchio/i neri su fondo bianco
  #Data01-05
- disegna "5 forme facili" #es-04: trova il tuo set di 5 oggetti facili escludendo l'esempio che segue, utilizza un software grafico (consigliato adobe illustrator), con gli stessi elementi del precedente esercizio più il triangolo, potendo utilizzare anche lo spazio negativo per definire le forme (vedere dimostrazione "spazio negativo" del docente). esempio di "5 forme facili": set per aperitivo composto di bicchiere, cannuccia, shaker, fetta di limone, oliva. referenze di ricerca: → e →
  #Data01-05
- riproduci l'oggetto dell'esercizio 03 in HTML+CSS #es-05
  #Data01-05
- riproduci l'oggetto dell'esercizio 04 di un collega in HTML+CSS #es-06
  #Data01-05
- #es-07 #avanzato implementa Isotope di Metafizzyco → nel testo di riferimento del corso
  #Data01-05
- font builder (some with open source, free or freemium license) →, →, →. Uno con versione online: →">→, →. Un altro a pagamento, ma di provato valore: →.
  #Data10
html
- sintassi →
  #Data01
- doctype →
  #Data01-04
- head / body #htmlMarkup→
  #Data01-04
- div #htmlMarkup
  #Data01-04
- link / style tag / style attribute #htmlMarkup
  #Data01-04
- #esercitazione — flag exercise #es-01 #es-02
  #Data01-04
  1. define a national flag
  2. design it with html and css
  3. share it with your github account #es-01
  4. invent a new no-country (or uthopical) flag and share it #es-02 (a starting point research reference)
- I browser leggono HTML. HTML descrive il contenuto. HTML è struttura.
  #Data01-04
- class e id #htmlMarkup
  #Data01-04
- box principali: nav, main, header, footer, aside #htmlMarkup
  #Data01-04
- si comportano come blocchi (block elements): div, headers (h1, h2, h3, etc.), paragraphs, lists #htmlMarkup
  #Data01-04
- si comportano come testi in linea (inline elements): span, strong, em, image, a #htmlMarkup
  #Data05
- principali attributi: class, href, title, alt #htmlMarkup
  #Data05
- tag script #htmlMarkup #avanzato
  #Data04
- #esercitazione — #es-09:
  #Data06
  - fai un alfabeto o un abbecedario, o meglio una sorta di "specimen" (→)(→) per un carattere a tua scelta. usa @font-face, usa grid oppure flex-box
- SVG ovvero vettori in codice #htmlMarkup →
  #Data08
- Validatore di codice →
  #Data09
css
- sintassi →
  #Data01-05
- chiamate CSS: esterne vs interne vs "inline" (via attributo style)
  #Data01-05
- unità di misura lineare (px, em, rem, %, vh, )
  #Data01-05
- box model: width, padding, margin, box-sizing → #cssMarkup
  #Data01-05
- border #cssMarkup
  #Data01-05
- position #cssMarkup
  #Data01-05
  - z-index #cssMarkup
- float #cssMarkup
  #Data01-05
- background #cssMarkup
  #Data01-05
- unità di misura: PX, EM, REM, %, VW, or VH →
  #Data10
- color (rgba) #cssMarkup
  #Data01-05
- capire cosa sono i css: W3C senza css.
  #Data01-05
- selettori: class
  #Data01-05
- selettori: gerarchia e specificità →
- pseudo-selettori (nth-child) #cssMarkup →
- flexbox (display: flex;) #cssMarkup →
  #Data01-05
  - main dimension
  - flex-wrap
  - justify-content & align-items
  - flex-basis, grow, shrink
- media queries #responsiveDesign #cssMarkup
  #Data06
  → → → →
- #esercitazione — responsive flag #es-08:
  #Data06
  1. prendi la bandiera di #es-02
  2. cambia il suo design al minimo con due breakpoints di 375px e 720px
- grid with css (display: grid;) #cssMarkup →
  #Data01-05
- differenza tra flexbox e grid →
  #Data06
- come aggiungere font personalizzati?
  #Data06
  - caricali sul tuo sito tramite @font-face, cioé la "regola css" più usata (anche da Google Font) →
  - puoi trovare i font open source su Font Squrrel e caricarli in locale, magari nella cartella "font" in radice →
  - oppure delega tutto a Google Font... referenza: →; tutorial: →; approfondimento: →
- #esercitazione — #es-10:
  #Data07 (aggiornato)
  1. il tema dell'esercizio è la tipografia animata. referenza: →;
  2. disegna un nuovo carattere tipografico oppure modificane uno esistente;
  3. trova un concept forte, visualizzalo con qualche disegno o bozza grafica;
  4. il movimento è importante;
  5. impagina le specimen per questo nuovo carattere.
  6. puoi inserire nel corpo della pagina informazioni inerenti all'autore.
  7. il seguente footer è obbligatorio per tutti (copia il codice sorgente all'interno del tag pre):
```
Progetto del corso di front-end development.
Torna all'indice.
© 2023 NABA, Nome Cognome.
```
- movimento!
  #Data07
  - transitions →
  - animations →
  - Differenza tra transition e animation https://www.geeksforgeeks.org/difference-between-animation-and-transition-in-css/ #fixme
- perspective →
  #Data08
- media query per stampare #avanzato #sperimentazione
  #Data09
- css reset: →
  #Data11
scss/sass
- sintassi →
  #Data01
- alternative: less →, Stylus →, PostCSS →
  #Data08
- compilatore: Scout App →
  #Data08
javascript (jQuery)
- sintassi →
  #Data01
- Seguire questi tutorial da qui → fino a "var" di Variables.
  #Data11
- E poi Operators, Functions, Arrays, If Else, Loop For
  #Data11