Weblay-out met CSS Grid, Flexbox en andere moderne technieken
A course by Javier Usobiaga Ferrerwebdesigner
A course by Javier Usobiaga Ferrer, webdesigner
Ontdek de nieuwe rasters en andere manieren om een website te ontwerpen met CSS-vormen, variabelen en parallaxeffecten
Het web is voortdurend in verandering en met de komst van CSS Grid en Flexbox zijn de spelregels opnieuw veranderd. Javier Usobiaga -webdesigner, FrontEnd-ontwikkelaar en mede-oprichter van de Swwweet-studio - heeft 13 jaar ervaring met het creëren van verschillende projecten voor klanten zoals de gemeenteraad van Barcelona, en met zijn uitgebreide ervaring nodigt hij u uit om de modernste technieken en hulpmiddelen te ontdekken die een revolutie teweegbrengen in de sector.
Als in de loop van Inleiding tot responsieve webontwikkeling met HTML en CSS , je bent al begonnen in de wereld van het responsive web, hierin leer je verschillende geavanceerde technieken met tools zoals CSS Grid, Flexbox, CSS Shapes, viewport units, CSS variabelen, 3D transformaties of parallax-achtig effecten.
Wat leer je tijdens deze online cursus?
25 lessen & 16 aanvullende bronnen
De viewport-eenheden
4 minuten, 40 seconden
Afbeeldingen met object-fit
4 minuten, 44 seconden
CSS-kolommen
3 minuten, 1 seconde
CSS-vormen
7 minuten, 5 seconden
Variabelen in CSS
4 minuten, 11 seconden
Inleiding tot flexbox
3 minuten, 12 seconden
Wat is inbegrepen in deze cursus?
Het eerste dat u gaat doen, is Javier Usobiaga, zijn professionele carrière en zijn meest opmerkelijke projecten ontmoeten.
U leert hoe u de lay-out vorm kunt geven met de eenheden ten opzichte van de viewport-eenheden, de object-fit en hoe u tekst in kolommen met CSS-kolommen kunt verdelen. U zult zien hoe webvormen niet langer rechthoekig kunnen zijn met clip-path en CSS Shapes en u zult ook leren uw code te optimaliseren met de eigen eigenschappen van de eigen variabelen.
U ontdekt de revolutie die Flexbox teweeg heeft gebracht in de wereld van weblay-out . Javier leert je alle mogelijkheden van het uitlijnen van elementen. Om dit te doen, zal het de eigenschappen van de container en de inhoud uitleggen, en de mogelijkheden van uitlijningen met een hoofdas, een gekruiste as en alternatieve assen.
Je zult de nieuwe spelregels met CSS Grid blijven ontdekken door de manier waarop je je code structureert en de lay-out . U leert enkele rasterfuncties, de distributie- en grootte-eigenschappen en hoe u een raster kunt maken dat zich aanpast aan verschillende schermformaten met de repeat en minmax .
Javier zal meer geavanceerde technieken met CSS Grid uitleggen over rastergebieden, uitlijning en volgorde, nesten en aan de hand van een voorbeeld hoe je Grid en Flexbox in combinatie kunt gebruiken in een project.
Je leert kort over 3D-transformaties met een praktisch voorbeeld van diepte en effecten in scroll om eindelijk projecten, voorbeelden en bronnen te zien die door Javier zijn geselecteerd om als inspiratie te dienen.
What is this course's project?
Je doet een gratis oefening met een of meer van de aangeleerde technieken. Javier zal een informatiepagina maken over de verovering van de Zuidpool, je kunt het thema en het project kiezen dat je wilt.
Projecten van studenten van de cursus
Who is this online course for?
Iedereen met interesse in modern design en layout technieken met CSS Grid, Flexbox en andere moderne technieken.
Requirements and materials
Om deze cursus te volgen is een gedegen kennis van HTML en CSS, een computer en een code-editor noodzakelijk.
Beoordelingen
- 8 maanden geleden
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 8 maanden geleden
increíble
- creative_250792PLUS9 maanden geleden
Cours très instructif, agréable, très complet
- 1 jaar geleden
Es un curso muy bueno
- 1 jaar geleden
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Hij geniet ook van zijn rol als Web Design-leraar in gerenommeerde workshops en scholen zoals Elisava, IDEP.
Usobiaga begrijpt het web in zijn geheel, niet alleen hoe mooi het op het computerscherm kan zijn, maar ook de bruikbaarheid ervan in verschillende apparaten en omstandigheden.
In zijn woorden: "Ik denk dat net zo belangrijk als esthetiek is hoe snel het laadt of hoe goed het reageert, en het lijkt mij dat we dat in onze branche vaak vergeten".
Inhoud
- U1
Introductie
- Presentatie
- invloeden
- U2
De lay-out vormgeven
- De viewport-eenheden
- Afbeeldingen met object-fit
- CSS-kolommen
- CSS-vormen
- Variabelen in CSS
- U3
Lay-out in één dimensie met flexbox
- Inleiding tot flexbox
- Containereigenschappen
- Inhoudseigenschappen
- Uitlijningen in hoofdas en dwarsas
- Geavanceerde opstellingen
- Geavanceerde lay-outs met flexbox
- U4
Lay-out in twee dimensies met CSS-raster
- Inleiding tot CSS-raster
- Rasterfuncties
- Distributie en grootte:
- Automatisch responsief raster
- U5
Geavanceerd CSS-raster
- Gebieden op het raster
- Uitlijning en bestelling
- Nesten
- Grid (en flexbox) in de praktijk
- U6
De derde dimensie: diepte- en scrolleffecten
- Inleiding tot 3D-transformaties
- Vaste kopteksten
- Door gesynchroniseerde animaties scrollen
- Inspiratie en bronnen
- EP
Eindproject
- Technieken voor weblay-out
Wat kan je verwachten van een cursus van Domestika
Leer in je eigen tempo
Geniet van thuis leren, zonder lesroosters en in je eigen tempo. Jij beslist wanneer je verder gaat met het volgende onderdeel.
Leer met de beste professionals
Leer de meest bruikbare methoden en technieken van de beste professionals in de creatieve industrie.
Ontmoet deskundige docenten
Iedere docent brengt kennis met passie over, biedt duidelijke uitleg en een professioneel perspectief bij elke les.
Certificates
PLUSIf you're a Plus member, get a persoonlijk certificaat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Zorg dat je op de voorste rij zit
Dankzij de hoge kwaliteit van de video's mis je geen enkel detail. Dankzij de onbeperkte toegang kun je de lessen zo vaak bekijken als nodig is om je vaardigheden te perfectioneren.
Deel kennis en ideeën
Stel vragen, krijg feedback en bied oplossingen aan. Deel je leerervaringen met andere studenten in de community die net als jij een passie hebben voor creativiteit.
Maak contact met een wereldwijde creatieve community
Deze community heeft miljoenen gebruikers van over de hele wereld, nieuwsgierig en enthousiast om hun creativiteit te verkennen en te uiten.
Geef cursussen op een professionele manier
Domestika selecteert zorgvuldig haar docenten en produceert iedere cursus in eigen huis om een uitstekende online leerervaring te garanderen.
Veelgestelde vragen
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.