DotnetMinorNotes

HTML
- Opbouw
  - Doctype
  - Head
  - Body
    - Navigatie
    - Content
- CSS
- HTML 5
  - Flexible boxes

HTML

Opbouw

Doctype

Zorgt voor de manier waarop de browser de html rendert

Head

Titel
CSS imports
Inline style

Body

Navigatie

ol en geen ul

Logischer om een ordered list te gebruiken omdat menu items op volgorde staan

Content

CSS

Reset.css

Een CSS bestand die alle opmaak naar 0 zet

CSS kan vanaf scratch opgebouwd worden
In alle browsers gelijk

Display

a heeft een display: inline

Wordt in de tekst weergegeven
Pakt niet altijd de volledige hoogte
display: block gebruiken om hem wel de hoogte te laten pakken

By-default block elementen

ul
table
nav
ol
header
footer
body
article
p
h1, h2, etc

float: left laat items zwegen clear: left laat het item naast de floatende items positioneren

marquee

Tekst van een naar andere kant op scherm font center img
Moet gerelateerd zijn aan je content
Geen img voor ronde hoekjes

pseudo-classes

:hover :somethingElse

Positioneren met CSS

float/clear
position: absolute/relative/fixed/sticky
flexible boxes (belangrijk)
grid system

caniuse.com

<strong> en <em> vervangen b, u, i

HTML 5

<!DOCTYPE html>
<link> hoeft geen type meer te hebben
<script> hoeft geen type meer te hebben
<header>
- Logo met slogan
<div id="nav"> -> nav
<div id="content"> -> article
- Eventueel in <section> tags
<aside> voor content aan de zijkant
<footer> voor footer
<input type="...">
- date
- time
- datetime-local
- color
- week
- month
- search
- url
  - Wat validatie
- email
  - Wat validatie
- tel
  - Wat validatie
<audio>
<video>
<canvas>

Flexible boxes

display: flex
Wrapt niet by-default
- flex-wrap: wrap
- justify-content:
  - center
  - space-between
transition: all
transform: scale(2) rotate(360deg);

@keyframes spinner { 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

css grid
<link rel="stylesheet" href="bla.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 400px)">

Custom lettertype

@font-face {
    font-family: hierjenaam;
    src: url('../fonts/bla.ttf');
}