Dicevamo che è buona pratica, a partire dalla dai componenti piu' atomici della pagina, in modo che possiamo riutilizzarli per costruire componenti più grandi.

Quindi andare a comporre il nostro andare a comporre il nostro design.

Quindi andiamo a vedere su Fig.

Ma quello che non è non solo è il design definitivo, ma in questo caso ci è stato fornito anche quello che una guida, diciamo una in gergo viene chiamato design system, quello che è il cor del design system.

Abbiamo visto che vediamo come c' è una razionalizzazione di quelli che sono i componenti base, in questo caso principalmente tutta la parte di tipografia.

Quindi i titoli abbiamo il link e anche pulsanti.

Questi li abbiamo identificati prima, sono gli elementi ricorrenti.

Io partirei a sviluppare proprio questi, perché poi saranno quelli che cominceremo a riassemblare per creare le varie section.

Torniamo sulla sulla nostra pagina html e cominciamo a stamparne alcuni.

Io inizierei proprio da dai primi tre delle prime tre intestazioni dai primi tre ed x quindi h una metterei titolo una.

Mettiamo intanto dei testi dei testi da che facciano un po' da playboy holder per iniziare un po' a a stilare titolo, titolo due, eh? Titolo tre Ok, vediamo sul browser il risultato iniziale.

Ok, questo è lo stile di default che ci offre il nostro browser.

Io aprirei anche la console di sviluppo che ci servirà.

Lasceremo più volte per andare a ispezionare gli stili o o deve pagare.

E cominciamo proprio a stilare questi queste prime intestazioni.

Torno sul mio stai punto css.

Ora, la prima cosa che dobbiamo fare è quella di normalizzare quelli che sono quelli che sono gli stili di default che abbiamo.

Visto che il browser l'assegno è buona norma applicare quello che viene chiamato in gergo un rese.

E per fare questo per poterla applicare a tutti gli stili, utilizzeremo uno dei suoi lettori universali, chiamato anche star o asterisco, che ci consentirà di selezionare tutti gli elementi della pagina.

Quindi io impostore adesso quelle regole che fanno parte del mio recente e che vorrei venissero applicate a tutti gli elementi è buona norma di solito applicare un innanzitutto unboxing differente.

Quindi il boxing raccomandato è quello di è quello relativo alla al valore border box.

In questo modo siamo certi che l'lte zza e la larghezza dei nostri box, quindi dei nostri elementi comprenda anche sia gli eventuali padding bordi che abbiamo definito è gli altri tributi che vogliamo definire il nostro respect per normalizzare quelli che sono visti.

Gli stili di default saranno margini, lo impostiamo a zero, quindi azzeriamo tutti i margini di tutti gli elementi e anche il padre.

In questo modo siamo certi che elementi che abbiano già del loro margini e del loro padding partono da una situazione che sia neutra e noi su questa da questo punto di partenza possiamo iniziare ad applicare i nostri stili.

Abbiamo applicato il nostro Rett.

Adesso cominciamo a inserire un po' di stili base.

Riprendiamo quello che il design su film e andiamo a vedere.

Andiamo a vedere cosa potremmo iniziare ad estrarre da questo design.

Ispezionando la nostra pagina cerco di estrarre dal film, ma i valori base che mi serviranno.

In questo caso prenderò quello che è il colore del background.

Quindi abbiamo questo questo blu scuro definire il mio background-color applicandole se decimale estratto dal design salvo ricarica la pagina ed ecco che abbiamo appunto lo sfondo di pagina definito, come abbiamo visto nel design, il colore principale del testo e il bianco, per cui quello che faro' sarà dare un colore in generale al body e a tutto il testo contenuto del body, che sarà appunto il bianco, per cui continuero' a definire le mie regole.

In questo caso color e aggiungerò questa decimale del bianco salvo ricarichiamo, vediamo riapparire i nostri i nostri titoli, i nostri ed quindi la pagina comincia già ad avere un po' l'aspetto che dovrebbe ok, altra informazione che mi serve che posso applicare al livello di body.

Quindi in generale a tutta la pagina notiamo che tutta la pagina sfrutta lo stesso font, quindi io direi che potremmo gia' applicarla anche questa anche questa regola a livello di di pagina.

Cosa farò quindi? Identificherà innanzitutto la forma, la fonte che viene utilizzata nel mio progetto.

In questo caso posso appoggiarmi al pannello in spect di film e mi suggerisce un work sans ok, ovviamente mi dai vari pesi mi dà anche il design utilizzato.

