1 2022-02-18: CSS¶
1.1 Overview¶
standaard CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
Bootstrap: https://getbootstrap.com/
Bulma: https://bulma.io/
Tailwind: https://tailwindcss.com/
1.2 Standaard CSS¶
box model
Flexbox
CSS Grid
1.3 Standaard CSS: Box model¶
1<html>
2 <head>
3 <style>
4
5 </style>
6 </head>
7 <body>
8 <div id="header">
9 </div>
10 <div id="content">
11 </div>
12 <div id="footer">
13 </div>
14 </body>
15</html>
Debug: https://codepen.io/takis/pen/JjOpKXw?editors=1100
Box model: https://codepen.io/takis/pen/podabbW?editors=1100
1.4 Standaard CSS: Flexbox¶
Flexbox:
https://codepen.io/takis/pen/RwjQRKN
Om meer vertrouwd te geraken met de werking van CSS Flexbox, kan je onderstaand spel spelen: https://geddski.teachable.com/p/flexbox-zombies
1.5 Standaard CSS: CSS Grid¶
https://gridbyexample.com/ https://css-tricks.com/snippets/css/complete-guide-grid/
1.6 Bootstrap¶
Enkele voorbeelden: