Home » HTML5 and CSS3

HTML5 and CSS3

Webapplicaties ontwikkelen met HTML en CSS
Studie-investeringsformulier
Terug naar overzicht

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.

In deze training bouw je een stevige fundering voor het werken met HTML en CSS. Je leert hoe CSS-frameworks werk uit handen kunnen nemen en hoe CSS-preprocessors als LESS en Sass de onderhoudbaarheid van CSS verbeteren. Ook leer je werken volgens de laatste mogelijkheden die moderne browsers bieden met HTML5 en CSS3. Tenslotte leer je over de JavaScript APIs die met HTML5 meekomen, zoals storage, geolocation en web sockets.

Deze training is een combinatie van twee andere trainingen. De eerste 3 dagen correspondeert met de training Core HTML/CSS. De laatste 2 dagen correspondeert met de Advanced HTML/CSS.

Onderwerpen

  • Introductie HTML
  • In deze module leer je HTML toe te passen.
  • Lessen
  • * Concepten van web development
  • Opfrissen van syntax en basiselementen
  • Bewust zijn van doelgroepen
  • Formulieren
  • Lab: Een webpagina maken
  • Na het afronden van deze module kunnen deelnemers:
  • * De HTML van een webpagina lezen en schrijven
  • De keuze voor HTML-elementen beredeneren
  • Een formulier opzetten
  • Bepalen wat waar geïmplementeerd zou moeten worden
  • ### CSS
  • In deze module maak je kennis met CSS door een webpagina te stylen.
  • Lessen
  • * CSS-stylesheets te definiëren en te gebruiken
  • Selectors en specificiteit
  • Opmaakmogelijkheden
  • Basis positioneren
  • Lab: De webpagina van het vorige lab stylen
  • Na het afronden van deze module kunnen deelnemers:
  • * CSS-stylesheets maken en gebruiken
  • Elementen selecteren en opmaak voor definiëren
  • ### JavaScript
  • In deze module leer je een webpagina interactief te maken met JavaScript.
  • Lessen
  • * Essentials van de taal
  • DOM-manipulatie
  • DOM events
  • Lab: Webpagina interactief maken
  • Na het afronden van deze module kunnen deelnemers:
  • * JavaScript in de basis lezen en schrijven
  • DOM-elementen toevoegen en verwijderen
  • Reageren op DOM events
  • ### Layout
  • In deze module leer je verschillende technieken voor het opzetten van de layout van een webpagina.
  • Lessen
  • * Fixed layout
  • Fluid/elastic layout
  • Responsive layout / responsive design
  • Lab: Layouttechnieken toepassen
  • Na het afronden van deze module kunnen deelnemers:
  • * Een webpagina opzetten met verschillende layouttechnieken
  • Bepalen welke techniek het beste werkt in een bepaalde situatie
  • ### CSS-frameworks
  • In deze module leer je hoe CSS-frameworks kunnen helpen bij het stylen van webpagina's.
  • Lessen
  • * Waarom en wanneer CSS-frameworks gebruiken
  • CSS-framework gebruiken, inclusief grid system, typography en component styling
  • Lab: CSS-framework gebruiken
  • Na het afronden van deze module kunnen deelnemers:
  • * Bepalen of en welk CSS-framework ze willen gebruiken
  • Een CSS-frameworks gebruiken
  • ### CSS-preprocessors
  • In deze module leer je hoe een CSS-preprocessor het onderhouden van stylesheets makkelijker maakt.
  • Lessen
  • * Waarom en wanneer CSS-preprocessor
  • Gebruiken CSS-preprocessor
  • CSS-preprocessor integreren bij build pipeline
  • Lab: CSS-preprocessor gebruiken bij definiëren stylesheet
  • Na het afronden van deze module kunnen deelnemers:
  • * Stylesheets beter onderhoudbaar maken dankzij de rijkere taal van een preprocessor
  • Een CSS-preprocessor betrekken bij hun projecten
  • ### Geavanceerd 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
  • ### Geavanceerd 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

    HTML en CSS ooit gezien hebben