Intanto dovrò sicuramente importare in pagina questa fonte.

Anche in questo caso si tratta di una google font, quindi quello che farò sarà andare all'interno di Walt font e cercarmi appunto la fonte in questione.

Abbiamo detto work sans trovata.

Quello che faro' sarà selezionarla.

Ok.

Ehm quindi non mi resta che importare gli stili che a me interessano.

Vediamo come Google Phone ci fornisce dello stesso font diversi pesi, diversi stili.

A me interesserà in particolare regular quattrocento e e poi la versione quella un po' più un po' più bold.

Quindi se mi bold seicento eccola qui.

Una volta che ho selezionato i missili, vediamo come Google Phone ci dà già gli Snipes che possiamo utilizzare per inserirli nel nostro nella nostra pagina HTML e avere l'importo automatico direttamente da Google Font.

Quindi io c'ho pier o questo questo snipes di codice eh lo aggiungero' nel LED della mia pagina, quindi torno all'interno dell' index html, eh? Prima del mio foglio CSS team porterò ti porterò i font da Google Font l'altro step richiesto è quello di aggiungere di definire all'interno del CSS la font-family che andremo a utilizzare in questo caso la copie remo.

Anche in questo caso la copie remo da Google font come ci suggerisce copriremo la regola di font-family di font-family, così com'è e la riporteremo tra le regole CSS del nostro del nostro body, quindi font-family works Hans e dato che è possibile definire le raccomandato per sicurezza più font-family a cascata dopo works, Hans viene definito sans serif, che sarebbe la fonte di default di sistema che verrebbe utilizzata nel caso in cui il primo font non venisse trovato.

Quindi in questo modo abbiamo così definito la font-family della pagina ritorno sul mio documento e adesso le nostre intestazioni hanno la fonte corretta.

Cominciamo adesso a giocare un po' con con i pesi e le dimensioni da assegnargli.

Abbiamo definito abbiamo importato Lafont e abbiamo definito colore background.

Adesso aggiungiamo quella che è la dimensione della fonte default è buona practice settare la fonte ha al cento per cento fonsai cento percento.

Questo perché? Perché i default browser hanno un fonsai di sedici pixel.

Ok in questo modo, specificando nel body, quindi all' intero documento una font-size del cento per cento.

Sto appunto indicando il browser di adeguarsi a quella che è la misura, quella di default, quindi di sedici pixel della già dichiarata già definita dal mio browser.

Una volta stilato il body, cominciamo a definire gli stili per i nostri hearings, quindi h una accadute eh tre Torno sul mio foglio di stile.

Sta il punto css e comincio con la prima regola per l'acqua una.

Ovviamente recupererò i valori dal mio foglio di film, quindi dal design per cercare di assegnare a ogni attributo il giusto valore.

Comincerei con alfons recupero dal film ma il suo valore è seleziono lo stile seleziona l'elemento che mi interessa é dal pannello expect andrò a guardare il suo valore all'interno del pannello di esperti di film.

Quindi fonsai se in questo caso è di novantasei pixel, quindi torno sul mio stai css riporterò novantasei pixel font-weight abbiamo già visto che dal design che uno è un po' più un po' più grasso per cui avremo sarà uno stile bold sarà con un font avrà un font-weight di seicento è altri valori che a me interessano saranno il leit quindi l'lte zza dell'inter linea che in questo caso è cento tredici.

Quindi finirò lì night pixel andiamo a vedere il risultato nella nostra pagina web.

Ricarico ed ecco che il titolo adesso è stilato correttamente.

Facciamo la stessa cosa con gli altri due e deeks che ci restano quindi h due font-size andiamo a recuperare da fig.

Ma il fonsai corretto sessantaquattro pixel font-weight anche in questo caso mi sembra che sia un bold, quindi metteremo un seicento e vediamo l'inter linea in questo caso abbiamo un light di settantacinque pixel, quindi torno sul mio foglio, la insight Settantacinque pixel.

Ricarichiamo e abbiamo anche l'accaduto e chiudiamo con la.

Non li facciamo tutti adesso, perché comunque non ci serviranno tutti.

Man mano che procediamo, possiamo decidere di aggiungerne altri.

Però mi fermerei a questi.

Intanto recuperiamo il Fonsai dal film Quarantotto Pixel.

Ok.

E per quanto riguarda il font Weight, Credo che fosse invece un po' più light.

Quindi credo che fosse un normale, in realtà, Norma nel normale, il valore di default.

