HBO Praktijkcursus – Frontend programmeren

Je ontwikkelt frontend-toepassingen met HTML, CSS en JavaScript en werkt met frameworks, tooling en API’s.

1. 1 HTML en semantische opbouw Je structureert webpagina’s met semantische HTML en zorgt voor toegankelijke en goed gedocumenteerde code.
   10 lessen

   1. Structuur van een HTML-documentJe analyseert de opbouw van een HTML-document en past de juiste structuur toe.
   2. Gebruik van semantische elementen (<article>, <section>, <header>, etc.)Je kiest en gebruikt semantische elementen voor logische indeling van content.
   3. Formulieren en invoerelementenJe maakt formulieren en gebruikt verschillende invoerelementen.
   4. Navigatiestructuren opzettenJe ontwerpt en bouwt een duidelijke navigatiestructuur.
   5. Tabelopmaak en toegankelijkheidJe maakt tabellen en let op toegankelijkheid voor verschillende gebruikers.
   6. Multimedia-inbedding (video, audio, iframe)Je voegt multimedia toe zoals video, audio en externe content via iframes.
   7. Gebruik van attributen (alt, title, aria-label)Je gebruikt attributen zoals alt, title en aria-label voor betere toegankelijkheid.
   8. Documentatie en best practicesJe documenteert je HTML-code en past best practices toe.
   9. Validatie via W3C-validatorJe controleert je HTML op fouten met de W3C-validator.
   10. SEO-vriendelijke HTML schrijvenJe schrijft HTML die goed vindbaar is voor zoekmachines.
2. 2 CSS en vormgeving Je past CSS toe voor vormgeving, responsive design en onderhoudbare stylesheets met moderne technieken.
   10 lessen

   1. Werken met kleur, typografie en spacingJe kiest kleuren, lettertypes en bepaalt de ruimte tussen elementen.
   2. CSS-selectors en specificityJe selecteert elementen met CSS-selectors en begrijpt specificity.
   3. Box model en positioningJe werkt met het box model en positioneert elementen op de pagina.
   4. Flexbox en Grid layoutsystemenJe bouwt layouts met Flexbox en Grid voor verschillende schermgroottes.
   5. Media queries en responsive designJe gebruikt media queries om websites responsive te maken.
   6. CSS-variabelen en herbruikbare klassenJe maakt gebruik van CSS-variabelen en herbruikbare klassen.
   7. Pseudo-classes en pseudo-elementsJe past pseudo-classes en pseudo-elements toe voor extra styling.
   8. Transities en animaties met CSSJe voegt animaties en overgangen toe met CSS.
   9. Dark mode en thematiseringJe implementeert dark mode en thematisering in je ontwerp.
   10. Structureren van stylesheets (BEM, OOCSS)Je structureert stylesheets volgens BEM of OOCSS.
3. 3 JavaScript basisvaardigheden Je programmeert met JavaScript en voegt interactieve functies toe aan webpagina’s.
   10 lessen

   1. Variabelen, datatypes en operatorenJe declareert variabelen, kiest datatypes en gebruikt operatoren.
   2. Functies en parametersJe schrijft functies en werkt met parameters.
   3. Arrays en objectenJe gebruikt arrays en objecten voor het opslaan van data.
   4. Loops en conditionele logicaJe past loops en conditionele logica toe in scripts.
   5. DOM-manipulatieJe manipuleert de DOM om webpagina’s dynamisch aan te passen.
   6. Event handling (click, submit, input)Je verwerkt gebruikersacties met event handlers.
   7. Formuliervalidatie met JSJe valideert formulieren met JavaScript.
   8. Werken met modules en scriptsJe werkt met modules en laadt scripts efficiënt in.
   9. Debugging in de browser (DevTools)Je spoort fouten op met browser DevTools.
   10. Best practices in scripting (clean code)Je schrijft overzichtelijke en onderhoudbare code.
