Ogni modifica rompe qualcos'altro. Lo stile cresce senza regole e il layout non si adatta.
Selettori, spaziature e responsive design vengono gestiti per tentativi.Corso CSS
Impara a trasformare il markup in interfacce curate e responsive usando cascade, box model, Flexbox, Grid, animazioni e media query.
- 7 moduli
- 53 lezioni
- 2 progetti
02 / obiettivo
Dalla teoria a competenze che sai usare.
Segui un percorso ordinato, fai pratica e impari a portare a termine ciò che inizi.
Il layout segue un sistema. Costruisci interfacce responsive e coerenti.
Usi cascade, Flexbox, Grid e media query per controllare davvero la pagina.03 / cosa impari
Competenze che lavorano insieme.
Controllare cascade e specificità
Prevedi quale regola viene applicata ed eviti correzioni casuali.
Costruire layout
Disponi gli elementi con box model, Flexbox, Grid e position.
Creare un portfolio
Applichi gli strumenti CSS a un progetto completo diviso in sezioni.
Lavorare mobile first
Adatti layout e navigazione con breakpoint e media query.
Aggiungere movimento
Usi transizioni e animazioni senza compromettere la leggibilità.
04 / programma
Il corso, modulo dopo modulo.
Ogni modulo aggiunge conoscenze e pratica a ciò che hai già costruito.
01 Fondamenti, selettori e cascade Impara sintassi, selettori e regole che determinano quali stili il browser applica agli elementi.
- Introduzione CSS
- La sintassi di base
- I selettori parte 1
- I selettori parte 2
- Le pseudo classi
- Gli Pseudo Elementi
- Cascading e Specificity
- Inheritance
02 Testi, box model e misure Controlla tipografia, dimensioni e comportamento dei box usando proprietà e unità CSS.
- Personalizziamo i testi
- Il box model
- Cursor e user-select
- Le unità di misura
- Come personalizzare un "box"
03 Layout con Flexbox e Grid Costruisci layout a una e due dimensioni, poi metti alla prova Flexbox e Grid con esercizi guidati.
- Flexbox: Parte wrapper
- Flexbox: Parte Children
- Giochiamo a Flexbox Froggy
- Css Grid
- Giochiamo a Grid Garden
04 Posizionamento ed effetti visivi Posiziona gli elementi, gestisci immagini e sfondi, aggiungi transizioni e animazioni e usa gli strumenti del browser.
- La Position
- Creiamo una Modale
- Centrare gli elementi
- Image e Background Image
- Le transition
- Le animation
- I Dev tools del Browser
05 Portfolio: struttura e stile Costruisci le sezioni del portfolio e completa la prima versione con transizioni e animazioni.
- Creiamo il nostro portfolio!
- Portfolio- Costruiamo la Navbar
- Portfolio- La Hero
- Portfolio- Sezione About
- Portfolio- Sezione Progetti
- Portfolio- Sezione Contattami
- Portfolio- Il Footer
- Portfolio- Transizioni e Animazioni
06 Responsive design e mobile first Adatta il portfolio a schermi diversi con media query, breakpoint, misure fluide e approccio mobile first.
- La responsività
- Le media Query
- Mobile First- Portfolio Navbar
- Costruiamo il Menu Mobile
- Mobile First- La Hero
- Mobile First- Resto del portfolio
- Portfolio- Fix e Breakpoints
- Le variabili CSS
- Mobile First- Impostiamo altri Breakpoint
- Portfolio- Sistemiamo il Footer
- Ragioniamo con la max width
- Max-Width al container
- Sistemiamo la Hero
- La funzione Clamp
- Linkiamo le sezioni
- Recap Responsività
07 Organizzazione e approfondimenti finali Organizza i fogli di stile, affronta l'esercizio finale e completa il corso con un elemento HTML utile e consigli pratici.
- Splittiamo i file CSS
- Esercizio per voi
- Il tag Details
- Consigli Finali
05 / per chi è
È il corso giusto se ti riconosci qui.
Vuoi capire ciò che scrivi
Cerchi spiegazioni ordinate e pratica, senza limitarti a copiare il codice.
Vuoi lavorare su progetti reali
Vuoi collegare ogni concetto a esercizi e applicazioni concrete.
Vuoi diventare più autonomo
Vuoi imparare a leggere i problemi, fare scelte e correggere gli errori.
06 / bonus inclusi
Continui a imparare anche fuori dalle lezioni.
Materiali e servizi che accompagnano lo studio e la pratica.
File Sorgenti inclusi
Avrai i file di progetto che vedrai all'interno del corso inclusi! Questo vuol dire che potrai andare a consultarli quando vuoi, anche dopo il corso!
Esercizi pratici
Tutte le lezioni sono molto pratiche ma a parte questo, ti verranno assegnati alcuni esercizi pratici che ti aiuteranno ad entrare in confidenza con il codice e le sue logiche.
Piattaforma dedicata
Potrai studiare all'interno di una piattaforma creata appositamente per massimizzare l'apprendimento. Al suo interno troverai tutto ciò di cui hai bisogno!
Accesso alla community
Con l'acquisto di questo percorso avrai accesso ad una community (sempre all'interno della piattaforma), che ti permetterà di crescere insieme a tanti altri studenti e supportarvi a vicenda!
Assistenza rapida
Non dovresti avere alcun tipo di problema, ma nell'eventualità sappi che potrai contattarci tramite la chat in tempo reale all'interno della piattaforma. Questo sistema ci permette di risolvere qualunque problema nel modo più veloce possibile
Lifetime Access
Una volta dentro, resti dentro.Al contrario delle accademie tradizionali, una volta effettuato l'accesso alla mia academy, potrai restarci fin quando lo vorrai, anche dopo che trovi lavoro! Questo ti permetterà di crescere senza fine, visto che potrai usufruire di tutti i bonus sopracitati!
07 / scegli il tuo percorso
Scegli il livello di supporto che vuoi.
I contenuti inclusi dipendono dall'opzione scelta. Prezzi e condizioni restano sempre chiari.
Corso completo
Tutte le lezioni del corso CSS, con accesso e aggiornamenti a vita.
- 7 moduli inclusi
- Accesso e aggiornamenti a vita
14 giorni soddisfatto o rimborsato*
Si applicano termini e condizioni
08 / recensioni
Cosa racconta chi ha studiato con Michele.
Quando ho conosciuto Michele, verso di lui provavo il classico scetticismo, dovuto ad una recente esperienza formativa, ma poi durante la call, ho capito ben presto di avere a che fare con un vero e proprio professionista che quotidianamente, lavora sul campo: quello che insegna è quello che fa! Sto seguendo Frontend Generator e concordo con Michele quando dice che non è un corso, ma un percorso che potenzialmente potrebbe non finire mai. Le lezioni, sono brevi, ma molto chiare e ricchissime di informazioni, focalizzate a trasmettere il know how necessario al raggiungimento dell'obiettivo. Michele è un coach appassionato e appassionante, pronto sempre a spronarti e supportarti qualora ce ne sia bisogno. In questo mondo, persone come lui, sono merce rara
Alessandro Talamonti Operaio Michele ha una grande passione per l'insegnamento, oltre che per la programmazione, che subito traspare attraverso la sua forte dedizione verso i suoi studenti, la sua assoluta disponibilità e la sua capacità di motivarti per dare sempre il massimo. La sua profonda competenza e professionalità nel suo ambito, insieme alla chiarezza con cui riesce a spiegare gli argomenti più complessi, hanno reso il mio periodo di formazione impegnativo ma estremamente stimolante e sfidante. In poche settimane sono riuscita ad imparare più di quanto credessi e le esercitazioni che ci assegnava Michele, basate su casi reali, mi sono tornate utilissime, rendendo la mia esperienza formativa preziosissima per la mia carriera di sviluppatrice. Il suo supporto, sia per quanto riguarda le competenze tecniche che per la sua capacità di incoraggiarti e motivarti, sono state fondamentali per acquisire maggiore sicurezza in me stessa. La sua passione per lo sviluppo frontend è contagiosa e mi ha sempre spinta a superare i miei limiti e ad andare avanti nonostante le difficoltà.
Federica Ferrante Front-end Developer Prima di partecipare a questo corso, non avevo alcuna conoscenza in questo ambito. Ora, grazie alla qualità e alla struttura del corso, mi sento sicuro nelle mie nuove competenze che mi hanno aiutato molto a trovare subito un lavoro a tempo indeterminato e da remoto! Lo consiglio vivamente a chiunque voglia acquisire solide basi in breve tempo. Ogni lezione è organizzata in modo chiaro, con video suddivisi per argomento, perfetti per ripassare o approfondire concetti. L'insegnante è estremamente chiaro, conciso, disponibile e dimostra una grande competenza. Assolutamente soddisfatto!
Peppe Libro Technical Analyst at Anima Sgr Aver avuto la possibilità di poter far parte a questo corso è stata una sorta di manna dal cielo. Il corso è ben strutturato, con una dizione ben comprensibile a tutti, è pieno di esercizi che ti aiutano molto a capire bene il funzionamento e soprattutto ad esercitarti per far tue tutte le nozioni necessarie per questo fantastico mestiere. L'insegnante si è visto sin dal primo colloquio conoscitivo, che è una persona molto competente e sa bene cosa deve far trasmettere e spiegare. Ma non si limita solo a questo, mi è stato anche d'aiuto quando c'erano argomenti che non avevo compreso, offrendo continuo supporto anche post corso. In poche parole, questo corso è davvero un esperienza unica e imperdibile.
Domenico Nicolosi Aspiring Front-End Developer Michele mi ha davvero aiutato a fare un salto di qualità nel campo dello sviluppo web. Grazie a lui, ho imparato moltissimo sulle principali tecnologie dello sviluppo Frontend. Quello che ho apprezzato di più è il modo in cui riesce a spiegare concetti anche complessi in modo chiaro e comprensibile, chiarendomi diversi aspetti dello sviluppo che prima mi creavano confusione. Dopo i suoi insegnamenti ho notato un grande miglioramento nelle mie competenze tecniche che mi hanno aiutato a fare un salto di qualità nel mio lavoro. Per quella che è la mia esperienza, consiglio il suo percorso a chiunque ne stia cercando uno che, non solo vi insegni le basi, ma vi aiuti anche a costruire una solida comprensione dello sviluppo web moderno.
Matteo Luzzi Front-End Developer at BcSoft Ho avuto l'onore ed il privilegio di poter lavorare con Michele. Michele è un'eccellente collega di lavoro che si impegna costantemente per il raggiungimento dell'obiettivo. Un collega molto disponibile e soprattutto un ottimo web developer al passo con le tecnologie più moderne.
Marco Concas Backend Developer 09 / domande frequenti