Descrizione della masterclass:
Diventare uno sviluppatore Front End significa essere in grado di costruire siti web con interfacce che siano in grado di migliorare l'esperienza utente.
Con questo percorso imparerai ad utiizzare alcuni dei linguaggi più richiesti e utilizzati, come HTML, CSS, SASS, JavaScript e jQuery. Imparerai anche ad utilizzare anche Bootstrap, il framework frontend più in voga al momento.
Durante la carriera sono previste una serie di prove basate su progetti reali. Il team Lacerba verificherà questi progetti con feedback e spunti per migliorare e alla fine ti verrà rilasciata una certificazione.
Alla fine di questo percorso sarai in grado di:
- creare siti web con HTML e CSS, partendo dalle basi e arrivando a saper creare autonomamente siti web statici.
- utilizzare JavaScript per aggiungere interattività ai tuoi siti
- utilizzare SASS per scrivere codice in maniera più efficiente e creare siti più complessi
- creare siti con Bootstrap, il framework frontend più utilizzato
- utilizzare JQuery, una delle più famose librerie di JavaScript.
Esempi di progetti che verranno realizzati durante il percorso
HTML/CSS intermedio: https://lacerbadev.github.io/portfolio-multipage/
HTML/CSS avanzato: https://lacerbadev.github.io/agency-onepage/
SASS: https://lacerbadev.github.io/app-landing/
BOOTSTRAP: https://lacerbadev.github.io/conference-landing/ - https://lacerbadev.github.io/conference-page/
JAVASCRIPT: https://lacerbadev.github.io/carta_forbice_sasso/ - https://lacerbadev.github.io/LacerGif/
Il tuo percorso
I moduli che compongono la Masterclass
CORSO SINGOLO
Corso base di HTML e CSS - Edizione 2019
Corso base di HTML e CSS - Edizione 2019
- 01. Internet e web Guarda in anteprima 2m : 34s
- 02. Linguaggi Guarda in anteprima 2m : 28s
- 03. HTML Guarda in anteprima 4m : 39s
- 04. CSS 4m : 52s
- 05. JavaScript 4m : 31s
- 06. Introduzione a HTML 3m : 7s
- 07. Il text editor - Sublime Text 1m : 54s
- 08. La struttura del codice 5m : 15s
- 09. Header e Paragraph 5m : 40s
- 10. Lists 6m : 19s
- 11. Div 2m : 35s
- 12. Title 1m : 47s
- 13. Link - Parte 1 5m : 23s
- 14. Link - Parte 2 12m : 11s
- 15. Immagini 5m : 39s
- 16. Introduzione a CSS 2m : 52s
- 17. La sintassi CSS 9m : 52s
- 18. Proprietà tipografiche 10m : 53s
- 19. Box Model - Padding, border, margin 15m : 11s
- 20. Box Model - Width, height, auto 4m : 58s
- 21. Box Model - Display 5m : 30s
- 22. Selettori complessi, class, id 4m : 30s
- 23. L'Header 11m : 16s
- 24. La Navbar 9m : 2s
- 25. Content 6m : 21s
- 26. Introduzione alla messa online del sito 40s
- 27. Utilizzare l'host di GitHub per andare online 4m : 21s
- 28. Pubblicare aggiornamenti al sito online.mp4 3m : 9s
- 29. Acquistare un dominio con Namecheap 8m : 55s
- 30. Integrare Google Analytics per misurare il traffico della Landing Page 7m : 30s
- 31. Responsive design 1m : 23s
- 32. Mockup 1m : 45s
- 33. HTML5 5m : 36s
- 34. Markup di base 5m : 39s
- 35. Header e Navigation 7m
- 36. Tag Main 3m : 6s
- 37. Gallery 4m : 33s
- 38. Sfida Footer 1m : 50s
- 39. Soluzione 2m : 53s
- 40. Favicon 4m : 33s
- 41. Normalize 2m : 55s
- 42. Approccio di sviluppo 3m : 47s
- 43. Header 6m : 12s
- 44. Chrome dev tools 2m : 27s
- 45. Sfida-Menu di navigazione 37s
- 46. Soluzione 7m : 47s
- 47. Commenti 1m : 16s
- 48. Fonts 3m : 36s
- 49. Unità di misura 7m : 5s
- 50. Container 5m : 29s
- 51. Float 4m : 53s
- 52. Clearfix 7m : 12s
- 53. Pseudoclassi 5m : 19s
- 54. Responsive intro 1m : 51s
- 55. Media queries 4m : 39s
- 56. Gallery 4m : 11s
- 57. Hover 4m : 57s
- 58. Footer 2m : 25s
- 59. Nuove pagine 12m : 36s
- 60. Sfida- contatti 25s
- 61. Soluzione 10m : 31s
- 62. Font icons 6m : 26s
- 63. Sticky footer 3m : 57s
- 64. Meta 2m : 9s
- 65. Intro positioning 1m : 28s
- 66. Position Absolute 3m : 44s
- 67. Position relative 5m : 26s
- 68. Position fixed 3m : 7s
- 69. Z-index 2m : 10s
- 70. Flexbox intro 1m : 56s
- 71. Flexbox terminology 2m : 14s
- 72. Container properties 8m : 26s
- 73. Header layout 6m : 31s
- 74. Items properties 6m : 1s
- 75. SfidaGallery 1m : 14s
- 76. Gallery 3m : 39s
- 77. Conclusioni e prossimi passi 1m : 7s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 40 €
CORSO SINGOLO
Corso avanzato di HTML e CSS
Corso avanzato di HTML e CSS
- 01. Intro 14s
- 02. Struttura One Page Guarda in anteprima 6m : 57s
- 03. Sfida- about e contatti Guarda in anteprima 39s
- 04. Soluzione Guarda in anteprima 5m : 48s
- 05. Anchor 3m : 1s
- 06. Background 9m : 6s
- 07. Intro proprieta avanzate 40s
- 08. Trasparenza 6m : 12s
- 09. Gradienti 8m : 15s
- 10. Gradiente sfumato 4m : 35s
- 11. Border radius 2m : 25s
- 12. Box-shadow 4m : 26s
- 13. Box-shadow soluzione 1m : 6s
- 14. Text shadow 1m : 49s
- 15. CSS da Sketch 3m : 6s
- 16. Transform 7m : 42s
- 17. Banner diagonale 6m : 44s
- 18. Fine tuning 3m : 12s
- 19. Intro animazioni 2m : 12s
- 20. Transitions 3m : 4s
- 21. Keyframes 4m : 14s
- 22. Animation 5m : 57s
- 23. Animazione cta 4m : 8s
- 24. Animazione testi 4m : 27s
- 25. Introduzione 1m : 1s
- 26. Form.mp4 4m : 22s
- 27. Input.mp4 5m : 29s
- 28. Textarea.mp4 3m : 10s
- 29. Label.mp4 3m : 35s
- 30. Button.mp4 2m : 25s
- 31. Options.mp4 5m : 27s
- 32. Radio button.mp4 4m : 49s
- 33. Checkbox.mp4 4m : 1s
- 34. fieldset.mp4 3m : 3s
- 35. Conclusione del modulo sui Form.mp4 52s
- 36. Intro video 1m : 40s
- 37. Video 6m : 5s
- 38. Source 5m : 1s
- 39. Video Background 8m : 8s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 25 €
CORSO SINGOLO
Corso di introduzione a JavaScript
Corso di introduzione a JavaScript
- 01. Introduzione al corso base di JavaScript 45s
- 02. Scriviamo il nostro primo programma in Javascript 2m : 5s
- 03. Spiegazione dei tool che andremo ad utilizzare 3m : 19s
- 04. Cosa sono le variabili 3m : 43s
- 05. Il blocco if..else 4m : 43s
- 06. Blocchi If in cascata 4m : 2s
- 07. Il blocco else..if 2m : 37s
- 08. Le funzioni 2m : 47s
- 09. Gli array 3m : 5s
- 10. L'oggetto Math 5m : 52s
- 11. Selezionare elementi HTML 5m : 41s
- 12. Il ciclo for 8m : 37s
- 13. Pulizia del codice 3m : 40s
- 14. Gli oggetti 2m : 4s
- 15. Completare la logica 3m : 15s
- 16. Scrivere a schermo la scelta dell'utente 2m : 22s
- 17. La keyword return 3m : 23s
- 18. Refactoring del metodo checkWhoWon 1m : 43s
- 19. Convertire array di stringhe in array di oggetti 2m : 21s
- 20. Mostrare a schermo l'immagine della scelta del computer 2m : 44s
- 21. Completamento del progetto 3m : 32s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Studia gratuitamente
CORSO SINGOLO
SASS - Ottimizza il CSS dei tuoi progetti
SASS - Ottimizza il CSS dei tuoi progetti
- 01. Intro Guarda in anteprima 53s
- 02. Esempio Guarda in anteprima 3m : 14s
- 03. SASS vs SCSS Guarda in anteprima 1m : 5s
- 04. Installazione 2m : 30s
- 05. Compilare SASS in un progetto 12m : 10s
- 06. Compilare con Gulp 6m : 35s
- 07. Setup 3m : 26s
- 08. Variabili 5m : 59s
- 09. Nominare variabili 2m : 53s
- 10. Nesting 6m : 12s
- 11. Nesting (2) 4m : 39s
- 12. Sfida- variabili e nesting 1m : 12s
- 13. Mixin 2m : 54s
- 14. Include 1m : 25s
- 15. Mixin con parametri 4m : 59s
- 16. Sfida Mixin 1m : 24s
- 17. Soluzione 5m : 23s
- 18. Funzioni 7m : 13s
- 19. Funzioni sass 2m : 9s
- 20. Partials - import 7m : 15s
- 21. Media queries - come organizzarle? 1m : 40s
- 22. Media queries scaffolding 6m : 57s
- 23. Media queries scaffolding 4m : 53s
- 24. Sfida- features 1m : 14s
- 25. Features (markup) 6m : 1s
- 27. Features stile default 8m : 53s
- 26. Features stile default 9m : 40s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 30 €
CORSO SINGOLO
Corso tutorial di Bootstrap 4
Corso tutorial di Bootstrap 4
- 01. Intro Guarda in anteprima 3m : 37s
- 02. Bootstrap Guarda in anteprima 2m : 22s
- 03. Getting started Guarda in anteprima 4m : 15s
- 04. Landing 1 7m : 34s
- 05. Landing 2 6m : 44s
- 06. Intro 1m : 13s
- 07. Layout 1m : 46s
- 08. Grid system 5m : 4s
- 09. Grid system_2 8m : 30s
- 10. Ordine colonne 4m : 44s
- 11. Intro 1m : 4s
- 12. Navbar 7m : 41s
- 13. Banner 6m : 36s
- 14. Bottoni 5m : 35s
- 15. Sfida footer 53s
- 16. Footer 9m : 44s
- 17. Card 6m : 38s
- 18. List group 2m : 5s
- 19. Modali 3m : 59s
- 20. Accordion 3m : 31s
- 21. Form 5m : 12s
- 22. Fine tuning 6m : 25s
- 23. Colori 4m
- 24. Intro 2m : 5s
- 25. Il progetto 3m : 22s
- 26. Importare bootstrap con sass 8m : 3s
- 27. Parziali 6m : 32s
- 28. Breakpoints 5m : 4s
- 29. Variabili 4m : 54s
- 30. Prossimi passi 1m : 8s
- 31. Intro 1m : 51s
- 32. Scaricare il template 2m : 52s
- 33. Contenuto 4m : 33s
- 34. Modificare lo stile 8m : 15s
- 35. Conclusioni 35s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 40 €
CORSO SINGOLO
Diventa un programmatore JavaScript - Edizione 2019
Diventa un programmatore JavaScript - Edizione 2019
- 1. Cos'è la console JavaScript Guarda in anteprima 1m : 10s
- 2. Scriviamo il nostro primo programma Guarda in anteprima 1m : 47s
- 3. Cosa sono le variabili Guarda in anteprima 1m : 56s
- 4. Cosa e quali sono i tipi di dato primitivi 1m : 25s
- 5. Introduzione alle stringhe 3m : 10s
- 6. Proprietà e metodi delle stringhe 7m : 59s
- 7. Introduzione ai numeri 3m : 54s
- 8. Che cos'è l'oggetto Math 2m : 45s
- 9. Introduzione ai valori booleani 3m : 58s
- 10. Differenza tra uguaglianza stretta ed astratta 3m : 3s
- 11. Introduzione ai valori Null ed Undefined 4m : 3s
- 12. Sfida sui tipi di dato primitivi 1m : 22s
- 13. Soluzione alla sfida sui tipi di dato primitivi 2m : 24s
- 14. Introduzione ai condizionali con if..else 5m : 5s
- 15. Come gestire condizioni più complesse 9m : 37s
- 16. Cosa sono i valori falsi per definizione 5m : 20s
- 17. L'operatore ternario 4m : 8s
- 18. Il blocco Switch 4m : 28s
- 19. Introduzione ai cicli con il blocco While 2m : 9s
- 20. Il ciclo For 2m : 45s
- 21. Come utilizzare i cicli annidati 3m : 36s
- 22. Sfida sui cicli 49s
- 23. Soluzione alla sfida sui cicli 2m : 52s
- 24. Introduzione alle funzioni 2m : 36s
- 25. Cosa sono e come utilizzare argomenti all'interno delle funzioni 4m : 58s
- 26. La keyword return 5m : 38s
- 27. Definizione di scope delle variabili 3m : 59s
- 28. Che cos'è lo scope shadowing 3m : 47s
- 29. Utilizzare le funzioni come fossero delle classi 3m : 31s
- 30. Sfida sulle funzioni 56s
- 31. Soluzione sfida sulle funzioni 5m : 17s
- 32. Introduzione agli Array 3m : 1s
- 33. Cos'è l'indice di un array 2m : 29s
- 34. Proprietà e metodi degli array 5m : 27s
- 35. Utilizzare il ciclo for con gli array 3m : 6s
- 36. Il metodo map 3m : 2s
- 37. Il ciclo forEach 1m : 51s
- 38. Introduzione agli oggetti 3m : 25s
- 40. Come accedere alle proprietà di un oggetto 5m : 34s
- 39. Il metodo map con gli oggetti 3m : 20s
- 41. Come cambiare il valore delle proprietà di un oggetto 1m : 21s
- 42. Aggiungere metodi agli oggetti 2m : 7s
- 43. Sfida su array ed oggetti 59s
- 44. Soluzione alla sfida su array ed oggetti 8m : 9s
- 45. Introduciamo il progetto web finale 2m : 23s
- 46. Spiegazione del file index.hmtl 1m : 59s
- 47. Che cos'è il DOM 2m : 6s
- 48. Selezionare singoli elementi HTML con JavaScript 7m : 56s
- 49. Selezionare un insieme di elementi HTML con JavaScript 8m : 38s
- 50. Come utilizzare le classi a nostro favore 4m : 8s
- 51. Come gestire gli eventi generati dal mouse 5m : 23s
- 52. Come gestire gli eventi generati dalla tastiera 3m : 34s
- 53. Il concetto di event bubbling 4m : 36s
- 54. Cosa sono le API 5m : 1s
- 55. Come creare una richiesta HTTP 7m : 38s
- 56. Come aggiungere del codice HTML attraverso JavaScript 8m : 8s
- 57. Una breve introduzione a JQuery 7m : 3s
- 58. Andiamo a pulire il codice 1m : 46s
- 59. Filtrare le gif disabilitando una categoria 14m : 9s
- 60. Rimuovere le gif facenti parte ad una categoria 5m : 52s
- 61. Sfida: cercare le gif utilizzando una parola chiave 3m : 32s
- 62. Soluzione alla sfida 7m : 19s
- 63. Come gestire i click su elementi aggiunti in maniera dinamica 2m : 33s
- 64. Sfida: gestisci i click su un elemento aggiunto in maniera dinamica 1m : 17s
- 65. Soluzione alla sfida 2m
- 66. Mischiare l'ordine di un array utilizzando un algoritmo 5m : 14s
- 67. Recap del progetto e conclusione 50s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 50 €
CORSO SINGOLO
Impara a utilizzare jQuery
Impara a utilizzare jQuery
- 01. Introduzione a jQuery Guarda in anteprima 1m : 43s
- 02. Cos'è e cosa serve Guarda in anteprima 1m : 49s
- 03. jQuery nella pratica Guarda in anteprima 9m : 58s
- 04. Document Object Model Guarda in anteprima 53s
- 05. Come utilizzare la documentazione 5m : 24s
- 06. Dove inserire jQuery 7m : 8s
- 07. Preparazione 3m : 23s
- 08. Pianificazione 1m : 21s
- 09. Inseriamo il pulsante 4m : 28s
- 10. eventi in jQuery 4m : 51s
- 11. Perfezionamento 3m : 44s
- 12. Preparazione 2m : 14s
- 13. Pianificazione 2m : 10s
- 14. Prevenire il comportamento di default 5m : 58s
- 15. Inserire l'overlay 6m : 16s
- 16. Mostrare le immagini sull'overlay 6m : 37s
- 17. Mostrare la descrizione sotto l'immagine 6m : 41s
- 18. Preparazione 1m : 47s
- 19. Pianificazione 3m : 53s
- 20. I loop in jQuery 9m : 25s
- 21. Indirizzare i link 3m : 16s
- 22. Modificare il CSS 3m : 19s
- 23. Perfezionamento 2m : 48s
- 24. Cosa sono e dove trovare i plugin 5m : 27s
- 25. Struttura di un plugin 6m : 13s
- 26. Aggiungere un plugin alla pagina 6m : 58s
- 27. Modificare le opzioni del plugin 5m : 25s
- 28. Sticky navigation 1m : 16s
- 29. Applicare il plugin 6m : 20s
- 30. Eventi nei plugin 5m : 7s
- 31. Altre opzioni 3m : 41s
- 32. Cos'è uno Slider Carousel 2m : 39s
- 33. Inserire e applicare il plugin 6m
- 34. Opzioni del plugin 4m : 20s
- 35. Modificare il css 9m : 22s
Sei interessato ad accedere esclusivamente a questo modulo della masterclass?
Acquista a 40 €Questa masterclass è inclusa nel percorso professionale "Programmatore Front end"
Scopri il percorso professionale
.png)
COSA DICONO I NOSTRI STUDENTI
4.0
Masterclass
A chi è rivolto
ASPIRANTE PROGRAMMATORE
Il front-end è una delle aree della programmazione più adatte a chi parte da zero e vuole imparare velocemente a sviluppare tutte le funzionalità lato utente di un sito internet e di una applicazione web.
DESIGNER
Padroneggiare il codice front-end può permettere ai designer di procedere con la realizzazione tecnica delle interfacce in completa autonomia, completandone naturalmente le competenze
MARKETER
Una conoscenza base della programmazione front-end può facilitare un marketer nell'agire sul codice per porre in piedi i propri test, ma anche per impostrare correttamente il tracciamento delle attività del sito in autonomia
I tuoi istruttori
Full-stack developer @ Lacerba
Dopo aver completato un corso biennale al college Elis, mi sono trasferito in Irlanda per iniziare la mia carriera come programmatore back-end. Da lì, mi sono gradualmente avvicinato anche al mondo del front-end grazie a una serie di esperienze lavorative in diversi paesi per conto di aziende quali Google e Criteo. Da due anni ho deciso di iniziare a lavorare come freelance e a collaborare in maniera strettissima con Lacerba.
Graphic Designer e Front End Developer @Lacerba
Un architetto con la passione per il mondo del web design. Dopo la laurea e due anni di esperienza nell'architettura e nel design, si trasferisce a Berlino per immergersi a tempo pieno in quello che è la sua passione. Ora Matteo è un esperto nell'utilizzo dei maggiori programmi di grafica e sa costruire siti con HTML, CSS e Javascript.
Un team dedicato al tuo supporto
Accedi ad un canale privato per ottenere tutto il supporto di cui hai bisogno durante il tuo studio.
Progetti reali
Ti verranno assegnati diversi compiti di sviluppo che il nostro team revisionerà per valutare il tuo apprendimento e aiutarti a crescere
Interagisci live con i docenti
Partecipa periodicamente ai Webinar di Q&A per eliminare i tuoi dubbi.
Il lavoro
UN PROGRAMMATORE DI INTERFACCE
Una figura estremamente ricercata, grazie alla sua capacità di scrivere il codice ottimizzandolo verso la user experience degli utenti
COLLANTE TRA IL TEAM DI SVILUPPO E QUELLO GRAFICO
Grazie alle sue competenze, il front-end è in grado sia di scrivere codice in armonia con i back-end, sia di accogliere e sviluppare le richieste di marketers e grafici
FAQ
Domande frequenti:
Cosa succede se non sono soddisfatto della Masterclass?
Non vorremmo mai che tu rimanga insoddisfatto/a di uno dei nostri corsi! Se dovesse accadere, contattaci e cercheremo di risolvere entro 24h qualsiasi problema tu abbia riscontrato.
1Come è strutturata la Masterclass?
La Masterclass comprende un pacchetto di ben 7 corsi pensati per partire da zero e guidarti passo a passo nella tua crescita come sviluppatore front end.
2Quanto tempo ci vorrà per terminare la Masterclass?
La durata totale del corso è circa di 23 ore. Tieni a mente però che il tempo di apprendimento dei concetti potrebbe essere più lungo, perchè dovrai seguire il docente nelle realizzazione pratica dei progetti ed esercitarti continuativamente. Per questo, una volta acquistati i corsi, Lacerba si impegna a renderli disponibili a vita!
3Posso vedere le lezioni più volte?
Certo! Una volta acquistato il corso sarà tuo per sempre. Puoi rivedere le lezioni ogni volta che vuoi, in qualsiasi momento. I video non sono live, sono registrati e sempre disponibili sulla piattaforma.
4Masterclass
Perchè Lacerba?
La scuola del digitale
Selezioniamo per te i migliori docenti e usiamo un format collaudato, per proporti contenuti di alta qualità che non ti facciano solo studiare, ma anche imparare davvero.
Corsi pratici
Vogliamo insegnarti il "fare", e non solo la "teoria del fare". Per questo durante i corsi spieghiamo tools e strumenti che ti aiutino a lavorare efficacemente fin dal giorno 1 ai tuoi progetti.
Professionisti del tech
Selezioniamo i migliori professionisti, che lavorando nel tech sono continuamente aggiornati sui trend di mercato, per insegnargli a trasferirti le loro conoscenze e trucchi del mestiere.
Video di alta qualità
Registriamo i video in HD, senza inserire slide fisse e mostrandoti sempre il docente, non solo la sua voce. I contenuti vengono integrati con grafiche e animazioni in post-produzione.
Diventa un programmatore Front end - EDIZIONE 2019
Contattaci