Advanced HTML and CSS

Geavanceerd webapplicatie-ontwikkeling met HTML en CSS

Beschrijving

Het web is in populariteit flink aan het stijgen. Steeds meer functionaliteit verschuift richting de client en er vinden op het web kleine revoluties plaats. Denk hierbij aan de opkomst van SPA's en PWA's, het uitsterven van Flash/Silverlight, het realiseren van server-side oplossingen met Node.js/Deno en het bouwen van desktopapplicaties met Electron.

Deze training borduurt voort op de core HTML/CSS-training door in te gaan op HTML5-features. Denk hierbij aan features voor zowel webbrowsers als apps (storage, geolocation, web sockets, etc). Beide trainingen bij elkaar vormen samen de vijfdaagse HTML/CSS-developmenttraining.

Onderwerpen

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

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

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