Ok, vediamo un attimo meglio come utilizzare alcuni di questi elementi che abbiamo effettivamente creato.

Ci sono diversi modi per utilizzare gli elementi.

Possiamo utilizzare, come vi dicevo prima, il box model che è fondamentale per riuscire a darci un'idea di spazzatura.

Da una parte all'altra la prima cosa che bisogna capire come effettivamente come funziona il tutto.

La cosa più facile è fare delle prove da una parte con Fig, ma d'altra parte con Pablo.

Per quale motivo? Perché sono degli strumenti che non si parlano a livello proprio informatico tecnologico.

Non puoi spostare un elemento di film all'interno di workflow, ma quello che ti aiuta molto a capire come ragiona il box model.

Quindi il discorso di avere un bottone come questo bottone viene creato.

Mettiamo caso che qui vogliamo creare una sezione come menù.

Abbiamo due modi per farlo.

Un menù può essere creato.

Ad esempio, se tolgo tutto così, vediamo un attimo.

Ehm siamo piu' di ordine e iniziamo a creare qualche elemento.

Ok, zero ora prendo il mio body, lo faccio diventare nero.

In questo modo possiamo avere una visualizzazione un pochino più corretta.

E qui iniziò a mettere Posso fare due cose Adesso? Si vuole creare un menù posso mettere la parte più semplice, che è quello che raccomando tutti di avere questo meno qua, ovvero è il drag drop the proprio dell'elemento menu che lo troviamo in basso è come vedete, c' è un bar.

Appunto, si chiama ci sono questi componenti che sono già definiti costruiti direttamente dal team di più e sono questi componenti componenti del search per cercare effettivamente all'interno del sito e andare a non prendere una pagina di risultati.

Vedete qua dentro torniamo indietro.

Possiamo vedere all'interno quello che è l'home page.

Ritorniamo in peggio.

Un attimo togliamo password, emettiamo un page di nuovo.

Ok, cancelliamo questa e vediamo quali altri elementi ci sono abbiamo il belga ha un video che ci fa caricare il video come vi dicevo prima e quindi qua dovete caricare un video voi almeno trenta mega è aggiornate lo a livello di di code che quindi, qualora fosse fosse fatto in un modo io non consiglio di caricare muove più che altro perché sono comunque abbastanza pesanti.

Quello che consiglio solitamente sono web pm è oppure mp quattro, molto più classici, ma che effettivamente vengono visualizzati molto bene dall'altra parte quello che possiamo avere qua all'interno sono alcuni elementi come drop down.

Okay, Lockdown ci serve per far vedere alcuni elementi, quindi vedere delle opzioni in questo caso vedete link due e poterle poi andare a selezionare tutte quante.

Quindi se io vado a vedere i settings, posso aggiungere un link.

Posso aggiungerne altri.

Ok, quindi in questo caso, selezionando questo vedo tutti i link e selezionando un hadith link posso vedere come elementi si creano e vedere tutti i drop down che cosa escono fuori.

Vediamo il top down a livello visivo, quindi in questo caso voglio dargli un colore bianco e voglio dargli un background bordo intorno ad un pixel, in modo da poterlo vedere visualizzare bene insieme.

Ok, questo è un esempio proprio di rotta, se volete provarlo.

Certo gol preview che questo vecchietto che vediamo in alto tocchiamo e iniziamo a vederlo, mentre che c' è proprio un elemento attivo.

Inoltre quadro autogol perché è fatto in questa maniera? Perché io non l'ho toccato da un punto di vista dello stile fuori, ma solamente dello stile quando attivo.

Quindi qua vado di nuovo a riportarvi gli elementi che ho inserito.

Rivedo il tolgo el e si apre e vedete che rimane sempre lo stesso.

Passiamo agli altri elementi.

Abbiamo quasi finito, quindi abbiamo in mente in Brad che in questo caso sono degli elementi che possono utilizzare solamente con un certo tipo di di Vicenza.

Quindi non tutti quanti possono utilizzarlo li box che è fondamentalmente il tutte le diverse visualizzazioni dell'immagine possiamo caricarle vederle multipli a livello multiplo.

Qua all'interno il classico slider con molteplici immagini le tab una mappa per andare a inserire effettivamente poi un link di google.

