Mini guida al primo approccio sul Front-end

Come diventare Front-end developer

Lo sviluppo web si divide in due macro aree: front-end e 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 diventare Front end developer: i primi passi

Per muovere i primi passi in questo mondo è consigliabile, se non necessario, avere dimestichezza con alcuni linguaggi di markup/ programmazione come Html5, Css3, Javascript 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.

Come creare il mockup per un sito web

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 usare per un sito web

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?

I 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 da 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, 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 imparare a programmare

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

Dopo il 3 mesi intensivi di corso, 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.

La cosa più importante, che sia frontend, backend o fullstack, è avere delle solide basi da cui partire per poi approfondire l'aspetto più idoneo alle proprie attitudini e skills, le stesse che servono per immergersi nel mondo della programmazione.

L'hackademy risponde perfettamente a questa esigenza, in soli 3 mesi di corso intensivo potrai acquisire le competenze necessarie per scrivere codice ed avviare una nuova carriera professionale come programmatore.

Scopri qui tutte le informazioni sul corso di programmazione aulab.