👋 Welkom

Bij het bouwen van een website, hebben we op zijn minst 3 dingen nodig: een structurele weergave van informatie (html), met een welbepaalde vormgeving (css) en interactief feedback kan geven aan de gebruiker (javascript). Dit noemen we het 3 lagen model.

In dit boek zoomen we in op CSS, de manier om jouw website of web app visueel op te maken. Dit boek behandelt naast een intro over CSS, vooral de fundamentele bouwstenen om CSS beter te begrijpen.

Editors

Het schrijven van CSS kan op verschillende manieren, je hebt eigenlijk enkel een text editor nodig. Nu zijn er natuurlijk wel zeer handige Code editors die je kunnen helpen bij het schrijven van je CSS. Ik lijst er hieronder enkelen op, maar je bent volledig vrij om te gebruiken wat je zelf wil:

{% embed url="https://code.visualstudio.com/" %}

{% embed url="https://atom.io/" %}

{% embed url="https://www.sublimetext.com/" %}

{% embed url="https://www.jetbrains.com/phpstorm/" %}

Browsers

Bij het gebruik van deze cursus wordt sterk aangeraden om een moderne, up-to-date browser te gebruiken.

{% hint style="info" %} Een handige tip: zet je browser in het Engels. De meeste informatie die je vind op het internet zal in het Engels zijn. Je zal in deze cursus ook heel wat Engelse termen tegenkomen (met Nederlandstalige uitleg erbij natuurlijk). Als je meer informatie wil vinden over bepaalde onderdelen van de cursus, of je loopt tegen bugs aan, zal je veel sneller informatie vinden in het Engels dan in het Nederlands.

De meest populaire browsers zijn:

{% embed url="https://www.google.com/chrome/" %}

{% embed url="https://www.mozilla.org/en-US/firefox/new/" %}

{% embed url="https://www.microsoft.com/en-us/edge" %}

{% embed url="https://www.apple.com/safari/" %}

Oefenen

Om het gebruik van CSS te oefenen, kan je ook gebruik maken van online tools. Een tool die ik persoonlijk heel handig vind om kleine experimenten te bouwen is CodePen. Hierop kan je kleine pens maken waarbij je HTML, CSS en javascript kan gebruiken om bijvoorbeeld een oefening te maken. Zo'n pen kan je delen met anderen via een link.

{% embed url="https://codepen.io/" %}

Naslagwerk

Naast deze cursus vind je ook veel relevante informatie op het web. Een veelgebruikte en handige resource voor meer informatie is MDN (Mozilla Developer Network). Daarop vind je ongelooflijk veel informatie, veelal met meer informatie over het gebruik en de ondersteuning van zowel HTML, CSS als javascript. Ik gebruik deze website doorheen deze cursus ook regelmatig om te linken naar meer info. Hoewel de website sowieso in het Engels is geschreven, kan het zijn dat sommige pagina's ook een Nederlandse variant hebben. Je kan de taal onderaan de pagina wijzigen.

{% embed url="https://developer.mozilla.org/en-US/docs/Web/" %}

Als je helemaal klaar bent om er in te vliegen, kan je verder gaan naar het volgende hoofdstuk.