Naar de inhoud
Atelierby nealvdv
WerkbankBegin gratis

Voorkeuren

Terug naar De Kaart

Ambacht · Bouwen

Web & apps

Websites en apps die snel, toegankelijk en in vier talen werken.

  • 10 modules
  • 370 studie-uren

Begin gratis met dit ambacht

WerkroosterModules en indicatieve studie-uren per rang
RangModulesUren
Leerling4105
Compagnon4165
Meester2100
Samen10370

Waarom dit ambacht

Voor de meeste klanten is hun website of app het eerste wat de wereld van hen ziet. In dit ambacht leer je bouwen zoals het hoort: semantische HTML, doordachte CSS met licht en donker, toegankelijk volgens WCAG 2.2, in het Nederlands, Frans, Engels en Duits, en snel genoeg voor iemand met een oude smartphone in een dorp met slecht bereik.

Wat je vooraf nodig hebt

De leerlingmodules van Programmeren (minstens JavaScript en TypeScript, en Git), of vergelijkbare ervaring.

Het leerplan

Modules per rang

Elke module heeft lessen en één opdracht met een resultaat dat iemand anders kan nakijken. De uren zijn indicatief.

Je voortgang

Je vinkt modules af op dit toestel; er gaat niets naar een server. Op de Werkbank bewaar je je pad in een account, dien je je opdrachten in en krijg je het meesterteken van Neal.

Leerling

De basis. Met deze modules en een compagnonsproef word je Compagnon.

