Programmeren P1 · Naslagwerk

HTML & CSS
Cheatsheet

Alles wat je per week nodig hebt om HTML en CSS terug te zoeken, met korte uitleg en duidelijke codevoorbeelden.

Begin bij de eerste week

Alle lesstof bij elkaar

Kies je week

Open een kaart om te zien welke onderwerpen je die week kunt opzoeken.

02Week 2Start HTMLHTML · CSS · documentstructuur · koppen

Je leert wat HTML en CSS doen en hoe een HTML-pagina is opgebouwd. Je krijgt uitleg over koppen, alinea's, afbeeldingen en links. Ook zie je hoe je met CSS de kleur van tekst verandert.

  • HTML
  • CSS
  • documentstructuur
  • koppen
Bekijk week 2
03Week 3Pagina-indeling, formulieren en tabellenpagina-indeling · parent en child · formulieren · inputtypes

Je leert hoe je een webpagina in duidelijke onderdelen verdeelt met tags zoals `<header>`, `<nav>`, `<main>` en `<footer>`. Je krijgt ook uitleg over elementen die binnen andere elementen staan, formulieren met verschillende invoervelden en tabellen met rijen en kolommen.

  • pagina-indeling
  • parent en child
  • formulieren
  • inputtypes
Bekijk week 3
04Week 4CSS, kleuren en lettertypesCSS-regels · selectors · kleuren · lettertypes

Je leert hoe een CSS-regel is opgebouwd en hoe je HTML-elementen selecteert. Daarna krijg je uitleg over tekstkleur, HEX- en RGB-kleuren, lettertypes, tekstdikte, tekstgrootte en Google Fonts.

  • CSS-regels
  • selectors
  • kleuren
  • lettertypes
Bekijk week 4
05Week 5Ruimte en positiebox model · padding · margin · position

Je leert hoeveel ruimte een element inneemt en wat het verschil is tussen padding en margin. Ook krijg je uitleg over `position`, `float`, dropdownmenu's en `z-index`, waarmee je bepaalt welk element voor of achter een ander element staat.

  • box model
  • padding
  • margin
  • position
Bekijk week 5
06Week 6FlexboxFlexbox · flexcontainer · flexitems · uitlijnen

Je leert hoe je elementen met Flexbox naast of onder elkaar plaatst. Je krijgt uitleg over de flexcontainer, flexitems, de hoofd- en dwarsas, uitlijning, ruimte tussen items en het laten doorlopen van items naar een volgende regel.

  • Flexbox
  • flexcontainer
  • flexitems
  • uitlijnen
Bekijk week 6
07Week 7Responsive websitesresponsive · flexibele maten · media queries · breakpoints

Je leert hoe een website zich aanpast aan een telefoon, tablet, laptop of groot beeldscherm. Je krijgt uitleg over flexibele breedtes, media queries, media types, breakpoints en een mobile-first opbouw.

  • responsive
  • flexibele maten
  • media queries
  • breakpoints
Bekijk week 7