Weblay-out met CSS Grid, Flexbox en andere moderne technieken
Een cursus van Javier Usobiaga Ferrer , webdesigner
Lid geworden in april van 2015
Ontdek de nieuwe rasters en andere manieren om een website te ontwerpen met CSS-vormen, variabelen en parallaxeffecten
Lid geworden in april van 2015
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
- 99% positieve beoordelingen (300)
- 9.249 studenten
- 25 lessen (2u 16m)
- 16 aanvullende bronnen (14 bestanden)
- Online en in je eigen tempo
- Beschikbaar in de app
- Audio: Spaans, Engels, Frans, Italiaans, Portugees, Türkçe
- Spaans · Engels · Portugees · Duits · Frans · Italiaans · Pools · Nederlands · Türkçe
- Niveau: Geavanceerd
- Onbeperkte toegang voor altijd
Wat is het cursusproject?
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
Voor wie is deze online cursus bedoeld?
Iedereen met interesse in modern design en layout technieken met CSS Grid, Flexbox en andere moderne technieken.
Vereisten en materialen
Om deze cursus te volgen is een gedegen kennis van HTML en CSS, een computer en een code-editor noodzakelijk.
Beoordelingen
Javier Usobiaga Ferrer
Een cursus van Javier Usobiaga Ferrer
Javier Usobiaga is een webdesigner en FrontEnd-ontwikkelaar, al meer dan 10 jaar en mede-oprichter samen met Marta Armada van de Swwweet-studio, gespecialiseerd in het ontwerpen van responsieve webs vanaf de eerste conceptie tot de front-end ontwikkeling.
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.
-
Certificaten
PlusAls Plus-lid krijg je voor elke cursus een persoonlijk certificaat, ondertekend door je docent. Deel het in je portfolio, op social media of waar je maar wilt.
-
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.
An Amazing course to learn Flexbox & Grid and some advanced animations.
increíble
Cours très instructif, agréable, très complet
Es un curso muy bueno
Um curso prático e direto, com ênfase em um entendimento passo a passo.