Een interactief oefeningssysteem voor het leren van HTML, CSS en web development.
Dit framework biedt een gestructureerde manier om programmeeroefeningen te maken en te voltooien. Studenten kunnen oefeningen maken, direct feedback krijgen en hun voortgang bijhouden.
Leer de basis van het CSS box model met width, height, margin, padding en border. Oefen met zowel tekstvelden als afzonderlijke inputvelden.
Start OefeningOefen met CSS achtergrondkleuren. Leer hoe je verschillende elementen verschillende kleuren geeft en werk met basis CSS selectors.
Start OefeningLeer hoe je geneste HTML structuren maakt met div elementen. Oefen met het bouwen van complexere HTML layouts.
Start OefeningLeer HTML tabellen maken met tr, td en th elementen. Oefen met basis tabelstructuren en headers.
Start OefeningComplete formulieren oefeningen: leer verschillende input types, placeholders, disabled velden en formulier styling. 50 oefeningen verdeeld over 3 tabs.
Start OefeningLeer CSS Grid van basis tot geavanceerd. Maak complexe layouts met grid-template-columns, rows, gap, spanning en alignment. 20 progressieve oefeningen.
Start OefeningLeer CSS Flexbox layouts met flex-direction en justify-content. 10 basis oefeningen met velden en 10 volledige CSS oefeningen. Oefen met row, column, reverse en space-between.
Start OefeningWil je je eigen oefeningen maken?
Je kunt het project clonen vanaf de mondriaantin repository. Maak (met behulp van AI) een nieuwe exercise file aan en plaats het in de exercises folder. Je studenten kunnen dan op index.html?exercise=naam_van_oefening de oefening openen.
Bekijk de volledige documentatie voor het framework (of voer het aan ChatGPT en vraag om een oefening):
📖 Volledige DocumentatieTip: Je kunt ook direct naar een specifieke oefening gaan door de URL parameter te gebruiken: index.html?exercise=naam_van_oefening