Solitamente si utilizza quello, quindi andando andiamo aggiungere poi delle è da Google e andiamo a inserire qua dentro proprio una una sezione dedicata qua all'interno di quello che si chiama Integration sa dove possiamo effettivamente andare a inserire un tag di Google Analytics andare a inserire i Google Maps in questo caso la già il già scritto che qua all'interno Facebook pixel e altre tipologie di funzionalità che sono molto piu' custom chiaramente richiedono un una conoscenza minima del codice all'interno di questi strumenti.

Torniamo di nuovo a quello che stiamo vedendo prima per vedere quali sono gli altri elementi.

Come vedete questa qua effettivamente non viene presa in pece nessun tipo di mappa perché non abbiamo messo nessun tipo di chiave.

Ultima, ma non meno importante ci sono tutte le funzionalità legate a Facebook, quindi out il box.

Quello che è fondamentalmente una valutazione poi di è di quello che può essere in questo caso una vista da un tipo di elemento.

Nick, io qua all'interno voglio farlo diventare bianco.

Vediamo se compare no, riprendiamo altri componenti come quello di Twitter, anche dove si può permettere di vedere dei feed in questo caso e qualora vi interessasse capire di più se gli elementi possiamo sempre vedere in alto a destra un punto di domanda in cui ti spiega specificamente a cosa serve quella tipologia di elemento.

Perchè un'animazione che ti aiuta a capire come posso lavorare con quel tipo di elemento li' e lo vediamo per ogni elemento importante, specialmente sui componenti che sono molto importanti qui dentro.

Anche il lockdown uguale stessa cosa, anche gli elementi appunto come Lightbox possiamo vedere quali sono gli effetti, quindi vedere come posso utilizzare tutte le immagini all'interno e selezionarla una per far apparire l'altro.

Abbiamo poi anche il discorso del bar, che è quello che vi dicevo prima, quindi all'interno del bar vi consentirà di fare alcune cose come ad esempio una parte caricare un'immagine un automatico direttamente voi.

In questo caso io vorrei caricare qui dentro il brand style un un'immagine.

Quindi qua non ho la proprietà delle immagini, quindi cosa devo fare? Devo prendere il mio la mia icona immagine, metterlo all'interno, scegliere un luogo in questo caso, quello che ho messo qui dentro e iniziare ad avere tutto questo contenitore in due modi posso farlo sia trasparente.

Quindi in questo caso voglio che sia trasparente zero e quindi automaticamente prende il colore del body che era nero o altrimenti voglio che abbia un colore di qualche tipo.

Facciamo tutto che qua le voci che vado a creare le vado a chiamare No Blink e tutti quanti il decreto con un colore bianco.

Quindi in questo caso vado a riprendermi la stessa frase.

Questa nomenclatura sulle altre, okay? Come vedete qua o un contenitore già definito non ha uno stile momento in cui noi andiamo a vedere questo questo bar automaticamente dato un nome perché io l'ho editata.

Nel momento in cui voi diate un documento, un elemento all'interno di Flo automaticamente viene ereditato.

Il nome in maiuscolo inapplicate con la prima lettera per casa è del l'elemento che avete fatto, ma volendo possiamo di nuovo riscriverlo.

Quindi lo riscrivo e ora vedro' solamente quello stile li' all'interno vedete che appunto si vede in appare ma è presente anche quello che ho appena messo io.

Quindi tornando qua all'interno io posso fare due cose qua posso dargli uno stile come il flax in questo caso a tutti quanti dico di stare lontano una dall ltro ma vedete che gli elementi non vengono fuori come ci aspetteremmo che molto spesso la cosa che vi consiglio è o fare un elemento ancora al proprio interno, quindi può essere o un elemento di qualche altro tipo, come ad esempio un block e vedere un attimo quello che succede.

Quindi vado a riprendere un brand, lo metto all'interno di questo di block e anche la nave menu, chiedendo questo a un elemento che in totalmente in fixed e ora l'elemento vedete che si sposta da una parte all'altra.

Questo perché il contenitore tende a fare ad avere delle problematiche tutte le volte che gli si dà una vita diversa da quella del contenitore stesso.

Quindi io questa vi consiglio sempre di tenerla come display block, quindi sempre quello che è il componente base e questo invece possiamo fare delle cose diverse, come allineare il testo al centro, questo farlo molto più piccolino.

Qui io farei una e dai una classe logo e quindi devo fare piu' piccolina, oltre al fatto che così magari si carica anche in trip.

