HTML5 en CSS3 Cursus

Les 1 • Inleiding tot de rollen van HTML en CSS

Onderscheidt structuur (HTML), presentatie (CSS) en gedrag (JavaScript) als afzonderlijke zorgen. Schept verwachtingen voor de volledige cursusboog.

Les 2 • Hoe het web werkt

Behandelt HTTP-request-responsecycli, DNS-resolutie en browser-renderingpijplijnen. Plaatst al het daaropvolgende HTML/CSS-werk in reëel browsergedrag.

Les 3 • Je ontwikkelomgeving instellen

Installeert en configureert een code-editor, browserontwikkeltools en een lokale bestandsserver. Zorgt ervoor dat elke student een consistente, productieve werkruimte heeft.

Les 1 • HTML5-syntaxisregels en -anatomie

Legt tags, attributen, nestingsregels en de DOCTYPE-verklaring uit. Correcte syntaxis voorkomt renderingproblemen in browsermodus voor quirks.

Les 2 • Tekstinhoudelementen

Leert koppen, alinea's, lijsten, blokcitaten en inline tekstelementen. Studenten structureren leesbare, semantisch betekenisvolle hoofdtekst.

Les 3 • Tabellen en gegevenspresentatie

Bouwt toegankelijke gegevenstabellen met behulp van thead, tbody, th en td-elementen. Versterkt semantische HTML door tabellen strikt te reserveren voor tabelgegevens.

Les 4 • Links en afbeeldingen

Behandelt anker-tags, href-waarden, target-attributen en het img-element met alt-tekst. Deze elementen vormen de ruggengraat van navigeerbare, visuele webpagina's.

Les 1 • HTML5-formulierbasisbeginselen

Behandelt het form-element, action- en method-attributen en kerninvoertypen. Formulieren zijn het primaire mechanisme voor het indienen van gebruikersgegevens.

Les 2 • Select, Textarea en Fieldset

Bouwt dropdownmenu's, tekstvakken met meerdere regels en gegroepeerde formulierbesturingen. Fieldset en legend verbeteren formuliertoegankelijkheid en logische groepering.

Les 3 • Semantische landmerkelementen

Introduceert header, nav, main, article, section, aside en footer. Semantische opmaak verbetert toegankelijkheid en indexering door zoekmachines.

Les 4 • Geavanceerde invoertypen en -attributen

Verkent HTML5-invoertypen: date, range, color, tel en number. Native invoertypen verminderen JavaScript-afhankelijkheid en verbeteren mobiele UX.

Les 1 • Het CSS-boxmodel

Definieert content-, padding-, border- en margingebieden en hun effect op elementgrootte. Beheersing van het boxmodel is een vereiste voor al het lay-outwerk.

Les 2 • Specificiteit, overerving en cascade

Legt uit hoe browsers tegenstrijdige regels oplossen met behulp van specificiteitsscores en brondvolgorde. Beheersing van de cascade voorkomt onverwachte stijloverschrijvingen.

Les 3 • CSS-syntaxis en koppelingsmethoden

Behandelt regelsets, declaraties, inline-stijlen, interne stijlblokken en externe stylesheets. Externe stylesheets worden vastgesteld als de professionele standaard.

Les 4 • Kleuren, eenheden en typografie-basisbeginselen

Behandelt hex-, RGB- en HSL-kleurwaarden en absolute versus relatieve CSS-eenheden. Consequent gebruik van rem- en em-eenheden ondersteunt schaalbare, toegankelijke typografie.

Les 1 • Flexbox en Grid combineren

Toont aan wanneer je Flexbox in Grid-cellen nest en vice versa. Studenten bouwen een volledige paginalay-out met beide systemen op de juiste manier.

Les 2 • Grid-plaatsing en benoemde gebieden

Leert lijngebaseerde plaatsing, span-syntaxis en grid-template-areas voor benoemde regio's. Benoemde gebieden maken complexe lay-outs leesbaar en onderhoudbaar.

Les 3 • Flexbox-uitlijning en -ordening

Behandelt justify-content-, align-items-, align-self- en order-eigenschappen. Deze eigenschappen maken nauwkeurige controle over itemverdeling en stapeling mogelijk.

Les 4 • Flexbox-grondbeginselen

Introduceert het flex-container- en flex-item-model, assen en de flex-direction-eigenschap. Flexbox lost eendimensionale uitlijningsproblemen elegant op.

Les 1 • Responsieve typografie en witruimte

Past clamp, vw-eenheden en vloeiende schaal voor witruimte toe op typografie en lay-outhiaten. Vloeiende lettertypen elimineren de noodzaak voor meerdere breekpunt-overschrijvingen.

Les 2 • Media Query-syntaxis en breekpunten

Leert @media-syntaxis, mediatypen en logische operatoren voor het definiëren van breekpunten. Breekpunten moeten de inhoudsbehoeften weerspiegelen, niet specifieke apparaatgroottes.

Les 3 • Responsieve ontwerpprincipes

Behandelt vloeiende grids, flexibele afbeeldingen en de viewport meta-tag als de drie pijlers van RWD. Deze principes sturen elke lay-outbeslissing in dit hoofdstuk.

Les 4 • Responsieve afbeeldingen en media

Gebruikt srcset, sizes en het picture-element om afbeeldingen van de juiste grootte te leveren. Correcte afbeeldingslevering vermindert het paginagewicht op mobiele netwerken.

Les 1 • Prestaties en toegankelijkheid van beweging

Identificeert gecomponeerde eigenschappen, vermijdt lay-outtriggerende animaties en respecteert prefers-reduced-motion. Verantwoord bewegingsontwerp dient alle gebruikers.

Les 2 • CSS-transforms

Past translate, rotate, scale en skew-transforms toe in 2D- en 3D-ruimte. Transforms worden GPU-versneld en veroorzaken geen lay-outherberekening.

Les 3 • CSS aangepaste eigenschappen

Definieert en gebruikt CSS-variabelen voor kleur-, witruimte- en typografietokens. Aangepaste eigenschappen maken themabrede wijzigingen mogelijk vanuit één enkele declaratie.

Les 4 • CSS-keyframe-animaties

Bouwt animaties in meerdere stappen met behulp van @keyframes, animation-name en animation-eigenschappen. Keyframe-animaties lopen onafhankelijk van gebruikersinteractie.

Les 1 • Het CSS-ontwerpsysteem toepassen

Implementeert aangepaste eigenschappen, een typografieschaal en componentstijlen op alle pagina's. Een gedeeld ontwerpsysteem zorgt voor visuele consistentie op de hele site.

Les 2 • Projectplanning en wireframing

Definieert sitedoelen, inhoudsinventarisatie en low-fidelity wireframes voordat code wordt geschreven. Planning voorkomt structurele herschrijvingen en scopeverloop tijdens de ontwikkeling.

Les 3 • Responsieve lay-outimplementatie

Past Grid- en Flexbox-lay-outs toe met mobiel-eerst mediaquerys op alle pagina's. Elke pagina moet correct worden weergegeven van 320px tot 1440px viewportbreedtes.

Les 4 • Toegankelijkheidsaudit en laatste afwerking

Voert geautomatiseerde en handmatige toegankelijkheidscontroles uit, corrigeert contrastproblemen en voegt bewegingsvoorkeuren toe. De uiteindelijke site voldoet aan WCAG AA-contrast- en toetsenbordnavigatienormen.