Core HTML and CSS

Webapplicaties ontwikkelen 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.

In deze training bouw je een stevige fundering voor het werken met webtechnieken HTML en CSS. Ook leer je hoe CSS-frameworks werk uit handen kunnen nemen en hoe CSS-preprocessors als Sass de onderhoudbaarheid van CSS verbeteren. Tenslotte wordt JavaScript bij deze training behandeld om DOM-manipulaties te kunnen doen.

Deze cursus is onderdeel van een vijfdaagse HTML/CSS-developmenttraining die ook ingaat op complexere onderwerpen.

Onderwerpen

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

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

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

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

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

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