Tornando all'interno del nostro contenitore, posso andare a inserirlo e dire stai in centro in questo caso, oppure dare una specifica il mio contenitore.

Quindi cento pixel, okay, il mio contenitore stesso che prende la sua altezza totale al cento per cento.

Ok, quindi ricordatevi sempre il discorso delle matrioske.

Centoventi.

Se io qua al largo a centocinquanta quello che sta sotto gli ho detto di te il cento percento del contenitore che ti sta sopra andrà sempre a ereditare quello che succede sopra di lui.

Quindi nel contenitore quattro qua diamogli un altro nome Eder container elemento dentro lo possiamo chiamare Flex nave container l'ex cav ok, e poi abbiamo il brand.

In questo caso noi abbiamo dato un ostile al logo, ma non il brand stesso che semplicemente un link che ci può portare da a mostrare effettivamente poi tutto il discorso della del logo del menu' vero e proprio su mobile che poi deve essere chiaramente ottimizzato a seconda di quello che vogliamo avere a livello di a livello grafico a livello visivo.

Tornando indietro qua alla fine possiamo anche riuscire a creare un elemento molto semplice no, in pochissimo tempo.

Non dimentichiamoci poi che ci sono tutti gli stati quindi lover vedete Clover non c' è praticamente presente in questo momento, quindi io lo credo adesso con il bianco un pochino meno così vediamo un attimo come sta ora vedete che se io passo questo tutti gli eventi sono in over.

Questo è utile perché sicuramente ci permette di avere più facilità, più libertà, fare una serie di cose soprattutto l'elemento rubar è molto facile da organizzare all'interno.

Quindi una volta che voi l'avete costruito qui è più semplice anche vederlo in generale da altre parti.

Torniamo qua.

All'interno.

Possiamo inserire questo il link all'interno del flex nave.

Perché Netflix nave il menù viene nascosto.

Vedete che c' è un display? Non ma almeno semplicemente il nostro.

Vedete questo elemento con le voci di menu dentro Questo chi ha? Diamogli un menù.

Eccolo.

E qua All'interno.

Posso vedere il resto degli elementi effettivamente qui.

Quindi, tornando all'interno, posso anche vedere e aggiornare questa icona.

In questo caso non si vede.

Le do un colore bianco e vedo quello che è la tipologia di cona.

Andando avanti posso andare a vedere altre tipologie di interazioni, come ad esempio quella che abbiamo visto prima e poi andare a lavorare su questo a livello visivo.

Quindi come posso andare a modificarla? Una cosa che non abbiamo visto ancora al discorso del Queste questioni non vengono utilizzati perché solitamente ci sono più pagine e semplicemente come si crea una pagina qua dentro e aggiungendo all'interno di questi il quarto elemento fino adesso hanno sempre visto il primo che è raggiungere elementi layout, il secondo che lo vedremo più tardi, il terzo che il navigatore vero e proprio.

Quindi diciamo il nostro menu di livelli e dall'altra parte abbiamo le pagine.

Quindi, come vedete qua ci sono degli utili di Paige, che sono delle pagine che si creano automaticamente a seconda dei componenti che ovviamente messo dentro e sono andati default.

Quindi password ruiz la quattro zero quattro, ovvero la pagina di errore sono sempre presenti.

Quella dovessi creare nuove pagine basta che io aggiungo qua il signor Page e poi scrivo il testo e servizio e poi posso crearne solamente due in questo caso, perché ho tenuto solo a seconda della tipologia di progetto che state facendo.

Potete creare un massimo di pagine a seconda tipologia di abbonamento che avete all'interno del popolo.

Solitamente si il primo che si inizia a fare a un massimo di due tre pagine che potete pubblicare al momento.

Ma possiamo utilizzare quella per creare una landing per creare il per fare le nostre prime prove all'interno ehm andando avanti possiamo vedere come altre pagine, come ad esempio quella della home se vogliamo crearne altre, devi attivare effettivamente la licenza.

Torniamo a questa pagina che vi ho fatto vedere prima ma che all'interno può avere altre pagine.

Effettivamente così vedete qual è la differenza? Qua invece vedete che sono ci sono più pagine e se io voglio posso crearne altre blocco perché in questo caso sto usando una licenza continua una licenza che ho pagato per se non sbaglio sui dodici quindici euro al mese circa per avere un sito internet online, però quindi pubblicato e ha un proprio link dal quale può essere effettivamente visualizzato.