4 modules · 105 u

  1. HTML die betekenis heeft

    15 studie-uren

    Je leert pagina's opbouwen met de juiste elementen, zodat browsers, zoekmachines en schermlezers begrijpen wat er staat.

    • HTML
    • W3C Markup Validator
    • NVDA
    • VoiceOver
    • Firefox DevTools
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een pagina structureren met landmarks, koppen en lijsten
    • Kiezen tussen een link en een knop, en uitleggen waarom
    • Afbeeldingen voorzien van zinvolle alternatieve tekst
    • Een pagina valideren en de fouten oplossen
    Lessen
    1. Hoe een browser een pagina leest
    2. Documentstructuur: head, landmarks en koppen
    3. Tekst, lijsten, tabellen en links
    4. Knoppen, formulieren en labels
    5. Afbeeldingen, alt-tekst en figuren
    6. Metadata: titel, beschrijving en taal
    De opdracht

    Bouw in pure HTML (zonder CSS) de onepager van een frituur in Ninove: openingsuren, menukaart als tabel, contact en route. Een begeleider controleert de pagina met de W3C-validator, met alleen het toetsenbord en met een schermlezer, en alles moet logisch voorgelezen worden.

  2. CSS: layout, tokens, licht en donker

    35 studie-uren

    Je leert moderne CSS: layouts met grid en flexbox, kleuren en maten als design tokens, en een licht en donker thema dat altijd leesbaar blijft.

    • CSS
    • CSS Modules
    • Firefox DevTools
    • WebAIM Contrast Checker
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een responsieve layout bouwen met grid en flexbox, zonder framework
    • Kleuren, lettertypes en afstanden vastleggen als custom properties
    • Een licht en donker thema maken dat het systeem volgt en manueel te kiezen is
    • Contrast controleren tegen WCAG 2.2
    • CSS Modules gebruiken om stijlen per component te houden
    Lessen
    1. De cascade, specificiteit en overerving
    2. Box model en eenheden (rem, ch, vw, clamp)
    3. Flexbox en grid
    4. Responsief zonder breekpunten-wildgroei
    5. Design tokens met custom properties
    6. Licht en donker met prefers-color-scheme
    7. Moderne CSS: :has, container queries, nesting
    8. CSS Modules
    De opdracht

    Geef de frituurpagina uit de vorige module een volledige vormgeving met design tokens, een licht en donker thema en een layout die werkt van 320 pixels breed tot een groot scherm. Een begeleider controleert het contrast in beide thema's en zoekt naar horizontaal scrollen op smalle schermen.

  3. Toegankelijkheid: WCAG 2.2 en de EAA

    30 studie-uren

    Je leert bouwen voor iedereen: mensen met een schermlezer, alleen een toetsenbord, een vergrootglas of weinig tijd. En je kent de regels die het verplicht maken.

    • WCAG 2.2
    • axe DevTools
    • Lighthouse
    • NVDA
    • VoiceOver
    • WAVE
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • De vier principes van WCAG 2.2 uitleggen met voorbeelden
    • Een pagina testen met toetsenbord, schermlezer en automatische tools
    • Focusstijlen, foutmeldingen en beweging toegankelijk maken
    • Uitleggen voor welke bedrijven de Europese toegankelijkheidsrichtlijn (EAA) geldt
    • Een toegankelijkheidsverklaring opstellen
    Lessen
    1. Waarom toegankelijkheid, en voor wie
    2. WCAG 2.2: waarneembaar, bedienbaar, begrijpelijk, robuust
    3. Toetsenbord en focus
    4. Schermlezers en ARIA (en wanneer niet)
    5. Kleur, contrast, tekstgrootte en beweging
    6. De European Accessibility Act en wat ze betekent voor Belgische bedrijven
    7. Testen: automatisch en met de hand
    8. De toegankelijkheidsverklaring
    De opdracht

    Doe een toegankelijkheidsaudit van de website van een echte Belgische vereniging of kleine zaak (met hun toestemming) volgens WCAG 2.2 niveau AA, op vijf representatieve pagina's. Lever een rapport met bevindingen, ernst en concrete oplossing per punt. Een Compagnon herhaalt drie van je bevindingen en moet ze kunnen reproduceren.

  4. JavaScript in de browser

    25 studie-uren

    Je leert de browser zelf kennen: de DOM, events, fetch en opslag, zodat je later begrijpt wat React voor je doet.

    • JavaScript
    • TypeScript
    • Firefox DevTools
    • Chrome DevTools
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Elementen opzoeken en aanpassen via de DOM
    • Op events reageren zonder de toegankelijkheid te breken
    • Data ophalen met fetch en fouten netjes tonen
    • Kiezen tussen localStorage, cookies en serveropslag
    Lessen
    1. De DOM en hoe je hem leest
    2. Events en event delegation
    3. Fetch, JSON en foutafhandeling
    4. Opslag in de browser
    5. Progressive enhancement: eerst werken zonder JavaScript
    6. De DevTools als vriend
    De opdracht

    Voeg aan de frituurpagina een filter toe op de menukaart (vegetarisch, sauzen, snacks) die werkt met toetsenbord en schermlezer, en die zonder JavaScript gewoon de volledige kaart toont. Een begeleider schakelt JavaScript uit en test daarna met alleen het toetsenbord.

Compagnon

Het vak beheersen: grotere projecten, met nalezing per mijlpaal.

