Lezione gratuita dal corso Web Development
Cominciamo a costruire strutturalmente la nostra Section.
Abbiamo visto il design.
Dobbiamo riportarci adesso tutti gli elementi all'interno del markup.
Io utilizzerei per la Section un tag apposito HTML cinque.
Ci da' a disposizione il tag section che semanticamente è molto più appropriato e assegnare una classe a cui dare un nome.
Hiro mi servirà dopo per alcuni fine tuning sui posizionamenti all'interno.
Dato che dovremmo raggruppare i contenuti, sfruttiamo il nostro container.
Quindi crea un DivX con classe container.
Bene, abbiamo la nostra struttura base all'interno.
Mettiamo ai contenuti riguardando il design, noto che abbiamo un titolo che va a capo.
Dovrebbe essere un h uno.
Abbiamo un sottotitolo che un'acca tre è un link allineato a destra.
Cominciamo a riprodurli.
Già, il nostro capo, ok.
Era prima del nome H tre stretto.
Appunto, capo.
E per finire il nostro link come Karev.
Non diamo nulla per il momento.
Quando poi creeremo la section, metteremo il giusto.
Linc è aggiungiamo il contenuto.
Discover Mai Works.
Bene.
Salviamo e vediamo il risultato finale.
Ok.
Il contenuto cioè, ovviamente non è allineato come vorremmo.
Cominciamo ad applicare gli stili.
Abbiamo detto che ho applicato la classe di class-action, quindi stile rough nel mio giro e giusto per avere un'idea di quello che sarà poi le dimensioni che applicheremo anche qui applichiamo un background-color giusto per fare qualche test.
Dovendo avere un'altezza grande quanto l'intero newport, abbiamo parlato di hubot default quindi tutta l'intera superficie che l'utente vede all'atterraggio come altezza utilizzerò l'unità di misura che quindi cento che newport questo farà sì che il container si estenda nelly per tutta l'altezza del newport.
Cominciamo a vedere già il primo risultato ricarico vediamo come appunto adesso la section si estende tu in altezza e il giallo copre tutta la superficie.
Cominciamo a centrare gli elementi per centrare gli elementi orizzontalmente.
Aggiungere una classe non applicherò le mie regole direttamente al container, ma aggiungo piuttosto una classe al container chiamata ma direi content che fa da rapper, da contenitore e a cui applicherò gli stili.
Cominciamo ad applicare le proprietà al nostro container del contenuto.
La prima cosa che farò è fare in modo che la sua altezza quindi la proprietà hit sia pari al contenitore padre, quindi all'altezza del cento per cento in maniera tale che reti LTE zza della section e dopodiché applicherò le proprietà di Xbox per poter centrare il mio contenuto verticalmente, quindi display flex giusti, fai content ehm flack federation Colum e per finire giustifichi content center salviamo e ricarichiamo.
Vediamo come il nostro contenuto adesso è centrato c' è ancora da fare qualche fine tuning adesso ce ne occupiamo, aggiungerei del margine tra titolo e sottotitolo, quindi direi di aggiungere un margine quarantotto ecco, in realtà io aggiungerei un margine a tutti i nostri ex perché ci servirà poi per separare un po', le intestazioni da quelli che saranno i contenuti e i paragrafi.
Per fare questo potro' applicare l'intera regola hai a tutti e tre i nostri helix semplicemente separandoli da virgola nella definizione della regola sul css.
Quindi mettero' un margin-bottom direi di pixel salvando vedo gia' il risultato vero che già si distanziano gli elementi.
Altro fine tuning dovrei allineare il link a destra, quindi torno su index html e applica una classe applico una classe per tar ghettizzare il nostro link è poter applicare una regola specifica, quindi direi una classe chiamata si'.
Lo citiamo e tornando sul css assegnero' a hiro gta è una proprietà flex che mi consente di allineare il singolo elemento.
Quindi alain self, in questo caso destra flex in salvo.
Ricarico è il nostro link allineato correttamente.
Io direi che a questo punto possiamo rimuovere il nostro background.
Ok, ci siamo quasi.
Andiamo a vedere il design.
Notiamo che c'è ancora un dettaglio.
Il background è un blu che va a sfumare.
In questo caso possiamo applicare come background ingrediente per creare un gradiente.
Potrei farlo a mano, ma esistono molti tool online che ci consentono di crearla agevolmente.
Uno di questi è per esempio si sa gradiente.
Ce ne sono tantissimi.
Io direi che questo può andar bene.
Si tratta di inserire il colore, i i colori di partenza e i vari sto point e poi definire anche l'orientamento del gradiente.
Quindi verticale, orizzontale o eventualmente anche radiale.
Nel nostro caso vogliamo ingrediente che sia orientato verticalmente e che cominci con un blu scuro.
Prendo il blu scuro che fa da background alla pagina.
Vado sul film ma é prendo lo sfondo il sale esadecimale dello sfondo e lo applico al mio tool.
Okay.
E poi direi che bastano a noi due colori.
Il secondo colore sarà invece quel blu che fa da background class-action.
A noi bastano due colori per il nostro gradiente, quindi setter o anche il colore del blu della nostra section e vediamo come già il gradiente assomiglia a quello che vogliamo.
Possiamo iniziare a magari giocare un po' con il punto di stop del gradiente, quindi cercare di ridurre la parte, quella più scura, così com'è da design e cercare di renderlo più fedele a quello che è la grafica.
Ok, direi che così può andare bene un un trenta percento come punto di stop può andare.
Può andare bene.
Quindi quello che faro' adesso, eh? Copiare il codice che mi ha generato il tool e andarlo a inserire nella mia Section.
Quindi tornerò sulla mia Junction é in collera o la regola per ingrediente, salvo ricarico.
Ed ecco applica del gradiente.
Abbiamo completato la prima Section che è quella del liro che darà il benvenuto ai nostri visitatori sulla pagina
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.