Non questo, ma questo.

Quindi, tornando a noi, il nostro elemento che abbiamo creato qui possiamo vedere come abbiamo fatto un eterno di un tipo dall'altra parte possiamo farne anche custom.

È più difficile da fare e in parte lo possiamo fare.

Un mix tra quello che vediamo mobile, quello che vediamo all'interno ovvero il discorso di utilizzare direttamente un elemento come la Section.

Okay, chiamarlo Eder? No, naturale ed naturale.

Così, visto il mio arresto e qui possiamo avere all'interno un block che sarà il libro che sarà tutto a sinistra.

Prendiamo il nostro layout che abbiamo fatto qui al a sinistra che vediamo qua.

Cerchiamo di replicare questa soluzione all'interno del nostro contesto.

Iniziamo da una cosa semplice come questa.

Quindi cosa vediamo qua? Che c' È tutto un container left in un container right.

Vedete quindi il container Right Left Stanno a distanza.

L'uno dall'altro.

Quindi Cioè uno space between tra un elemento e l'altro.

Vuol dire che non si devono toccare questi elementi di quando io allargo gli elementi, si allontanano di piu' l'uno dall'altro quello che trovo un elemento da qua l'elemento stesso.

Si va a rimpicciolire uguale da quello che vedo a sinistra.

Ok, quindi in questo caso voglio cercare di replicare Questo e cosa faccio o all'interno.

Quindi container Left contiene il right che per me sono container left e poi duplica.

Questo lo chiamo container il cancello container right perché se non lo cancellate, vi sovrascrive il testo di quello che state facendo dentro.

Quindi Right, ok, una volta che questo possa avere due soluzioni, quindi da una parte iniziare a inserire brand, anzi, diciamo tutto custom.

Quindi va ad inserire prima il bloc all'interno del modulo a sinistra perché è lì che avrò il logo.

Poi inserisco l'immagine all'interno e poi inserisco gli elementi Whitney che sono dei taxi drink.

Ok, o possiamo avere sia dei taxi link che quello che vi dicevo prima.

Quindi questo che vi portano ad altre pagine oppure posso avere una tipologia di contenitore? Io vado, questi questi di qua si crea.

Io, ad esempio, qui posso dirli tutti i link Lynx devono avere questo stile, ovvero Inter sedici pixel senza sottolineatura e tutti quanti in bianco.

É qui che cosa ho fatto.

Quindi ho utilizzato su tutti i link la stessa medesima una medesima azione.

Quindi io voglio che tutti i link siano fatti in questo modo ogni link dovrà creare, si creerà sempre da questo punto di vista qui all'interno.

Se torniamo nel nostro gruppo, vediamo che poi all'interno di questo container Left.

Abbiamo da una parte un follow big che il nostro team di block e dall'altra parte un altro di block che all'interno questi due elementi.

Quindi aggiungiamo un block al nostro nostro contenitore.

Siamo ancora nel contenitore Left e abbiamo aggiunto i ping l'ok, quindi raggiungiamo gli altri.

Nick Dall'altra parte per questo dentro.

Questo é questo.

Ok, quindi in questo caso possiamo chiamarlo In-ear container.

Questo lo possiamo chiamare il brand logo.

Ok.

E qui inizia ad avere un elemento tutti insieme.

Poi dall'altra parte lo container right container.

Hai fatto da due loghi e due immagini che sono però dei.

Ci sono però dei link, quindi io so che all'interno Devo mettermi il bloc.

Il link liplock da una parte con All'interno Un'immagine.

Quindi ritorno qua.

Va ad inserire il libro nel container Right prende una immagine.

La metto dentro qui insieme al nostro bellissimo di qui Dovrai prendere esportare questa.

In questo caso faccio un export.

Da qua Posso portarvi un SMG? Okay, lo sport o fuori? Lo metto all'interno della social icons.

Ritorno all'interno del mio menù.

Il mio popolo sceglie quell'immagine carico scelto un'immagine da caricare.

Prendo quello che ho appena trovato e me la trovo qua dentro.

Ok, per comodità replico da una parte all'altra, quindi in questo caso una glock ne crea un altro e poi un altro elemento un altro item.

Quindi riprendo un link io vado a inserire all'interno del container qua non ingerisca, non inserisca lui dentro, dobbiamo inserirlo noi ama nello Marella, quindi qui inseriamo tutti i contenitori.