4 modules · 165 u

  1. React en Next.js

    50 studie-uren

    Je bouwt volwaardige sites en webapps met React en de App Router van Next.js, in TypeScript strict, met server- en clientcomponenten op de juiste plek.

    • React
    • Next.js
    • TypeScript
    • CSS Modules
    • Vercel
    • Yarn
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Componenten bouwen met props, state en hooks
    • Kiezen tussen server- en clientcomponenten
    • Routes, layouts en metadata opzetten met de App Router
    • Data ophalen en muteren met server actions en route handlers
    • Een site deployen naar Vercel met een preview per pull request
    Lessen
    1. Denken in componenten
    2. State, effecten en wanneer je ze niet nodig hebt
    3. De App Router: routes, layouts en loading
    4. Server components en client components
    5. Data ophalen en caching
    6. Server actions en route handlers
    7. Metadata, sitemap en robots
    8. Deployen naar Vercel
    De opdracht

    Bouw in Next.js de website van een kapsalon in Halle met vijf pagina's, een prijslijst uit een databestand, licht en donker, en een preview-deploy per pull request. Een Meester controleert de code op TypeScript strict, de verdeling server en client, en de Lighthouse-scores op mobiel.

  2. Formulieren, API's en aanmelden

    40 studie-uren

    Je leert gegevens veilig binnenhalen en tonen: toegankelijke formulieren met validatie, REST API's ontwerpen en gebruikers laten aanmelden zonder risico's.

    • Next.js
    • Zod
    • PostgreSQL
    • OpenAPI
    • Resend
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een formulier bouwen met validatie aan client- en serverkant
    • Een REST API ontwerpen met duidelijke routes, statuscodes en foutmeldingen
    • Aanmelden opzetten met sessies, veilige cookies en gehashte wachtwoorden
    • Rollen en rechten afdwingen op de server
    • Mails versturen vanuit een formulier zonder in spam te belanden
    Lessen
    1. Toegankelijke formulieren en foutmeldingen
    2. Validatie met een schema (Zod)
    3. REST: resources, methodes en statuscodes
    4. API's documenteren met OpenAPI
    5. Sessies, cookies en wachtwoorden
    6. Rollen en rechten
    7. Spam en misbruik tegengaan
    8. Transactionele mail
    De opdracht

    Bouw voor een jeugdbeweging een inschrijvingsformulier voor kamp met validatie, een beveiligd beheerscherm voor de leiding en een bevestigingsmail. Een Meester probeert het formulier te misbruiken (lege velden, te lange invoer, directe API-oproepen zonder aanmelding) en niets mag doorglippen.

  3. Meertalig en snel: i18n en Core Web Vitals

    30 studie-uren

    Je leert een site in het Nederlands, Frans, Engels en Duits opzetten zoals het in België hoort, en hem snel houden volgens de Core Web Vitals.

    • next-intl
    • Lighthouse
    • PageSpeed Insights
    • WebPageTest
    • Plausible
    • Umami
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een site vertalen met next-intl, inclusief routes, datums en bedragen
    • Taalwissel, hreflang en de juiste taal bij het eerste bezoek regelen
    • De Core Web Vitals meten en verklaren (LCP, INP, CLS)
    • Afbeeldingen, lettertypes en scripts optimaliseren
    • Bezoekers meten zonder cookiebanner, met privacyvriendelijke analytics
    Lessen
    1. Meertaligheid in België: meer dan vertalen
    2. next-intl: berichten, routes en formaten
    3. hreflang en taalkeuze
    4. Core Web Vitals uitgelegd
    5. Afbeeldingen en lettertypes
    6. JavaScript beperken
    7. Privacyvriendelijke analytics
    De opdracht

    Maak de kapsalonsite uit de vorige module viertalig (NL, FR, EN, DE) met vertaalde routes en hreflang, en breng alle pagina's op mobiel in het groen voor de Core Web Vitals in Lighthouse. Een Meester controleert de vertalingen op ontbrekende sleutels en meet zelf na.

  4. Apps: PWA's en Expo

    45 studie-uren

    Je leert wanneer een webapp volstaat, hoe je er een installeerbare PWA van maakt, en hoe je met Expo en React Native een echte app voor iOS en Android bouwt.

    • Expo
    • React Native
    • EAS
    • Workbox
    • TypeScript
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een PWA maken met manifest, service worker en offline werking
    • Kiezen tussen PWA en native app, met argumenten voor de klant
    • Een app bouwen met Expo en React Native
    • Een app testen op een echt toestel en klaarmaken voor de stores
    Lessen
    1. Web, PWA of native: de eerlijke afweging
    2. Manifest en service worker
    3. Offline werken en synchroniseren
    4. Expo en React Native
    5. Navigatie, opslag en notificaties
    6. Builden en publiceren met EAS
    De opdracht

    Bouw voor een volleybalclub een app (PWA of Expo, met onderbouwde keuze) waarin leden de wedstrijdkalender zien en hun aanwezigheid doorgeven, ook zonder netwerk in de sporthal. Een Meester installeert de app op zijn toestel, zet de vliegtuigmodus aan en controleert dat de aanwezigheid later toch doorkomt.

Meester

Wat een Meester zelfstandig moet kunnen, als voorbereiding op de meesterproef.

