Layout web con CSS Grid, Flexbox e altre tecniche moderne
Un corso di Javier Usobiaga Ferrerweb designer
Un corso di Javier Usobiaga Ferrer, web designer
Scopri le nuove griglie e altri modi di disegnare un sito internet con CSS Shapes, variabili ed effetti parallax
Il web vive in continuo cambiamento e con l'arrivo di CSS Grid e Flexbox, le regole del gioco sono cambiate di nuovo. Javier Usobiaga - web designer, sviluppatore FrontEnd e co-fondatore dello studio Swwweet - ha 13 anni di esperienza nella creazione di vari progetti per clienti come il Comune di Barcellona e, con la sua vasta esperienza, ti invita a scoprire le tecniche e gli strumenti più moderni che stanno rivoluzionando il settore.
Se nel corso di Introduzione allo sviluppo Web [url=https://www.domestika.org/es/courses/74-introduccion-al-desarrollo-web-responsive-con-html-y-css]con HTML e CSS , hai già iniziato nel mondo del responsive web, in questo imparerai varie tecniche avanzate con strumenti come CSS Grid, Flexbox, CSS Shapes, unità di visualizzazione, variabili CSS, trasformazioni 3D o parallasse effetti.
Cosa imparerai in questo corso online?
25 lezioni & 16 download
Le unità di visualizzazione
4 minuti, 40 secondi
Immagini con adattamento agli oggetti
4 minuti, 44 secondi
Colonne CSS
3 minuti, 1 secondo
Forme CSS
7 minuti, 5 secondi
Variabili in CSS
4 minuti, 11 secondi
Introduzione a flexbox
3 minuti, 12 secondi
Cosa include questo corso?
La prima cosa che farai è incontrare Javier Usobiaga, la sua carriera professionale e i suoi progetti più importanti.
Inizierai imparando a modellare il layout con le unità relative alle unità di visualizzazione, la proprietà object-fit e come distribuire il testo in colonne con colonne CSS. Vedrai come le forme web possono smettere di essere rettangolari con percorso-clip e Forme CSS e inoltre imparerai a ottimizzare il tuo codice con le variabili delle proprietà personalizzate native.
Scoprirai la rivoluzione che Flexbox ha portato nel mondo del layout web . Javier ti insegnerà tutte le possibilità di allineare gli elementi. Per fare ciò, spiegherà le proprietà del contenitore e del contenuto e le capacità di allineamento con un asse principale, un asse incrociato e assi alternativi.
Continuerai a scoprire le nuove regole del gioco con CSS Grid cambiando completamente il modo in cui strutturi il tuo codice e imposti il layout . Imparerai alcune funzioni della griglia, la distribuzione e le proprietà delle dimensioni e come creare una griglia che si adatti alle diverse dimensioni dello schermo con le funzioni repeat e minmax .
Javier spiegherà le tecniche più avanzate con CSS Grid su aree della griglia, allineamento e ordine, annidamento e attraverso un esempio, vedrai come puoi usare Grid e Flexbox in combinazione in un progetto.
Imparerai brevemente le trasformazioni 3D con un esempio pratico di profondità ed effetti in scroll per vedere finalmente progetti, esempi e risorse selezionati da Javier come ispirazione.
Qual è il progetto del corso?
Farai un esercizio libero con una o più delle tecniche apprese. Javier realizzerà una pagina informativa sulla conquista del Polo Sud, potrai scegliere il tema e il progetto che desideri.
Progetti di allievi del corso
A chi è rivolto questo corso online?
Chiunque abbia un interesse per il design moderno e le tecniche di layout con CSS Grid, Flexbox e altre tecniche moderne.
Requisiti e materiale
Per seguire questo corso è necessaria una solida conoscenza di HTML e CSS, un computer e un editor di codice.
Recensioni
- 9 mesi fa
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 10 mesi fa
increíble
- creative_250792PLUS10 mesi fa
Cours très instructif, agréable, très complet
- un anno fa
Es un curso muy bueno
- un anno fa
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Gode anche del suo ruolo di insegnante di Web Design in rinomati laboratori e scuole come Elisava, IDEP.
Usobiaga comprende il web nella sua interezza, non solo quanto può essere bello sullo schermo del computer, ma anche la sua usabilità in diversi dispositivi e circostanze.
Nelle sue parole "Penso che sia importante quanto l'estetica sia quanto velocemente si carica o quanto bene risponde, e mi sembra che nel nostro settore spesso ce lo dimentichiamo".
Contenuti
- U1
introduzione
- Presentazione
- Influssi
- U2
Modellare il layout
- Le unità di visualizzazione
- Immagini con adattamento agli oggetti
- Colonne CSS
- Forme CSS
- Variabili in CSS
- U3
Layout in una dimensione con flexbox
- Introduzione a flexbox
- Proprietà contenitore
- Proprietà del contenuto
- Allineamenti sull'asse principale e sull'asse trasversale
- Formazioni avanzate
- Layout avanzati con flexbox
- U4
Layout in due dimensioni con griglia CSS
- Introduzione alla griglia CSS
- Funzioni di griglia
- Distribuzione e dimensioni
- Griglia reattiva automatica
- U5
Griglia CSS avanzata
- Aree sulla griglia
- Allineamento e ordine
- Nidificazione
- Grid (e flexbox) in pratica
- U6
La terza dimensione: profondità ed effetti di scorrimento
- Introduzione alle trasformazioni 3D
- Intestazioni fisse
- Scorri le animazioni sincronizzate
- Ispirazione e risorse
- PF
Progetto finale
- Tecniche di layout web
Cosa aspettarsi da un corso Domestika
Impara al tuo ritmo
Divertiti imparando comodamente da casa e senza orari. Sei tu a decidere quando seguire le lezioni.
Impara dai migliori professionisti
Impara i metodi e le tecniche più utili insieme ai migliori professionisti del settore creativo.
Conosci insegnanti di grande esperienza
Ogni insegnante ti trasmetterà le sue conoscenze con passione e spiegazioni chiare, offrendoti una prospettiva professionale in ogni lezione.
Attestati
PLUSSe hai un abbonamento Plus, riceverai un attestato personalizzato firmato dall'insegnante per ogni corso completato. Condividilo sul tuo portfolio, sui social network o dove desideri.
Soyez aux premières loges
Con i nostri video di alta qualità, non ti perderai neanche un dettaglio. Grazie all'accesso illimitato, puoi vedere ogni lezione tutte le volte che vuoi e perfezionare le tue abilità.
Condividi conoscenze e idee
Fai domande, chiedi pareri e offri soluzioni. Condividi la tua esperienza di apprendimento con gli altri allievi della community appassionati di creatività.
Interagisci con una community creativa globale
La community di Domestika è composta da milioni di utenti di tutto il mondo: persone curiose, piene di voglia di esplorare ed esprimere la propria creatività.
Segui corsi prodotti da veri professionisti
Domestika seleziona gli insegnanti con cura e produce ogni corso internamente, per garantirti un'esperienza di apprendimento online di eccellente qualità.
Domande frequenti
Il corso è pensato per chi ha conoscenze base di CSS e vuole approfondire layout avanzati, tecniche moderne e sperimentazioni con proprietà recenti. Non serve essere esperti, ma conoscere i fondamenti di HTML e CSS.
Devi avere conoscenze base di HTML e CSS, un editor di codice e un browser moderno. Non servono strumenti speciali né esperienza con framework.
Imparerai a creare layout avanzati e responsive con Flexbox e CSS Grid, animazioni parallax, forme personalizzate, uso delle unità viewport, controllo delle immagini e delle colonne, variabili CSS e trasformazioni 3D per interfacce web innovative.
Il corso copre l’allineamento degli elementi, proprietà avanzate, differenze tra Flexbox e Grid, layout responsive, griglie annidate, aree personalizzate, tecniche di distribuzione e quando scegliere l’uno o l’altro in base al design.
Si usano vh e vw per adattare dimensioni di blocchi, testi e immagini alla finestra del browser, ottenendo interfacce responsive ed evitando problemi di scroll orizzontale o proporzioni sbagliate.
Sì, imparerai a realizzare animazioni parallax, header fissi ed effetti sincronizzati allo scroll usando solo CSS e tecniche avanzate di interazione visiva.
Sì, il corso spiega come gestire immagini con object-fit, object-position, media query e tecniche per renderle adattabili a qualsiasi contenitore e schermo.