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.

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]