4. 4 Responsive en mobile-first design Je ontwerpt websites die goed werken op mobiele apparaten en past mobile-first principes toe.
   10 lessen

   1. Opzetten van mobile-first media queriesJe zet media queries op met mobile-first als uitgangspunt.
   2. Viewportinstellingen en schaalbaarheidJe stelt de viewport in en zorgt voor schaalbare content.
   3. Breakpoints kiezen en toepassenJe kiest en implementeert breakpoints voor verschillende schermen.
   4. Schaalbare typografie en flexibele afbeeldingenJe maakt typografie en afbeeldingen flexibel en schaalbaar.
   5. Responsieve navigatie (hamburgermenu’s e.d.)Je bouwt responsieve navigatie zoals een hamburgermenu.
   6. Toegankelijkheid op mobiele apparatenJe houdt rekening met toegankelijkheid op mobiele apparaten.
   7. Testen op verschillende devices (simulators/emulators)Je test je ontwerp op verschillende apparaten en simulators.
   8. Gebruik van units: rem, %, vw/vhJe gebruikt verschillende units zoals rem, procenten en viewport-eenheden.
   9. Flexbox vs. Grid op mobiele schermenJe vergelijkt Flexbox en Grid voor mobiele layouts.
   10. Mobile usability volgens WCAGJe past mobile usability toe volgens WCAG.
5. 5 Frontend tooling en workflow Je gebruikt moderne tooling voor versiebeheer, workflow en deployment in frontend-projecten.
   10 lessen

   1. Versiebeheer met Git en GitHubJe beheert code met Git en publiceert projecten op GitHub.
   2. Package management met npm/yarnJe installeert en beheert packages met npm of yarn.
   3. Werken met preprocessors (Sass, Less)Je werkt met preprocessors zoals Sass of Less voor CSS.
   4. Webpack en bundlingconceptenJe bundelt code met Webpack en begrijpt bundlingconcepten.
   5. Code linters en formatters (ESLint, Prettier)Je gebruikt linters en formatters voor consistente code.
   6. Werken in een component-gebaseerde structuurJe werkt in een component-gebaseerde structuur.
   7. Opzetten van dev-omgevingenJe richt een ontwikkelomgeving in voor frontend-werk.
   8. Deployment op platforms (bijv. Vercel, Netlify)Je zet projecten live via platforms zoals Vercel of Netlify.
   9. Branching en pull requests in GitJe maakt gebruik van branching en pull requests in Git.
   10. Documentatie bijhouden (README, Wiki)Je houdt documentatie bij zoals README’s en wiki’s.
6. 6 Toegankelijkheid en webstandaarden Je past toegankelijkheidsrichtlijnen toe en zorgt dat je webtoepassingen bruikbaar zijn voor iedereen.
   10 lessen

   1. Inzicht in WCAG-richtlijnenJe verdiept je in de WCAG-richtlijnen voor toegankelijkheid.
   2. Structureren van content voor screenreadersJe structureert content zodat screenreaders deze goed kunnen lezen.
   3. Keyboard navigatie implementerenJe implementeert navigatie met het toetsenbord.
   4. ARIA-roles en -labelsJe gebruikt ARIA-roles en labels voor extra toegankelijkheid.
   5. Contrast en leesbaarheid waarborgenJe waarborgt voldoende contrast en leesbaarheid.
   6. Toetsbare toegankelijkheidscriteriaJe toetst of je werk voldoet aan toegankelijkheidscriteria.
   7. Gebruik van semantiek in HTML voor toegankelijkheidJe gebruikt semantische HTML voor betere toegankelijkheid.
   8. Testtools (Axe, Lighthouse, WAVE)Je test toegankelijkheid met tools zoals Axe of Lighthouse.
   9. Foutafhandeling toegankelijk makenJe maakt foutmeldingen begrijpelijk en toegankelijk.
   10. Rapporteren van toegankelijkheidsstatusJe rapporteert de status van toegankelijkheid in je project.
