Nel mondo moderno, sempre più persone vogliono imparare a programmare, anche se non sanno da dove iniziare, ma allo stesso tempo, l'industria IT è ciò che sognano, perché essere un programmatore web è ora di moda. Per molti rappresenta il primo passo in questo mondo meraviglioso, come sviluppatori web o sviluppatori front-end junior, sviluppo front-end di base. Tuttavia, è necessario iniziare da qualche parte prima di trovare il lavoro dei propri sogni. Ecco un libro di nozioni per principianti per ottenere alcune risposte: Esiste un corso gratuito per sviluppatori front-end? Come imparare da soli online, dove trovare materiale didattico per padroneggiare HTML, CSS e JavaScript. Se conoscete l'HTML e i CSS, potete già candidarvi per la posizione di web layout designer.
Quali sono le basi dello sviluppo front-end?
L'ingresso nel mondo della programmazione web può essere difficile per chi è alle prime armi. Molti concetti suonano strani e diventano problematici nella fase di scrittura. Come scrivere: sviluppatore software o sviluppatore front-end? Forse sviluppatore front-end, o piuttosto ingegnere software front-end? In ogni caso, il più comune è l'inserimento del trattino. Sviluppatore front-end: la persona responsabile della parte visiva dell'applicazione (ciò che vediamo noi = utenti del sito).
Di solito, lo sviluppatore front-end lavora con un grafico (web designer) che fornisce la progettazione grafica. Spesso gli sviluppatori front-end hanno l'opportunità di lavorare con un UX designer che propone e crea un prototipo delle interazioni che avverranno sui siti web. Il ruolo degli sviluppatori front-end è quello di mettere insieme il tutto. Si dice che uno sviluppatore front-end abbia il compito di tagliare un progetto grafico, dividerlo in parti più piccole e codificarlo (HTML e CSS) nei siti web che gli utenti utilizzeranno.
Poi, utilizzando JavaScript, vengono aggiunte le interazioni precedentemente menzionate. Mentre HTML e CSS3 ci permettono di creare transizioni fluide e animazioni di base, JavaScript introduce tutte le interazioni avanzate tra pagina e utente. Utilizzando JavaScript, aggiungeremo un menu a discesa, uno slider sulla pagina, la convalida dei moduli, le transizioni tra le sottopagine o le animazioni avanzate e i giochi 3D (ad esempio, utilizzando Babylon-JavaScript). I dati per la logica in JavaScript provengono dal back-end dell'applicazione, da cui la collaborazione front-end-sviluppatore back-end.
Le posizioni di sviluppatore front-end variano notevolmente. Il lavoro di uno sviluppatore front-end in un'agenzia interattiva e creativa, di uno sviluppatore front-end in una società di sviluppo software, avrà un aspetto diverso, e un lavoro diverso per una persona che lavora allo sviluppo front-end di una start-up.
Uno sviluppatore front-end, partendo da progetti di taglio grafico, può evolvere verso uno sviluppatore JavaScript, un programmatore web che si occupa principalmente di scrivere la logica dell'applicazione e operazioni JavaScript avanzate. Inoltre, uno sviluppatore front-end spesso (così come uno sviluppatore back-end) deve pianificare l'architettura JavaScript dell'applicazione e selezionare consapevolmente framework e librerie per il progetto.
Lo sviluppo front-end è facile?
- L'effetto si vede subito; a differenza dell'apprendimento dello sviluppo web/back-end, la creazione di pezzi di codice anche in HTML puro ci dà immediatamente effetti visivi, che ci motivano a continuare a lavorare.
- Soglia d'ingresso bassa: sono necessarie relativamente poche competenze front-end per iniziare una carriera professionale in uno stage o in una posizione junior all'inizio.
- Molte offerte di lavoro per i junior - soprattutto quando si avvicinano le vacanze e ci sono molti stage estivi.
- Indipendenza: possiamo occuparci della creazione di siti web per conto nostro e poi prendere ordini come freelance. Dopotutto, nell'ambito delle competenze di base, dovremmo essere in grado di creare semplici siti web dalla A alla Z.
Di cosa abbiamo bisogno per lo sviluppo front-end?
Ecco la ricetta del successo. Per creare un sito web, avete bisogno di:
HTML + CSS
Questi sono gli ingredienti di base per costruire un sito web. L'HTML fornisce la struttura dei siti web - gli elementi descritti - e il CSS indica al browser l'aspetto di questi elementi. Una volta acquisita la padronanza di HTML e CSS, è possibile ricreare qualsiasi progetto (grafico) e trasformarlo in un sito web.
JavaScript
Un linguaggio di programmazione web di sviluppo front-end per la creazione di siti web. Grazie a JavaScript è possibile aggiungere interattività al sito web, cioè sviluppare siti web che rispondono alle azioni dell'utente. È anche possibile creare giochi. Si consiglia di padroneggiare almeno il codice JavaScript di base per capire come funziona il linguaggio o la logica del linguaggio di programmazione web. Poi si può passare a jQuery.
jQuery
Tecnicamente, non è un linguaggio ma una libreria JavaScript. Come un intermediario che permette di scrivere JavaScript in modo più semplice e veloce. Voi inserite il codice jQuery; la libreria si preoccupa di voi e gioca con il traduttore per passare il significato del JavaScript un po' complicato al browser. Anche se oggi jQuery è "un po' vecchiotto", consigliamo di impararlo "a richiesta": facilita l'apprendimento della logica di programmazione web e di Bootstrap (framework CSS utilizzato) e compare ancora nelle offerte di lavoro.
Quadri
Il loro compito è quello di semplificare il processo di creazione di siti web e applicazioni, fornendo soluzioni pronte per i problemi più comuni. Inoltre, forniscono un modello per sviluppare il codice in modo ordinato. Per iniziare, suggeriamo di scegliere un framework CSS, ad esempio Bootstrap (altre opzioni sono: Foundation, Pure, YAML CSS), e poi di aggiungere uno dei framework JavaScript attualmente più popolari: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Questo non è direttamente correlato alla codifica web, che, come sappiamo, viene spesso rimandata all'ultimo momento. Erroneamente, prima si inizia a usare Git, il sistema di controllo delle versioni, meglio è. Questo è l'ordine che abbiamo proposto. Naturalmente, si può fare in modo completamente diverso: saltare jQuery e imparare Bootstrap subito dopo aver padroneggiato le basi di HTML e CSS; tuttavia, vi consigliamo di non eccedere nella semplificazione e di tagliarvi fuori dalla ricerca di soluzioni scritte a mano, e di non utilizzare prefabbricati di un framework o di imparare framework JavaScript con appena una riga di JavaScript puro.
Da dove iniziare con lo sviluppo front-end?
Imparate regolarmente e cercate di applicare ogni nuova abilità nella pratica, anche in piccoli pezzi di codice con un solo scopo: mostrare ciò che avete appena imparato. Condivideteli sul web. Limitate i gruppi motivazionali su Facebook. Dopo solo 3 ore di lettura di storie motivazionali, spesso non si è 3 volte più motivati. Di solito si hanno 3 ore in meno per studiare.
Osservate il mercato e leggete i requisiti delle offerte di lavoro. Stanno cambiando! Stiamo scrivendo questo post oggi e probabilmente dovremo aggiornarlo tra un anno, visto che la tecnologia cambia. Una volta acquisite le nozioni di base: HTML CSS JavaScript, qualcosa di nuovo farà sicuramente tendenza e aggiornerete la vostra lista di cose da imparare. Cercate workshop gratuiti (per imparare dai mentori e allo stesso tempo creare contatti interessanti) e uno stage nel settore il prima possibile. Il lavoro si rivelerà il miglior insegnante.
Cos'è un esempio di sviluppo front-end?
HTML + CSS
Tre sono probabilmente i siti più famosi con corsi interattivi di sviluppo front-end per il web. Gratuiti, ben organizzati, trasmettono le conoscenze ai principianti con estrema facilità. I corsi interattivi si svolgono nel browser. Non è necessario installare nulla a casa, basta seguire il corso e i progressi vengono misurati immediatamente.
Khan Academy, Codecademy e Homeschool
Khan Academy offre materiali completamente gratuiti e la possibilità di utilizzare altri linguaggi web. Si tratta di una piattaforma educativa, non solo sullo sviluppo web. È possibile svolgere diverse attività, dagli elementi di base, tra cui HTML e CSS, agli script JavaScript più avanzati.
Codecademy offre molto materiale gratuito e interessanti percorsi di sviluppo front-end precostituiti, disponibili solo per gli utenti professionali.
Code School - a nostro avviso, il corso più organizzato. Sono costituiti da video + una parte interattiva con attività di sviluppo front-end. Il primo livello di ogni corso è gratuito, ma purtroppo il resto è a pagamento. Tuttavia, anche le parti gratuite (di solito di circa 1 ora) valgono la pena di essere viste.
Come scegliere il corso da seguire?
Consultate tutte e tre le piattaforme web. Gli argomenti si sovrappongono, ma vale la pena di affrontare alcuni argomenti doppi. In primo luogo, la ripetizione consolida le conoscenze e, in secondo luogo, ogni piattaforma front-end ha un approccio leggermente diverso all'insegnamento. La scelta è vostra. Molte persone non vogliono pagare per un Bootcamp mensile o per un corso di sviluppo web, perché hanno tutto gratis a portata di mano. Niente di strano.
La cosa peggiore è che abbiamo molti materiali e vogliamo imparare tutto ciò di cui abbiamo bisogno rapidamente, senza controllare o selezionare - avere tutto sul vassoio e fare un passo avanti oltre i materiali di base. Pertanto, se non avete tempo per tutti i corsi di front-end e il processo decisionale non è il vostro forte, potete consultare Khan Academy: Introduzione a HTML CSS-Sviluppo web.
JavaScript
Cosa sarebbe il nostro corso di sviluppo front-end senza l'uso di JavaScript? I siti interattivi di cui sopra sono ottimi. Hanno corsi di JavaScript per noi - belli, semplici, purtroppo non molto completi, ma buoni per riscaldarsi. Se avete già le basi di HTML e CSS in quanto tali, non è necessario iniziare con i suggerimenti precedenti.
Per iniziare con 9 brevi esercizi di sviluppo nell'introduzione: da JavaScript, potete basarvi sugli stessi argomenti in Udacity: JavaScript Intro, per poi passare (o subito) a un insieme più ampio di attività: HTML / JavaScript: Creare pagine web interattive.
jQuery
Un'ulteriore tappa del nostro percorso front-end, ma estremamente facoltativa. Attualmente, un corso di sviluppo front-end può fare a meno di jQuery. Soprattutto perché oggi ci sono molte nuove ed entusiasmanti opzioni per gli sviluppatori front-end, abbiamo dato un'occhiata alle offerte di lavoro e vale ancora la pena di averlo a disposizione.
Sì, Khan Academy e Codecademy hanno corsi su jQuery. Tuttavia, in questo caso, vorrei raccomandare un corso di sviluppo front-end della durata di un'ora, completamente gratuito, di jQuery di Pluralsight (ex Code School).
Apprendere i framework
In questa fase, potete scegliere voi stessi i materiali front-end e valutare la loro adeguatezza alle vostre conoscenze. Per quanto riguarda il framework Bootstrap, la costruzione di un sito web si basa su una griglia a 12 colonne, e questa conoscenza è fondamentale per capire il resto nella pratica. Bootstrap permette di creare rapidamente siti web responsive (RWD), cioè adattati ai dispositivi mobili. Se preferite imparare sotto forma di tutorial: Il corso di bootstrap è disponibile su Code academy e con Daily Web potrete creare il vostro primo slider in bootstrap in 30 minuti.
Quadri JavaScript
Attualmente, un corso decente di sviluppo front-end dovrebbe sicuramente introdurre i framework JavaScript attualmente utilizzati e insegnarne almeno uno. Potete trovare corsi interattivi con i framework su Pluralsight (ex Code School), che sono gratuiti per 14 giorni. È possibile trovare una raccolta molto ricca di materiali gratuiti su scotch.io. D'altra parte, scoprire dove trovare corsi gratuiti di sviluppo front-end per ogni framework è un argomento per un post a parte.
Ce ne sono molti. La scelta è difficile e conoscerli tutti è impossibile. Qualunque sia il framework scelto per iniziare, è sufficiente attenersi ad esso. Non saltate da un fiore all'altro perché dopo una settimana di apprendimento dello sviluppo web qualcuno vi dirà che un altro è migliore. Imparate il primo e scriveteci sopra una semplice applicazione web. Di solito, per iniziare si consigliano applicazioni come agende, liste di cose da fare e notizie di classifica. Tutto ciò di cui avete bisogno è il nome del framework e il nome dell'applicazione web che volete creare.
Esempi di corsi gratuiti:
- AngularJS
- Angular 2+ (attualmente 6, ma 4/5 sono solo un'altra versione di sviluppo front-end)
- ReactJS
- Vue.js
- Ember.js
È la fine? No! Si tratta di un ottimo inizio e di una solida base per il Junior Front-End Developer.
Cosa fare dopo questi corsi?
Iniziate a lavorare sui vostri progetti web. Come abbiamo scritto all'inizio, documentate il vostro lavoro fin dai primi passi dello sviluppo front-end e mettete il codice su GitHub, anche se è lontano dall'ideale.
Volete testare voi stessi?
Il modo migliore per consolidare ciò che avete imparato è la pratica. Il corso di front-end è una cosa, ma solo lavorando ai progetti web si impara a codificare e a risolvere i problemi da soli. Create un modulo (landing page) attraverso il quale potete inviare un'e-mail all'autore della pagina.
Create il vostro biglietto da visita - portfolio - pensate di usare JavaScript per riempire la tabella con una sequenza di Fibonacci, il vostro slider o un semplice gioco da zero. Pensate di avere già competenze di codifica ma non di grafica e quindi lo sviluppo che fate è "brutto"? Siete i benvenuti! Scegliete un progetto grafico pronto, ad esempio quello della Weekly Dev Challenge, e provate a crearlo.
Quanto tempo ci vuole per imparare le basi?
Dipende da voi. La disciplina è la cosa più importante. Per la maggior parte delle persone è più difficile imparare un linguaggio di programmazione web che dedicare del tempo a corsi che non costano nulla. Per padroneggiare le basi e creare il vostro primo sito web possono essere necessari da 1 a 3 mesi, a seconda di quanto siete ambiziosi nello sviluppo front-end.
Per padroneggiare JavaScript, aggiungerei altri 3 mesi di duro apprendimento. Suppongo che stiate lavorando, quindi dedicherete circa 5-10 ore alla settimana all'apprendimento, cioè almeno 1 ora al giorno. Non diventerete uno specialista di front-end in sei mesi, ma è un tempo sufficiente per creare una base per un ulteriore apprendimento.
Cercare aiuto online
Più di una volta, durante l'apprendimento, avrete dei problemi: Come centrare un elemento? Perché questo script non funziona? HTML e CSS hanno un aspetto diverso su Chrome rispetto a Firefox. Come diventare un professionista dello sviluppo front-end?
È normale, ma chi chiede non sbaglia.
- Google: chiedeteallo zio Google, preferibilmente in inglese.
- Stack Overflow:probabilmente le prime risposte saranno quelle di Stack Overflow. È un portale per sviluppatori web in cui gli utenti postano domande relative ai linguaggi di programmazione web e altri (di solito programmatori web più esperti) cercano di dare una risposta sullo sviluppo front-end. Le prime soluzioni migliori sono punti e l'autore della domanda può contrassegnare un commento che ha risolto il suo problema. A volte ci sono diverse o una dozzina di soluzioni, quindi vale la pena leggerle tutte e verificarle a casa propria. Se una delle soluzioni vi ha aiutato, votatela con una freccia verso l'alto.
- I gruppi di sviluppofront-endsuFacebookper principianti possono aiutarvi molto, soprattutto quando non sapete come porre il vostro problema. Caricate una schermata e il vostro codice. Non aspettatevi che qualcuno lo scriva per voi, ma i commenti vi porteranno sicuramente sulla strada giusta. Purtroppo, con domande banalmente semplici, le persone scriveranno sempre qualcosa di sgradevole: è difficile, abbiate pazienza. Per le domande relative alle start-up, consigliamo di utilizzare il gruppo Web di supporto all'avviamento, dove i moderatori si assicurano che non ci sia odio.
- CanIUse: seil vostro problema è legato al mancato funzionamento dei CSS su uno dei vostri browser, assicuratevi che quello che state usando sia supportato dalla versione che state controllando. In questo modo, si eviteranno lunghe e noiose ricerche di problemi front-end fantasma.
Conclusioni
In questo articolo avete imparato qualcosa in più sul mondo dell'IT e saremmo felici di potervi aiutare a orientarvi. Il mondo del front-end è enorme e può essere facile per un principiante perdersi in esso, ma noi ci concentriamo sull'aiutare le persone a imboccare la strada giusta. Oltre ai linguaggi web tradizionali, esiste anche un linguaggio di programmazione web senza codice. Fino a quando gli strumenti senza codice non sono diventati ampiamente disponibili, lo sviluppo di applicazioni web è stato fatto esclusivamente da programmatori web.
Fortunatamente, il tempo sta per scadere e ora qualsiasi studente che conosca la materia può creare la propria applicazione web o landing page. Dopo aver appreso le basi, anche a livello di conoscenza, di HTML e CSS, è già possibile trovare il lavoro dei propri sogni. Molti scienziati hanno notato che il linguaggio di programmazione web migliora le capacità umane e contribuisce allo sviluppo delle soft skills. Alla fine, si tratta della vostra indipendenza finanziaria. Conosciamo diversi ragazzi del mondo front-end che hanno lanciato le loro start-up e hanno fatto cose necessarie per il bene del nostro pianeta.
E, naturalmente, un approccio di questo tipo presenta dei vantaggi:
- Facilità d'uso e grande potenza.
- Grande libreria di template.
- Supporto per l'impostazione di vari parametri.
Il linguaggio di programmazione visuale o no-code è un approccio nuovo che non richiede la scrittura di codice da zero. Vi incoraggiamo a usare strumenti con un'interfaccia grafica, che è il futuro dello sviluppo web. Le applicazioni web front-end tradizionali sono molto interessanti, ma riteniamo che sia necessario innovare e che il nostro prodotto possa essere utile per voi. Desideriamo sinceramente trovare la strada giusta per padroneggiare la professione di programmatore. Questo percorso è spinoso, ma se lo padroneggiate, vi soddisferà per tutta la vita che avete trascorso in questo periodo.