Nel right abbiamo da una parte il right che una serie di elementi in un'altra parte left che una serie di altri elementi.

Quindi il FT in questo caso dovrebbe avere dentro due luoghi che sono quelli che abbiamo costruito da una parte e dall'altra dove in questi due Glock.

Okay e qui possiamo iniziare a vedere che si crea Inizia a crearsi qualcosa, ma cioè del casino.

Quindi la prima cosa da fare è andare a definire un flex.

In questo caso io voglio dire agli elementi Stai una destra e una sinistra da una parte all'altra, quindi in questo caso prendo i miei link.

In questo caso sono uno, due, tre e me li porto.

Dall'altra parte del container left nel momento in cui le porte d'altra parte automaticamente vengono inviati a sinistra o a destra a seconda di quello che è la casistica di quello che voglio fare qua la stessa cosa per quello che ho fatto prima do un altro con te in un altro flex dico di stare al centro e come vedete si creano ancora la situazione di prima.

Se io qui dico a livello di colonne di stare lontani perché tutti quanti si allontanano tranne questi che sono tutti insieme, volesse anche questi dare un altro left delle colonne vedete che tutti quanti si allontanano.

Quindi è sempre un discorso di avere contenitori sui contenitori sui contenitori.

Qualora in questo caso mi servisse che le due icone siano sociali insieme, basta inserire un bloc chiamarlo social icon gruppo quindi abbastanza parlante anche e puoi inserire direttamente qui all'interno lì con i social che vi servono e fare quello che mi ha fatto prima flex colonne sedici pixel dodici pixel in questo caso possiamo avere qua solo un contattaci e questo sarà un link particolare, un contact link che magari lo possiamo anche utilizzare da altre parti e questo lo facciamo che abbiamo fatto questo simile possiamo farlo anche uguale, utilizzando sempre Hildy Block All'interno.

Quindi il di blocco ci serve fondamentalmente per quello, per avere una sorta di contenitore tutte le volte e inserire una sorta di matrioske.

E da una parte e dall'altra se voglio inserire il contenitore del suo qui dentro.

Quindi adesso il bloc con l'altro questo blocco quello che sia online.

Quindi gli do una chance, un pixel al cento percento del contenitore.

E qua poi posso creare e avere un contact link con questo in verticale e dare alla linea Red un colore specifico.

Quello é specifico che non è qui, ma è qua.

All'interno del background.

Vedete che il colore si è creato.

Ora posso andare a inserire un pixel se voglio avere prima uno, poi l'altro l'ho semplicemente porto sopra il Contact Link.

Vedete, quello che si crea adesso è quella situazione dove possiamo avere un gap, non delle colonne.

Perché non è quello che ci serve in questo momento, ma della roba.

Vedete, voglio che siano lontani.

Andiamo.

Questo può essere sei pixel qua posso fare, ehm otto pixel all'incirca.

É questo trasformarlo in bianco.

Vedete, è la stessa cosa che abbiamo creato qui.

Ok, quindi qui posso fare un'altra cosa posso sempre mettere il mio? Posso utilizzare tax block che è un elemento spur amente testuale che non ha nessun tipo di interattività.

Ok e posso andare a inserirlo all'interno del link ma come vi dicevo non possiamo inserire il link dentro gli altri link, quindi bisogna sempre utilizzare il nostro famoso block.

Quindi qui ad inserire il link e sopra il texas block per creare poi quello che sarà questo andiamo a vedere com'è fatto questo elemento così andiamo a capirlo e a tracciarlo insieme e a vederlo da una parte all'altra questo è un libro.

Questo invece è un testo cariche.

È semplicemente questo per creare questo testo qua.

Ok, io devo dare prima prendere il test.

Questa è la del testo base.

Ok al testo base creo io mangi fuori da un'auto layout metto un quattro pixel.

Inizialmente era un film, un colore che può essere il nero per cercare di avere un colore più simile.

Vediamo esattamente quello che c' è qui.

Questo ok inizia a essere sempre più simile e poi quattro quattro qua inizia a crearsi un vediamo che c' è più spazio sotto che sopra, quindi decide di aprire questo è di fare meno spazio sopra a livello visivo di due.

Tanto è solamente per darci un'idea.

Poi, come vedete visto, devo aggiornare comunque all'interno del web.

