MHBO Praktijkcursus – Frontend programmeren

Je bouwt en onderhoudt interactieve, toegankelijke en responsieve webpagina’s met HTML, CSS, JavaScript en moderne tools.

1. 1 Inleiding tot frontend programmering Je verkent de rol van frontend development, basistechnieken en het belang van UX en UI in webontwikkeling.
   5 lessen

   1. Wat is frontend programmeren en waarom is het belangrijk voor webontwikkeling?Je onderzoekt de impact van frontend development op het functioneren van websites.
   2. Verschil tussen frontend en backend programmerenJe vergelijkt frontend en backend en benoemt hun specifieke taken binnen webontwikkeling.
   3. De rol van de frontend developer binnen een ontwikkelingsteamJe beschrijft de werkzaamheden van een frontend developer in een team.
   4. Basisprincipes van HTML, CSS en JavaScriptJe past de basis van HTML, CSS en JavaScript toe in eenvoudige webpagina’s.
   5. Het belang van gebruikerservaring (UX) en gebruikersinterface (UI) in frontend ontwikkelingJe analyseert hoe UX en UI bijdragen aan de gebruiksvriendelijkheid van websites.
2. 2 HTML: De basis van webpagina’s Je leert webpagina’s structureren met HTML en zorgt voor toegankelijke en goed opgebouwde code.
   5 lessen

   1. De opbouw van een HTML-document: elementen, tags en attributenJe herkent de opbouw van een HTML-document en gebruikt elementen, tags en attributen.
   2. Het gebruik van HTML5-tags en semantische elementen (bijv. <header>, <footer>, <section>)Je past semantische HTML5-elementen toe voor een duidelijke structuur.
   3. Het belang van toegankelijke en goed gestructureerde HTML-codeJe beoordeelt de toegankelijkheid en structuur van HTML-code.
   4. Het inbedden van media: afbeeldingen, video's, en audioJe voegt afbeeldingen, video’s en audio toe aan webpagina’s.
   5. Formulieren in HTML: invoervelden, knoppen en validatieJe maakt formulieren met invoervelden, knoppen en eenvoudige validatie.
3. 3 CSS: Stijlen en lay-outs Je gebruikt CSS om webpagina’s vorm te geven en responsieve lay-outs te maken voor verschillende schermen.
   5 lessen

   1. Wat is CSS en hoe wordt het gebruikt om de stijl van een webpagina te bepalen?Je past CSS toe om de visuele stijl van een webpagina te bepalen.
   2. Basisconcepten van CSS: selectors, properties en valuesJe gebruikt selectors, properties en values om stijlen te definiëren.
   3. Het gebruik van CSS-boxmodel: margin, padding, borders en contentJe werkt met het boxmodel om marges, opvulling en randen te beheren.
   4. Flexbox en Grid: moderne technieken voor het maken van responsieve lay-outsJe maakt flexibele lay-outs met Flexbox en Grid-technieken.
   5. Media queries en responsive design: hoe pas je stijlen aan voor verschillende schermformaten?Je past media queries toe voor verschillende schermformaten.
4. 4 JavaScript: Interactiviteit op de webpagina Je voegt interactiviteit toe aan webpagina’s met JavaScript en leert basisprincipes van programmeren.
   5 lessen

   1. Wat is JavaScript en hoe wordt het gebruikt voor dynamische webpagina's?Je ontdekt hoe JavaScript zorgt voor dynamische functionaliteit op websites.
   2. Variabelen, datatypes en basis syntax in JavaScriptJe gebruikt variabelen, datatypes en syntax om eenvoudige scripts te schrijven.
   3. Functies en methoden: het creëren van herbruikbare codeJe maakt functies en methoden voor herbruikbare code.
   4. DOM-manipulatie: interactie met HTML-elementen via JavaScriptJe manipuleert HTML-elementen via de DOM met JavaScript.
   5. Event handling: het afhandelen van gebruikersinvoer zoals klikken en toetsenbordactiesJe handelt gebruikersinvoer af met events zoals klikken en toetsenbordacties.
5. 5 Versiebeheer en samenwerken met Git Je leert werken met Git voor versiebeheer en samenwerking aan frontend projecten.
   5 lessen

   1. Wat is Git en waarom is versiebeheer belangrijk in frontend ontwikkeling?Je verklaart het belang van versiebeheer en de basis van Git.
   2. Het gebruik van Git-commando’s: init, add, commit, push en pullJe voert basishandelingen uit met Git-commando’s zoals init, add, commit, push en pull.
   3. Hoe werk je samen met andere developers via Git en GitHub?Je werkt samen met anderen via Git en GitHub.
   4. Het beheren van branches en het oplossen van merge-conflictenJe beheert branches en lost merge-conflicten op.
   5. Het belang van een duidelijke commitgeschiedenis en goede naamgevingsconventiesJe zorgt voor een duidelijke commitgeschiedenis en gebruikt consistente namen.
