Advanced HTML and CSS

Onderwerpen

HTML

In deze module gaan we in op semantische HTML-elementen en -attributen.

Lessen

• Sectie-elementen voor bijv. navigatie en content
• Elementen voor embedded content als canvas en video
• Formulieren
• Overige elementen als meter, time en progress

Lab: Definieer een overzichtspagina met semantische elementen Lab: Definieer een webpagina met een formulier

Na het afronden van deze module kunnen deelnemers:

• Semantiek grondiger begrijpen
• Semantische elementen gebruiken om content mee uit te drukken

CSS

In deze module leer je CSS-technieken voor o.a. het selecteren van elementen, toepassen van opmaak en positionering.

Lessen

• Selectors om specifieke states van elementen te banderen
• Pseudo-classes en pseudo-elements
• Custom fonts
• Opacity
• Animaties en transities
• Positioneringstechnieken als flexible boxes en grid

Lab: Gebruik geavanceerde technieken om een webpagina te stylen

Na het afronden van deze module kunnen deelnemers:

• Een ruim assortiment technieken inzetten om elementen te selecteren
• Verschillende positioneringstechnieken afwegen en inzetten
• Een hoop algemene stylingmogelijkheden toepassen

Browser APIs

In deze module maak je kennis met een aantal browser APIs die vaak terugkomen bij webapplicaties.

Lessen

• DOM API-updates
• Storage (Web Storage en IndexedDB)
• Locatiebepaling
• Web workers
• Realtime communicatie
• Drag and drop
• Introductie tot PWAs
• Overzicht overige veelvoorkomende APIs

Lab: Gebruik Storage-mogelijkheden om data weg te schrijven en uit te lezen Lab: Spreek de Geolocation API aan

Na het afronden van deze module kunnen deelnemers:

• Rijkere webapplicaties bouwen met behulp van de browser APIs
• De mogelijkheden van de browser meenemen bij een afweging van technologiekeuze