Ok? Mentre invece l'inter linea sarà di cinquantasei Pix.

Okay, abbiamo finito con lo stile degli Hendrix.

Ora cos'altro riusciamo a estrarre da questo da questa appunto, da questo primo accordi elementi abbiamo detto che ci serviranno dei link.

Quindi, tra tutti questi elementi, vedo che spicca il link su con i suoi vari stati.

Quindi lo stato di default, lo stato di over.

Ok, proviamo a riprodurre anche in questo caso gli stili per per una escort.

Torno sulla mia mio Index HTML.

Inserisco anche qui Hank.

Quindi un link adesso la attributo a Karev.

Metto semplicemente un cancelletto.

Lascia un vuoto.

Metto soltanto all'interno un testo da Place Holder.

Quindi lo chiamo semplicemente metto semplicemente un testo chiamato Linc.

Vediamo come di default viene reindirizzato.

Ok, è il lo stile di default per i link nel browser, quindi anche in questo caso torno sul mio style punto css e Stiller o direttamente nell'evento ha quindi le in corteo andiamo a vedere sul film quali stili sono associati.

Torno sul foglio.

Seleziono l'elenco lo stile l'elemento link si' dalla expect noto che il font-family è lo stesso già condiviso per il body, quindi comune a tutta la pagina.

Food style normal font-weight seicento font-size trentasei élite quarantadue Ok, direi che posso riportarmi dall'altra parte.

Quindi font-size trentasei font-weight Seicento.

É li' night.

Abbiamo detto trentadue pixel.

Era trentadue.

Era quarantadue.

Era quarantadue.

Va bene.

Bene.

Notiamo che ok, visivamente inizia a prendere forma.

Però c' è ancora qualche problema.

C' è il colore da cambiare.

C' è anche il testo sottolineato per cui c'è ancora qualche aggiustamento da fare.

Bene, quindi proviamo a rimuovere e ad aggiustare questi stili.

Io direi che prima cosa, per prima cosa potremmo cambiare il colore.

Anche in questo caso il link di default hanno un colore bianco AM.

Vediamo Bene, resta la sottolineatura Ok, di default l'inganno la sottolineatura come la rimuoviamo css c' è una proprietà, un attributo chiamato tex decoration.

In questo caso lo sentiamo a non in questo modo rimuoviamo.

Ok, rimuoviamo la sottolineatura andiamo a vedere se è vicino a quello che era il design.

Okay, in realtà c' è ancora una modifica, è tutto maiuscolo da design, quindi in questo caso dobbiamo forzare quello che viene chiamato a per casa, per cui torno sul css e la proprietà che cambierò in questo caso sarà text-transform e la valorizzeranno con ha per caso torniamo sul browser ricarichiamo e adesso il link nel suo stato di default è simile a quello del design.

Andiamo a vedere come lover.

Okay, in realtà sull' over non accade nulla, però si guarda design.

Vediamo che lo stile del lover dovrebbe avere almeno un colore differente, quindi quello che posso fare è estrarre questo colore.

Vedo che dall'inps peck abbiamo un decimale di questo verde, lo copio e copia il valore.

Torno all'interno del mio style CSS e come faccio a stilare lo stato o verdi un link.

In questo caso mi affiderò a apriro' una nuova regola.

La nuova regola legata al tema a cui però aggiungerò due punti over, che sarebbe proprio il mio stato di mio stato che lo stato che voglio tar ghettizzare.

E questa regola in questo caso cosa avrà? Avrà un colore differente.

Quindi ride finirò il color con l' esadecimale.

Ho appena estratto dal film, quindi se adesso salvo e torno sul mio browser ricaricando vediamo come a lover del link questo cambia colore.

Ora io ho solo cambiato colore, ma potrei ridefinire qualunque altra regola per lo stato.

Quindi cambiare fonsai, aggiungere la sottolineatura, cambiare la robustezza della fonte.

Insomma spetta piu' al design e fare queste scelte.

Quindi abbiamo anche il link e ci serve quale altro componente può restare? Ok, andiamo a stilare adesso un pulsante lo stile di un pulsante che utilizzeremo non solo per gli elementi di tipo button, ma potrebbe servirci anche come stile per alcuni link che avranno però l'aspetto di un pulsante per cui in questo caso non stile remo direttamente un tag html, ma ci serviremo di una classe di una classe che potremmo così applicare ai vari elementi.

Aggiungo adesso un pulsante alla al mio index punto html.

