Netjes coderen met behulp van CodePen

Wanneer je (je leerlingen) wilt leren om op een nette manier HTML pagina's te schrijven, dan weet je waarschijnlijk dat je het beste de HTML, CSS en JS code gescheiden kunt houden. Dit maakt het programmeren zuiverder en overzichtelijker.
Vind je het lastig om daarvoor telkens van omgeving en/of editor te wisselen, dan is CodePen absoluut een uitkomst. In één overzichtelijk scherm heb je alle code bij elkaar en zie je gelijk wat er gebeurt als je iets aanpast of verandert.

Je kunt een gratis account aanmaken en dan gelijk aan de slag gaan met het maken van een nieuwe Pen, of je bladert door de bijdragen van anderen. Er zitten juweeltjes van stukjes code bij! Pens zijn natuurlijk te delen en ook te embedden op webpagina's. Dat ziet er dan bijvoorbeeld zo uit:

See the Pen Show/hide by Willem Karssenberg (@trendmatcher) on CodePen