CSS Flexbox

Pagina's en onderdelen ervan een layout geven met Flexbox

4.38 (4 reviews)
Udemy
platform
Nederlands
language
Web Design
category
instructor
CSS Flexbox
16
students
1 hour
content
May 2021
last update
$19.99
regular price

What you will learn

Wanneer Flexbox te gebruiken

Flexbox container en items maken

Container eigenschappen: richting, wrap, uitlijning items

Items: afmeting, groeien en krimpen

Kolommen en rijen maken

Een site maken met geneste structuur

Een card component maken met Flexbox

Description

Leer snel CSS3 Flexable Box Layout Module in 1 uur video demonstraties. Je leert hoe je een Flexbox container maakt, zodat alle flexbox layout eigenschappen tot je beschikking komen. Daarna duiken we in de eigenschappen van de container voor het positioneren van de container en haar kinderen, de flex items. Daarna bekijken we alle eigenschappen van de flex items. Tussendoor en aan het eind van de cursus zie een aantal praktijkvoorbeelden, waaronder het maken van kolommen, een site in horizontale richting en een cardgroup component.

De meest in het oog springende eigenschap van Flexbox is, dat je de elementen niet enkel horizontaal of vertikaal kunt uitlijnen en afmetingen geven, maar dat je ze ook op verschillende manieren kunt verdelen over de ruimte. Zo kun je "met een druk op de knop" een aantal knoppen gelijkelijk verdelen over de beschikbare ruimte, zowel horizontaal of vertikaal. Of eenvoudig kolommen maken die altijd dezelfde hoogte hebben, ongeacht de inhoud.

Voorkennis
Voor deze cursus is het noodzakelijk dat je kennis hebt van HTML en CSS. Indien je dat niet hebt, kun je mijn cursussen HTML en/of CSS eerst volgen.

Deze cursus CSS is de derde in een reeks van vier waarin je van absolute beginner tot expert gaat. Je begint met HTML, dan CSS, en daarna CSS Flexbox en CSS Grid. Met deze laatste twee nieuwe CSS3 modules kun je elke soort lay-out maken, en behoren de beperkingen die webdesign tot een paar jaar geleden had, definitief tot het verleden.
Echter, deze cursus vormt een afgerond geheel en kan ook afzonderlijk worden gevolgd.

Praktijk
Naast de lessen waar je kunt zien hoe Flexbox werkt, zijn er een aantal praktijkvideo's die je laten zien hoe je bepaalde zaken snel kunt maken met Flexbox. zo maken we een header, een pagina met drie kolommen, en een complete "card" component, een tegenwoordig veelgebruikt design en layout element in webpagina's.

Content

Basis eigenschappen van de Flex container

Beginnen met Flexbox
Praktijk: Flexbox container maken
Flex direction
Flex Wrap
Flex Flow
Hoofd- en secundaire as

Uitlijning van de items

Justify Content
Align Items
Praktijk: Een header maken
Align Content
Item order
Praktijk: Margin: auto

Eigenschappen van de flex items

Flex Grow
Flex Shrink
Flex Basis
Flex shorthand (korte notatie)
Flex "auto" en flex: 1. Wat is het verschil?
Align Self

Praktijk lessen

Praktijk: drie kolommen
Praktijk: Een site met drie rijen
Praktijk: Een site met geneste structuur
Praktijk: Cards. Deel 1: De cardgroup component
Praktijk: Cards. Deel 2: De cardgroup vormgeven
Praktijk: Cards. Deel 3: De cards maken

Reviews

Renee
July 16, 2023
An abrupt end of the last lesson. Why not finish it properly with the pictures and why isn't there the Resources option? On the whole, the explanation of Flexbox as well the possibility of trying it out on PenCode is good.

Charts

Price

CSS Flexbox - Price chart

Rating

CSS Flexbox - Ratings chart

Enrollment distribution

CSS Flexbox - Distribution chart

Related Topics

4031140
udemy ID
5/6/2021
course created date
5/22/2021
course indexed date
Bot
course submited by