Skip to content
Atelierby nealvdv
WorkbenchStart free

Preferences

Back to the Map

Craft · Build

Web & apps

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

  • 10 modules
  • 370 study hours

Start this craft for free

Workshop scheduleModules and indicative study hours per rank
RankModulesHours
Apprentice4105
Compagnon4165
Master2100
Total10370

The learning content on this page is only in Dutch for now.

Why this craft

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.

What you need before you start

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

The curriculum

Modules per rank

Each module has lessons and one assignment with a result someone else can check. The hours are indicative.

Your progress

You tick off modules on this device; nothing goes to a server. On the Workbench you keep your path in an account, hand in your assignments and get the hallmark from Neal.

Apprentice

The basics. These modules and a Compagnon test make you a Compagnon.

4 modules · 105 h

  1. HTML die betekenis heeft

    15 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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

Mastering the craft: larger projects, reviewed at every milestone.

4 modules · 165 h

  1. React en Next.js

    50 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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.

Master

What a Master must be able to do alone, in preparation for the masterpiece.

2 modules · 100 h

  1. Beheeromgevingen en webshops

    60 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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 study hours

    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
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • 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
    Lessons
    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
    The assignment

    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.

The masterpiece

How you become a Master in this craft

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.

Real work, judged by Neal. You are a Master per craft, not in the whole trade at once.

For clients

What you can do for clients with this

What a client can ask of you once you've mastered this craft, and from which rank. Durations are indicative.

  • From 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.

    What you deliver

    • 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
    Duration
    2 tot 6 weken
    For whom
    Zelfstandigen, horeca, winkels, verenigingen en kmo's

  • From 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.

    What you deliver

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

  • From Master

    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.

    What you deliver

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

  • From Master

    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.

    What you deliver

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

  • From Compagnon

    Snelheids- en kwaliteitscheck

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

    What you deliver

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

  • From Compagnon

    Onderhoud en kleine aanpassingen

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

    What you deliver

    • Maandelijkse updates van afhankelijkheden
    • Opvolging van fouten en beschikbaarheid
    • Een vast aantal uren voor aanpassingen
    • Kort maandverslag
    Duration
    Doorlopend, per maand
    For whom
    Klanten met een site op maat die geen eigen IT'er hebben
What you can do after the Atelier

Work

Jobs on the Belgian market

These are the job titles this craft leads to. Training is no job guarantee: your portfolio and your work make the difference.

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

Certifications

Certifications the modules prepare you for

Real certifications, awarded by the issuer itself. We don't award them: you sit the exam with the issuer. Always check the current content and price with the issuer.

  • CPACC – Certified Professional in Accessibility Core Competencies

    IssuerIAAP (International Association of Accessibility Professionals)

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

  • WAS – Web Accessibility Specialist

    IssuerIAAP (International Association of Accessibility Professionals)

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

  • GitHub Foundations

    IssuerGitHub

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

Reading comfort

Make the site easier to read. Your choice is kept on this device.

Text size

Prefer your device's own settings (zoom, screen reader, dark mode)? They work here too.