Lezione dal corso Web Development
Adesso andiamo a creare la lista il listato di immagini a corredo del nostro elemento di portfolio.
Vediamo che dopo subito dopo la parte di informazioni, troviamo le nostre immagini elencate verticalmente con un effetto di dislocazione, cioè qualcuna più allineata verso verso destra, qualcuna centrata qualcuna verso sinistra.
Anche in questo caso, secondo me, possiamo utilizzare le xbox per gestire questi allineamenti, questi aggiustamenti di light.
Ma la prima cosa che possiamo fare innanzitutto a importare le immagini qui sul mio desktop ho già pronta la cartella delle immagini che il designer mi ha fornito già ritagliate, già nominate e in formato jpeg.
Quindi quello che faro' sarà semplicemente importare questa cartella immagini all'interno del mio progetto per cui la sposto nella nella root quindi del nostro progetto proprio allo stesso livello del file index e comincerò a elencarle all'interno del foglio html.
Ma ci troviamo all'interno del primo elemento del portfolio subito dopo working for io creerei un divo che farà da rapper da contenitore.
In questo caso abbiamo una classe, chiamiamola semplicemente immagino al suo interno.
Comincerò a elencare le immagini con il tag immagino quindi crea un tag e specifiche rough il source, quindi il puntamento all'immagine, che in questo caso sarà relativo alla stessa cartella in cui si trova il mio file index.
Quindi se guardiamo un attimo, apriamo velocemente la Sai bar di via Scott per vedere un po' la alberature.
Vediamo che la cartella immagini allo stesso livello di index html, per cui per raggiungere l'immagine che voglio in questo caso sarà la prima immagine dell'elemento fluide glass.
Io dovrò specificare un pat dove il primo frammento sarà appunto la stessa cartella immagini e quindi entro dentro la cartella immagini e da lì dentro poi riesco ad riesce a abbastanza intelligente da elencarvi da suggerirmi il contenuto della cartella.
Io seleziono l'immagine che mi serve, quindi Douglas una é salvo.
Diamo subito un'occhiata al nostro al nostro sito vediamo comparire la prima immagine non appena ricarichiamo la pagina, quindi siamo sulla buona strada.
Cominciamo a raggiungere le altre molto velocemente a totem cartella immagini riesco ad mi suggerisce e mettiamo la seconda.
E per finire mettiamo anche la terza qui l'editor ci aiuta tanto salviamo Ecco le nostre immagini ok, sono tutte allineate orizzontalmente.
Cominciamo a giocare con la disposizione.
Io comincerei a dargli un default, per cui le metterei centrate e metterei centrate poi sulla base di di questo allineamento cominciare a creare delle classi che ci facciano da utilities per poter poi decidere se spostarne alcune a destra e alcuna sinistra.
Torniamo sul l'editor.
Chiudiamo il pannello con il file explorer in questo momento non ci serve e focalizziamoci sul mar Cap.
Creiamo all'interno del foglio css, il selettore per il container di Magis e cominciamo ad assegnare la proprietà display display flex.
In questo caso abbiamo un allineamento verticale, quindi una flex Direction colon e volendo centrare i nostri elementi verticalmente, utilizziamo allinei items center.
Okay, salviamo ricarichiamo e tutte le nostre immagini sono centrate verticalmente.
Ovviamente servirebbe dare un po' di spazzatura tra l'una e l'altra.
Sono tutte abbastanza appiccicate, quindi definiamo la nuova regola che come selettore avrà il magistrato e il nostro container é img spazio mg.
Quindi le immagini contenute dentro il container, immagino alle immagini io darei un margine botto di ma facciamo ventiquattro pix salviamo ricarichiamo, vediamo l'effetto.
Beh, cominciano a distanziarsi.
Forse anche qualcosina in piu' apriamo anche un trentasei pixel.
Dai, ma si' margin-bottom trentasei.
Direi che va bene.
L'abbiamo distanziato abbastanza.
Adesso, tornando sul sul, sul design, cominciamo ad assegnare un po' di allineamenti a destra a sinistra la prima immagine sarà tutta verso verso destra, quella quella centrale resta centrata, mentre invece la terza immagine andrà a sinistra.
E sappiamo che con le Xbox e abbiamo la possibilità di far ghettizzare uno specifico elemento uno specifico frexit quindi e andare a dargli un allineamento ben preciso.
Quindi utilizzeremo in questo caso la proprietà line self piuttosto che in innestare nuovi selettori.
Creeremo quelle che in gergo nove in gergo vengono chiamate delle delle utilities.
Quindi creeremo delle classi mirate con il solo scopo di applicare questa regola.
Per cui io farei una una prima utile chiamata immagino right, il cui unico scopo sarà quello di assegnare Alain Self su flex.
Ok, per avere l'allineamento a destra contestualmente posso crearne un'altra che chiamero' invece immagino left e a questa assegnerò alla in self takes start.
Ok, avendo queste due utili nel mio markup, posso adesso divertirmi e cominciare ad assegnare queste classi.
Quindi alla prima immagine assegnero' una classe, immagino immagine right l'ultima è la seconda.
Resta così com'è centrata, mentre sulla terza assegnerò il Magic Bullet.
Abbiamo e ricarichiamo bene.
Beh, abbiamo allineato le nostre immagini come volevamo, per cui direi che il contenuto di un primo item abbiamo abbiamo completato abbiamo assemblato il primo item del nostro portfolio.
Quello che adesso ci resterà a fare è replicare la stessa struttura con le stesse classi e cambiarne solo i contenuti per creare i restanti e avere così tutta la sezione completa.
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.