Mini Guida al primo approccio sul Front-end

Mini Guida al primo approccio sul Front-end


Cosa si deve sapere prima di creare un Front-end efficace

Lo sviluppo web si divide, sostanzialmente, in due macro aree: Il Front-end ed il Back-end.
Il Front-end riguarda la parte di un sito web visibile all’utente e con la quale l’utente stesso può interagire.

Come muovo i miei primi passi nel mondo del Frontend?

Per muovere i primi passi in questo mondo è consigliabile, se non necessario, avere dimestichezza con alcuni linguaggi di markup/ programmazione come Html5Css3Javascript e alcuni tool quali Adobe XD o Adobe Illustrator. Questo Know-how si può apprendere in modo autonomo o ancora meglio con un corso per sviluppatore web.

Indipendentemente dal framework utilizzato è buona norma, per un buon frontendista, avere sottomano un MockUp. Il MockUp è una realizzazione a scopo illustrativo o meramente espositivo di un progetto che dovrà essere realizzato.

Per costruire un ottimo MockUp interattivo è consigliabile l’utilizzo di Adobe XD, un programma che nasce proprio per questo scopo. Grazie ad Adobe XD (experience design) è possibile creare dei MockUp interattivi nei quali potremo inserire anche collegamenti tra un foglio di lavoro ed un altro e transizioni di ogni genere.
Questo programma è rilasciato in via del tutto gratuita sul sito di Adobe.

Il MockUp è pronto. Cominciamo!

Una volta definite le linee guida si comincia a strutturare la base, lo scheletro vero e proprio del progetto utilizzando Html5.
Immaginiamo per un istante di dover realizzare un quadro: il telaio, la tela e i chiodini sono il linguaggio di MarkUp Html5 che ci permette, appunto, di creare la base di tutti gli elementi sui quali andremo a lavorare.
Una volta definito lo scheletro e ricreata la struttura del MockUp, si comincia a lavorare con Css3.

Css3 rappresenta i colori che vengono utilizzati sulla tela del nostro quadro: grazie a questo linguaggio potremo definire colori, grandezze, posizioni, font e tanto altro.
Ovviamente il lavoro non finisce qui. Per impreziosire e migliorare il lavoro di Frontend sul proprio progetto si possono utilizzare librerie esterne come Bootstrap, Animate.css e tante altre.

Quali tool ci permettono di migliorare il nostro progetto?

Di certo, in fase di creazione, è fondamentale definire delle linee guida come per esempio Font, Colori etc.
Quando si scelgono dei colori per un progetto (eccezion fatta per dei colori predefiniti di un cliente) bisogna far attenzione a determinati parametri:

  • Che messaggio vogliamo trasmettere?
  • Qual è il pubblico a cui è dedicato il progetto?

colori, come quasi tutto ciò che concerne la comunicazione, sono permeati di significati intrinsechi: per esempio, se vogliamo trasmettere un’idea di relax, professionalità o sincerità utilizzeremo una palette di colori sul Blu. Ogni colore ha un suo significato: il consiglio principale è quello di non superare mai i tre colori in un progetto o si perderà qualsiasi tipo di coerenza.

Per far sì che i colori siano coerenti tra loro possiamo servirci di tool gratuiti come per esempio Adobe Color, che ci darà la possibilità di creare una palette cromatica lineare.
Altra scelta fondamentale in fase di creazione di un progetto è quella dei Font (i caratteri) da utilizzare. Solitamente i Font sono due: il primo usare per i titoli, il secondo per i paragrafi.

Google Font è nostro amico perché ci permette di scegliere tra una vasta gamma di Font gratuiti.
Google Font, inoltre, può essere incluso in un progetto e quindi può essere tranquillamente utilizzato senza dover scaricare ogni volta un font diverso.

Se nel progetto è presente un logo con una scritta che possiede un Font già predefinito ovviamente lo si utilizzerà per i titoli.

Uno dei consigli più utili per poter partire e intraprendere la strada per diventare un buon frontendista, è quello di prendere spunto e, magari, copiare in locale layout di siti famosi per esercitarsi e migliorarsi ogni giorno!

Come diventare sviluppatore web

L’Hackademy di Aulab forma sviluppatori full stack , sia sulla parte del frontend che su quella del backend.

Dopo il corso di 3 mesi intensivi, gli studenti possono scegliere liberamente a quale parte della programmazione web dedicarsi. C’è chi è più portato per la grafica e per l’estetica e quindi probabilmente si dedicherà al frontend, e chi è appassionato di codice e funzioni e sceglierà la parte backend.

È importante avere basi solide da cui partire per poi approfondire l’aspetto più idoneo alle proprie attitudini e skills, quindi per entrare nel mondo della programmazione a 360° scopri tutte le informazioni sul corso online per web developer.

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo