Lezione dal corso Web Development
Abbiamo adesso il nostro primo elemento di portfolio creato e abbiamo inserito i tax l'intestazione.
Quello che ci resta adesso é aggiungere un blocco di informazioni, un blocco generale generico di informazioni.
Vediamo il design.
Abbiamo un layout a due colonne dove abbiamo una sorta di limbo, il che ci indica l' oggetto della dell'informazione che leggeremo e poi del testo.
Un semplice paragrafo testuale.
Quindi potremmo in questo caso utilizzare Flex Box.
Secondo me un si adatta molto per dare una fluidità a queste due aree e creata la prima riga.
Poi non faremo altro che replicare la seconda riga sfruttando gli stessi tag e le stesse classi create.
Quindi tornerai un attimo sul make-up.
Cominciamo ad abbozzare una struttura, creiamo qui un DVD con classe.
Io chiamerei working all'interno della nostra working.
Avrà un altro dive con classe.
La chiamerei Working for all e subito dopo la laurea questi qua si' coprirei e incollo la stessa riga.
Abbiamo working for content.
Cominciammo a buttar dentro un po' di un po' di test.
Vediamo cosa accade qui.
Mettiamo come lei Walkabout e come content.
Mettiamo del testo a caso.
Lauren di dieci parole.
Lorem ipsum di dieci parole.
Salviamo torniamo sulla pagina ricarichiamo bene come ci aspettavamo due elementi di tipo d v hanno un display block di default per cui sono in stock uno sopra l'altro.
Cominciamo ad applicare un po' di regole.
Torno sul mio css però la regola work in fuga é la prima cosa che posso fare è assegnare un display flex working for salviamo ricarichiamo e adesso abbiamo tutti gli elementi su una riga.
Adesso dovremmo lavorare per cercare di dargli una dimensione e distanziare lì creiamo le regole per work in fondo al gull e per work info.
Contento che mi fermo un secondo? Vado a vedere un attimo gli attributi iodato.
Ok, quindi working abbiamo weed duecento sui duecento è font-weight ok text-transform ok, ok, ma vai tornando sul design, osserviamo come la parte di label del nostro layout ha una grandezza più piccola.
Direi che è una grandezza fissa, a dispetto di quello che può essere la seconda colonna dove conterrà del testo, che quindi avrà ovviamente più respiro.
Io proverei a vincolare la grandezza della della colonna della ball per lasciare invece fluida quella che può essere il contenuto del testo.
Quindi comincerei a impostare delle regole.
Siamo dentro un contesto di flack xbox quindi posso tranquillamente alla mia working-class dichiarare un goa'uid di non so duecento pixel per esempio.
Però forzare delle regole per cui non voglio che cresca, non voglio che cresca all'aumentare o diminuire dello spazio del container in cui sono contenuti questi elementi.
Quindi del container padre per cui sedettero felix a zero eh invece darò flex inc una perché voglio che magari possano possa diminuire.
Dopodiché voglio lavorare al testo della legge stessa e aggiungero' un font-weight di seicento.
Diamogli un po' di peso per renderla più evidente e ovviamente un text-transform che lo trasformi il rapper che salviamo ricarichiamo abbiamo la nostra label creata, quindi già la prima colonna é settata e ha un'ampiezza di duecento pixel, mentre invece a tutto il resto quindi il nostro work working for content io darei una weed di settanta per cento lasciamola in percentuale quindi e dopodiché assegnerebbe i un flex un ex gru di uno perché vorrei che cresca assieme al resto del layout e flack shrink uguale a uno perché voglio che possa anche rimpicciolirsi rispetto a tutto il resto.
Salviamo ricarichiamo ok abbiamo impostato la grandezza di queste due colonne in maniera che fosse gestita da Flack Xbox.
Quello che adesso possiamo fare è stilare anche il testo in esso in esso contenuto.
Io direi che possiamo possiamo considerare questo questo contenuto testuale come un paragrafo, per cui l'elemento che ancora non abbiamo stilato, che potremmo aggiungere agli elementi base del nostro del nostro sti dei nostri stili.
Per cui torno un attimo nella sezione dove ho definito nel mio css tutti gli stili di base e aggiungo una regola per il tag del paragrafo che sarà un tag p.
Direi che in questo caso emetteremo un fonsai di ventiquattro pixel e diamo anche un margine botto di sedici piz.
Adesso torno sul nostro mark e creerò un tag pipì dentro cui andare a collocare il testo finora creato.
Quindi prende il mio lorem ipsum e lo inserisco dentro il mio tempi, quindi possiamo spostare il nostro testo all'interno del nostro tag p, quindi direi che posso tagliare e incollare qui dentro stiamo gli allineamenti, salviamo, ricarichiamo e abbiamo creato la nostra prima riga di contenuto.
Quello che faremo adesso non sarà altro che replicare le righe di contenuto per averne quanti ne vogliamo.
Quindi, osservando il layout abbiamo anche una seconda riga con le bolle chiamata output.
Io direi che possiamo replicare tranquillamente copiando e incollando.
Quindi potrei replicare questa section cambiare il testo precedente bout con output.
E perché no? Magari in questa volta inseriamo ancora più contenuto.
Vediamo come si comportano i nostri spazi.
Quindi Lorem, direi Facciamo trenta in questo caso Lorem ipsum di trenta parole Salviamo ricarichiamo.
Abbiamo realizzato la nostra sezione di contenuto.
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.