Zum Inhalt
Atelierby nealvdv
WerkbankKostenlos starten

Einstellungen

Zurück zur Karte

Handwerk · Bauen

Web & apps

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

  • 10 Module
  • 370 Lernstunden

Mit diesem Handwerk kostenlos starten

WerkstattplanModule und Richtwerte für Lernstunden pro Rang
RangModuleStunden
Lehrling4105
Compagnon4165
Meister2100
Gesamt10370

Die Lerninhalte auf dieser Seite gibt es vorerst nur auf Niederländisch.

Warum dieses Handwerk

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.

Was du vorher brauchst

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

Der Lehrplan

Module pro Rang

Jedes Modul hat Lektionen und eine Aufgabe mit einem Ergebnis, das jemand anderes prüfen kann. Die Stunden sind Richtwerte.

Dein Fortschritt

Du hakst Module auf diesem Gerät ab; nichts geht an einen Server. Auf der Werkbank speicherst du deinen Weg in einem Konto, reichst deine Aufgaben ein und bekommst das Meisterzeichen von Neal.

Lehrling

Die Grundlagen. Mit diesen Modulen und einer Compagnon-Prüfung wirst du Compagnon.

4 Module · 105 Std.

  1. HTML die betekenis heeft

    15 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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

Das Handwerk beherrschen: größere Projekte, mit Review bei jedem Meilenstein.

4 Module · 165 Std.

  1. React en Next.js

    50 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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.

Meister

Was ein Meister selbstständig können muss, als Vorbereitung auf das Meisterstück.

2 Module · 100 Std.

  1. Beheeromgevingen en webshops

    60 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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.

Das Meisterstück

So wirst du Meister in diesem Handwerk

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.

Echte Arbeit, beurteilt von Neal. Meister bist du pro Handwerk, nicht in der ganzen IT auf einmal.

Für Kunden

Was du damit für Kunden tun kannst

Was ein Kunde von dir verlangen kann, sobald du dieses Handwerk beherrschst, und ab welchem Rang. Die Dauer ist ein Richtwert.

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

    Was du lieferst

    • 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
    Dauer
    2 tot 6 weken
    Für wen
    Zelfstandigen, horeca, winkels, verenigingen en kmo's

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

    Was du lieferst

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

  • Ab Meister

    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.

    Was du lieferst

    • Webshop met betalingen en bestelbeheer
    • Beheeromgeving op maat
    • Koppeling of export voor de boekhouding
    • Opleiding en een maand nazorg
    Dauer
    4 tot 10 weken
    Für wen
    Kleine handelaars, hoeves, ambachtslui en producenten

  • Ab Meister

    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.

    Was du lieferst

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

  • Ab Compagnon

    Snelheids- en kwaliteitscheck

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

    Was du lieferst

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

  • Ab Compagnon

    Onderhoud en kleine aanpassingen

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

    Was du lieferst

    • Maandelijkse updates van afhankelijkheden
    • Opvolging van fouten en beschikbaarheid
    • Een vast aantal uren voor aanpassingen
    • Kort maandverslag
    Dauer
    Doorlopend, per maand
    Für wen
    Klanten met een site op maat die geen eigen IT'er hebben
Was du nach dem Atelier machen kannst

Arbeit

Berufe auf dem belgischen Markt

So heißen die Jobs, zu denen dieses Handwerk führt. Eine Ausbildung ist keine Jobgarantie: Dein Portfolio und deine Arbeit machen den Unterschied.

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

Zertifikate

Zertifikate, auf die die Module vorbereiten

Echte Zertifikate, ausgestellt vom Anbieter selbst. Wir stellen sie nicht aus: Die Prüfung legst du beim Anbieter ab. Prüf den aktuellen Inhalt und Preis immer beim Anbieter.

  • CPACC – Certified Professional in Accessibility Core Competencies

    AnbieterIAAP (International Association of Accessibility Professionals)

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

  • WAS – Web Accessibility Specialist

    AnbieterIAAP (International Association of Accessibility Professionals)

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

  • GitHub Foundations

    AnbieterGitHub

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

Lesekomfort

Mach die Website leichter lesbar. Deine Wahl bleibt auf diesem Gerät gespeichert.

Textgröße

Lieber die Einstellungen deines Geräts (Zoom, Screenreader, Dunkelmodus)? Die funktionieren hier auch.