| J-P-W-L | Tekst | |
|---|
| 1-1-1-1 |
De student legt uit wat het doel is van HTML. |
Bewerken |
| 1-1-1-1 |
De student maakt een pagina met behulp van HTML. |
Bewerken |
| 1-1-1-1 |
De student past headings (h1, h2, etc) toe om koppen aan te brengen in de pagina. |
Bewerken |
| 1-1-1-1 |
De student past paragrafen(p) toe om alinea’s aan te brengen in de pagina. |
Bewerken |
| 1-1-1-1 |
De student prepareert zijn/haar computer. |
Bewerken |
| 1-1-1-1 |
De student kan uitleggen uit welke onderdelen een ontwikkelomgeving bestaat. |
Bewerken |
| 1-1-1-1 |
De student maakt gebruik van semantische elementen. |
Bewerken |
| 1-1-1-2 |
De student past line breaks toe om een nieuwe regel in te voegen tussen tekst. |
Bewerken |
| 1-1-1-2 |
De student past de img tag toe om afbeeldingen in te kunnen voegen in een pagina. |
Bewerken |
| 1-1-1-2 |
De student past speciale tekens toe in een pagina om zo tekens te kunnen gebruiken die niet op een standaard toetsenbord zitten. |
Bewerken |
| 1-1-1-2 |
De student maakt gebruik van de W3C validator om HTML-pagina’s te valideren. |
Bewerken |
| 1-1-2-3 |
De student legt uit wat het doel is van CSS. |
Bewerken |
| 1-1-2-3 |
De student maakt een pagina op met behulp van CSS-attributen. |
Bewerken |
| 1-1-2-3 |
De student past verschillende selectoren toe om elementen op te maken. |
Bewerken |
| 1-1-2-3 |
De student kiest de juiste selector om de elementen op te maken. |
Bewerken |
| 1-1-2-4 |
De student legt uit wat het box-model is en waar je het voor kunt gebruiken. |
Bewerken |
| 1-1-2-4 |
De student past margin toe om ruimte buiten de box van een element te maken. |
Bewerken |
| 1-1-2-4 |
De student past padding toe om ruimte binnen de box van een element te maken. |
Bewerken |
| 1-1-2-4 |
De student benoemt verschillende eenheden. |
Bewerken |
| 1-1-3-5 |
De student past verschillende lijsten toe in de webpagina. |
Bewerken |
| 1-1-3-5 |
De student past de table tag toe om tabellen te maken in de webpagina. |
Bewerken |
| 1-1-3-5 |
De student past de a tag toe om links te maken. |
Bewerken |
| 1-1-3-6 |
De student legt uit wat pseudo classes zijn en waar je ze kunt toepassen. |
Bewerken |
| 1-1-3-6 |
De student benoemt verschillende combinators en waar je ze kunt toepassen. |
Bewerken |
| 1-1-3-6 |
De student past pseudo classes toe op een webpagina. |
Bewerken |
| 1-1-3-6 |
De student past combinators toe op een webpagina. |
Bewerken |
| 1-1-4-7 |
Tussentoets |
Bewerken |
| 1-1-4-8 |
De student legt uit wat CSS-variabelen zijn en waar je ze voor kunt gebruiken. |
Bewerken |
| 1-1-4-8 |
De student past CSS-variabelen toe op een webpagina. |
Bewerken |
| 1-1-5-9 |
De student legt uit wat een row is in het grid systeem. |
Bewerken |
| 1-1-5-9 |
De student legt uit wat een column is in het grid systeem. |
Bewerken |
| 1-1-5-9 |
De student past grid row en column toe om een eenvoudige grid te maken op een webpagina. |
Bewerken |
| 1-1-5-10 |
De student gebruikt Grid om een HTML-element plaatsen op de website. |
Bewerken |
| 1-1-5-10 |
De student legt uit hoe je met grid-row-start bepaalt waar een element in de grid moet beginnen. |
Bewerken |
| 1-1-5-10 |
De student legt uit hoe je met grid-col-start bepaalt waar een element in de grid moet beginnen. |
Bewerken |
| 1-1-5-10 |
De student legt uit hoe je met grid-row-end bepaalt waar een element in de grid moet eindigen. |
Bewerken |
| 1-1-5-10 |
De student legt uit hoe je met grid-row-start bepaalt waar een element in de grid moet eindigen. |
Bewerken |
| 1-1-6-11 |
De student maakt gebruik van grid-area's om een pagina-indeling te maken. |
Bewerken |
| 1-1-6-11 |
De student gebruikt grid-area om HTML-elementen te plaatsen op een pagina |
Bewerken |
| 1-1-6-11 |
De student gebruikt gap om ruimte te geven tussen de verschillende HTML-elementen. |
Bewerken |
| 1-1-6-12 |
De student legt uit waarom media-queries gebruikt worden. |
Bewerken |
| 1-1-6-12 |
De student legt uit wat responsive website is. |
Bewerken |
| 1-1-6-12 |
De student maakt de pagina responsive met behulp van media-queries. |
Bewerken |
| 1-1-7-13 |
De student legt uit waarom we website mobile first maken voor de gebruiker. |
Bewerken |
| 1-1-7-13 |
De student benoemt de verschillende breedtes van verschillende schermen. |
Bewerken |
| 1-1-7-13 |
De student maakt een pagina op met media-queries op het principe van mobile first. |
Bewerken |
| 1-1-7-14 |
De student maakt een andere grid-layout voor verschillende maten met behulp van media-queries. |
Bewerken |
| 1-1-8-15 |
De student maakt een pagina op basis van een design. |
Bewerken |
| 1-1-8-16 |
Project specifieke problemen oplossen & moeilijke onderwerpen herhalen. |
Bewerken |
| 1-2-1-1 |
De student ontwikkelt een formulier met HTML. |
Bewerken |
| 1-2-1-1 |
De student benoemt minimaal vijf verschillende input-types. |
Bewerken |
| 1-2-1-1 |
De student koppelt een label aan een input met for en id. |
Bewerken |
| 1-2-1-2 |
De student gebruikt de radio en checkbox input-types. |
Bewerken |
| 1-2-1-2 |
De student past de volgende elementen toe in een formulier: input, label, select, textarea, button, option. |
Bewerken |
| 1-2-1-2 |
De student maakt een select-element in een formulier. |
Bewerken |
| 1-2-2-1 |
De student gebruikt default values en placeholders. |
Bewerken |
| 1-2-2-1 |
De student zorgt ervoor dat een input niet aangepast kan worden met disabled. |
Bewerken |
| 1-2-2-2 |
De student gebruikt CSS om de elementen in een een formulier uit te lijnen en op te maken. |
Bewerken |
| 1-2-2-2 |
De student past de eigenschap accent-color toe om checkboxen, radio buttons en andere interactieve onderdelen van het formulier een eigen kleur te geven. |
Bewerken |
| 1-2-2-2 |
De student voegt pseudo classes zoals :hover en :focus toe met CSS, zodat het formulier prettiger werkt voor de gebruiker. |
Bewerken |
| 1-2-3-1 |
De student weet wanneer hij grid of flex moet gebruiken. |
Bewerken |
| 1-2-3-1 |
De student maakt een container met display: flex. |
Bewerken |
| 1-2-3-1 |
De student benoemt de zes opties van justify-content. |
Bewerken |
| 1-2-3-2 |
De student benoemt de vijf opties van align-items. |
Bewerken |
| 1-2-3-2 |
De student benoemt de verschillen tussen align-items, align-content, justify-content, en align-self. |
Bewerken |
| 1-2-3-2 |
De student benoemt het verschil tussen gap en margin. |
Bewerken |
| 1-2-4-1 |
Tussentoets |
Bewerken |
| 1-2-4-2 |
Tussentoets bespreken |
Bewerken |
| 1-2-5-1 |
De student stelt de breedte van een item in met flex-grow en flex-shrink. |
Bewerken |
| 1-2-5-1 |
De student benoemt de drie opties van flex-wrap. |
Bewerken |
| 1-2-5-2 |
De student schrijft flex-eigenschappen in verkorte notatie. |
Bewerken |
| 1-2-5-2 |
De student ontwikkelt een webpagina met grid en flex. |
Bewerken |
| 1-2-6-1 |
De student weet wat de transform-eigenschap doet in CSS. |
Bewerken |
| 1-2-6-1 |
De student kan transform: scale() toepassen om een element groter of kleiner te maken. |
Bewerken |
| 1-2-6-1 |
De student kan transform: rotate() toepassen om een element te draaien. |
Bewerken |
| 1-2-6-1 |
De student weet het verschil tussen transform: scale() en transform: rotate(). |
Bewerken |
| 1-2-6-1 |
De student kan de transform: scale() en transform: rotate() tegelijk in een voorbeeld toepassen waarin een element wordt geschaald en gedraaid. |
Bewerken |
| 1-2-6-2 |
De student weet wat een CSS gradient is en waar je die voor gebruikt. |
Bewerken |
| 1-2-6-2 |
De student past een gradient toe op een HTML-element. |
Bewerken |
| 1-2-6-2 |
De student weet wat de light-dark() functie doet in CSS. |
Bewerken |
| 1-2-6-2 |
De student past light-dark() toe om automatisch kleuren aan te passen aan de voorkeur van de gebruiker (licht of donker thema). |
Bewerken |
| 1-2-6-2 |
De student zorgt dat tekst en achtergrond goed leesbaar blijven in beide kleurenschema’s. (https://coolors.co/contrast-checker/) |
Bewerken |
| 1-2-7-1 |
De student benoemt de basisbegrippen van CSS transitions, zoals transition-property, transition-duration, transition-timing-function en transition-delay. |
Bewerken |
| 1-2-7-1 |
De student past een eenvoudige CSS transition toe. |
Bewerken |
| 1-2-7-1 |
De student legt het verschil uit tussen ease, linear, ease-in, ease-out, ease-in-out. |
Bewerken |
| 1-2-7-1 |
De student past ease, linear, ease-in, ease-out, ease-in-out toe in CSS op HTML elementen. |
Bewerken |
| 1-2-7-2 |
De student legt uit wat een CSS animatie is en hoe deze verschilt van een transition. |
Bewerken |
| 1-2-7-2 |
De student benoemt de belangrijkste CSS animatie-eigenschappen, zoals @keyframes, animation-name, animation-duration, animation-iteration-count, animation-delay. |
Bewerken |
| 1-2-7-2 |
De student maakt een eenvoudige animatie waarbij een element beweegt of van kleur verandert. |
Bewerken |
| 1-2-7-2 |
De student stemt de gebruik van animaties af op de doelgroep. |
Bewerken |
| 1-2-8-1 |
De student onderzoekt verschillende handige tools, waarmee je html en css kan stylen. (Tools zoals w3-validator, constrast checker.) |
Bewerken |
| 1-2-8-1 |
De student weet wat de W3C Validator is en kan deze gebruiken om fouten in een HTML-bestand op te sporen en te verbeteren. |
Bewerken |
| 1-2-8-1 |
De student weet wat een contrast checker doet en waarom kleurcontrast belangrijk is voor toegankelijkheid. |
Bewerken |
| 1-2-8-1 |
De student weet hoe een contrast checker gebruikt kan worden om de leesbaarheid van tekst en achtergrondkleuren te beoordelen. |
Bewerken |
| 1-2-8-1 |
De student kan meerdere tools combineren (zoals de W3C Validator en contrast checker) om een HTML/CSS-pagina te verbeteren op het gebied van structuur en toegankelijkheid. |
Bewerken |
| 1-2-8-2 |
De student ontwikkelt een animatie met css transitions. |
Bewerken |
| 1-2-8-2 |
De student weet wat een CSS transition eigenschap is en waarvoor deze wordt gebruikt. |
Bewerken |
| 1-2-8-2 |
De student kan de transition-property toepassen om een visuele overgang te maken tussen twee stijlen. |
Bewerken |
| 1-2-8-2 |
De student kan de duur, timing en vertraging van een transition instellen met transition-duration, transition-timing-function en transition-delay. |
Bewerken |
| 1-2-8-2 |
De student kan een interactieve animatie maken -zoals een button- waarbij een element van kleur verandert en vergroot bij hover met behulp van CSS transitions. |
Bewerken |
| 1-2-9-3 |
Oefenen namaken design & Project specifieke problemen oplossen |
Bewerken |
| 1-2-9-4 |
Project specifieke problemen oplossen |
Bewerken |
| 1-3-1-1 |
De student legt uit waarom Bootstrap een nuttige CSS-library is. |
Bewerken |
| 1-3-1-1 |
De student gebruikt containers, rijen en kolommen om een responsieve layout te maken. |
Bewerken |
| 1-3-1-1 |
De student past het Bootstrap-grid toe om een layout te structureren. |
Bewerken |
| 1-3-1-1 |
De student zet zelfstandig de basisstructuur van een webpagina op met het grid-systeem. |
Bewerken |
| 1-3-1-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-2-1 |
De student past kleuren, marges, paddings en groottes toe met Bootstrap-klassen. |
Bewerken |
| 1-3-2-1 |
De student gebruikt grid-classes correct voor verschillende schermgroottes (responsive ontwerp). |
Bewerken |
| 1-3-2-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-3-1 |
De student maakt een navigatiebalk met Bootstrap-componenten. |
Bewerken |
| 1-3-3-1 |
De student configureert een navbar met menu-items en extra functionaliteiten. |
Bewerken |
| 1-3-3-1 |
De student past de juiste Bootstrap-classes toe om een responsive navbar te maken. |
Bewerken |
| 1-3-3-1 |
De student verdeelt navigatielinks evenredig over de breedte met de juiste utility-classes. |
Bewerken |
| 1-3-3-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-4-1 |
Tussentoets |
Bewerken |
| 1-3-4-2 |
De student implementeert afbeeldingen met Bootstrap, inclusief responsive scaling. |
Bewerken |
| 1-3-4-2 |
De student maakt en styled cards met behulp van Bootstrap’s card-componenten. |
Bewerken |
| 1-3-5-1 |
De student past Bootstrap’s flexbox-utilities toe om elementen uit te lijnen. |
Bewerken |
| 1-3-5-1 |
De student gebruikt flex-direction, justify-content en align-items via Bootstrap-klassen. |
Bewerken |
| 1-3-5-1 |
De student maakt een responsive flex-layout met Bootstrap (bijv. kolommen herschikken). |
Bewerken |
| 1-3-5-1 |
De student combineert grid en flex-utilities om complexe layouts te bouwen. |
Bewerken |
| 1-3-5-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-6-1 |
De student maakt een formulier met Bootstrap-form classes. |
Bewerken |
| 1-3-6-1 |
De student past validatie- en stylingklassen toe op een formulier. |
Bewerken |
| 1-3-6-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-7-1 |
De student gebruikt list-groups om informatie overzichtelijk weer te geven. |
Bewerken |
| 1-3-7-1 |
De student implementeert knoppen en alerts met de juiste Bootstrap-classes. |
Bewerken |
| 1-3-7-1 |
De student gebruikt Bootstrap Icons en past deze aan met utility-klassen. |
Bewerken |
| 1-3-7-2 |
Vervolgopdrachten over het onderwerp van de les hiervoor |
Bewerken |
| 1-3-8-1 |
Oefenen namaken design & Project specifieke problemen oplossen |
Bewerken |
| 1-3-8-2 |
Project specifieke problemen oplossen |
Bewerken |