Basisopleiding Frontend programmeren

Je ontwikkelt basisvaardigheden in frontend programmeren met HTML, CSS, JavaScript, Git en responsive design.

1. 1 Inleiding tot frontend programmering Je maakt kennis met de rol van frontend programmeren en de basis van HTML, CSS, JavaScript en UX/UI.
   5 lessen

   1. Wat is frontend programmeren en waarom is het belangrijk voor webontwikkeling?Je onderzoekt de betekenis van frontend programmeren binnen webontwikkeling.
   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 taken van een frontend developer in een team.
   4. Basisprincipes van HTML, CSS en JavaScriptJe herkent de basisprincipes van HTML, CSS en JavaScript in webprojecten.
   5. Het belang van gebruikerservaring (UX) en gebruikersinterface (UI) in frontend ontwikkelingJe beoordeelt het belang van UX en UI bij het ontwerpen van webpagina’s.
2. 2 HTML: De basis van webpagina’s Je leert HTML-documenten opbouwen, structureren en verrijken met media en formulieren.
   5 lessen

   1. De opbouw van een HTML-document: elementen, tags en attributenJe past HTML-elementen, tags en attributen toe in een webpagina.
   2. Het gebruik van HTML5-tags en semantische elementen (bijv. <header>, <footer>, <section>)Je gebruikt HTML5-tags en semantische elementen in je code.
   3. Het belang van toegankelijke en goed gestructureerde HTML-codeJe structureert HTML-code voor toegankelijkheid en leesbaarheid.
   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 en valideert formulieren met verschillende invoervelden.
3. 3 CSS: Stijlen en lay-outs Je past CSS toe om webpagina’s te stijlen en leert moderne technieken voor flexibele lay-outs.
   5 lessen

   1. Wat is CSS en hoe wordt het gebruikt om de stijl van een webpagina te bepalen?Je bepaalt de stijl van een webpagina met CSS.
   2. Basisconcepten van CSS: selectors, properties en valuesJe gebruikt selectors, properties en values in CSS.
   3. Het gebruik van CSS-boxmodel: margin, padding, borders en contentJe past het boxmodel toe: margin, padding, borders en content.
   4. Flexbox en Grid: moderne technieken voor het maken van responsieve lay-outsJe ontwerpt responsieve lay-outs met Flexbox en Grid.
   5. Media queries en responsive design: hoe pas je stijlen aan voor verschillende schermformaten?Je gebruikt media queries om stijlen aan te passen aan 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 webpagina’s.
   2. Variabelen, datatypes en basis syntax in JavaScriptJe werkt met variabelen, datatypes en basis syntax in JavaScript.
   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 past DOM-manipulatie toe om HTML-elementen te wijzigen.
   5. Event handling: het afhandelen van gebruikersinvoer zoals klikken en toetsenbordactiesJe verwerkt gebruikersinvoer met event handling in JavaScript.
5. 5 Versiebeheer en samenwerken met Git Je gebruikt Git voor versiebeheer en samenwerking aan frontend projecten.
   5 lessen

   1. Wat is Git en waarom is versiebeheer belangrijk in frontend ontwikkeling?Je legt uit waarom versiebeheer belangrijk is 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 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 houdt een duidelijke commitgeschiedenis bij en gebruikt naamgevingsconventies.
6. 6 Responsive webdesign en mobile-first Je ontwerpt websites die goed werken op verschillende apparaten met responsive en mobile-first technieken.
   5 lessen

   1. Wat is responsive webdesign en waarom is het essentieel voor de gebruikerservaring?Je onderzoekt het belang van responsive webdesign voor gebruikerservaring.
   2. Het concept van mobile-first design: het bouwen van een website die eerst geoptimaliseerd is voor mobiele apparatenJe past mobile-first design toe bij het bouwen van websites.
   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 op verschillende schermformaten met diverse tools.
7. 7 CSS preprocessors: SASS en LESS Je leert CSS preprocessors toepassen voor gestructureerde, efficiënte en onderhoudbare CSS-code.
   5 lessen

   1. Wat zijn CSS preprocessors en waarom zijn ze nuttig voor grotere projecten?Je onderzoekt het nut 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 JavaScript frameworks en libraries voor gestructureerde frontend ontwikkeling.
   5 lessen

   1. Wat is een JavaScript-framework en hoe verschilt het van een library?Je onderscheidt frameworks van libraries in JavaScript.
   2. Introductie tot populaire frameworks: React, Angular, Vue.jsJe verkent populaire frameworks zoals React, Angular en Vue.js.
   3. De voordelen van het gebruik van frameworks in frontend ontwikkelingJe benoemt voordelen van frameworks in frontend projecten.
   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 verbetert webprestaties door optimalisatie van laadtijden, caching en het meten van performance.
   5 lessen

   1. Wat zijn webprestaties en waarom zijn ze belangrijk voor de gebruikerservaring?Je onderzoekt het belang van webprestaties voor gebruikerservaring.
   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 als Google Lighthouse en WebPageTest.
10. 10 Webtoegankelijkheid (WCAG) en best practices Je zorgt voor webtoegankelijkheid volgens WCAG en implementeert best practices voor inclusieve websites.
    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.
    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.
    5. Het testen van toegankelijkheid en het implementeren van verbeteringenJe test toegankelijkheid en voert verbeteringen door.