Web & Frontend
Corso CSS Completo
Corso da zero per imparare a stilare siti con CSS. Vediamo elementi di Web Design e capiamo l'ecosistema di CSS.
- 20 ore di video
- 138 lezioni
- Principianti
- Certificato finale

Caricando il video accetti che YouTube (Google Ireland Ltd.) imposti cookie e riceva il tuo indirizzo IP e i dati di navigazione. Informativa di Google · La nostra privacy policy
Descrizione del corso
CSS è il linguaggio che trasforma semplici documenti HTML in esperienze web coinvolgenti e professionali. Questo corso ti guiderà attraverso l'intero ecosistema CSS, dalle basi fino alle tecniche più moderne e avanzate.
Oltre alla sintassi, esploreremo principi fondamentali di Web Design come teoria del colore, tipografia e layout. Queste competenze sono essenziali per creare interfacce non solo belle, ma anche funzionali e intuitive. Imparerai a pensare da designer, non solo da sviluppatore.
Il mondo CSS è in continua evoluzione, con novità come Container Queries, Cascade Layers e CSS Nesting che stanno rivoluzionando il modo in cui stilizziamo le pagine web. Il corso copre sia le tecniche consolidate che le ultime innovazioni, preparandoti per il presente e il futuro dello sviluppo frontend.
Particolare attenzione viene data alle performance: imparerai come il CSS può influenzare la velocità di caricamento di un sito e come ottimizzare il tuo codice. Esploreremo anche l'ecosistema degli strumenti moderni, dai preprocessori ai framework CSS, dandoti una visione completa delle opzioni disponibili per progetti di ogni dimensione.
Il corso include esercizi pratici che ti permetteranno di applicare le tecniche apprese a scenari reali, costruendo progressivamente il tuo portfolio di competenze CSS. Al termine, avrai tutti gli strumenti necessari per creare layout moderni, responsive e performanti.
Programma
18 moduli · 138 lezioni01Fondamenti di CSS14 lezioni
- Introduzione a CSS
- Editor di Codice
- Shortcut Utili
- CSS di Default
- Come inserire CSS
- Come viene applicato il CSS
- Spiegazione DOM
- Sintassi
- Commenti
- Cascata
- Ereditarietà
- Specificità
- Utilizzare DevTool
- Esercizio #1
02Selettori12 lezioni
- Categorie di Selettori
- Globale
- Elementi
- ID
- Classi
- Liste di Selettori
- Esercizio #2
- Attributi
- Esercizio #3
- Pseudo Classi ed Elementi
- Combinatori
- esercizio #4
03Stile e Colori12 lezioni
- Tipi di Colori in CSS
- Nuovi colori in CSS
- Psicologia dei colori
- Creare una palette
- Modalità Scura
- Background Color
- Contrasto tra Colori
- Background Image
- Bordi
- Outline
- Box Shadow
- Esercizio #5
04Dimensioni, Spazi ed Unità di Misura9 lezioni
- Box Model
- Margini
- Padding
- Dimensioni
- Esercizio #6
- Unità di misura
- Nuove Unità di misura
- Esercizio #7
- Dimensioni e margini inline
05Testo11 lezioni
- Font Family
- Copyright dei font
- Web Fonts
- Abbinare font insieme
- Psicologia dei font
- Stile dei font
- Text Direction
- Text Shadow
- Text Layout
- Overflow
- Esercizio #8
06Stile di Altri Elementi5 lezioni
- Stile dei link
- Accessibilità link esterni
- Stile delle liste
- Stile delle tabelle
- Esercizio #9
07Posizionamento6 lezioni
- Display
- Position
- Z-index
- Float
- Object Fit
- Esercizio #10
08Hack1 lezioni
- Evitare Banner
09Animazioni4 lezioni
- Transform
- Transition
- Animazioni
- Esercizio #11
10Layout9 lezioni
- Introduzione ai layout
- Normal Flow
- Grid layout
- Masonry layout
- Esercizio #12
- Multi column layout
- Esercizio #13
- Flexbox
- Esercizio #14
11Responsive Design5 lezioni
- Concetto di responsive design
- Dev tool responsive
- Media query
- Esercizio #15
- Containers query
12Form4 lezioni
- Stile Form
- Checkbox personalizzate
- Pseudo classi dei form
- Esercizio #16
13Altri Concetti10 lezioni
- Le funzioni
- Variabili
- Altre Pseudo classi
- :is
- :not
- :has
- Supporto dei browser
- Stile scrollbar
- Metodologia BEM
- Proprietà Filter
14Performance4 lezioni
- Critical Rendering Path
- Render Blocking CSS
- Critical CSS
- Minificazione
15I Framework CSS6 lezioni
- Che problemi abbiamo riscontrato?
- Cosa sono i framework?
- Bootstrap vs Tailwind
- Bootstrap pratico
- Tailwind pratico
- Librerie di componenti
16Concetti di Web Design16 lezioni
- Introduzione alla sezione
- Flat e Material design
- Accordion
- Alert
- Badge
- Breadcrumb
- Bottoni
- Card
- Carosello
- Collapse
- Sidebar e Drawer
- Modal
- Navbar
- Tabs
- Paginazione
- Dividere un sito in macro blocchi
17Preprocessori3 lezioni
- Cosa sono i preprocessori?
- Quali sono?
- SASS vs SCSS
18Fine Corso7 lezioni
- Annotazione EMMET
- Esercizio #17 parte 1
- Esercizio #17 parte 2
- Esercizio #17 parte 3
- Finalizzare sito
- E Javasciprt a cosa serve?
- Prossimi passi da fare