Dopo qua come radius due pixel vedete che ho creato questo elemento, quindi riprendiamo questo stesso elemento.

Dall'altra parte prendo di block tex bloc.

Ok? E creo l'hubble.

Che cosa faccio? All'interno? Vediamo che proprietà facciamo finta che questo sia inter.

Okay, vedete che a seconda tipografia tra l'altro cambia anche il resto? Quindi intorno a due come la prima e la seconda tipografia.

Purtroppo L'elemento deve essere cambiato perché la tipografia che ha scelto prima a una gestione della spazzatura diversa rispetto a quella che ho scelto qui All'inter è molto più compatto.

Ma è una semplice scelta.

Dipende sempre dal tipo della tipologia di font.

Torniamo qui.

Abbiamo due pixel.

Dodici pixel di rand, quindi mettiamo dodici pixel bold let's passing due pixel, tutina per casa.

É bianco? No, è un elemento sia bianco l'elemento interno.

Vede che si è creato questo? Ora voglio scrivere Comics on Coming soon.

Okay, che vedete qui? La label che si è creato va a lavorare insieme al d block interamente.

Vedete che parte col de block.

Quindi quello che voglio fare Flex Vertical.

Ok, quindi questa la chiamo Item cui doppia double dai temporali e poi vado a inserire il link sotto e a Lowell sopra.

Ok, Sempre più simile.

Ora, questo elemento qua.

Una volta che l'ho portata dall'altra parte, inizia a creare quello che c' è qui dentro.

Quattro quattro due.

Quindi quattro come padding interno e due.

Ok, vediamo il risultato.

E adesso vediamo il risultato di come avviene il colore dietro, ovvero il background-color.

Quindi riprendiamo il colore che ci dentro.

Quindi cinque F porta dall'altra parte, lo seleziona qui e vedete che si creda questo elemento.

Una volta che iniziamo a creare questo tipo di elementi, inizialmente si inizia a lavorare con gli elementi veri e propri.

Quindi, passando da questo punto di vista, noi possiamo vedere qui come tutte queste proprietà possono passare da una parte all'altra.

Quindi in questo caso Light Em, vorrei averlo centrato verticale.

Ok, perfetto.

Quindi cosa ho fatto qui? Se noi abbiamo il flax, possiamo dire lo start.

Quindi ripartire tutto a sinistra, di partire in centro e stare in alla sinistra o di prendere il totale larghezza dell'elemento.

Solitamente io consiglio sempre lo start secondo la tipologia di quello che vi serve per riuscire a dare piu' un'idea più chiara di quello che stiamo facendo.

Qua abbiamo vediamo che la differenza tra una e l'altra sono dodici pixel, quindi prendiamo voglio trasformare esattamente come questo.

Quindi ha un light gray a tre a tre.

Inserisco il colore qua dentro quando il suo colore qua dentro quello che faccio è aggiungermi quello nella palette e questo è esattamente esattamente identico a quello che ci è dentro film.

Quindi vi prendete qua.

Mettere una paletta era inserito qui dento dark gray esattamente uguale identico.

Quindi se avete nominato prima i colori qui poi non mette dall'altra parte va bene benissimo.

Ancora non molto bene.

Quindi qui voglio utilizzare poi una stacco da una parte all'altra da una l'ebola al testo e qui inizia a mettere ad esempio un otto pixel.

Vedete che poi si aggiusta.

Vedete che qua invece sono dodici pixel.

Quindi prendo aggiungo dodici e inizia a è sempre essere più simile a quello che sto disegnando.

Dall'altra parte qui Iniziamo ad avere un elemento interessante il container right.

Quindi qua non gli date ancora una tipologia di di flex.

Lo do adesso e gli dico di stare uno accanto all'altro come colonna ricordatevi sempre il è la tipologia di elemento orizzontale, mentre invece questo é quello verticale.

Se io qua vado ad aggiungere altri si creano dei gap tra una colonna e l'altra all'interno di quaranta bix eccetera eccetera.

