Het Frontend Lab is de funderingsmodule van NLCodeCraft Frontend Academy: HTML, CSS en JavaScript zoals een React-team die verwacht, niet zoals een websitebouwer van 2014 die herinnert. Wie de Lab overslaat en meteen hooks wil, bouwt componenten op drijfzand. Mark van Leeuwen laat u semantiek, cascade, layout en DOM-gedrag zo oefenen dat JSX later geen mysterie is maar HTML met een extra stap.

Kleine groep bespreekt HTML-oefeningen en een leerpad op papier in de frontend academy in Amsterdam
Frontend Lab in Amsterdam: het fundament op tafel, het React-pad op het bord, geen overslaan.

Deze module is bedoeld voor carrièreswitchers met editor-ervaring, voor marketeers die intern naar frontend willen, en voor developers uit andere stacks die het web als platform serieus moeten nemen. Complete beginners zonder Git of editor verwijzen wij door; wij zijn geen eerste-computer-cursus. Na afronding is de React cursus de logische vervolgstap.

Wat “fundament” in 2026 nog steeds betekent

Landmarks, koppenhiërarchie, formulieren die zonder JavaScript al begrijpelijk zijn, CSS die niet van !important aan elkaar hangt, en JavaScript dat de DOM wijzigt zonder de pagina te slopen. Flexbox en grid zijn geen trucjes; het zijn de layout-talen waarin uw latere componenten wonen. Toegankelijkheid is geen hoofdstuk achteraan: een knop die geen knop is, zakt de Lab-review.

Weekblok Focus Deliverable
HTML als contract Semantiek, formulieren, tabellen Statische pagina zonder div-soep
CSS als systeem Cascade, tokens, layout Responsive scherm met een kleine token-set
JS in de browser Events, fetch, modules Interactie zonder framework
Git & a11y Commits, toetsenbord, contrast Repo die een tweede persoon kan klonen

Lab-modules

HTML die een screenreader overleeft

Koppen in volgorde, labels aan inputs, alt die de functie beschrijft. Decoratie krijgt lege alt, geen roman.

CSS zonder vechten

Specificiteit, custom properties, container-denken. Wij bouwen geen 40 utility-classes als u de cascade niet begrijpt.

JavaScript als taal

Scope, array-methodes, async zonder copy-paste van Stack Overflow. Daarna pas React.

Kleine toolketen

npm-scripts, formatter, linter. Geen Webpack-encyclopedie; wel een project dat start met één commando.

Wij gebruiken bewust nog geen React in de eerste weken. Dat irriteert mensen die “meteen het echte werk” willen. Het echte werk is dat uw latere UI-patronen niet stukgaan omdat u niet weet wat een button doet. Craft begint saai. Daarna wordt het snel.

const form = document.querySelector("#intake");
form?.addEventListener("submit", async (event) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  const response = await fetch("/api/intake", { method: "POST", body: data });
  if (!response.ok) throw new Error("Intake mislukt");
});

Huiswerk is een kleine publieke pagina plus een korte video of schriftelijke toelichting van twee minuten: wat u bewust niet in JavaScript hebt gezet. Mark van Leeuwen beloont terughoudendheid. Wie elk hover-effect in JS schrijft, krijgt de CSS-les over.

Veelgestelde vragen

Kan ik het Lab overslaan als ik WordPress-thema’s bouw?

Soms. Intake bevat een korte HTML/CSS-toets. Wie de toets haalt, start in React.

Is design (Figma) onderdeel?

U leest een briefing en een token-lijst. Wij leiden geen visueel ontwerpers op.

Welke browsers telt u?

Huidige evergreen browsers. IE is geschiedenis. Toegankelijkheid is dat niet.

Hoeveel avonden per week?

Twee contactavonden plus huiswerk. Minder uren betekent een langere kalender, geen dunnere inhoud.

Leslocatie en bereik in Amsterdam

NLCodeCraft geeft klassikale en hybride frontend-opleidingen vanaf de Wibautstraat, op de Knowledge Mile tussen Amstel en Weesperplein. Cursisten komen uit de onderstaande stadsdelen; avondgroepen starten na kantoortijd zodat u vanuit Zuid, Noord of Oud-West kunt aansluiten zonder een extra reisdag in te plannen.

  • Centrum
  • De Pijp
  • Oud-West
  • Oost
  • Watergraafsmeer
  • Amsterdam-Noord
  • Zuid
  • Westerpark

NLCodeCraft Frontend Academy

Uw aanspreekpunt: Mark van Leeuwen

Wibautstraat 131
1091 GL Amsterdam

Telefoon: +31 20 244 3188

E-mail: [email protected]

OpenStreetMap: Wibautstraat 131, 1091 GL Amsterdam

Lab-intake plannen