Layout web cu CSS Grid, Flexbox și alte tehnici moderne
A course by Javier Usobiaga FerrerDesigner web
A course by Javier Usobiaga Ferrer, Designer web
Layout web cu CSS Grid, Flexbox și alte tehnici moderne
Web-ul este în continuă schimbare, iar odată cu apariția CSS Grid și Flexbox, regulile jocului s-au schimbat din nou. Javier Usobiaga - web designer, dezvoltator front-end și co-fondator al studioului Swwweet - are 13 ani de experiență în crearea diverselor proiecte pentru clienți precum Primăria Barcelonei. Cu vasta sa experiență, vă invită să descoperiți cele mai moderne tehnici și instrumente care revoluționează sectorul.
Dacă în cursul Introducere în dezvoltarea web responsiv cu HTML și CSS ați început deja în lumea web-ului responsiv, în acesta veți învăța diverse tehnici avansate cu instrumente precum CSS Grid, Flexbox, CSS Shapes, unități viewport, variabile CSS, transformări 3D sau efecte de tip paralaxă.
Ce vei învăța în acest curs online?
1 lecție & 1 descărcare
Unitățile de vizualizare
1 minut, 1 secundă
Imagini cu potrivire de obiect
1 minut, 1 secundă
Coloane CSS
1 minut, 1 secundă
Forme CSS
1 minut, 1 secundă
Variabile în CSS
1 minut, 1 secundă
Introducere în flexbox
1 minut, 1 secundă
Ce include acest curs?
Primul lucru pe care îl veți face este să aflați despre Javier Usobiaga, cariera sa profesională și cele mai notabile proiecte ale sale.
Vei începe prin a învăța cum să modelezi layout-ul cu unități viewport, object- și cum să distribui textul în coloane cu coloane CSS. Vei vedea cum formele web pot fi transformate din dreptunghiulare în cu clip- și forme CSS. De asemenea, vei învăța cum să-ți optimizezi codul cu variabile de proprietăți personalizate native.
Vei descoperi revoluția pe care Flexbox a adus-o în lumea __ . Javier te va învăța toate posibilitățile de aliniere a elementelor. Pentru a face acest lucru, îți va explica proprietățile containerului și ale conținutului, precum și capacitățile de aliniere cu o axă principală, o axă transversală și axe alternative.
Vei continua să înveți noi reguli ale jocului cu CSS Grid, schimbând complet modul în care îți structurezi și . Vei învăța câteva funcții ale grilei, proprietățile de aspect și dimensiune și cum[/i] proiectezi o grilă care se adaptează la diferite dimensiuni ale ecranului cu funcțiile și [i]
Javier va explica tehnici CSS Grid mai avansate, cum ar fi zonele grilei, alinierea și ordonarea, imbricarea și, printr-un exemplu, veți vedea cum puteți utiliza Grid și Flexbox împreună într-un proiect.
Veți afla pe scurt despre transformările 3D cu un exemplu practic de adâncime și efecte. Veți derula __ pentru a vedea în sfârșit proiecte, exemple și resurse selectate de Javier pentru a servi drept inspirație.
What is this course's project?
Vei realiza un exercițiu liber folosind una sau mai multe dintre tehnicile pe care le-ai învățat. Javier va crea o pagină informativă despre cucerirea Polului Sud. Poți alege subiectul și proiectul dorite.
Proiecte ale studenților cursului
Who is this online course for?
Oricine este interesat de tehnici moderne și layout folosind CSS Grid, și alte tehnici moderne.
Requirements and materials
Pentru a urma acest curs, aveți nevoie de cunoștințe solide de HTML și CSS, un computer și un editor de cod.
Recenzii
- 8 luni în urmă
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 9 luni în urmă
increíble
- creative_250792PLUS9 luni în urmă
Cours très instructif, agréable, très complet
- 1 an în urmă
Es un curso muy bueno
- 1 an în urmă
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Conţinut
- U 1
Introducere
- Prezentare
- Influențe
- U 2
Modelarea aspectului
- Unitățile de vizualizare
- Imagini cu potrivire de obiect
- Coloane CSS
- Forme CSS
- Variabile în CSS
- U 3
Layout unidimensional cu flexbox
- Introducere în flexbox
- Proprietăți ale containerului
- Proprietăți de conținut
- Alinieri ale axei principale și transversale
- Ordine avansate
- Machete avansate cu flexbox
- U 4
Aspect bidimensional cu grilă CSS
- Introducere în grila CSS
- Funcții de grilă
- Distribuție și dimensiune
- Grilă automată responsivă
- U 5
Grilă CSS avansată
- Zone de pe grilă
- Aliniere și ordine
- Cuibărire
- Grilă (și flexbox) în practică
- U 6
A treia dimensiune: efecte de adâncime și derulare
- Introducere în transformările 3D
- Tăblii fixe
- Animații sincronizate cu derularea
- Inspirație și resurse
- FP
Proiect final
- Tehnici de aspect web
La ce să te aștepți de la un curs Domestika
Învață în ritmul tău propriu
Bucură-te de învățarea de acasă, fără un program fix și cu o metodă ușor de urmat. Tu îți stabilești propriul ritm.
Învață de la cei mai buni profesioniști
Învață metode și tehnici valoroase explicate de experți de top din sectorul creativ.
Întâlnește profesori experți
Fiecare expert predă ceea ce face cel mai bine, cu îndrumări clare, pasiune adevărată și perspicacitate profesională în fiecare lecție.
Certificates
PLUSIf you're a Plus member, get a certificat personalizat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Obțineți locuri în primul rând
Videoclipuri de cea mai înaltă calitate, pentru a nu rata niciun detaliu. Cu acces nelimitat, le poți viziona de câte ori este nevoie pentru a-ți perfecționa tehnica.
Împărtășește cunoștințe și idei
Pune întrebări, solicită feedback sau oferă soluții. Împărtășește-ți experiența de învățare cu alți studenți din comunitate care sunt la fel de pasionați de creativitate ca și tine.
Conectează-te cu o comunitate creativă globală
Comunitatea găzduiește milioane de oameni din întreaga lume, curioși și pasionați de explorarea și exprimarea creativității lor.
Urmărește cursuri produse profesional
Domestika își gestionează lista de profesori și produce fiecare curs intern pentru a asigura o experiență de învățare online de înaltă calitate.
Întrebări frecvente
This course is designed for people with basic CSS knowledge who want to dive deeper into advanced layouts, modern techniques, and experimenting with the latest properties. You don’t need to be an expert, but you should know the basics of HTML and CSS.
You should have basic knowledge of HTML and CSS, plus a code editor and a modern browser. No special tools or framework experience required.
You’ll learn to build advanced, responsive layouts with Flexbox and CSS Grid, parallax animations, custom shapes, viewport units, image and column control, CSS variables, and 3D transforms for innovative web interfaces.
The course covers element alignment, advanced properties, differences between Flexbox and Grid, responsive layouts, nested grids, custom areas, distribution techniques, and when to choose each method based on design needs.
Viewport units like vh and vw are used to size blocks, text, and images relative to the browser window, creating responsive interfaces and avoiding horizontal scroll or poor proportions.
Yes, you’ll learn to create parallax animations, sticky headers, and scroll-synced effects using pure CSS and advanced visual interaction techniques.
Yes, the course teaches how to adjust images with object-fit, object-position, media queries, and techniques to make images adapt to any container or screen.