2 modules · 100 u

  1. Beheeromgevingen en webshops

    60 studie-uren

    Je leert voor klanten een eigen beheeromgeving en webshop bouwen waarmee ze zelf hun inhoud, producten en bestellingen beheren, veilig en zonder afhankelijkheid van een duur platform.

    • Next.js
    • PostgreSQL
    • Mollie
    • Stripe
    • Vercel
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een beheeromgeving ontwerpen die een niet-technische klant zelf gebruikt
    • Een webshop bouwen met voorraad, bestellingen en betalingen via een Belgische betaalprovider
    • Facturen en btw correct verwerken in samenspraak met de boekhouder
    • Rechten, logging en back-ups regelen voor beheerders
    • Uitleggen wanneer een bestaand platform toch de betere keuze is
    Lessen
    1. Wat een klant echt zelf wil beheren
    2. Een beheeromgeving die niet intimideert
    3. Producten, voorraad en bestellingen
    4. Betalingen integreren (bijvoorbeeld Mollie of Stripe, met Bancontact)
    5. Btw, facturen en de boekhouder
    6. Rechten, logging en herstel
    7. Eigen bouw of bestaand platform
    De opdracht

    Bouw voor een hoeve met hoeveproducten een webshop met eigen beheer: producten en voorraad, afhaalmomenten, betaling met Bancontact in testmodus en een overzicht voor de boer. Neal laat de boer (of iemand in die rol) zonder hulp een product toevoegen en een bestelling afhandelen.

  2. Een webproject van A tot Z leiden

    40 studie-uren

    Je leert een volledig webproject trekken: van het eerste gesprek en de offerte tot domein, hosting, mail, lancering en onderhoud, en je bewaakt de kwaliteit van Compagnons die meebouwen.

    • Next.js
    • Vercel
    • DNS
    • GitHub Projects
    • Markdown
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • Een briefing omzetten in een plan, offerte en planning
    • Domein, DNS, mail en hosting regelen in de juiste volgorde
    • Een lancering voorbereiden met een checklist zonder verrassingen
    • Een onderhoudsafspraak opstellen die voor beide partijen klopt
    • Het werk van Compagnons reviewen en bijsturen
    Lessen
    1. Het eerste gesprek en de briefing
    2. Plan, offerte en planning
    3. De keten: domein, DNS, mail, hosting
    4. Lanceren zonder stress
    5. Overdracht en onderhoud
    6. Kwaliteit bewaken in een team
    De opdracht

    Leid een echt klein webproject van briefing tot lancering, met minstens één medeleerling in het team. Lever het plan, de lanceringschecklist, de overdracht aan de klant en een evaluatie. Neal spreekt de klant en de medeleerling en beoordeelt het eindresultaat.

De Meesterproef

Zo word je Meester in dit ambacht

Je levert voor een echte klant een volledige website of webapp: viertalig, toegankelijk volgens WCAG 2.2 AA, met licht en donker, eigen beheer waar nodig, goede Core Web Vitals en een nette overdracht inclusief domein, mail en hosting. Neal test het werk zelf (toetsenbord, schermlezer, mobiel, vier talen), leest de code en spreekt met de klant.

Echt werk, beoordeeld door Neal. Je bent Meester per ambacht, niet in heel het vak tegelijk.

Voor klanten

Wat je hiermee voor klanten kunt doen

