Lezione dal corso Web Design e Webflow
Okay.
Andando avanti possiamo vedere All'interno, una delle parti fondamentali che è la trasposizione da ex top a mobile.
Quindi bisogna sempre cambiare tutte le diverse casistiche.
Quello che sarà la visualizzazione in alcune volte addirittura è il programma stesso.
In questo caso puo' a venirci incontro quando passiamo direttamente in mobili, tablet o da altre parti di visualizzazione perché prende direttamente la visualizzazione che c' è sud.
Stop.
E poi da lì cambia effettivamente.
Come dite qua leggermente.
Il movimento è cambiato.
Non è solamente quello.
Ok, quindi vedete che qui c' è un qualcosa a livello proprio di griglia che viene cambiato rispetto a prima.
Quindi qui ce ne sono tre.
Ce ne sono due su mobile.
È ancora diverso.
Quindi abbiamo questa casistica dove vedo tutti gli elementi in questa maniera.
Uno sotto l'altro Progettare questi significa uno ci crede di capire come ci immaginiamo.
Quindi anche qui utilizzare il discorso sempre della Vai su, Vai su back Stop.
Qui abbiamo due elementi.
Questo è il mobile.
Questo index top.
Esatto.
Questo Aicon info e poi c' è quello mobile.
Ok, vediamo come sono diversi questi due elementi.
È da una parte uno è grande.
Quattrocento novantasei pixel e duecento novanta duecento ventotto di hit perché viene automaticamente ehmm lightning, ovviamente creata da quello che il contenitore dentro quindi l'icona in questo caso è grande ottanta pixel e poi il resto degli elementi si vanno a parlare l'uno con l'altro come sempre come creiamo questo elemento è fatto da un'immagine un taxi block e poi un contenitore.
Ora ormai dovremmo essere in grado di saper fare questo elemento all'interno quindi pensiamo lo qui come l'abbiamo creato abbiamo un container, quindi questo sarà il nostro block.
Poi all'interno possiamo avere insomma bene che più cose di te che cuoce, molta più roba dentro nascosta per ora pensiamo solamente all'immagine e al testo, poi magari possiamo anche non metterlo questo questo è è questa proprietà quindi ha un background un'immagine e un titolo.
Tornando dall'altra parte voglio creare questo elemento e adesso decido di crearlo.
Da zero viene creo un'altra ancora sotto, quindi in questo caso quando è definire un block dentro al block ci inserisco un'immagine, quindi vado qua dentro all'interno dei media, metto dentro un'immagine e poi come ultimo metto all'interno un testo, quindi in questo caso puo' succedere un heading oppure un paragrafo in questo caso vuole scegliere un big paragraph da mettere dentro tornando a noi, questo è il mio di block che è esattamente quello di prima.
Vediamo un attimo quali sono i parametri di questa sedici? Trentadue, trentadue.
Quindi qua tenendo premuto option posso toccare entrambi gli elementi a livello a livello di spazzatura.
E poi trentadue, trentadue, trentatre, trentadue che si viene a creare sono due modi per farlo o testuale, oppure trascinando con drag drop quello che faccio poi dall'altra parte è darli una altezza una ragazza fissa, quindi in questo caso un guid.
Abbiamo qui un quiz una stock di sette sette sette c.
Okay, abbiamo un radius di sedici.
Andiamo a mettere il radius all'interno di questo contenitore qui, quindi sedici pixel che si sono creati sedici pixel indietro e qua abbiamo l'immagine.
Quindi qui posso mettere un big paragrafo e andare a mettere ad esempio quelle che sono le nostre nostri, quindi ventotto pixel.
In questo caso potrei mettere anche un trentadue pixel.
Trentadue pixel.
Scusate qua Trentadue pixel.
Perché questo è tutto questo? Perché si è creato il tutto il casino dentro.
Qui possiamo mettere un trentadue pixel a livello di grandezza e qua ci mettiamo un ventotto così effettivamente quello che stiamo producendo dall'altra parte quindi un ventotto pixel e poi qui all'interno quali sono i vostri elettori di competenze? Andare coppia incollarlo qui dentro Ok, qui ormai abbiamo capito che sono gli stessi elementi che si utilizzano, quindi Flax possiamo utilizzarlo qua dentro, ma possiamo utilizzare anche Ingrid, quello che ci pare.
Io per comodità, come dicevo prima, mi piace utilizzare Flakes perché è più semplice all'interno da visualizzare.
Quindi io qui metto un vertical da una parte all'altra a un'immagine.
Questa immagine adesso è così grande perché non ha un una grandezza specifica.
Quindi immagino Icon qua metto un cinquanta pixel per cento pixel.
Ok, qui possiamo vedere come effettivamente abbiamo creato l'elemento, che è molto simile a quello che abbiamo creato.
Dall'altra parte è la stessa cosa che abbiamo fatto prima.
Esportiamo le diverse icone, in questo caso webpage utilizziamo sempre le nostre cose e dei media.
Qui possiamo metterne anche una di queste, perché funziona esattamente come quello.
Abbiamo visto dall'altra parte.
Voglio semplicemente selezionare qui direttamente, quindi chiusi.
Ma scelgo l'immagine che mi piace e le inserisco qui dentro.
Una volta abbiamo fatto questo come tipologia, io poi posso dire effettivamente al sistema ok di essere Netflix e di avere la famosa il discorso del gup del collo Mm's.
Quindi qua abbiamo visto che C' è un sedici.
Proviamo a aumentarlo.
In questo caso un altro, quindi possiamo fare un ventiquattro pixel, ok, dei quattro pixel.
E quindi abbiamo creato lo stesso identico elemento che C' era sopra.
Dobbiamo fare esattamente quello che cieli.
Quindi voglio creare due block uno accanto All'altro e qui posso creare una Section on the Block.
Per me potrebbe starci creare un blocco d'acqua all'interno.
Okay, ovviamente Section non possono entrare dentro l'altra action Jackson deve sempre stare a parte rispetto all'altra quello che ho fatto semplicemente mettere tutti i contenuti all'interno di questo libro.
I due contenuti ora sono all'interno di questi.
Quindi io posso chiamarlo card rapper.
Ora fare un flex é un horizontal e poi dirli un cento percento del contenitore.
E dentro dirò a ciascuna di queste due card ok di prendersi una il cinquanta percento dell'umiltà e l'altra il cinquanta percento del with.
Ora, con questo io posso avere una colonna.
É qui.
Posso andare a dare una spazzatura.
Volendo mi devo questi elementi.
Questo lo lo nomina un'altra parte lo chiamo card.
Mhm va bene, ne partiamo.
Quindi questo il cento per cento e all'interno columns di ventiquattro pixel.
Vedete che tutti gli elementi si vanno a riaggiornare se io inserisco questi block all'interno il big paragraph quindi a destra vede che esattamente l'elemento che abbiamo sopra uguale identico con ci sono delle differenze sicuramente rispetto agli elementi sopra sui padding sui margini ma a livello di contenuti democrazia stessa cosa quando passi mobile vediamo che questi due elementi non sono il massimo da vedere così eh poi così ancora peggio.
Quindi quello che facciamo solitamente è toccare direttamente i componenti che sono qui.
Torniamo un attimo sul nostro componente cardine un rapper come vediamo qui all'interno il flax horizontal perché è riuscito a prendersi la proprietà dal backstop come abbiamo fatto prima.
Quindi ora lo inseriamo in verticale ok, qui iniziamo a vedere che inizia a crearsi le collum chiaramente non ci sono più perché stiamo creando un qualcosa di senza senza colonne ma solamente row e quindi tocca direttamente questi che con sedici pixel okay poi all'interno ho il block è il momento giusto, la mente in cinquanta percento.
Quindi adesso gli dico di prendersi l'intero contenitore di quello che ho é all'interno.
Poi ho i sedici pixel a destra e sinistra andro' quindi poi a toccare quelle che sono le tipografie qui all'interno cercando di capire come riuscire a definirlo nel migliore dei modi.
Anche qui aggiorniamo quello che è il testo del remake con okay uguale anche le diverse cose qui all'interno quindi forse sta meglio e questo invece anche a otto dodici stanotte.
Ok, quindi in questo modo avevo creato un componente nella parte dall'altra Si, io torno sul mobile, quindi in questo caso questo tipo di mobile posso vedere che comunque la stessa proprietà è stata presa anche dagli altri elementi in maniera meno magari presente, ma comunque li posso vedere già qua, probabilmente lo farai verticale e anche qui Andrea a elaborare in maniera diversa il cento per cento e poi selezionare tutti i tuoi contenuti e in questo caso dare un po' di roba da una parte all'altra e questo si viene a creare poi l'elemento effettivo.
Quindi poi avro' mio elemento che è ben visualizzato dentro al sex stop tablet non vai.
Ok, quindi la lezione da capire qua dentro, eh? Gli elementi mobili elementi in Dexter devo sempre essere tutti quanti visualizzati.
Molto spesso si è toccata una parte si va a modificare anche il resto.
Non sempre, ma ogni tanto succede.
Infatti spesso mi capita di dover tornare indietro per evitare di vedere magari delle cose che si rompano.
Quindi è normale, è naturale perché molto spesso sono cose che dipendono una dall'altra, magari se avete messo una classe all'interno se avete cambiato un testo, se avete aggiornato un colore, quindi a seconda della tipologia di quello che state facendo bisogna sempre contro gli elementi che produciamo e a come vengono.
Vengono visualizzati poi su mobile tablet ed ex top.
Altrimenti adesso che magari cambiate qualcosa sul mobile, poi tornate sul desktop ed è tutto rotto e questo sicuramente non è il massimo.
Quindi nella prossima lezione vedremo meglio la parte legata al allo space chasing cercando di capire un attimo quegli elementi utilizzare è perché utilizzare alcuni rispetto ad altri e come le due cose si possono parlare molto bene tra film e lo anche a livello di interazione
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.