HTML5 en CSS3

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