Wat een klant van je kan vragen zodra je dit ambacht beheerst, en vanaf welke rang. De duur is indicatief.

  • Vanaf Compagnon

    Website op maat

    Een eigen website die past bij uw zaak, snel laadt, werkt op elke telefoon en in het Nederlands, Frans, Engels en Duits.

    Wat je oplevert

    • Website in vier talen, licht en donker
    • Eigen beheer voor teksten, uren of agenda waar nodig
    • Domein, mail en hosting geregeld
    • Korte opleiding en handleiding
    • Toegankelijkheidsverklaring
    Duur
    2 tot 6 weken
    Voor wie
    Zelfstandigen, horeca, winkels, verenigingen en kmo's

  • Vanaf Compagnon

    Toegankelijkheidsaudit

    U weet waar uw website of app tekortschiet voor mensen met een beperking en wat u moet doen om aan WCAG 2.2 en de Europese toegankelijkheidsrichtlijn te voldoen.

    Wat je oplevert

    • Auditrapport volgens WCAG 2.2 AA
    • Prioriteitenlijst met concrete oplossingen
    • Ontwerp van een toegankelijkheidsverklaring
    • Hertest na de aanpassingen
    Duur
    3 tot 8 dagen
    Voor wie
    Webshops, banken, vervoerders, overheden en andere organisaties die onder de toegankelijkheidsregels vallen

  • Vanaf Meester

    Webshop met eigen beheer

    Een webshop die van u is: u beheert zelf producten en bestellingen, klanten betalen met Bancontact, en u hangt niet vast aan een duur abonnement.

    Wat je oplevert

    • Webshop met betalingen en bestelbeheer
    • Beheeromgeving op maat
    • Koppeling of export voor de boekhouding
    • Opleiding en een maand nazorg
    Duur
    4 tot 10 weken
    Voor wie
    Kleine handelaars, hoeves, ambachtslui en producenten

  • Vanaf Meester

    App voor uw leden of klanten

    Een app voor uw leden, klanten of medewerkers, als installeerbare webapp of als echte app in de stores, afhankelijk van wat u nodig hebt.

    Wat je oplevert

    • Advies: webapp of native app
    • Werkende app voor iOS en Android of als PWA
    • Publicatie in de stores indien gekozen
    • Beheer en handleiding
    Duur
    6 tot 12 weken
    Voor wie
    Clubs, vzw's, scholen en bedrijven met terugkerende gebruikers

  • Vanaf Compagnon

    Snelheids- en kwaliteitscheck

    Uw bestaande website wordt doorgelicht op snelheid, mobiel gebruik, meertaligheid en privacy, met een lijst van wat beter kan.

    Wat je oplevert

    • Meting van de Core Web Vitals
    • Controle van talen, hreflang en metadata
    • Controle van cookies en analytics
    • Rapport met prioriteiten
    Duur
    1 tot 3 dagen
    Voor wie
    Iedereen met een website die trager of minder goed werkt dan gehoopt

  • Vanaf Compagnon

    Onderhoud en kleine aanpassingen

    Uw website blijft veilig en up-to-date, en u hebt één aanspreekpunt voor kleine wijzigingen.

    Wat je oplevert

    • Maandelijkse updates van afhankelijkheden
    • Opvolging van fouten en beschikbaarheid
    • Een vast aantal uren voor aanpassingen
    • Kort maandverslag
    Duur
    Doorlopend, per maand
    Voor wie
    Klanten met een site op maat die geen eigen IT'er hebben
Wat je na het Atelier kunt doen

Werk

Beroepen op de Belgische markt

Zo heten de jobs waar dit ambacht naartoe leidt. Een opleiding is geen jobgarantie: je portfolio en je werk maken het verschil.

  • Front-end developer
  • Full-stack developer
  • Web developer
  • React developer
  • Mobile developer (React Native)
  • Accessibility specialist
  • Webproject manager
  • Freelance webontwikkelaar

Certificaten

Certificaten waar de modules op voorbereiden

Echte certificaten, uitgereikt door de uitgever zelf. Wij reiken ze niet uit: het examen leg je af bij de uitgever. Kijk de actuele inhoud en prijs altijd bij de uitgever na.

  • CPACC – Certified Professional in Accessibility Core Competencies

    UitgeverIAAP (International Association of Accessibility Professionals)

    Brede basis van toegankelijkheid en wetgeving; sluit aan bij de module Toegankelijkheid.

  • WAS – Web Accessibility Specialist

    UitgeverIAAP (International Association of Accessibility Professionals)

    Technisch certificaat voor wie toegankelijk bouwt en audit; samen met CPACC vormt het CPWA.

  • GitHub Foundations

    UitgeverGitHub

    Basis van samenwerken via Git en GitHub, nuttig bij elk webproject.

Leesgemak

Maak de site makkelijker om te lezen. Je keuze blijft bewaard op dit toestel.

Tekstgrootte

Gebruik je liever de instellingen van je toestel (zoom, schermlezer, donkere modus)? Die werken hier ook gewoon.