Stiamo ancora giocando coi componenti, quindi non stiamo realizzando il layout definitivo.

Aggiungo un tag button e al suo interno scrivo generico, battono, vediamo come lo renderà azzera il browser.

Ok, questo è come un elemento button si presenta di default su un browser.

Io direi che abbiamo abbastanza materiale su cui andare a lavorare per sopra.

Scriverlo è per giusto per un po' di ordine metterei un brych, quindi un br per separare il bat un attimo dal link dato che sono due elementi inline, insomma sono sono sulla stessa riga io mettere un attimo da parte così l'abbiamo isolato e possiamo lavorarci.

Andiamo a vedere la design come il bat notiamo che ha un background colorato l'hubble diciamo il testo in te interno e ha una sua fonte, una sua dimensione ed è tutto ha per caso e poi ovviamente ha dei bordi arrotondati.

Quindi per dare lo stile al nostro pulsante utilizzeremo una classe.

In questo modo riusciamo a generalizzare quelle che sono le regole è l'aspetto di un pulsante che potremmo applicare non solo al tag button, ma anche a un eventuale link.

Quindi un eventuale tag ancora che vorremmo utilizzare con l'aspetto di un di un pulsante.

Intanto assegno la classe una classe all'attuale button definisco classe batto e nel mio css comincero' ad assegnargli delle regole.

Cominciamo dal background-color, andiamo a vedere l'aspetto ok adesso viola vedo che comunque anche il testo dovrebbe essere bianco é sicuramente avere un font più un font più ampio.

Torno sul fig ma font-size diciotto e font-weight seicento, quindi mi riporto queste regole nella mia classe fonsai diciotto pixel e font-weight seicento aggiungo aggiungo anche una text-transform.

Abbiamo visto che è tutto a perkins ok, salviamo e ricarichiamo ci siamo quasi, ci siamo quasi.

Il button comincia ad avere l'aspetto che vorremmo.

Cosa manca? Vediamo che intorno c' è un po' di come dire una sorta di spazzatura, quello che in gergo chiamiamo pudding.

Quindi assegneremo adesso un pudding e proveremo a dargli i bordi arrotondati.

In questo caso provo a identificare un padding dal film che ha occhio da questi valori potremmo diciamo normalizzare un padding sedici superiore e inferiore e di dodici laterale.

Quindi quello che faro' sarà a segnare la mia regola un pad abbiamo detto che possiamo esprimere più valori all' attributo possiamo assegnare più valore dell'attributo padding quindi dodici pixel primo valore si riferirà a top bottom mentre invece ventiquattro pixel lo assegneremo a left right, quindi quando assegno due valori al al mio attributo padding so che i primi due il primo si riferirà top botton è il secondo a left right salvo vediamo se cambia l'aspetto e vediamo che già il contorno del nostro pulsante è già più è già più spazioso l'altra cosa che farei adesso è cominciare a lavorare sui bordi adesso impercettibile, ma di default il battona dei bordi che noi vogliamo eliminare.

Quindi quello che possiamo fare azzerarlo.

Quindi metterei un border border non e l'altra, cosa che potrei fare arrotondare lì.

Credo che possiamo applicare un border regius di vediamo se da film riusciamo a estrarre questi valori.

Credo che siano della figura della Sharp che viene utilizzata.

Ok un rebus di pixel che fai un trentasei pixel, quindi ok, via bene é il nostro battle è stilato anche in questo caso però abbiamo uno stato che vogliamo gestire che lo stato di over nel caso in cui andiamo sopra il pulsante con il mouse e vediamo come qui cambia il colore del testo e il colore del background come abbiamo come abbiamo fatto anche prima.

Per il link possiamo utilizzare lo start over per definire delle regole specifiche per quello stato per cui ride.

Finirò una regola sulla classe ride finiro' le regole sulla classe button applicando però lo straight over, quindi due punti over e ride.

Finirò in questo caso il background-color che abbiamo visto che è verde.

Ehm estraggo le sedici male da sempre dal film Okay, è il colore del testo.

In questo caso abbiamo un sembra un blu scuro, la picchiava, salviamo, torniamo sui browser ricarichiamo ed ecco che adesso il nostro battone anche il suo stato over.

Abbiamo quindi assemblato un primo set di componenti che utilizzeremo per assemblare le varie section del layout.

Cominceremo a giocare con la struttura del nostro della nostra pagina web.

Cominceremo a riassemblare il tutto, a crearne di nuovi per costituire poi il design finale.