MBO Praktijkcursus – Frontend programmeren

Je ontwikkelt webpagina’s met HTML, CSS en JavaScript en past technieken toe voor responsief en toegankelijk frontend ontwerp.

1. 1 Inleiding tot frontend programmering Je verkent de basis van frontend programmeren en de rol van de frontend developer binnen webontwikkeling.
   5 lessen

   1. Wat is frontend programmeren en waarom is het belangrijk voor webontwikkeling?Je onderzoekt welke taken en verantwoordelijkheden horen bij frontend programmeren.
   2. Verschil tussen frontend en backend programmerenJe vergelijkt frontend en backend en benoemt de belangrijkste verschillen.
   3. De rol van de frontend developer binnen een ontwikkelingsteamJe beschrijft de samenwerking binnen een ontwikkelingsteam vanuit het perspectief van de frontend developer.
   4. Basisprincipes van HTML, CSS en JavaScriptJe past de basisprincipes van HTML, CSS en JavaScript toe in eenvoudige voorbeelden.
   5. Het belang van gebruikerservaring (UX) en gebruikersinterface (UI) in frontend ontwikkelingJe analyseert het belang van gebruikerservaring en interface in webontwikkeling.
2. 2 HTML: De basis van webpagina’s Je leert HTML toepassen voor de opbouw, structuur en toegankelijkheid van webpagina’s.
   5 lessen

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

   1. Wat is CSS en hoe wordt het gebruikt om de stijl van een webpagina te bepalen?Je koppelt CSS aan HTML en bepaalt de stijl van een webpagina.
   2. Basisconcepten van CSS: selectors, properties en valuesJe werkt met selectors, properties en values in CSS.
   3. Het gebruik van CSS-boxmodel: margin, padding, borders en contentJe past het boxmodel toe bij het ontwerpen van lay-outs.
   4. Flexbox en Grid: moderne technieken voor het maken van responsieve lay-outsJe gebruikt Flexbox en Grid voor responsieve lay-outs.
   5. Media queries en responsive design: hoe pas je stijlen aan voor verschillende schermformaten?Je past media queries toe om stijlen aan te passen voor verschillende schermformaten.
4. 4 JavaScript: Interactiviteit op de webpagina Je gebruikt JavaScript om webpagina’s interactief en dynamisch te maken.
   5 lessen

   1. Wat is JavaScript en hoe wordt het gebruikt voor dynamische webpagina's?Je ontdekt hoe JavaScript dynamiek toevoegt aan webpagina’s.
   2. Variabelen, datatypes en basis syntax in JavaScriptJe werkt met variabelen, datatypes en de basis syntax van JavaScript.
   3. Functies en methoden: het creëren van herbruikbare codeJe schrijft 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 event handling.
5. 5 Versiebeheer en samenwerken met Git Je past versiebeheer toe met Git en werkt samen aan projecten via onder meer GitHub.
   5 lessen

   1. Wat is Git en waarom is versiebeheer belangrijk in frontend ontwikkeling?Je beschrijft het belang van versiebeheer in frontend ontwikkeling.
   2. Het gebruik van Git-commando’s: init, add, commit, push en pullJe voert basis Git-commando’s uit zoals init, add, commit, push en pull.
   3. Hoe werk je samen met andere developers via Git en GitHub?Je werkt samen met anderen door gebruik van 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 houdt een duidelijke commitgeschiedenis bij en gebruikt goede naamgevingsconventies.
6. 6 Responsive webdesign en mobile-first Je ontwerpt en test responsieve websites, met aandacht voor mobile-first en verschillende schermgroottes.
   5 lessen

   1. Wat is responsive webdesign en waarom is het essentieel voor de gebruikerservaring?Je onderzoekt het belang van responsive webdesign voor gebruikers.
   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 mediaqueries 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 gebruikt tools om responsieve websites te testen.
7. 7 CSS preprocessors: SASS en LESS Je werkt met CSS preprocessors zoals SASS en LESS om je workflow en structuur te verbeteren.
   5 lessen

   1. Wat zijn CSS preprocessors en waarom zijn ze nuttig voor grotere projecten?Je onderzoekt de voordelen van CSS preprocessors bij grotere projecten.
   2. Het verschil tussen SASS, LESS en reguliere CSSJe vergelijkt SASS, LESS en reguliere 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 frameworks en libraries voor JavaScript en past component-gebaseerde aanpak toe.
   5 lessen

   1. Wat is een JavaScript-framework en hoe verschilt het van een library?Je onderzoekt het verschil tussen frameworks en libraries in JavaScript.
   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 past component-gebaseerde architectuur toe in frameworks.
   5. Het integreren van externe libraries (bijv. jQuery, Lodash) voor veelvoorkomende takenJe integreert externe libraries zoals jQuery of Lodash voor veelvoorkomende taken.
9. 9 Web prestaties en optimalisatie Je leert websites te optimaliseren voor snelheid en prestaties en gebruikt meetinstrumenten.
   5 lessen

   1. Wat zijn webprestaties en waarom zijn ze belangrijk voor de gebruikerservaring?Je onderzoekt het belang van webprestaties voor gebruikers.
   2. Het optimaliseren van laadtijden: compressie van afbeeldingen, minificatie van CSS/JSJe optimaliseert laadtijden door afbeeldingen te comprimeren en CSS/JS te minificeren.
   3. Lazy loading van afbeeldingen en andere middelen voor sneller ladenJe past lazy loading toe voor sneller 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 zoals Google Lighthouse en WebPageTest.
10. 10 Webtoegankelijkheid (WCAG) en best practices Je past webtoegankelijkheid toe volgens WCAG en implementeert verbeteringen in je frontend werk.
    5 lessen

    1. Wat is webtoegankelijkheid en waarom is het belangrijk voor frontend ontwikkeling?Je onderzoekt het belang van webtoegankelijkheid voor frontend ontwikkeling.
    2. Het naleven van de WCAG-richtlijnen (Web Content Accessibility Guidelines)Je past WCAG-richtlijnen toe op je webpagina’s.
    3. Het gebruik van semantische HTML voor betere toegankelijkheidJe gebruikt semantische HTML voor betere toegankelijkheid.
    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.