6. 6 Responsive webdesign en mobile-first Je ontwerpt websites die goed werken op verschillende apparaten en test deze op responsiviteit.
   5 lessen

   1. Wat is responsive webdesign en waarom is het essentieel voor de gebruikerservaring?Je onderzoekt waarom responsive design belangrijk is voor de gebruiker.
   2. Het concept van mobile-first design: het bouwen van een website die eerst geoptimaliseerd is voor mobiele apparatenJe past mobile-first principes toe bij het ontwerpen van webpagina’s.
   3. Het gebruik van flexibele afbeeldingen en mediaqueries om responsief te ontwerpenJe gebruikt flexibele afbeeldingen en media queries voor responsief ontwerp.
   4. Het aanpassen van lay-outs voor verschillende schermgroottes (desktop, tablet, mobiel)Je past lay-outs aan voor desktop, tablet en mobiel.
   5. Tools en technieken voor het testen van responsieve websitesJe test websites met tools voor responsieve weergave.
7. 7 CSS preprocessors: SASS en LESS Je werkt met CSS preprocessors zoals SASS en LESS om efficiënter en gestructureerd te stijlen.
   5 lessen

   1. Wat zijn CSS preprocessors en waarom zijn ze nuttig voor grotere projecten?Je onderzoekt het nut van preprocessors bij grotere projecten.
   2. Het verschil tussen SASS, LESS en reguliere CSSJe vergelijkt SASS, LESS en gewone CSS.
   3. Variabelen, functies en mixins gebruiken in SASSJe gebruikt variabelen, functies en mixins in SASS.
   4. Het structureren van CSS met behulp van SASS-mappen en -bestandenJe structureert CSS met SASS-mappen en -bestanden.
   5. Het compileren van SASS naar reguliere CSS en de workflow verbeterenJe compileert SASS naar CSS en verbetert je workflow.
8. 8 JavaScript frameworks en libraries Je maakt kennis met JavaScript frameworks en libraries en leert componenten en externe tools gebruiken.
   5 lessen

   1. Wat is een JavaScript-framework en hoe verschilt het van een library?Je onderzoekt het verschil tussen frameworks en libraries.
   2. Introductie tot populaire frameworks: React, Angular, Vue.jsJe maakt kennis met React, Angular en Vue.js.
   3. De voordelen van het gebruik van frameworks in frontend ontwikkelingJe benoemt voordelen van frameworks in frontend ontwikkeling.
   4. Component-gebaseerde architectuur en herbruikbaarheid in frameworksJe werkt met component-gebaseerde architectuur voor herbruikbaarheid.
   5. Het integreren van externe libraries (bijv. jQuery, Lodash) voor veelvoorkomende takenJe integreert externe libraries voor veelvoorkomende taken.
9. 9 Web prestaties en optimalisatie Je verbetert de prestaties van websites door optimalisatie van laadtijden en gebruik van analysetools.
   5 lessen

   1. Wat zijn webprestaties en waarom zijn ze belangrijk voor de gebruikerservaring?Je onderzoekt hoe webprestaties de ervaring van gebruikers beïnvloeden.
   2. Het optimaliseren van laadtijden: compressie van afbeeldingen, minificatie van CSS/JSJe past technieken toe zoals compressie en minificatie voor snellere laadtijden.
   3. Lazy loading van afbeeldingen en andere middelen voor sneller ladenJe implementeert lazy loading voor efficiënter laden van middelen.
   4. Het gebruik van browsercache en het optimaliseren van server-responsesJe gebruikt browsercache en optimaliseert server-responses.
   5. Tools voor het meten van prestaties: Google Lighthouse, WebPageTestJe meet prestaties met tools als Google Lighthouse en WebPageTest.
10. 10 Webtoegankelijkheid (WCAG) en best practices Je zorgt dat webpagina’s toegankelijk zijn voor iedereen en toetst deze aan de WCAG-richtlijnen.
    5 lessen

    1. Wat is webtoegankelijkheid en waarom is het belangrijk voor frontend ontwikkeling?Je onderzoekt het belang van webtoegankelijkheid in frontend ontwikkeling.
    2. Het naleven van de WCAG-richtlijnen (Web Content Accessibility Guidelines)Je past WCAG-richtlijnen toe in je ontwerp en code.
    3. Het gebruik van semantische HTML voor betere toegankelijkheidJe gebruikt semantische HTML om toegankelijkheid te verbeteren.
    4. Hoe toetsenbordnavigatie en schermlezers ondersteunen in je ontwerpJe ondersteunt toetsenbordnavigatie en schermlezers in je ontwerp.
    5. Het testen van toegankelijkheid en het implementeren van verbeteringenJe test toegankelijkheid en voert verbeteringen door waar nodig.