Però questo non è il caso che abbiamo qua lo vedete qua? Cioè tutto un blocco unico che si chiamava per menu di qui posso fare due cose anzi quello che voleva fare inserire un'altra liplock all'interno quindi metto il nostro link all'interno del the block che ho appena selezionò appena creato posso anche nominare la stessa maniera verrà per me now ora per me una volta che si crea questo io non ho ancora dato uno stile essere lodoli flex o alle quindi prima identico tutti quanti elementi di stare giu' a destra e gli do come colonna un elemento vediamo quello che c' è qua ottanta no, se no quaranta tra una parte e l'altra quindi torno all'interno del mio elemento gli do un quaranta pixel ok, inizia a crearlo dall'altra parte questo elemento invece a ottanta pixel, quindi torno prima il container left invece di mettere quaranta metto ottanta come vedete qua inizia a crearsi qualcosa.

Ok? Se noi prendiamo il nostro Heather, vediamo che a destra abbiamo preso due pixel e a destra trentadue pixel in alto, quarantotto e in basso quarantotto.

Quindi andiamo a creare questo.

Possiamo fare in due modi o attraverso questo componente.

Quindi ho tenuto due pixel trentadue pixel e poi mi creo il padding interno viene in questo caso quarantotto più quarantotto quarantotto qua il quarantotto.

Vedete, ho iniziato a vero e proprio leader vero e proprio inizio alla fine riprendo anche il link.

La nomenclatura proprio corretta inizia a colorarsi.

Quando abbiamo questa casistica vedete che se io cancello quello che ci è sopra il contenitore sopra vedete che è molto molto simile a quello che abbiamo fatto qua.

Come elemento di Eder iniziano a esserci una tipografia corretta, gli elementi giusti e abbiamo il nostro primo componente.

Ora iniziamo a vedere appunto i componenti di cui si parla prima, quindi in questo caso abbiamo finito di costruire un simbolo in questo caso mettero' create symbol e un Eder qua all'interno symbol e crea un Eder all'interno.

Una volta che questo devo iniziare a definire per tutti gli altri anche le casistiche di quello che si vedrà.

Quindi io vi consiglio sempre di lavorare o con questo metodo, oppure direttamente con Jabbar che vi dà delle possibilità sicuramente più interessanti e più facili da progettare all'interno del nostro contesto con un risultato abbastanza simile rispetto a quello che vi ho fatto vedere io.

L'importante è sempre capire quali sono le esigenze della tipologia di progetto e cosa si vuol fare, quindi in questo caso noi vediamo che ho fatto lehder.

Se puoi, prendo e aggiusto questo adesso mobile si crea questo menu e si crea effetti e si apre e si chiude il menu con un'animazione.

Questa è più complessa da riuscire a creare, ma all'interno l'idea è quella di utilizzare un pochino il file lotti e dall'altra parte alcuni codici custom che si possono trovare all'interno di alcune risorse che vi lascerà direttamente all'interno del corso.

In questo modo però possiamo avere effettivamente un un vero e proprio modo di lavorare con il con il sito che è molto simile a quello che poi effettivamente andremo a fare all'interno di di film.

Quindi la regola come vi dicevo prima, iniziare racconta a disegnare bene i componenti qui dentro e quindi guardarvi bene, quali sono le dinamiche di un componente? Quali sono le cose che bisogna avere una accanto all'altra e di conseguenza puoi disegnare la cosa più idonea rispetto a quello che noi ci siamo immaginati.

Partiamo sempre mi raccomando disegnare dentro, filma e poi fare un passaggio da una parte all'altra.

Personalmente mi trovo bene a fare i passaggi in giro, quindi passando una cosa all'altra quando vedete qua questa linea che non è una classe, non è la classica linea effettiva da browser è perché abbiamo utilizzato in questo caso del codice custom per farla per far sparire.

Effettivamente torniamo è la nostra dashboard.

Torniamo al sito internet finito dall'inizio alla fine okay.

Come vedete qui nel sito internet posso vedere editing progettare.

Qua posso vedere benissimo che questo non è un componente, ma io voglio farlo diventare tale.

Quindi creo un simbolo e questo diventerà a sua volta un componente liro.

Invece, come vediamo qua è un componente vero e proprio.

Vuol dire che il componente delle proprietà che tu puoi evitare possono essere replicate, come ad esempio appunto il testo.

Se tu vuoi che ci sia effettivamente un link al testo, basta fare un click, mettere il titolo.

Ora se io arrivo e vado a cambiare questo il testo qua dentro io vado a cambiare qua crea il testo se io faccio un copia incolla dell'elemento vedete che si crea anche sotto e se questo lo chiamo in una maniera diversa, quindi mettete che lo chiamo ciao abbiamo lo stesso componente che si comporta nella medesima maniera, ma con due tipologie diverse di di contenuto, ma rispettando sempre la grafia che abbiamo pensato.