7. 7 Frontend frameworks en componenten Je werkt met frontend frameworks en bouwt componenten voor interactieve webapplicaties.
   10 lessen

   1. Introductie tot React of Vue (basisbegrippen)Je maakt kennis met basisbegrippen van React of Vue.
   2. Component-based architectureJe past component-based architecture toe in je project.
   3. Props en state uitleggen en gebruikenJe legt props en state uit en gebruikt deze in componenten.
   4. Events en user-interactie beherenJe beheert events en gebruikersinteracties in een framework.
   5. Condities en lists renderenJe rendert lijsten en past conditionele weergave toe.
   6. Werken met API's in een frameworkJe haalt data op via API’s in een framework.
   7. Routing en SPA-conceptenJe gebruikt routing en werkt met single page applications.
   8. Hooks of lifecycle-methodes gebruikenJe past hooks of lifecycle-methodes toe in componenten.
   9. Styling binnen componentenJe verzorgt de styling binnen componenten.
   10. Opbouw van een kleine frontend-applicatieJe bouwt een kleine frontend-applicatie met componenten.
8. 8 API-koppelingen en data ophalen Je koppelt frontend-applicaties aan externe API’s en verwerkt data asynchroon in de gebruikersinterface.
   10 lessen

   1. Fetch API gebruikenJe haalt data op met de Fetch API.
   2. JSON begrijpen en verwerkenJe leest en verwerkt JSON-data in je toepassing.
   3. Asynchrone code (async/await, promises)Je schrijft asynchrone code met async/await en promises.
   4. Koppelen met een externe APIJe koppelt je applicatie aan een externe API.
   5. Fouten afhandelen bij API-callsJe handelt fouten af die optreden bij API-calls.
   6. Loader tonen tijdens het ophalen van dataJe toont een loader tijdens het ophalen van data.
   7. CORS en API-security basisprincipesJe past basisprincipes van CORS en API-security toe.
   8. Data manipuleren in de DOMJe verwerkt opgehaalde data in de DOM.
   9. Filters en zoekfunctionaliteiten met API-dataJe maakt filters en zoekfuncties met API-data.
   10. API-documentatie lezen en begrijpenJe leest en begrijpt API-documentatie.
9. 9 Testen en kwaliteitscontrole Je controleert frontend-toepassingen op kwaliteit en voert handmatige en geautomatiseerde tests uit.
   10 lessen

   1. Visuele controle van UI-elementenJe voert visuele controles uit op UI-elementen.
   2. Browsercompatibiliteit testenJe test browsercompatibiliteit van je toepassing.
   3. Automatisch testen (Jest, Cypress basis)Je voert automatische tests uit met Jest of Cypress.
   4. Debugging via DevToolsJe spoort fouten op met DevTools in de browser.
   5. Gebruik van code lintersJe gebruikt code linters om fouten en inconsistenties te vinden.
   6. Unit testing van functiesJe schrijft en voert unit tests uit op functies.
   7. Testgevallen documenterenJe documenteert testgevallen in je project.
   8. Gebruikerstests opzetten (usability testing)Je zet gebruikerstests op voor usability.
   9. Foutafhandeling verbeteren vanuit testenJe verbetert foutafhandeling op basis van testresultaten.
   10. CI/CD in frontend (basisinzicht)Je krijgt basisinzicht in CI/CD voor frontend.
10. 10 Projectmatig werken en documenteren Je werkt projectmatig, plant en documenteert het hele ontwikkelproces van een frontend-project.
    10 lessen

    1. Opzetten van frontend-projectstructuurJe zet een logische frontend-projectstructuur op.
    2. Planning en tijdsinschatting makenJe maakt een planning en schat de benodigde tijd in.
    3. Werken met user stories en requirementsJe werkt met user stories en requirements.
    4. Wireframes en mockups vertalen naar codeJe vertaalt wireframes en mockups naar werkende code.
    5. Scrum-elementen toepassen (stand-up, backlog)Je past Scrum-elementen toe zoals stand-ups en backlogbeheer.
    6. Samenwerken via GitHub of andere VCS-platformsJe werkt samen via GitHub of andere versiebeheersystemen.
    7. Versiebeheer en changelogs bijhoudenJe houdt versiebeheer en changelogs bij.
    8. Presenteren van projectresultatenJe presenteert projectresultaten aan betrokkenen.
    9. Reflectieverslagen schrijven op B2-niveauJe schrijft een reflectieverslag op B2-niveau.
    10. Documentatie schrijven voor eindgebruikers of developersJe schrijft documentatie voor eindgebruikers of developers.