We hebben een zip bestand toegevoegd aan de cursus, met daarin alle werkbestanden van de CSS Grid cursus. Dit zijn alle HTML bestanden met bijbehorende CSS code, zoals die in de cursus gebruikt zijn.
Je kunt dus nu alle bestanden zoals die in de cursus gebruikt zijn, zelf in je browser bekijken en eventueel in je editor zelf aanpassen om te oefenen.
Het is makkelijk om alle broncode in je browser te bekijken, want de CSS is in de pagina’s zelf toegevoegd. Wat je ziet, kun je meteen bewerken.
We hebben uitgebreide oefeningen toegevoegd voor de cursussen HTML5 en CSS3 basis. Na het volgen van elk hoofdstuk van de cursus kun je de bijbehorende oefeningen zelf maken.
Het zip bestand met het Word bestand, alle benodigde bestanden en alle oplossingen van de oefeningen is te downloaden boven de cursusvideo’s. (Je moet wel geabonneerd zijn op de cursus of VIP lid zijn)
Deze week hebben we de laatste hand gelegd aan deze cursus. Naast de noodzakelijke theorie bevat deze cursus heel veel praktijkoefeningen om allerlei soort layouts te bouwen.
We hebben een nieuwe cursus toegevoegd: CSS Flexbox, de manier om moderne responsive layouts te maken. In deze cursus, die veel praktijkvoorbeelden bevat, leer je hoe je met deze techniek layouts en onderdelen van pagina’s flexibel kunt ordenen en positioneren.
Problemen met het maken van web layouts zijn hiermee verleden tijd. Met CSS Flexbox kun je elementen over een pagina verdelen, simpel en exact zoals je wilt. Flexbox bevat eigenschappen die ervoor zorgen dat layout al aangepast wordt aan de grootte van een beeldscherm. Minder werk, beter resultaat!
De volgende nieuwe cursus is CSS Basis. We hebben ervoor gekozen om dit los te trekken van HTML, en voor CSS aparte cursussen te maken. Dit maakt de cursussen compacter. Deze cursus is 2 uur lang en leert je de basis van CSS.
Na het doornemen weet je wat CSS is, hoe je het kan toepassen in webpagina’s, alsmede de belangrijkste eigenschappen voor tekst, kleuren achtergronden, lijsten, links, tabellen, en je leert hoe je eenvoudig zelf Google fonts kunt gebruiken in je site.
Ook leer je alle basis eigenschappen van CSS layout: inline- en block elementen, het zogenaamde box-model van CSS, positionering van elementen door absolute, relatieve, fixed, sticky positionering en “float”, elementen zwevend maken.
Daarnaast leer je de basis van Media Queries, om inhoud aan te passen aan schermgrootte.
Na deze cursus ben je klaar voor het grote werk: de nieuwste CSS modules op het gebied van layout: Flex Layout en CSS Grid. Deze laatste twee cursussen staan op de planning voor volgend jaar, 2020.
Bekijk de gratis video’s van deze cursus
Nieuwe cursus: leer in één uur hoe hoe je CSS gebruikt in WordPress. CSS gebruiken geeft de optie om elk thema wat betreft kleuren, lettertypes en ander uiterlijk vorm te geven naar je eigen wensen.
CSS kan er ook voor zorgen dat je site sneller blijft, want je hoeft wellicht minder plugins te gebruiken, omdat je zelf meer aanpassingen kunt maken.
Flex is een nieuwe layout module in CSS, die eindelijk het maken van layouts makkelijk maakt. Er zijn allerlei CSS eigenschappen beschikbaar om rijen of kolommen te maken en de onderdelen onderling uit te lijnen en te schalen. Het werkt als volgt: je maakt van een element een flex container met de eigenschap display:flex. Alle directe kinderen worden nu flex-items. Er zijn verschillende eigenschappen voor de container en voor de flex-items mogelijk.
Als voorbeeld hier een van de meest simpele toepassingen: 3 even brede kolommen maken.
Dit is de HTML code:
<section>
<div></div>
<div></div>
<div></div>
</section>
We maken nu in CSS van de section een flex container. De items krijgen flex:1, wat (kort uitgelegd) betekent dat ze allemaal even groot worden.
section {
display:flex;
}
div {
flex:1;
}
Dit is alles wat nodig is om een pagina met drie kolommen te maken. Er is nu nog niets te zien, daarvoor geven we de items (de div elementen) een achtergondkleur, en zetten we er iets in, dat we centreren. Ook geven we de flex-container (het section element) een hoogte, 300pixels.
In Flexbox zijn geen instrumenten ingebouwd voor marge of padding, dat doen we dus met de bekende CSS eigenschappen. De complete CSS ziet er dan als volgt uit:
section {
display: flex;
height:300px;
}
div {
flex:1;
background-color: silver;
text-align: center;
margin:10px;
padding:10px;
}
En daarmee hebben we drie zichtbare kolommen:
De kolommen zullen nu meeschalen met het scherm, ze zullen altijd altijd het complete scherm vullen, hoe groot of klein dat ook wordt. En standaard nemen ze al de complete hoogte van de container in beslag, alle kolommen even hoog dus!
Flex zal in principe altijd alle flexitems op één rij houden, maar ze kunnen dan wel eens erg smal worden. Om dat te voorkomen, kun je een minimum breedte aangeven voor de items, en de container aangeven dat er wrap mag optreden, waardoor items die niet passen op een volgende rij komen. Vervolgens zijn er dan nog mogelijkheden om de overgebleven ruimte te verdelen, waardoor je alles perfect kunt uitlijnen, op verschillende manieren, zoals gecentreerd, rechts, links, en verdeeld over de pagina met dezelfde tussenruimte.
Volop mogelijkheden, dus, waar we later zeker op terug zullen komen. Een cursus Flexbox zit ook in de planning.
Bekijk een voorbeeld met de complete code.
In dit voorbeeld is de hoogte van de container weggehaald en is er meer inhoud in een item gezet.
Dat moet toch niet zo lastig zijn? Dat zou je inderdaad denken, maar als je iets langer met HTML/CSS bezig bent, weet je dat dat wel zo is. Vreemd genoeg is daar nooit iets voor ingebouwd. Sowieso het maken van lay-outs is nooit een sterk punt geweest, omdat de oorspronkelijke uitvinders van HTML iets wilden maken voor het uitwisselen van tekstbestanden, met hyperlinks. Ze hebben er nooit bij stilgestaan dat men later iets met vormgeving zou willen.
Afijn, dit heeft er toe geleid dat er tot voor enkele jaren niets was waarmee je dat makkelijk kunt doen, zonder kunstgrepen of dingen gebruiken waarvoor ze niet zijn gemaakt. (Een tabel bijvoorbeeld). Tot Flexbox kwam.
Volledig: CSS Flexibele Box Layout Module is een nieuwe module die speciaal voor layout is gemaakt. Nou ja nieuw, er is wel bijna 10 jaar aan gewerkt, maar het resultaat is best goed!
In ieder geval is verticaal centreren heel simpel geworden: om dat te doen maak je van een element een flexbox container, en plaats je er iets in dat je centreert (horizontaal, en ook vertikaal!) met margin:auto;
Bekijk een voorbeeld inclusief code waar je zelf nog mee kunt spelen.