Questo ci aiuta anche nel momento in cui volessimo far diventare questo magari un ed in due o vogliamo cambiare invece di farlo.

Normal vogliamo che sia bold te cambia anche sotto e questo è importante perché ci aiuta tantissimo a dire ok l'elemento come deve essere deve essere così così oppure andare a migliorare cio' che stiamo disegnando senza dover riscrivere di fare tutte le volte lo stesso componente.

Perciò vi consiglio sempre di lavorare bene sul sugli elementi iniziali, perché una volta che si lavora bene sugli elementi iniziali, poi il resto è molto più facile da progettare, da disegnare.

È come per gli altri.

Come per tutte le cose che abbiamo visto qua fino adesso.

Ci sono tanti casi particolari nel quale dovete lavorare molto sulla tipografia, altri sui box model.

Quindi all'interno vedete qua io ho utilizzato utilizzare il video qua vuoi che ti permette di fare queste tipo di utilizzare queste tipologie di item, ovvero i pixel.

Ok, quindi sono mediamente i pixel sullo schermo vero e proprio, la percentuale cinquanta venticinque, eccetera, eccetera quelli che sono gli ma quelli che sono i rem video with il video hit sono i principali che non l'ho mai utilizzato, se non forse una volta, e li ho sempre trovati molto simili ai video white walt, videochat, videochat.

Quindi in questo caso io ho un sei di video hit, quindi l'lte zza rispetto a quello che prende nel video è di sette o otto, quindi dello schermo vero e proprio molti chiamano fiore al largo si va a ingrandire oppure diminuire, essendo importante poi nominare gli elementi in maniera molto specifica, a meno che non siano effettivamente una molto simile all'altro, come ad esempio noi abbiamo queste card info che sono tutte quante usate uguali e si chiamano card rapper, sia questa volta toccarle vedete che sia giusta neanche le altre, come il simbolo che vi dicevo prima.

Questa cosa non è altro che quello che vediamo oggi superfluo a livello dei componenti, identico con contenuto che può essere aggiornabile, ma lo stile grafico del componente si aggiorna qua all'interno per riuscire poi effettivamente ad avere una buona, buona responsabilità, responsabilità, responsabilità all'interno della di questo contenuto che stiamo creando tutti gli elementi che vedete come invece il countdown qui dentro hanno tutti comunque un minimo di codice tutti gli elementi.

In generale quando si cerca di andare più sul cast non bisogna per forza utilizzare un minimo di codice e da lì ci si ci si scampa poco.

Ma quello che posso dirvi è che io non sono un programmatore, ma sono riuscito a integrare ad esempio questo trovando un buon tutorial che mi diceva di come effettivamente costruire tutto il timer dall'inizio alla fine questo codice non ho fatto altro che ricopiare lo da un forum che era presente in tre due, quindi è importante che vi guardiate anche i canali web stesso per riuscire a capire cose particolari che non possono essere fatte semplicemente sapendo utilizza il programma, ma bisogna utilizzare molte altre cose che grazie a quelle si può riuscire davvero a creare qualcosa di particolare, di custom ed effettivamente molto carino.

Quindi, come vi dicevo prima, ci sono una serie di è cose che si possono fare come altrimenti, come ad esempio questa, che è un setting particolare per far sparire proprio la scroll bar o per darli proprio uno scrub, un colore nostro, quindi in questo caso utilizzato proprio questi due elementi inseriti uno sono html, webkit, scroll bar, fam, quindi colore della barra sotto.

E questa realtà che il colore della barra vero e proprio questo è molto interessante perché alla fine ci consente di avere una buona, una buona persona l'intenzione degli elementi e facendo questo possiamo migliorarci sempre di più all'interno di WhatsApp senza poi andare a fare troppe personalizzazioni, ma aggiungendo solamente dei piccoli frammenti di codice che ci aiutano poi nel visualizzare l'informazione nel rendere più chiara un'animazione o nel team aiutarci nell'avere qualcosa di un pochino piu' custom.

Dopo vedremo un attimo quali sono le cose un po' particolari che si possono fare mentre la Wallflower e quali sono le cose sulle quali quando creato un'auto dovete stare attenti