Cursusbeschrijving

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

  • 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
  • Materiaal

    Info Support cursusmateriaal

    Voorkennis

    Kennis van HTML en CSS